Noticias de Uritec - Para imágenes

FAQ

Sun, 24 Jan 2016 16:51:00 GMT

Image Toolbar para el CKEditor

Preguntas frecuentes

Ver todas las respuestas

No funciona

Necesitamos que nos explique el problema mejor: ¿Tiene algún mensaje de error?, ¿Funciona mal? ¿Qué navegador y sistema operativo está usando?. Envie un mail a info@uritec.es explicando el problema

En la barra no me aparece algún icono

Compruebe que ha definido correctamente la clase que tiene que aplicarse con el icono. Si esta clase no está bien definida, el icono no aparece.

¿Podemos usar el plugin “Enhanced Image” con ImageToolbar?

Sí. En el apartado de configuración explicaremos cómo configurar los 2 plugins. Hay que tener en cuenta que el plugin “Enhanced Image” modifica el comportamiento de ImageToolbar cuando cambia la posición de la imagen. Concretamente, si tenemos los 2 plugins instalados, la opción para poner la imagen “en la línea de texto” () deja de funcionar cuando hacemos clic en:

para poner “Notas al pie”
para poner la imagen centrada

Si queremos que la opción de poner la imagen “en la línea de texto” () vuelva a funcionar, podemos deshacer (o no guardar los cambios), o recomponer la situación original arrastrando la imagen a su sitio y borrando el salto de línea que sobra.

Disponen de notas para configurar ImageToolbar con los plugins "Image" or "Enhanced Image"?

Sí, puede leer unos apuntes aquí: Styling images with Classes in CKEditor.

¿Puedo incluir un icono para recortar imágenes?

Sí, siempre y cuando disponga del programa para realizar dicha función. Si no tiene dicho programa, le recomendamos pruebe ImageCrop, que se vende por separado.

¿Puedo crear mis iconos y mis estilos?

Sí. ImageToolbar permite que Ud. la personalice según sus necesidades.

Soporte

Sun, 24 Jan 2016 16:51:00 GMT

Image Toolbar para el CKEditor

Soporte y actualizaciones

Los usuarios con licencia dispondrán de soporte por email para la resolución de los posibles problemas del componente. El importe del la licencia no incluye su instalación ni el desarrollo o la personalización de sus características.

La compra consiste en un pago único. Después del pago recibirá el componente por correo electrónico y su correo será añadido a una lista privada para comunicarle las futuras actualizaciones de Image Toolbar. Las futuras actualizaciones del componente están incluidas en precio de la licencia.

Si tiene alguna pregunta, por favor contacte con nosotros.

Historial de las actualizaciones

Version	Date	Comments
1.0.0	04-02-2014	First public version.
1.1.0	09-02-2015	Automatically exclude items whose classes are not in the current stylesheet.
1.2.0	29-02-2016	Integration with the "Enhanced Image" (image2) plugin.

Precio

Sun, 24 Jan 2016 16:51:00 GMT

Image Toolbar para el CKEditor

Comprar

Hay 3 tipos de licencia disponibles para el plugin Image Toolbar:

Licencia para 1 dominio	Licencia OEM	Licencia Empresa
Precio: 28 euros	Precio: 168 euros	Precio: 490 euros
Para su uso sólo en 1 dominio	Para empresas que quieren usar el plugin en varios sitios web creados por ellos	Esta licencia le permite integrar el plugin en 1 producto
Comprar ahora	Comprar ahora	Comprar ahora

Notas:

Los precios no incluyen el IVA

Image Toolbar plugin es © Uritec S.L.
CKEditor es © CKSource

Configuración

Sun, 24 Jan 2016 16:51:00 GMT

Image Toolbar para el CKEditor

Configuración

La configuración está definida en el objeto "imagetoolbar" y tiene 2 elementos.

El primer elemento es el conjunto de botones que estarán disponibles en la barra de herramientas. Está definica como un array (toolbar) de arrays (groups). Estos grupos de arrays incluyen cada elemento del toolbar que ud. quiera proveer.

Un elemento del toolbar está definida por varias propiedades:

El nombre
La clase que quiere aplicar a la imagen
El título que se mostrará como tooltip
Una entrada opcional para definirlo como justifyCommand de manera que cambie al correspondiente comando de justificación en la barra principal
Un icono opcional con el path del icono que desea usar. Si está creando este plugin en su CKEditor, puede colocar todos sus iconos en el subdirectorio /icons/ de este plugin (en formato png) y llamar a cada icono con el mismo nombre usado en el "name" de este elemento
Una entrada opcional dontCheck para indicar que este este elemento tiene que mostrarse siempre, sin necesidad de comprobar la hoja de estilos actual

// Configuration for ImageToolbar
config.imagetoolbar = {};
config.imagetoolbar.classes = [
   [
       { name: 'imageleft', 'class':'izda', title:'A la izquierda', justifyCommand:'justifyleft' },
       { name: 'imagecenter', 'class':'centro', title:'Centrada', justifyCommand:'justifycenter' },
       { name: 'imageright', 'class':'dcha', title:'A la derecha', justifyCommand:'justifyright' },
       { name: 'imageinside', 'class':'inline', title:'En linea', justifyCommand:'justifynone' }
   ],
   [
       { name: 'imageborder', 'class':'borde', title:'Con Borde' }
   ],
   [
       { name: 'imageshadow', 'class':'sombra', title:'Con Sombra' }
   ],
   [
       { name: 'nomobile', 'class':'no-mobile', title:'No Mostrar en móvil' }
   ]
];

Cada grupo de elementos actúa como un conjunto de "radio buttons": cuando hace clic en uno, el resto de los elementos se desactivan, sin afectar al estado del resto de los grupos.

El usuario puede hacer clic en un botón de cada grupo: de esta forma, a la imagen se le aplicarán varias clases.

El segundo elemento de la configuración es el conjunto de los elementos del toolbar que se desean usar. Por defecto, la barra de el toolbar se genera automáticamente basado en las clases que Ud. ha definido; pero si deseea agregar más elementos para aplicar otro tipo de estilos, esta entrada es para ello. Este elemento sigue la misma estructura que el toolbar del CKEditor:

// Configuration for ImageToolbar
config.imagetoolbar = {};
config.imagetoolbar.toolbar = [['imageleft','imagecenter','imageright'],['Image', 'ImageCrop']];

Antes de mostrar los elementos en la barra, el programa comprueba si dichos elementos están definidos en la hoja de estilos. Es decir, puede añadir a la barra tantos elementos como quierar y controlar si se mostrarán o no en función de que su clase aparezca o no en la hoja de estilos. De esta forma, puede reutilizar su barra en diferentes tipos de documentos (portada, noticias, mailings, etc.). Si desea que algún icono se muestre siempre, independientemente de que su clase exista en la hoja de estilos, ponga establezca la propiedad "dontCheck: true".

Recuerde que tiene que añadir sus clases a su hoja de estilos; estas son las que hemos usado en nuestro ejemplo (pero ud. puede usar las clases que necesite, no hay restricciones):

img.izda {
   float: left;
   margin: 0 7px 3px 0;
}

img.dcha {
   float: right;
   margin: 0 0 3px 7px;
}

img.centro {
   display: block;
   margin: 0 auto 3px;
}

.borde {
   border: 1px solid #666;
}

.sombra {
   box-shadow: 2px 2px 6px 3px #cbcbcb;
}

.rounded {
    border-radius:10px;
}

.ellipse {
   border-radius:50%;
}

Como puede ver, puede usar img.class o .class indistíntamente.

Puede que le resulte útil leer lo siguiente: Styling images with Classes in CKEditor.

Si tiene alguna pregunta, por favor contacte con nosotros.

Instalación

Sun, 24 Jan 2016 16:51:00 GMT

Image Toolbar para el CKEditor

Requisitos

CKEditor 4. El plugin solo está soportado para CKEditor 4.x.
Navegadores: Para obtener el mayor partido de Image Toolbar, se recomienda emplear versiones actualizadas del navegador de internet

Instalación (1/2): Copie los ficheros

Extraiga el contenido del zip en el directorio de plugins del CKEditor, de manera que quede como lo siguiente:

ckeditor\
        ...
        images\
        lang\
        plugins\
               ...
               imagetoolbar\
                       plugin.js
                       docs\
                       icons\
               ...
        skins\
        themes\

Instalación (2/2): Añada el plugin al CKEditor

A continuación abra su fichero de configuración config.js o en su fichero de configuración personalizada y añada una linea como la siguiente:

config.extraPlugins = 'imagetoolbar';

Si usted está usando otros plugins, deberá añadir este a la configuración existente:

config.extraPlugins = 'imagesfromserver,imagetoolbar';

Si lo desea, consulte otras opciones para añadir el plugin al CKEditor.

Demo

Sun, 24 Jan 2016 16:51:00 GMT

Image Toolbar para el CKEditor

Demostración

En Youtube (1 min)

Nota: Esta demostración incluye la opción para poner en las imágenes “Notas al pie” (), que requiere tener instalado el plugin “Enhanced Image” (es gratuito). El plugin “Enhanced Image” modifica el comportamiento de ImageToolbar cuando cambia la posición de la imagen. Vea el apartado FAQs para más información.

Haga clic sobre la imagen para mostrar la barra de herramientas y modifique la imagen:

Ejercicio para cambiar la posición de la imagen:

1. Haga clic sobre la imagen; así podrá ver la barra de herramientas.

2. Haga clic sobre uno de los 4 primeros iconos de la barra de herramientas.

Vea como cambia de posición.
La cuarta opción resulta útil para poner un icono en línea con el texto.

Por ejemplo: (y aquí el texto podría seguir...)

Ejercicio para cambiar el aspecto de la imagen: Haga clic en el resto de los iconos y vea que pasa:

Presentación

Sun, 24 Jan 2016 16:51:00 GMT

Image Toolbar para el CKEditor

Introducción

Es un plugin que al hacer clic en la imagen se mostrará una barra de herramientas que podremos configurar con las opciones que queramos:

Posicionar la imagen (a la izquierda, a la derecha, al centro o dentro del texto)
Dibujar una línea alrededor de la imagen
Poner una sombra a la imagen
Mostrar la imagen con forma de elipse
Poner un pie de foto a la imagen
etc.

Se pueden poner y quitar opciones de la barra de herramientas. Por ejemplo, puede añadir:

para que la imagen seleccionada no aparezca en la versión móvil de la web
para recortar la imagen seleccionada (requiere Image Crop)
para suprimir la imagen
Etc.

Presentación

Thu, 19 Nov 2015 18:11:00 GMT

Image Crop para el CKEditor

Es un plugin para:

Recortar y escalar imágenes
Subir y guardar las imágenes en su servidor

Puede pre configurar las opciones de recorte que desea usar. También puede arrastrar las líneas de recorte para hacer un recorte “libre”.

Image Crop se encarga de todo lo demás. El usuario se evita:

Tener que abrir la imagen con otro programa para escalarla recortarla y guardarla con la resolución adecuada
Subir la imagen al servidor de Internet y guardarla con el nombre adecuado
Desde la página en la que queremos insertar la imagen, buscar la imagen que hemos subido, insertarla y comprobar si hemos acertado con las dimensiones


1: Arrastre la imagen		2: Recorte la imagen		3: Guarde los cambios

Si no esta satisfecho con la dimensiones de la imagen, con Image Crop puede hacer clic con el botón derecho, recortar y volver a guardar los cambios.

Nueva función: Ampliar Lienzo!

En ocasiones la imagen que tenemos es más pequeña que la que necesitamos. Con Image Crop puede ampliar el lienzo de la imagen y rellenar el lienzo ampliado con el color que más le interese.


1: Seleccione la imagen		2: Amplíe su Lienzo		3: Guarde los cambios

De esta forma, resolvera su problema con 3 clics (¡y sin distorsionar la imagen!).

Presentación

Wed, 18 Nov 2015 11:43:00 GMT

Images From Word para el CKEditor

Es un plugin para pegar imágenes desde Word, es decir, copiar las imágenes desde su documento de Word a su página web.

No importa el nº de imágenes que se haya elegido. El plugin mostrará una ventana de progreso y las copiará todas a su web. Los pasos son los siguientes:

Pegue sobre el CKEditor lo que haya seleccionado en Word.
Un diálogo le indicará cuantas imágenes va a copiar.
Haga clic en "Continuar" y pulse "Ctrl + V" en la siguiente pantalla.
Guarde los cambios.


1- Pegue desde Word		2- Pulse "Continuar" y "Ctrl + V"		3- Guarde los cambios

Notas:

Si el nº de imágenes es grande, verá una pantalla de progreso.
Si el nº de imágenes pegadas es grande, el plugin puede solicitarle que repita el paso nº 2.
El plugin Images From Word solo se encarga de que pueda copiar las imágenes desde Word. El resto de las funciones y configuración que permiten copiar el formato del texto de Word son propias del CKEditor.

Instalación

Tue, 17 Nov 2015 09:46:00 GMT

Image Crop for CKEditor

Requisitos

CKEditor 4. Actualmente el plugin solo está soportado para CKEditor 4.x; si necesita una versión para el CKEditor 3, póngase en contacto con nosotros para que estudiemos la posibilidad de la adaptación a esta versión del CKEditor.
Subida de ficheros configurada en el CKEditor. Vea aquí un tutorial para configurar la Subida de ficheros.
SimpleUploads. Image Crop requiere tener instalado el componente SimpleUploads plugin. Si no dispone de este componente, cómprelo previamente o inclúyalo en las opciones de compra.
Según los desarrolladores del CKEditor, algunas de estas características estarán en al próxima versión del CKEditor. Cuando la nueva versión esté disponible, comprobaremos la posibilidad de evitar el uso del plugin SimpleUploads.
Navegadores: Para obtener el mayor partido de Image Crop, se recomienda emplear versiones actualizadas del navegador de internet (IE10 y anteriores no están soportadas). El IE11 no soporta el giro automático de las imágenes hechas con los iPhone.

IE11	Chrome	Firefox	Posibilidades
			Puede copiar una imagen (o parte de ella) al portapapeles con programas como Photoshop, Paint.net, etc. y luego pegarla en el editor usando Ctrl+V
			Puede seleccionar una imagen de su escritorio o de su explorador de ficheros y arrastrarla sobre el editor
			Puede seleccionar un fichero de su escritorio, copiarla al portapapeles con Ctrl+C y luego ponerla en el editor usando Ctrl+V

Instalación (1/2): Copie los ficheros

Extraiga el contenido del zip en el directorio de plugins del CKEditor, de manera que quede como lo siguiente:

ckeditor\
        ...
        images\
        lang\
        plugins\
               ...
               imagecrop\
                       plugin.js
                       dialog\
                       docs\
                       lang\
               ...
        skins\
        themes\

Instalación (2/2): Añada el plugin al CKEditor

A continuación abra su fichero de configuración config.js (o su fichero de configuración personalizada) y añada una linea como la siguiente:

config.extraPlugins='simpleuploads,imagecrop';

Si lo desea, consulte otras opciones para añadir el plugin al CKEditor.

Instalación

Fri, 13 Nov 2015 15:41:00 GMT

Images From Word para el CKEditor

Requisitos

CKEditor 4. Actualmente el plugin solo está soportado para CKEditor 4.x.
Subida de ficheros configurada en el CKEditor. Vea aquí un tutorial para configurar la Subida de ficheros.
Para la subida de ficheros, recomendamos usar el componente SimpleUploads para evitar clics adicionales a los usuarios. Pruebe las demos para comparar la diferencia.
Navegadores. Se recomienda emplear versiones actualizadas del navegador de internet. Firefox parece tener fallos intermitentes y dependiendo de su configuración puede ser que no llegue a funcionar de ninguna forma, para obtener resultados correctos recomendamos usar otro navegador. Safari no está soportado porque solo funciona con MacOS.
MS Word. El origen de datos del que desea copiar ha de ser Microsoft Word para Windows, otros programas no incluyen la información de las imágenes que están en el contenido. En OSX no lo podemos hacer ya que Finder no permite pegar la ruta de los ficheros que se quieren abrir sino solo seleccionarlos navegando con el ratón.

Instalación (1/2): Copie los ficheros

Extraiga el contenido del zip en el directorio de plugins del CKEditor, de manera que quede como lo siguiente:

ckeditor\
        ...
        images\
        lang\
        plugins\
               ...
               imagesfromword\
                       plugin.js
                       dialogs\
                       docs\
                       lang\
               ...
        skins\
        themes\

Instalación (2/2): Añada el plugin al CKEditor

A continuación abra su fichero de configuración config.js o en su fichero de configuración personalizada y añada una línea como la siguiente:

config.extraPlugins='imagesfromword';

Si ya tiene otros plugins, entonces deberá añadir este a esa configuración separándolo por una coma:

config.extraPlugins='simpleuploads,imagesfromword';

Si lo desea, consulte otras opciones para añadir el plugin al CKEditor.

FAQ

Thu, 05 Nov 2015 08:41:00 GMT

Images From Word for CKEditor

Preguntas frecuentes

Ver todas las respuestas

No funciona

Necesitamos que nos explique el problema mejor: ¿Tiene algún mensaje de error?, ¿Funciona mal? ¿Qué navegador y sistema operativo está usando? ¿Cuál es su versión de MS Word? ¿Nos puede proporcionar un documento de prueba que le falle?. Envíe un mail a info@uritec.es explicando el problema.

Cómo se configura el parámetro filebrowserUploadUrl

Ese es el parámetro que indica al editor que script tiene que usar para manejar las imágenes que los usuarios añaden al editor. La configuración de su editor necesita una línea como la siguiente:

config.filebrowserUploadUrl= '/uploader/upload.php?type=Files';

Puede ver un ejemplo básico de dicho script aquí. Puede descargar diversos ejemplos de scripts en varios lenguajes desde este repositorio de GitHub para adaptarlos a su web.

Si arrastro contenido desde Word no pasa nada

CKEditor no incluye la habilidad de detectar contenido que ha sido arrastrado, pero se supone que estará disponible a partir de la próxima versión. Una vez que dicha versión sea publicada nosotros actualizaremos nuestro plugin para dar soporte a esta funcionalidad.

Las imágenes se importan como JPG y las quiero como PNG

El formato con el que se importan las imágenes depende de cómo tenga configurado Word. Dentro de "Opciones de Word" > "Avanzadas" encontrarás el botón "Opciones Web" que mostrará el siguiente diálogo:

Si prefiere importar las imágenes como PNG, marque la opción "Permitir el formato PNG como formato de gráficos".

Las imágenes pierden calidad al importarlas

La calidad de las imágenes dependerán de cómo esté configurado Word. Dentro de "Opciones de Word" > "Avanzadas" encontrarás el botón "Opciones Web" que mostrará el siguiente diálogo:

Para tener la mejor calidad, asegurese de tener activada la opción de permitir formato PNG. También puede comprobar el valor de "Píxeles por pulgada" en las opciones en la pestaña de Imágenes

Quiero que no aparezca el diálogo de subida de ficheros

El comportamiento del plugin ImagesFromWord depende totalmente del navegador que utilice. Por ejemplo, IE11 es el único navegador en el que podrá evitar el diálogo de subida de ficheros.

Los otros navegadores requerirán que el diálogo de subida de ficheros aparezca una o más veces (dependiendo del nº de imágenes y el navegador que está utilizando). No hay solución para evitar dicho diálogo.

Por favor, pruebe nuestra demo. Si el resultado de la demo no es lo suficientemente bueno para usted, lo siento, pero esto es lo mejor que se puede conseguir. Si encuentra alguna otra solución mejor que esta, por favor háganoslo saber.

Usamos Mac OSX

Lo sentimos, pero Finder no permite el pegar la ruta de los ficheros que se quieren elegir tal y como sucede en Windows, por lo que no podemos llegar a automatizar la selección de las imágenes que se hayan pegado.

Demo

Mon, 05 Oct 2015 06:18:00 GMT

Images From Word para el CKEditor

Demostración

En Youtube (1 min)

Seleccione un contenido en MS Word con alguna imagen y a continuación péguelo aquí:

Demo 1: CKEditor con Images From Word y SimpleUploads

Teclee Ctrl + V para pegar su contenido de MS Word:

Demo 2: CKEditor con sólo Images From Word (sin SimpleUploads)

Este editor carece del plugin adicional SimpleUploads.
Por lo tanto, tras elegir cada imagen deberá pulsar "Examinar...", pegar la ruta del fichero, pulsar "Aceptar" y entonces pulsar en el botón de "Enviar al Servidor".