-
Epic
-
Resolution: Done
-
Minor
-
4.1
-
MOODLE_401_STABLE
-
MOODLE_401_STABLE
-
Re-introduce TinyMCE
-
MDL-75071-master
Atto was designed as a lightweight, accessible, in-house editor for Moodle. While it has arguably achieved all of these goals, it was written nearly a decade ago, uses deprecated technologies, and is difficult to maintain. In addition:
- Moodle lacks the dedicated, in-house, knowledge to maintain a rich text editor
Maintaining our own editor detracts from our core business goals of writing a kick-ass LMS to empower educators. - The JavaScript world has moved on, but because Atto is built upon the now-deprecated YUI framework, it is increasingly difficult for us to add new features using modern language features.
- The library we use to normalise content selection (Rangy) was abandoned shortly after we started to use it, and has a number of known issues that detract from the experience of using Atto.
- Many of the language features that Atto is based around were experimental at the time of its original writing and never made it to the browser specification. Their continued use is not advisable.
- Atto is fine for editing short content, but when editing larger, or more complex, content it becomes more challenging. In particular, the undo/redo are problematic, and image handling is tricky.
Possible solutions
As with any problem, we have multiple solutions available - each has their own benefits and problems. To add to this, Moodle also has a number of restrictions which we place upon ourselves and which make any product selection more complex and/or prohibitive, in particular:
- Our plugin structure does not support files being parachuted into place. We have a strict plugin architecture which must be followed for community plugins to work.
- We do not use any server-side JS processing, such as WebPack. All of our JS is shipped with Moodle, or community Moodle plugins, as pre-compiled code ready for production. This prevents us from using any editor which tree-shakes code based on configuration, or whose APIs are mangled during their build process.
- We use our own Translation system (AMOS)
- We use our own dialogues, menu bars, and other UI features
Rewrite Atto
Perhaps the most obvious solution is to rewrite Atto as a series of ES Modules to match our other JavaScript content. In doing so we would also have to find an alternative to the rangy library, and to the deprecated Document.execCommand() browser API. In an ideal world we would also maintain backwards compatibility with existing Atto plugins, but this would be extremely difficult given the move from YUI to ESM, the necessary change of underlying API, and the replacement of Rangy. The complexity of this project would be high, and Moodle would still be maintaining its own text editor, which is a huge distraction from our core business.
Replace Atto
Atto is not the only rich text editor available, and many other Open Source editors exist. These include editors like CKEditor, Tiny, and Quill. Others do exist but are not included here as they are opinionated in their design and/or abandoned. However, replacing Atto is not a trivial task.
Whilst this approach would work around the issues of finding alternatives to Rangy and the use of deprecated browser APIs, it would not solve the issues of breaking compatibility with all existing third-party plugins; however it can provide a wealth of existing functionality with years of dedicated research and development instead. In many cases the current Moodle plugins can be replaced with existing plugins, negating the need to develop them again for Moodle.
CKEditor
The limitations above immediately preclude the use of CKEditor 5, which requires WebPack, and tree shakes the entire platform. It would not be possible for third-party developers to write plugins for multiple versions of Moodle, and a new compilation step would be required, and could only run when all possible plugins are in place. Configuration would not be trivial.
QuillJS
QuillJS is an editor framework. Whilst it can provide an editor without any further configuration, to do anything more Moodle would need to create all interfaces using our own existing components and integrate these with the QuillJS APIs. This is closer to the Replace Atto approach, but with a well-supported underlying editor API. This approach would still require all of the current overheads of maintaining an editor, albeit without most of the more complex editor parts.
Tiny
Tiny is a full-featured editor, which comes with a number of standard plugins which replace many of Atto’s standard features - these include standard formatting, font and colour selection, alignment and justification, undo/redo, word count, source-code viewing, table support, links, emojis, copy, and paste. Many of these features will work as-is for Moodle.
Some use the Tiny modal and form frameworks and we would have to decide whether to use these in Moodle, or to rewrite them using the standard Moodle interfaces. This decision would not have to be made immediately.
Other options
I looked at a number of other possible editors, but these were either opinionated in their choice of technology (for example jQuery, specific Bootstrap versions), or were abandoned.
Important
If you are aware of other editors which meet these criterion, and you feel we should include them in this consideration *now* is the time to mention them.
Given the above analysis, we are currently looking at adopting Tiny version 6 as a replacement for Atto.
- blocks
-
IDEA-5 Tiny MCE6 as default HTML content editor
-
- Closed
-
- has been marked as being related by
-
MDL-67560 Allow LTI in Tiny Text Editor
-
- Open
-
- has to be done before
-
MDL-75926 TinyMCE 6 - Phase 2
-
- Open
-
-
MDL-75915 Make TinyMCE the default Editor for Moodle
-
- Closed
-
- is blocked by
-
MDL-75910 HTML Editors in a Group are missing their label element
-
- Closed
-
-
MDL-75923 User tour test content is not valid HTML
-
- Closed
-
-
MDL-75244 Form change checker uses TinyMCE API without checking it exists
-
- Closed
-
-
MDL-75886 Set editor for editor-specific tests
-
- Closed
-
-
MDL-75887 Provide way to set HTML Editor content regardless of the current editor
-
- Closed
-
- split to
-
MDL-75922 Add editor_atto tags to tests which require the atto editor
-
- Closed
-
-
MDL-75082 Add support for FORMAT_BLOCK and the Block protocol
-
- Open
-
- will help resolve
-
MDL-71743 Upgrade TinyMCE to latest version
-
- Closed
-