Ciges.net: Integración del editor visual CKEditor en MediaWiki

En este artículo explico cómo integrar el editor visual para webs CKEditor en MediaWiki, el sistema de gestión de contenidos usado por Wikipedia y otros muchos wikis en Internet. CKEditor es la mejor opción que hay en estos momentos (septiembre del 2013) como editor visual para MediaWiki.

El editor de artículos de MediaWiki utiliza una sintaxis especial, llamada WikiTexto, que es una especie de HTML muy simplificado y que permite de forma muy cómoda editar el contenido de los artículos. Aun siendo sencillo y una forma efectiva de separar la presentación del contenido el aprendizaje de esta sintaxis supone una barrera de entrada para los usuarios no técnicos, lo cual es un impedimento serio si se pretende que colaboren activamente.

La fundación Wikimedia está en estos momentos desarrollando un prometedor editor visual que podemos usar ya en la Wikipedia (aunque está considerado todavía en fase beta).

Descripción del problema

WYSIWYG, la extensión para MediaWiki que integra el editor CKEditor fué desarrollada por la empresa Ontoprise GmbH, que quebró en 2012, con lo que la extensión está desarrollada hasta la versión 1.17 de MediaWiki. Para versiones posteriores lo que hay son parches desarrollados por la comunidad.

La última versión del MediaWiki en estos momentos es la 1.21.2. Se puede descargar la 1.19, 1.20 y 1.21 fácilmente, disponibles junto con muchas de las extensiones, usando GIT (una herramienta cliente-servidor para la descarga de código fuente).

Si optamos por usar MediaWiki 1.17 nos encontramos con que no disponemos de extensiones para una versión tan antigua y si usamos una versión más moderna nos encontramos con que el editor WYSIWYG no está condiserado “estable”.

Después de muchas pruebas, con distintas versiones tanto de MediaWiki como del editor visual he llegado a tener la siguiente combinación que funciona correctamente, y que me permitirá seguir añadiendo extensiones para hacer un despliegue de MediaWiki completo

MediaWiki 1.20.7
WYSIWYG 1.7 con los 5 archivos modificados según las indicaciones de DheerajKumarBit

He tenido además que modificar algo del código Javascript para integrar la nueva versión del editor de wikitexto con el editor visual.

Instalación de MediaWiki 1.20

La instalación de MediaWiki se ha hecho descomprimiendo el paquete .tar.gz en el directorio raíz de Apache y accediendo a la web. MediaWiki dispone de un instalador web que crea la base de datos y hace las configuraciones básicas.

Lo único destacable es que:

Se seleccionó como motor de base de datos MyISAM, a pesar de las fuertes recomendaciones del propio producto por instalar InnoDB
Esta versión proporciona la posibilidad de preinstalar ya varias extensiones. De las ofrecidas he marcado las siguientes:

WikiEditor es una nueva versión del editor de wikitexto, más elegante y capaz, que resulta muy interesante.

Instalación de la extension WYSIWYG

Para instalar CKEditor ha habido que:

Instalar WYSIWYG 1.7 con los 5 archivos modificados según las indicaciones de DheerajKumarBit
Modificar algo del código Javascript para integrar correctamente el editor de wikitexto con el editor visual

Las modificaciones en el JavaScript se han hecho en los siguientes ficheros y para lo siguiente:

WYSIWYG/ckeditor/config.js

Desactivar el botón “Grabar”, ya que no funciona correctamente (si se están editando secciones de un artículo a la hora de grabar la sección sobreescribe todo el articulo)
Desactivar la barra de herramientas para wikis semánticos, ya que no usamos esta funcionalidad

WYSIWYG/scripts/init.js

Ocultar la barra del WikiEditor cuando el CKEditor está activado para evitar que ambas aparezcan al mismo tiempo
Corregir la posición del enlace que permite cambiar entre ambos editors
Ocultar/Desplazar algunos elementos gráficos

WikiEditor/modules/ext.wikiEditor.toolbar.js

Ocultar la barra del WikiEditor si el CKEditor está activado
Corregir la posición del enlace que permite cambiar entre ambos editors

El codigo fuente modificado de estas extensiones se puede descargar desde este repositorio en Github

Configuración en “LocalSettings.php”

Para usarlo habrá que descomprimir el archivo debajo de la carpeta “extensions” y añadir las siguientes líneas al archivo de configuración “LocalSettings.php” del wiki

# Éditeur visuel CKEditor
require_once("$IP/extensions/WYSIWYG/WYSIWYG.php");
$wgGroupPermissions['registered_users']['wysiwyg']=true;
$wgGroupPermissions['*']['wysiwyg'] = true;
$wgDefaultUserOptions['cke_show'] = 'wikitexteditor';
$wgDefaultUserOptions['riched_use_toggle'] = true;
$wgDefaultUserOptions['riched_start_disabled'] = false;
$wgDefaultUserOptions['riched_toggle_remember_state'] = true;
$wgDefaultUserOptions['riched_use_popup'] = false;
$wgFCKEditorExcludedNamespaces[] = NS_MEDIAWIKI;
$wgFCKEditorExcludedNamespaces[] = NS_TEMPLATE;
# Enables use of WikiEditor by default but still allow users to disable it in preferences
$wgDefaultUserOptions['usebetatoolbar'] = 1;
$wgDefaultUserOptions['usebetatoolbar-cgd'] = 1;