Project

General

Profile

Feature #5875

Upgrade to CKEditor

Added by Yannick Warnier almost 7 years ago. Updated almost 4 years ago.

Status:
Feature implemented
Priority:
Normal
Assignee:
-
Category:
Global / Others / Misc
Target version:
-
Start date:
14/01/2013
Due date:
% Done:

100%

Estimated time:
50.00 h
Spent time:
Complexity:
Wizard-level
SCRUM pts - complexity:
100

Description

With the massive adoption of HTML5 and mobile applications (and the recent Firefox 17.0 change in user agent), it becomes more and more important to have an updated version of the online editor (between others to reduce the loading time and improve HTML5 compatibility).

CKeditor 4.0.1 just came out, which will save us from having to upgrade to 3.0 first.

We'd like to have this upgrade available in Chamilo 1.10, but I understand it might be very tricky to move all the plugins that we currently use.

The first step in preparing this migration is to list all features; which I have started doing in Fckeditor_extensions.

Please check the wiki page and make sure we didn't forget anything. If you can, add a few lines epxlaining what each plugin does exactly. This way, we will be able to check that it continues doing so in the next version.


Files

Selection_004.png (75.7 KB) Selection_004.png Julio Montoya, 10/05/2013 13:57
Selection_005.png (127 KB) Selection_005.png Julio Montoya, 10/05/2013 13:57
Selection_006.png (67.3 KB) Selection_006.png Julio Montoya, 10/05/2013 13:57
Selection_011.png (38 KB) Selection_011.png Julio Montoya, 24/06/2013 15:44

Related issues

Related to Chamilo LMS - Feature #6833: Update js librariesNeeds testing21/11/2013

Actions

Associated revisions

Revision 51734a84 (diff)
Added by Julio Montoya over 6 years ago

Adding video plugin (html5 video support) see #5875

Revision 7759d146 (diff)
Added by Julio Montoya almost 6 years ago

Removing Fckeditor see #5875

Revision d3f6a980 (diff)
Added by Julio Montoya almost 6 years ago

Removing old Fckeditor code and using the Editor class see #5875

Revision 32e6e6fa (diff)
Added by Julio Montoya almost 6 years ago

Removing fck classes calls see #5875

Revision afc6e2e5 (diff)
Added by Julio Montoya almost 6 years ago

Removing fckeditor calls. Using formvalidator see #5875

Revision ceedff5d (diff)
Added by Julio Montoya almost 6 years ago

Removing fck calls see #5875

Revision 9bf39ae0 (diff)
Added by Julio Montoya almost 6 years ago

New structure for the ckeditor dependencies see #5875

The new structure allows the use of other editors such as TinyMce, that
plays well with elfinder. The dependencies were moved inside
ChamiloLMS/Component/Editor classes. Now the editor is used as a
service. The problem with ckeditor is that, it does not works properly
in smartphones/tablets event with the latest version 4.3.

Revision 81c411fe (diff)
Added by Julio Montoya almost 6 years ago

Fixing editor configuration. See #5875

History

#1

Updated by Yannick Warnier almost 7 years ago

  • Estimated time set to 50.00 h
  • Complexity changed from Normal to Wizard-level
  • SCRUM pts - complexity changed from ? to 100
#2

Updated by Juan Carlos Raña Trabado almost 7 years ago

Se podría hacer un intento de implementación de FCK 3.X o mejor de FCK 4.X y perder, al menos temporalmente algunas funcionalidades de los plugins. Hacerlo todo de golpe va a ser muy difícil. Lo principal es que la integración del upgrade funcione bién y que el browser de sus botones funcione también bien con el plugin de ajaxfilemanager.

La prioridad la veo en este orden:
1. el plugin del browser ajaxfilemanager para imagenes, flash y enlaces (no estoy muy seguro pero quizá funcione sin demasiados problemas con alguna modificación).
2. el plugin del glosario
3. un plugin para inserción de sonido, video y video youtube (habría que intentar colocar todo esto en uno; para fck 2.x ya lo tenía casi acabado pero no lo rematé por falta de tiempo, para otra versión de FckEditor puede ser empezar de nuevo)
4. el plugin de los editores matemáticos (tengo alguna idea sobre esto... )
5. inserción wiki (no debe dar muchos problemas se haría uno nuevo desde un placeholder, pero la funcionalidad de incorporar corchetes no se pierde porque estos se pueden escribir directamente en el texto aún si el plugin no está)
6. otros

Por último me pregunto ¿Sería posible trabajar de la siguiente forma?
-Mantenemos Fck 2.X y en otro directorio instalamos el upgrade de FCK a 4.x, controlamos el conjunto con un interruptor desde administración de la plataforma. Esto nos permitiría seguir caminando sobre terreno firme e ir avanzando en la integración del nuevo upgrade.
Me gustaría poder contribuir ahora pero me resulta casi imposible, tengo un montón de tareas en paralelo.

#3

Updated by Yannick Warnier almost 7 years ago

Tus comentarios son suficientes, JC. Sin embargo, es importante que uses los nombres correctos, porque FCKeditor y CKeditor son dos herramientas distintas y tengo entendido que tienen versiones distintas (o sea que FCKeditor 2.0 no es lo mismo que CKeditor 2.0).
El desarrollo de FCKeditor fue abandonado por completo, como lo reveló el último problema que tuvimos con Firefox 17.0. Por lo tanto, es necesario cambiar también por razones de seguridad.

Sobre lo de tener dos versiones en simultáneo, si bien parece una mejor solución, temo que estemos confundiéndonos a nosotros mismos y a nuestros usuarios con dos sistemas paralelos que mantener (no disponemos de los recursos suficientes como para tener dos personas que se encarguen cada una de una parte). De mi punto de vista, no lo veo posible, pero quizás esté dramatizando.

#4

Updated by Juan Carlos Raña Trabado almost 7 years ago

Yannick Warnier wrote:

Tus comentarios son suficientes, JC. Sin embargo, es importante que uses los nombres correctos, porque FCKeditor y CKeditor son dos herramientas distintas y tengo entendido que tienen versiones distintas (o sea que FCKeditor 2.0 no es lo mismo que CKeditor 2.0).

Lo sé, fue un error al escribir.

El desarrollo de FCKeditor fue abandonado por completo, como lo reveló el último problema que tuvimos con Firefox 17.0. Por lo tanto, es necesario cambiar también por razones de seguridad.

De acuerdo.

Sobre lo de tener dos versiones en simultáneo, si bien parece una mejor solución, temo que estemos confundiéndonos a nosotros mismos y a nuestros usuarios con dos sistemas paralelos que mantener (no disponemos de los recursos suficientes como para tener dos personas que se encarguen cada una de una parte). De mi punto de vista, no lo veo posible, pero quizás esté dramatizando.

No dramatizas, solo apuntar que no hablo de seguir manteniendo FCK2 pues ya está en servicio, sino de tener la garantía de que si la implementación de CKEditor no está totalmente funcional en su momento no quedarnos sin poder utilizar el software con 1.10. De todas formas no es un problema insoluble ni mayor ya que al fin y al cabo es una cuestión de plazos, por lo tanto si la nueva implementación no es lo suficientemente estable supongo que la nueva versión saldría más tarde, siempre se podrá usar la 1.9x hasta que lo sea.

De otro lado, es cierto que mantener dos o más editores es una carga, aunque no dejo de pensar en la posibilidad de usar además de FCKEditor otros seleccionables desde la administración de la plataforma como TinyMCE, pero es verdad que quizá este no sea el momento. Así que por mi parte adelante.

#5

Updated by Juan Carlos Raña Trabado almost 7 years ago

-Para el punto 3 tenemos ya para CKEditor 4
http://ckeditor.com/addon/oembed
que parece más completo que
http://ckeditor.com/addon/mediaembed
habría que ver también
para CKEditor 3 http://ckeditor.com/forums/Plugins/HTML5-Video

http://ckeditor.com/forums/Plugins/Youtube-Plugin-CKeditor
http://ckeditor.com/forums/Plugins/FLV-and-MP3-player-for-CKEditor

-Para el punto 4 tenemos para CKEditor
http://ckeditor.com/addon/equation
que es el mismo que tenía y creo sigue teniendo Chamilo 2.x, pero se apoya en un servicio externo, así que no es suficiente.
También se puede considerar para CKEditor 3: en java http://www.wiris.com/es/plugins/docs/ckeditor en flash http://ckeditor.com/forums/Plugins/fMath-Plugin-Plugin-for-Mathematics

-Para el punto 2 y 5 quizá con modificaciones del placeholder sería suficiente

Hay algunos del punto 6 que también los tiene actualmente Chamilo 1.9X como:
Inserción gráfica de tablas ttp://ckeditor.com/addon/doksoft-quick-table-insert
Inserción de fragmentos de html, widgets http://ckeditor.com/addon/htmlbuttons

La cuestión sigue estando en el punto 1 el gestor de archivos

#6

Updated by Yannick Warnier almost 7 years ago

Juan Carlos Raña wrote:

De otro lado, es cierto que mantener dos o más editores es una carga, aunque no dejo de pensar en la posibilidad de usar además de FCKEditor otros seleccionables desde la administración de la plataforma como TinyMCE, pero es verdad que quizá este no sea el momento. Así que por mi parte adelante.

A este nivel el mejor de punto de comparación es el módulo WYSIWYG en Drupal: son distintas personas que se encargan de uno u otro editor, y cada editor tiene la posibilidad (en la administración) de configurar que iconos de plugins se muestran, más la única herramienta que tiene configurada para Drupal específicamente es la de navegación/subida de archivos. No hay nada más. Igual así, siguen siendo personas distintas. El día en que tengamos un equipo para CKEditor y otro para TinyMCE, sí, lo consideraré. Por mientras creo que no sería una buena idea diluir nuestros esfuerzos.

#7

Updated by Yannick Warnier almost 7 years ago

Juan Carlos Raña wrote:

La cuestión sigue estando en el punto 1 el gestor de archivos

No creo que sea un problema mayor. Todas las aplicaciones web que lo integran necesitan el vínculo. Quizás esté como parte del núcleo en lugar de ser un "addon", y solamente se tenga que actualizar las llamadas (API) para que llamen a Chamilo.

#8

Updated by Jose García (Nosolored) almost 7 years ago

Buenas.

No sé si es posible realizarlo en Chamilo pero en Joomla se pueden utilizar los editores como plugins, se instalan y se asignan por defecto en la configuración de la Administración.
Siendo Administrador o Super Administrador en Joomla puedes asignarte un editor HTML distinto del que esté por defecto en la configuración Global.

Incluso existe un plugin (Editor Switcher) que permite cambiar durante la sesión al Administrador/Super Administrador el editor por defecto para usarlo individualmente sin cambiar la configuración global.

http://extensions.joomla.org/extensions/edition/editors CKEditor, FCKEditor, JCE (el más completo con numerosos addons), etc.
http://extensions.joomla.org/extensions/edition/editor-buttons/9912 (Editor Switcher)

La mayor parte de esos editores HTML permiten la navegación y selección de todo tipo de archivos.

El editor actual de Chamilo está integrado en el core, ¿no sería posible paras las nuevas versiones integrarlo como un plugin en el que puedes seleccionar cualquier editor aparte del actual para que no ocurre como ahora que se abandone un proyecto o no sea compatible con HTML5 y se tenga que sustituir por otro más adelante.

Un saludo.

#9

Updated by Julio Montoya over 6 years ago

  • % Done changed from 0 to 40

Ayer he enviado muchos cambios en la rama de Chamilo 1.10 para integrar ckeditor 4.1.1 (última versión a esta fecha).

Aqui los pasos que he hecho:

1. Subir el paquete ckeditor "original" (sin cambios) dentro de la carpeta "main/inc/lib/javascript/ckeditor" y agregar el archivo "ckeditor.js" en template.lib.php (para que se vea en todas las páginas de Chamilo)

2. Luego, he enviado una clase que maneja las configuraciones de ckeditor (toolbars y plugins) llamada "editor" aqui:
"/src/ChamiloLMS/Component/Editor/Editor.php" este archivo es una copia modificada de "/main/inc/lib/fckeditor/fckeditor.php"

3. He modificado una linea de este archivo: "/main/inc/lib/formvalidator/Element/html_editor.php" si se quiere regresar al antiguo FCKeditor solamente
deshacer este cambio:

        //$this->fck_editor = new FCKeditor($name);
        $this->fck_editor = new ChamiloLMS\Component\Editor\Editor($name);

4. Ahora ... el gran problema era con el administrador de archivos( boton "Browse Server") para agregar archivos, lo que he hecho es integrar otra librería que se encarga de esto llamada elfinder:

https://github.com/Studio-42/elFinder

Demo aqui: http://elfinder.org/

Lo bueno de esta librería es que actua como un intermedio entre chamilo y ckeditor, por el cual se montan "drivers" totalmente configurables. Para el caso de Chamilo, se pueden cargar drivers tipo "curso", archivos del usuario dentro del curso (sf_user) y espacio personal del usuario (users/upload/x).

Una vez que se implementa la conexión entre chamilo y el "elfinder", este se encarga de conectarse a ckeditor. El elfinder tambien soporta conexión con Tinymce v3 y elRTE 1.x.

Ahora el gran problema era de conectar las modificaciones de archivos (subidas/supresión/etc) de "elfinder" con la BD de chamilo. Para ello, el elfinder propone una API por el cual es posible de agregar funcionalidades para cada "comando" (rm, mkdir, mkfile, upload, etc). elfinder tiene muchas funcionalidades como extract/archive zip, rename, duplicate, copy, etc, etc... Por ahora solo he activado 2 comandos: upload y download.

Ver hooks aqui:

https://github.com/chamilo/chamilo-lms/blob/master/main/inc/lib/elfinder/php/connectorChamilo.php

Tambien cuenta con filtros para esconder archivos tipo DELETED, archivos php, etc. Por ejemplo:

array(
        'pattern' => '/_DELETED_/',
        'read' => false,
        'write' => false,
        'hidden' => true,
        'locked' => false
    )

No he encontrado otra librería que preste tantas opciones de configuración, por lo que no fue tan difícil integrarlo.

5. No he agregado tooodos los toolbars de fckeditor a ckeditor solo he migrado 3:

Documents.php
TestProposedAnswer.php
TestQuestionDescription.php

Los archivos se encuentran aqui:

src/ChamiloLMS/Component/Editor/Toolbar

y ahora son clases que se cargar por medio de autoload, ya no son archivos que se tienen que cargar manualmente con require_once.
Ejemplo de una clase:

namespace ChamiloLMS\Component\Editor\Toolbar;
class TestProposedAnswer
{

    public function getConfig()
    {

        $config['toolbarGroups'] = array(
            array('name' => 'basicstyles',    'groups' =>array('basicstyles', 'cleanup', )),
            array('name' => 'paragraph',    'groups' =>array('list', 'indent', 'blocks', 'align' )),
            array('name' => 'links'),
            array('name' => 'insert'),
            '/',
            array('name' => 'styles'),
            array('name' => 'colors')
        );

        $config['toolbarCanCollapse'] = true;
        $config['toolbarStartupExpanded'] = false;
        //$config['width'] = '100';
        //$config['height'] = '200';
        return $config;
    }
}

He agregado el plugin "oembed" para ckeditor por ahora.

Ya se que faltan muchas cosas para tener lo que teníamos antes con FCKeditor, pero creo que elfinder es buena alternativa que nos ahorrará mucho tiempo de desarrollo. Queda agregar nuevos plugins ckeditor, reponer funcionalidades perdidas y sobre todo hacer segura la integración con elfinder.

Es posible de ver un preview aqui:

http://unstable.chamilo.org/

Aun no reportar bugs porque el desarrollo no está terminado.

#10

Updated by Julio Montoya over 6 years ago

Algunas capturas:

#11

Updated by Yannick Warnier over 6 years ago

Excellent news!

Just to help a little (this is not a bug report), what we still need is:
  • HTML5 video tags with an integration to jplayer in order to allow for a flash fallback
  • ASCIIMathML
  • MimeTex
  • GoogleMaps
  • YouTube (apparently this is already OK with the multimedia importer icon, one of the last icons)
  • Integration with Chamilo templates (although I'm half hesitating about leaving them in a column and removing the CKEditor template icon, as they are more visible as a column - the problem for now is that the templates are not loading anymore, but this is probably unrelated)
  • Wiki links

I've got a little bug report, though :-)
When I try to "browse server" from the images insertion icon in documents edition, I get a simple JQuery UI missing plugins error: "Invalid jQuery UI configuration. Selectable, draggable and droppable components must be included." (this is probably just a one-liner somewhere).

There are a series of buttons that are not necessary (like the "preview" button and the "paste" and "paste from plain text", I guess), but that will be dealt with in time.

#12

Updated by Julio Montoya over 6 years ago

I just fixed the "Invalid jQuery UI configuration" error.

#13

Updated by Julio Montoya over 6 years ago

You can test it in unstable.chamilo.org

#14

Updated by Julio Montoya over 6 years ago

HTML5 video tags

I added this plugin:

http://ckeditor.com/forums/Plugins/HTML5-Video

You can add mp4 and webm format videos the result is something like that:


<div>
<video controls="controls" height="300" id="video2013524154255" poster="" width="400">
<source src="/chamilogits/courses/COURSEONE/document/small.mp4" type="video/mp4" />
<source src="/chamilogits/courses/COURSEONE/document/small.webm" type="video/webm" />Your browser doesn&#39;t support video.<br />
Please download the file: <a href="/chamilogits/courses/COURSEONE/document/small.mp4">video/mp4</a>
<a href="/chamilogits/courses/COURSEONE/document/small.webm">video/webm</a>
</video>
</div>

#16

Updated by Alain Deschênes over 6 years ago

Salut Julio,

Testé sur 1.10.x et tout ce que j'ai testé fonctionne très bien.

Cependant, j'ai découvert que l'éditeur n'a pas été mis à jour dans l'agenda (Édition d'éléments ou Agendaadd).

Je pousuis l'analyse,

Alain

#17

Updated by Julio Montoya over 5 years ago

  • Status changed from Assigned to Needs testing
  • Assignee deleted (Julio Montoya)
#18

Updated by Yannick Warnier almost 4 years ago

  • Status changed from Needs testing to Feature implemented
  • Target version deleted (2.0)
  • % Done changed from 40 to 100

All good. Implemented fully in 1.10

Also available in: Atom PDF