Incluir CKeditor en Nuestros Desarrollos Web

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:

 photo ckeditor2_zpsehaiyfs1.jpg

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>

CKeditor photo textarea1_zpsox7l7juy.jpg

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

CKeditor final photo ckeditor4_zpsxidzecn7.jpg

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.

Te puede interesar...

Deja un comentario