En este tutorial veremos como incluir el editor CKeditor muy fácilmente dentro de nuestros desarrollos web, CKeditor reemplaza el campo de tipo Textarea brindando un abanico de opciones para el trabajo con texto, inserción de imágenes, insertar código html, css, javascript, etc.
Lo primero que vamos a hacer será descargarlo desde la siguiente URL: http://ckeditor.com/download
Para este ejemplo vamos a utilizar la versión básica
Una vez descargada la descomprimimos y copiamos la carpeta ckeditor dentro de la carpeta js del proyecto, en mi caso yo lo tengo organizado de la siguiente manera:
Para este ejemplo tengo el siguiente formulario básico creado con Bootstrap, a la etiqueta que debemos prestar atención es a la etiqueta textarea y a su atributo name, el cual tiene en mi ejemplo el nombre: descripcion
<textarea class=”form-control” rows=”3″ name=”descripcion”></textarea>
El siguiente paso será incluir el script dentro del head de nuestro documento HTML:
<script src=”js/ckeditor/ckeditor.js”></script>
Ya solo nos quedaría añadir el siguiente script debajo de la etiqueta textarea:
<script>CKEDITOR.replace(‘descripcion’);</script>
El script toma el nombre que la hayamos puesto al parámetro name del textarea
Nos debería quedar de la siguiente manera:
<textarea class=”form-control” rows=”3″ name=”descripcion”></textarea>
<script>CKEDITOR.replace(‘descripcion’);</script>
El resultado final será el siguiente
Puedes descargar los archivos fuente del ejercicio desde el siguiente enlace: www.dropbox.com/s/6ph7m7yi95t96fv/starter.rar?dl=0
Puedes experimentar con los demás editores aquí solo utilizamos la versión básica.