CKEditor - WYSIWYG, Primeros pasos para el Editor HTML por excelencia

▶

Para estos apartados relacionados con CKEditor, voy a utilizar el proyecto de Laravel. Es el proyecto que te recomiendo emplear. Si quieres crearte otro o utilizar uno diferente, ya es decisión tuya, pero para mí este es el más adecuado, especialmente por el formulario que vamos a usar.

La idea es colocar, en la parte del contenido, un campo de tipo "contenido enriquecido". ¿Y a qué me refiero con esto? En este punto voy a presentarte CKEditor.

¿Qué es CKEditor?

Puedes abrir tu navegador y escribir “CKEditor”, entrar en el primer enlace. Paralelamente, también puedes buscar “What You See Is What You Get”. Aquí está, no lo escribí mal: what you see is what you get, y verás los resultados.

CKEditor: el Word para la web

Puede que sea la primera vez que escuchas sobre esto, o tal vez no, no lo sé. Pero básicamente, CKEditor es tal cual lo dice su nombre: lo que ves es lo que obtienes. Yo lo llamo un “Word en línea” o un “Word para la web”, ya que ofrece características similares a Microsoft Word o Google Docs.

Me refiero a un editor que te permite aplicar formatos como negritas, itálicas, texto tachado, cambio de color, títulos, tablas, listados, etc. Esto es precisamente lo que significa el término What You See Is What You Get (abreviado como WYSIWYG): puedes aplicar formato a tu texto y ver en tiempo real cómo se verá.

Es decir, estamos hablando de un plugin que nos permite enriquecer el contenido, para que no se vea tan plano o aburrido, sino con un estilo más atractivo visualmente. Esto es ideal, por supuesto, cuando trabajamos con un blog.

Aplicándolo en nuestro blog

Por eso es que vuelvo a utilizar este proyecto de Laravel, ya que se supone que estamos trabajando en un blog y no queremos que nuestras publicaciones aparezcan tan simples.

Cuando entras al detalle de una publicación, no debería verse tan “pálida”, sino que debería mostrar contenido enriquecido. Por ejemplo, puedes insertar videos de YouTube, algo más avanzado que las configuraciones básicas que traen estos editores por defecto.

En este tipo de editores, como el que ves aquí arriba, no tienes opciones para insertar un video de YouTube o algo similar. Solo cosas básicas como títulos, texto en negrita o subrayado.

Además, en mis publicaciones también coloco bloques de código. Ese formato lo defino desde otro lado, pero cuando usemos CKEditor, podremos indicar directamente que un bloque corresponde a código, entre otras muchas opciones.

Conclusión

Así que, en resumen, para eso sirve CKEditor y el concepto de What You See Is What You Get, que estás viendo en pantalla. Vamos a dejarlo hasta aquí y en la siguiente clase te hablaré sobre los plugins de este tipo de editores y por qué vamos a usar precisamente CKEditor.

¿Qué es WYSIWYG?

▶

Ahora bien, ya que sabemos qué significan estas siglas —What You See Is What You Get—, que pueden referenciarse de varias formas, en pocas palabras se trata de una forma de definir contenido enriquecido.
Ya te mostré un ejemplo de contenido enriquecido tanto en mi libro como en mi blog, así que creo que ha llegado el momento de presentar algún plugin disponible para esto.

Buscando un editor WYSIWYG

Obviamente, si escribes "What You See Is What You Get JavaScript" en Google, vas a encontrar muchísimos plugins. Ojo: no estoy diciendo que sean malos ni nada por el estilo. Seguramente muchos de ellos son excelentes, y llevan bastante tiempo en el mercado.

¿Por qué uso CKEditor?

En mi caso, utilizo CKEditorpor una razón muy simple: es un proyecto que, coloquialmente hablando, me parece serio.
Tiene años en el mercado, yo lo uso desde hace tiempo —creo que desde la versión 3, aunque no tanto—, y el equipo detrás del plugin lo mantiene constantemente actualizado.

Esto es importante, porque no todos los proyectos tienen esa constancia en sus mejoras.
Además, CKEditor es muy personalizable, y cuenta con buena documentación (aunque en ocasiones puede parecer un poco abstracta).

¿Qué lo hace destacar?

Está disponible para Vanilla JavaScript, que es el que vamos a usar (sin frameworks adicionales).

También puedes integrarlo con frameworks como Angular, React, Vue 2, Vue 3, e incluso con .NET.

Tiene una documentación amplia, y un equipo activo que mantiene vivo el proyecto.

Hay una sección de demos, donde puedes ver cómo luce, cómo funciona, y probar muchas de sus funcionalidades.

El editor incluye incluso un asistente con IA, lo cual demuestra la evolución constante del producto.

Puedes exportar a PDF, Word, modificar la interfaz, etc.

Es bonito visualmente y muy completo funcionalmente.

¿Y el precio?

Algunas de sus funciones más avanzadas son de pago. Eso es algo a tener en cuenta.
Por ejemplo, el producto llamado SunBox (creo que así se llama), que puedes integrar incluso con servicios como Dropbox y otros discos en línea, es una solución aparte que tiene un costo.

Sin embargo, incluso con las limitaciones de la versión gratuita, el plugin ya ofrece muchísimo.

¿Por qué lo uso?

En resumen, uso CKEditorpor tres razones:

1. Confianza: llevo años usándolo y siempre ha respondido bien.
2. Personalización: puedo ajustarlo prácticamente a lo que quiera.
3. Escalabilidad: sé que nunca se me va a quedar corto si necesito ampliar funcionalidades.

Sí, es cierto que su configuración puede ser un poco compleja. De hecho, por eso mismo estoy haciendo estos videos: para ayudarte a superar esa barrera inicial.