Noticias de Uritec - Tutoriales

Añadir un plugin en CKEditor

Wed, 20 Jul 2016 10:27:00 GMT

Cómo añadir un plugin en CKEditor

El proceso de añadir un plugin a CKEditor es bastante sencillo si usted conoce cómo está instalado CKEditor en su servidor, vamos a ver un ejemplo con el plugin ImageToolbar.

1. 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\

2. Añada el plugin al CKEditor

Utilice una de las siguientes opciones:

2.1. Configuración config.js

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 separándolo por una coma:

config.extraPlugins = 'imagesfromserver,imagetoolbar';

2.2. Configuración en linea

Si en vez de modificar el config.js prefiere añadir el plugin durante la creación del editor, lo puede hacer especificando la propiedad extraPlugins del objeto de configuración inicial

CKEDITOR.replace( 'news', {
extraPlugins: 'imagetoolbar'
} );

2.3. Uso de cdn.ckeditor.com

En el caso de que esté utilizando la versión CDN de CKEditor en vez de haberla subido a su servidor, entonces tiene que indicar dónde ha añadido el contenido del plugin para que se pueda inicializar correctamente

// Enable local "imagetoolbar" plugin from /myplugins/imagetoolbar/ folder.
CKEDITOR.plugins.addExternal( 'imagetoolbar', '/myplugins/imagetoolbar/', 'plugin.js' );

// extraPlugins needs to be set too.
CKEDITOR.replace( 'news', {
extraPlugins: 'imagetoolbar'
} );

Dar estilo a imágenes con clases

Tue, 01 Mar 2016 16:04:00 GMT

Dar estilo a las imágenes con clases CSS en CKEditor

CKEditor ofrece varias alternativas para dar formato a tu contenido, y a veces conviene conocer algunos detalles del funcionamiento interno del CKEditor para conseguir los resultados deseados.

Este artículo se centra en cómo dar formato a las imágenes, y aunque es un tutorial complementario a nuestro plugin ImageToolbar, el tutorial es aplicable a cualquier instalación del CKEditor.

El primer paso para saber cómo aplicar estilos a las imágenes en CKEditor es entender cómo funcionan los plugins que ofrecen para gestionar las imágenes. Hay dos plugins oficiales: el plugin “Image” y el plugin “Enhanced Images”

El plugin Image

Este es el plugin que viene instalado por defecto. Tiene muchas opciones, pero no es previsible que lo mejoren ya que CKSource ha afirmado que el futuro está en el plugin “Enhanced Images”.

Este componente es muy sencillo. La etiqueta de la imagen a la que queremos dar formato es siempre <img>; no cambia ni queda envuelta por otra etiqueta. Por lo tanto, las clases que defina en su hoja de estilos CSS se aplicarán a la imagen correctamente, no habrá sorpresas ni confusiones. En su hoja de estilos pondrá el tipo de selector que prefiera: img.class o simplemente .class.

Aunque este plugin no incluye la opción para centrar la imagen, puede usar clases para alinear la imagen como desee. El plugin ImageToolbar, tiene unas propiedades específicas para definir las clases para alinear las imágenes; por lo tanto, este plugin se encarga de aplicar o quitar los atributos para alinear según se necesite.

Este es un ejemplo de 3 clases que puede usar para alinear las imágenes y poner un margen adecuado para evitar que la imagen quede pegada al texto, evitando poner un margen en el lado donde no hay texto. No se puede conseguir este efecto usando solamente las propiedades de alineación y margen del diálogo:

img.leftImage {
   float: left;
   margin: 0 1em 5px 0;
}

img.rightImage {
   float: right;
   margin: 0 0 5px 1em;
}

img.centeredImage {
   display: block;
   margin: 0 auto 1em;
}

Ahora basta añadir en su configuración para el CKEditor el grupo correspondiente (de manera que solo un elemento del grupo esté activo en cualquier momento):

config.imagetoolbar.classes = [
   [
       { name: 'imageleft', 'class':'leftImage', title:'At the left', justifyCommand:'justifyleft' },
       { name: 'imagecenter', 'class':'centeredImage', title:'Centered', justifyCommand:'justifycenter' },
       { name: 'imageright', 'class':'rightImage', title:'At the right', justifyCommand:'justifyright' },
       { name: 'imageinside', 'class':'inline', title:'Inline', 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' }
   ]
];

El plugin ImageToolbar se encargará de ajustar el Sistema ACF con las clases que quiera usar; no obstante, si añade elementos extra (por ejemplo, porque usa el mismo fichero config con hojas de estilo diferentes), el plugin ImageToolbar solo mostrará los botones asociados a la clases disponibles en la hoja de estilos actual.

El plugin Enhanced Image

Este el nuevo plugin que ofrece CKSource para gestionar las imágenes. A veces también lo llaman “Image2” (que es el nombre en su código interno) o “Captioned images” (que hace referencia a la principal característica de este plugin).

Ahora las cosas no son tan sencillas, porque de hecho hay 4 estados diferentes de una imagen de acuerdo con las opciones seleccionadas y de si está editando el contenido o la viendo de la página final.

Los dos primeros estados dependen de si está utilizando una imagen "normal", o una imagen "con título". Cuando visualizamos la página final, en el primer caso se obtiene un elemento clásico <img>, pero el segundo genera un elemento de envoltura <figure> y un elemento hermano <figcaption>:

<figure class="image"><img alt="" height="280" src="/userfiles/test_980x657.jpg" width="657" />
<figcaption>Caption</figcaption>
</figure>

En esta situación, las clases definidas para ImageToolbar se aplican en el elemento externo <figure> porque esa es la única forma de conservarlos si el usuario opta por desactivar el título y utilizar de nuevo un elemento <img> sencillo.

Para aplicar el margen lateral al elemento “figure” en vez al elemento “img”, tendrá que tener más cuidado con sus hojas de estilo. Además, si desea utilizar bordes o sombras, usted tiene que decidir si desea aplicarlos al elemento “figure” en vez de al elemento “img”, por lo que podría terminar con una hoja de estilo como esta:

Estilos de alineación utilizando sólo el nombre de la clase para aplicarlos tanto a los elementos figure e img:

.atLeft {
   float: left;
   margin: 0 30px 5px 0;
}
.atRight {
   float: right;
   margin: 0 0 5px 20px;
}
.centered {
   display:block;
   float:none;
   margin:5px auto;
}

Estilos solo para el elemento img:

img.rounded, .rounded img {
border-radius:20px;
}
img.ellipse, .ellipse img {
border-radius:50%;
}

También hay otro detalle importante para recordar cuando se está usando el plugin Enhanced Image: la estructura mientras se edita el contenido es muy diferente de la salida final. Incluye envolturas para proporcionar el cambio de tamaño y manejadores de arrastre, y en esta situación, las clases que haya definido en config.image2_alignClasses para el alineamiento de la imagen en Enhanced Image se aplican a la envoltura externa.

No hemos encontrado una forma adecuada para invalidar este comportamiento, y usted debe definir en su fichero config las líneas que necesite, porque no podemos generarlas en tiempo de ejecución.

Por último, si se aplica la clase Center, la estructura DOM de la página será modificada por el plugin Enhanced Image para crear una nueva envoltura p/div dónde la imagen estará centrada y será el único hijo.

Ayuda Etiquetar Imágenes

Wed, 06 Jan 2016 10:11:00 GMT

Uso de las Etiquetas

Las Etiquetas sirven para clasificar documentos (imágenes, pdfs, excels, etc.).

Cuando se añaden documentos a la web quedan ordenados por la fecha y hora de su subida. Más adelante, cuando buscamos un documento, tenemos que buscarlo entre todos los que hemos subido.

Si asignamos etiquetas a los documentos, luego podremos seleccionar cómodamente los documentos del tema o la actividad que nos interesa: Navidad, Instalaciones, Logo Empresas, etc.

Para etiquetar los documentos, los seleccionamos haciendo clic y luego pulsamos . Entonces aparecerá este diálogo que nos permite asignar la etiqueta que nos interesa.

En este diálogo también podemos crear, renombrar o borrar las etiquetas.
Si borramos una etiqueta los documentos que tenía esa etiqueta se quedan "Sin etiqueta".

Para seleccionar varios documentos podemos usar las mismas técnicas que en Windows:

Para seleccionar un grupo de imágenes consecutivas, haga clic en el primer elemento, mantenga presionada la tecla Mayús (Shift) y, a continuación, haga clic en el último elemento.
Para seleccionar archivos o carpetas no consecutivos, mantenga presionada la tecla Ctrl y, a continuación, haga clic en cada uno de los elementos que desea seleccionar.

Nota:

Las Etiquetas no son algo definitivo. En cualquier momento podemos elegir uno o varios documentos y cambiarles la etiqueta por otra.
Para renombrar o borrar una etiqueta hacemos clic con el botón derecho de ratón sobre la etiqueta.

Ayuda Estadisticas

Tue, 05 Jan 2016 09:54:00 GMT

Estadísticas de la Página

Las Estadísticas de la Página que se muestra debajo están compuestas de:

El Rango de Fechas de las estadísticas. Se indica entre corchetes (en el ejemplo: [07 Dic - 05 Ene])
Visitas. Nº de veces que se ha mostrado esta página (en el ejemplo: 1.897)
Medio. Tiempo medio que ha durado cada visita (en el ejemplo: 37 segundos)
Rebotes. % del nº de veces en donde el usuario sólo ha visto esta página de la web (en el ejemplo: 15:17%). Puede ser que el usuario haya encontrado lo que buscaba y no necesita más información o todo lo contrario: ha llegado a nuestra web por error y se marcha.
Salidas. % del nº de veces en el que el usuario se ha ido de la web desde esta página (en el ejemplo: 16:92%).

Nota:
Estas son las Estadísticas de la Página que se muestra debajo.
En el menú de Administración podrá acceder a las estadísticas de toda la web.
Las estadísticas se muestran con un día de retraso. Es decir, no podemos ver las estadísticas de las visitas de hoy.
Si hoy creamos una noticia y miramos las estadísticas, aparecera lo siguiente:

Subir ficheros con CKEditor

Fri, 13 Nov 2015 14:55:00 GMT

Subir ficheros con CKEditor

En este documento proporcionamos una guía paso a paso acerca de cómo configurar la subida de ficheros tal y como se necesita para nuestros componentes ImagesFromWord y ImageCrop.

Comenzamos con un CKEditor limpio, sin nada más instalado. Puede crear su propia versión o descargar una de ckeditor.com/download, necesitará al menos la versión "standard" o crear una con los componentes "image" y "filebrowser" incluidos.

Tras extraer los contenidos en su servidor, debería poder cargar la carpeta samples/ en su navegador y ver la página de demo:

Ahora pulsamos en el botón de Imagen y vemos que no está disponible la opción de subir nuestras imágenes

Por tanto hemos de editar el fichero config.js e indicar a CKEditor cómo subir ficheros con la opción config.filebrowserUploadUrl:

Editamos el config.js situado en la raíz de la carpeta CKEditor y añadimos la ruta a nuestro controlador que gestionará las subidas de ficheros:

En este caso simplemente hemos añadido esta linea:

config.filebrowserUploadUrl = '/uploader/upload.php';

Puede usar cualquier ruta que quiera usar, y por supuesto debe usar el tipo de script adecuado a su servidor. Grabamos los cambios y verificamos que CKEditor reconoce la nueva opción (puede necesitar borrar la caché dependiendo de su navegador):

La nueva pestaña Upload/Subidas estará disponible, así como el botón para elegir un fichero y subirlo al servidor.

Ahora puede intentar usarlo, pero por supuesto fallará debido a que hasta el momento no hemos añadido el script al servidor.

Obtendrá un error nada amigable ya que no podrá verlo:

Vamos a usar por tanto las herramientas para desarrolladores para ver que está sucediendo. Pulse F12 y seleccione la pestaña Network/Red

Cierre el diálogo de imagen y ábralo de nuevo para volver a intentar subir una imagen:

Aquí podemos ver directamente en el Status que el servidor ha respondido con un 404 - File not found y podemos hacer clic en él para ver sus detalles:

Esto puede ser útil si tras añadir el fichero todavía obtiene un 404, tal vez la forma en que ha configurado la ruta no se corresponde con el valor que ha indicado en el fileBrowserUploadUrl.

Por tanto ahora necesitamos un fichero de gestión de subidas, puede enconrar varios en el repositorio CKEditorUploader Puede descargarlos todos o solo aquel que le interese. Estos son scripts de ejemplo, su objetivo es solamente proporcionar los elementos básicos para mostrar cómo gestionar una subida de ficheros del CKEditor, pero puede usar cualquier otra cosa con tal de que siga el API de CKEditor.

Verifique las instrucciones de instalación proporcionadas.

You have to copy the upload.php to the path that we have chosen and you might need to give execution permissions just like any other script on your server.

Now we have to configure it according to your server and your CMS as the install instructions state.

In the first step we should add the same session check that we use in the rest of our CMS to verify that only authenticated users are allowed to upload files. For this demo I'm just toggling it to false (don't do this in production).

The second step is to write the absolute path to the folder that will store the uploaded files. You must grant Write and Read permissions, but you must also try to prevent the execution of any script there.

And the third one is to provide the base URL that can be used to load the files from that folder.

Save it and now we can try again to upload a file. Close the image dialog if you still had it open and launch it again, select an image and click the upload to server (you might want to clear the Network tab of the developer tools to avoid confusion with the previous data)

If all works correctly the image should be uploaded. In my case as I'm using a clean server it turns out that I still haven't configured PHP so I'm getting a 405 error:

So now it's time to enable execution of that PHP script. After adjusting the server I try to load an image and this time the server sends back the correct response and CKEditor switches automatically to the Image Info tab, but we can see on the preview that the image doesn't work

So we must verify now that the /files/ folder (or whatever that we want to use) exists on the server and it has write a read permissions, if the image.png file isn't there then that means that we must focus on the permissions and we might need to enable the debug options to find out what's going on.

You can also test with any other script to verify that you can write from PHP on that folder, whatever it's better for you.

In order to debug the PHP script you can add this headers

error_reporting(E_ALL);
ini_set("display_errors", 1);
error_reporting(-1);

Also, try with different images just in case the browser is using a cache at any time.

When the image is finally uploaded then we have finished:

Now you can add the plugins that we provide to crop the images or import them from Word documents.