CKEditor cuenta con varios plugins para mejorar la funcionalidad del editor WYSIWYG. El plugin Image es uno de los más utilizados para insertar imágenes en el contenido del editor. Por defecto, el plugin Image está incluido en los paquetes Full y Standard. Mediante esta característica, puedes añadir y personalizar (alineamiento, borde, enlace...) las imágenes en el editor.
Generalmente, debes especificar la URL para insertar una imagen en el contenido del editor. Puedes mejorar la funcionalidad del plugin Image utilizando addons del CKEditor. El Enhanced Image es el addon más utilizado a la hora de añadir leyendas a las imágenes. Te permite añadir una imagen con una leyenda en el editor de contenido. En este tutorial, te mostrarermos a insertar imágenes con una leyenda en CKEditor utilizando el plugin Enhanced Image.
Instalación del add-on Enhanced Image
- Descarga el plugin Enhaced Image
- Extrae el contenido del plugin y colocarla dentro de la carpeta plugins de tu instalación de CKEditor
ckeditor/plugins/image2
- Habilita el plugin con la opción extraPlugins. Abre el fichero ckeditor/config.js y añade el siguiente código.
config.extraPlugins = 'image2';
Añade CKEditor al textarea
Crea el elemento textarea en la página web para añadir el CKEditor
<textarea name="editor" id="editor" rows="10" cols="80"></textarea>
Incluye la librería de CKEditor
<script src="ckeditor/ckeditor.js"></script>
Inicializa el CKEditor utilizando el método CKEDITOR.replace() y reemplaza el elemento textarea con CKEditor.
<script>
CKEDITOR.replace('editor');
</script>
Insertar imágenes con leyendo en CKEditor
Cuando haces clic en insertar imágenes en la barra de herramientas, aparece un cuadro de diálogo. Al final de dicho cuadro, puedes seleccionar la opción Captioned image. Debes marcar esta opción para insertar una imagen con leyenda.