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
798 stars 480 forks source link

WYSIWYG Editor filemanager (tinymce) #3795

Closed jmontoyaa closed 6 months ago

jmontoyaa commented 3 years ago

Implement the filemanager in ckeditor using resources

jmontoyaa commented 3 years ago

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

Filemanager doesn´t work yet outside a course.

jmontoyaa commented 3 years ago

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

jmontoyaa commented 3 years ago

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

christianbeeznest commented 1 year ago

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 commented 1 year ago

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

NicoDucou commented 9 months ago

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 commented 8 months ago

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

ywarnier commented 7 months ago

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

ywarnier commented 7 months ago

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 commented 7 months ago
daniboygg commented 7 months ago

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.
  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 commented 7 months ago

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

christianbeeznest commented 7 months ago

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 commented 7 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