search

chamilo / chamilo-lms

Chamilo is a learning management system focused on ease of use and accessibility
https://chamilo.org
GNU General Public License v3.0
795 stars 478 forks source link

C2: Replace all usages of old WYSIWYG to the new component BaseTinyEditor #5253

Open daniboygg opened 6 months ago

daniboygg commented 6 months ago

I open this issue to keep track of all places where the editor is used in Chamilo

We have an item for every path where Chamilo show a WYSIWYG editor. When the path uses the new component BaseTinyEditor (take a look at pull request https://github.com/chamilo/chamilo-lms/pull/5252) and is configured like it was shown in Chamilo 1 mark the item as done

Right now all places where the Vue code is used, all the plugins for tiny editor are enabled. We need to keep track of the old Chamilo 1 places and configure them, as much as possible, equal.

daniboygg commented 6 months ago

@ywarnier I would need some help to track all the places where the WYSIWYG is used

ywarnier commented 6 months ago

You can find them searching for those two strings in the public/ : ->addTextArea( or ->addElement('textarea'. This will provide you (I think) with all the places where a WYSIWYG is used. The call itself simply adds a <textarea> tag in the $form element associated with it, and then a JS somewhere picks it up and transforms it into CKEditor dynamically. I'm not sure how to adequately modify this, though. The ideal way would be (I suppose) to modify the part responsible for the JS-based substitution.

I think this is in src/CoreBundle/Component/Editor/CkEditor/CkEditor.php, but maybe this has already been replaced by TinyMCE. Maybe @AngelFQC or @christianbeeznest can confirm, here... ?

AngelFQC commented 6 months ago

You can find them by searching ->addHtmlEditor(

For legacy forms, the editor is added by the FormValidator::addHtmlEditor method https://github.com/chamilo/chamilo-lms/blob/a531dfc35e1e094f925a2a13fa5be12d2100afa2/public/main/inc/lib/formvalidator/FormValidator.class.php#L1108-L1146

The field is managed in HtmlEditor.php class https://github.com/chamilo/chamilo-lms/blob/master/public/main/inc/lib/formvalidator/Element/HtmlEditor.php

The JS to replace the textarea with the TinyMCE can be found here https://github.com/chamilo/chamilo-lms/blob/a531dfc35e1e094f925a2a13fa5be12d2100afa2/src/CoreBundle/Component/Editor/CkEditor/CkEditor.php#L56-L78

And the instance for TinyMCE is here https://github.com/chamilo/chamilo-lms/blob/a531dfc35e1e094f925a2a13fa5be12d2100afa2/assets/vue/App.vue#L112-L117

daniboygg commented 6 months ago

Here is the list of all different configurations of CKeditor's toolbar in Chamilo 1.11.x: https://github.com/chamilo/chamilo-lms/tree/1.11.x/src/Chamilo/CoreBundle/Component/Editor/CkEditor/Toolbar (via)