Archivo de la etiqueta: CKEditor

En muchos de mis artículos muestro código HTML. Esto no supone ningún problema para el editor a la hora de crear un nuevo artículo, pero cuando intento editar el contenido de un artículo anterior surgen complicaciones.

Esto ocurre por la manera en la que se está asignando el contenido HTML que se recupera de la base de datos. El contenido se está asignando al textarea de la siguiente manera:

$output.=" <textarea id="text" name="text">".$row[1]."</textarea>";

El problema de hacerlo así, es que si hay etiquetas HTML en el contenido, se están interpretando como parte del código de la página, por lo que empiezan a aparecer cajas de texto y otros elementos en medio del propio artículo.

La solución es por tanto asignar el contenido de forma dinámica con javascript, y hacer esto con CKEditor es sencillo:

$output.=" <textarea id="text" name="text"></textarea>";
$data = str_replace('"','"',$row[1]);
$data = str_replace(" ", "", $data);
$output.='<script type="text/javascript">'
.'var editor = CKEDITOR.replace( "text" );'
.'editor.setData("'.$data.'")'
.'</script>';

Con esto lo que estamos haciendo es, primero crear un textarea vacío. Después, en el contenido del artículo escapamos todas las comillas dobles, y añadimos una suma en los cambios de línea para que no salte un error de javascript. Por último definimos el CKEditor y le asignamos el contenido.

Tras casi dos meses con el blog, uno de los puntos más flojos que le veo es el editor de artículos. EggBlog trae como editor por defecto openwysiwyg. Este editor tiene unos cuantos fallos gordos que empezaban a ser insufribles. Sólo por listar algunos, metía código innecesario en algunas de las etiquetas, todo el estilismo se realiza mediante spans y como factor decisivo, al intentar editar el código HTML no muestra ni un cambio de línea, te lo muestra todo en un único bloque. Vamos, imposible hacer cambios directamente en el código en esas condiciones.

Mirando un poco el código, veo que la fecha de última modificación del editor es de 2007, pero vamos, lo veo normal, seguro que si me voy a su web hay una versión nueva para descargar….. ¡Pues no! La versión más actual es de 2007. Cuatro años abandonado… ummm, hay que cambiarlo 😛

Buscando editores WYSIWYG en javascript, veo que hay dos alternativas predominantes, TinyMCE y CKEditor. Los dos generan código XHTML, son opensource y tienen buenas críticas. ¿Por cual decidirse entonces? Mirando como integrarlos, ambos son sencillos de usar y tienen buen código por si algún día me meto a modificarlos.

Pruebo la demo de los dos, y en cuanto a funcionalidad están muy a la par. Sin embargo, el CKEditor me resulta más agradable de usar… pero ese tampoco es un factor determinante. Lo mejor será preguntar a internet 😛

Buscando en Google “TinyMCE vs CKEditor” me encuentro con este artículo que los compara.

Artículo bastante interesante, que acaba diciendo lo que yo ya había supuesto, que ambos están muy a la par, con el CKEditor un poco por encima. Sigo buscando más comparativas y el CKEditor sale victorioso de la mayoría. Mis dudas se disuelven por completo cuando veo comentarios en los que se dice que el CKEditor es más estable, y el TinyMCE suele tener pequeños bugs.

¡CKEditor es el vencedor!

Ahora hay que integrarlo. ¿Será complicado? Para nada, en 5 minutos solucionado.

Estas 3 líneas definían el viejo editor:

$output .= " <script type="text/javascript" src="_lib/openwysiwyg/scripts/wysiwyg.js"> </script>";
$output.=" <script type="text/javascript" src="_lib/openwysiwyg/scripts/wysiwyg-settings.js"></script>";
$output.=" <script type="text/javascript"> WYSIWYG.attach( 'text', small ); </script>";

Las borramos y las sustituimos por lo siguiente:

$output.='<script type="text/javascript"'
.' src="_lib/scripts/ckeditor/ckeditor.js"></script>';

Ahora solo falta indicarle al editor sobre que textarea debe trabajar. Esto es tan simple como asignar una clase al textarea, por lo que esto:

$output.=" <textarea id="text" name="text">".$row[1]."</textarea>";

Pasa a ser esto:

$output.=" <textarea class="ckeditor" id="text" name="text">"
.$row[1]."</textarea>";

Hay que hacer estos cambios en los métodos eb_admin_editarticle y eb_admin_newarticle. Y con esto ya tenemos nuevo editor. ¡A disfrutarlo!, que la verdad es que es una gozada comparado con el anterior 😀