WYSIWYG Editor filemanager (tinymce)

[jmontoyaa]

Implement the filemanager in ckeditor using resources

[jmontoyaa]

This was replaced with tinymce and it works when open the editor inside a course.

Filemanager doesn´t work yet outside a course.

[jmontoyaa]

https://github.com/chamilo/chamilo-lms/commit/5f6a97ca5ae6ef34a787b1c201b78a3797387fc9

[jmontoyaa]

The personal files (#3792) should be connect to the filemanager.

[christianbeeznest]

An image picker for tinymce has been added in courses tools (no documents) with code legacy in this commit https://github.com/chamilo/chamilo-lms/commit/ef3c8b0b15684ead7298bdb937ec910c19599994

For tinimce with vuejs inside course is added this commit https://github.com/chamilo/chamilo-lms/commit/5f6a97ca5ae6ef34a787b1c201b78a3797387fc9 , It should be add in other tools when it is using vuejs,

For tiniymce outside a course with vuejs to use the filemanager created for tool documents (vuejs) changing the browser url by personal files [/resources/personal_files/]

[christianbeeznest]

It is added editor filemanager for documents and messages in this PR https://github.com/chamilo/chamilo-lms/pull/4756

[NicoDucou]

The tinyMCE works on many page. The missing point are extension that we had before like mathjack but probably it could be removed for 2.0 and reintegrated later.

[ywarnier]

Work on this with @daniboygg to generalize the implementation of the filemanager in TinyMCE:

• as a component on top of Vue components
• that supports the same/similar options as toolbars (as were previously used by CkEditor - see CkEditor.php)
• that is configurable per tool (see all classes available in src/CoreBundle/Component/Editor/CkEditor/Toolbar/ (App.vue then captures in line 104 the presence of CkEditor.php)

[ywarnier]

Reference code: https://github.com/chamilo/chamilo-lms/commit/c111d5d160a326d4ce2e69c1065aae2fb2c1f5d1

[ywarnier]

At the moment this saves the image as base64 in the database. The images should be saved on disk in var/[tool-name]/[uuid].[extension].

[ywarnier]

• wrapper for tinymce
• configuration of plugins
• upload images directly (not base64)

[daniboygg]

I've done a little research about uploading files.

Checking the documentation https://www.tiny.cloud/docs/general-configuration-guide/upload-images/ we need:

1. A method in the backend that accepts an image via POST and store it in the correct folder.
   • The method should return a json object containing the image location (relative to chamilo site)
   • According to the documentation a request per images will be sent
   • An example is provided in the link to implement it in PHP https://www.tiny.cloud/docs/advanced/php-upload-handler/)
2. Call editor.uploadImages() before uploading the content. We must await this to finish before submitting the content

Do we have a method like this implemented in the backend?

Regarding the version of TinyMCE used, there is a warning in the documentation:

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Should we consider migrating to TinyMCE 6 before making the feature to upload images?

[ywarnier]

@christianbeeznest will work on upload of images with the backend call.

[christianbeeznest]

A backend controller has been implemented for the TinyMCE image upload feature, which accepts images via POST, stores them appropriately in personal_files and resource_file tables, and returns their location in a JSON format. On the frontend, TinyMCE is configured to utilize this backend controller (FileManagerController) through the file_picker_callback option, enabling integration with a custom file manager or direct uploads from the user's device, depending on the useFileManager setting. It ensures all images are uploaded with editor.uploadImages() before submitting the content. The useFileManager option adds flexibility in file handling, allowing users to choose between direct uploads or using a file manager for more efficient organization.

The changes are in this PR https://github.com/chamilo/chamilo-lms/pull/5241 and merged now, also it is added this page for demo /resources/pages/editor-demo

[ywarnier]

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