Desplegando CK Editor 5 en un Proyecto

Articulos Tutoriales

Demo Github

En ocasiones necesitas usar un editor de texto para tus proyectos o darle a los usuarios que usan tu aplicación un cómodo espacio en el cual puedan escribir lo que desean y porque no guardar lo que escriban en una Base de Datos, en este artículo vamos a compartir contigo como instalar o desplegar CK Editor en tu Proyecto, vamos con el artículo.

Que es CK Editor ?

Es un editor de Texto de tipo HTML/WYSIWYG que contiene funciones esenciales para que los usuarios puedan escribir textos y darle formato de Fuente como Negrita, Cursiva, Encabezados, así mismo puedes insertar imágenes, viñetas, sangrías, etc.

CK Editor es como el conocido Microsoft Word pero dentro de tu Web o aplicación Web,  hay proyectos que usan este tipo de editores como los CMS WordPress, Joomla, Drupal entre otros.

Despliegue de CK Editor 5

Lo primero que tienes que hacer es descargar el archivo Javascript de CK Editor en tu proyecto, para este artículo usaremos el archivo Javascript alojado en el CDN de CK Editor, antes de cerrar la etiqueta </body> llamamos o instanciamos el archivo Javascript de CK Editor

Existen muchas formas de instalar CK Editor en tu proyecto, puedes consultar las otras formas en su página de instalación.

Paso seguido debes colocar el código Javascript para cargar el editor y manipular el editor con métodos nativos de CK Editor, lo colocamos igual antes de cerrar la etiqueta </body>, para mantener un orden lo colocamos después de haber llamado a nuestro archivo Javascript desde el CDN de CK Editor

Por último agregamos un textarea con el atributo name=”content” y el id=”editor” dentro de nuestra vista HTML, este textarea se convertirá al hermoso CK Editor

El resultado Final es

Personalizando CK Editor 5

Una ves desplegado CK Editor, lo puedes configurar como desees, para esto CK Editor nos ofrece varios métodos, plugins y extensiones que hacen que todo sea sencillo, vamos a cambiar el siguiente código inicial que escribimos

Por el siguiente código

Con este código podemos manipular elemento por elemento de nuestro Editor, por ejemplo dentro de las opciones vamos agregar los 6 tipos de encabezados HTML para poder usarlos, estos son H1, H2, H3, H4, H5 y H6 para ellos los colocaremos en la linea options del código de la siguiente manera

y tenemos como resultado

Ahora podrás personalizar elemento por elemento, esto significa que tienes que escribir elemento por elemento que quieres que aparezca en la barra de opciones de tu editor de texto.

Puedes ver el resultado final en la Demo que colocamos al inicio de este artículo.

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required