Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Editor 2.7

From MoodleDocs

Note: This page is a work-in-progress. Feedback and suggested improvements are welcome. Please join the discussion on moodle.org or use the page comments.

Text Editor Revamp
Project state In Development
Tracker issue
Discussion https://moodle.org/mod/forum/discuss.php?d=243197
Assignee Jason Fowler @ Moodle HQ

Moodle 2.7


Project goals

The primary purpose is to update the default text editor in Moodle to a new editor.

This will improve accessibility, and usability, while replacing the now unsupported TinyMCE 3.5.8.

TinyMCE 3.5.8 will be kept in place for the next few releases, but will likely be disabled by default.

Along with the replacement of the Editor, plugins for TinyMCE 3.5.8 that are included as part of the Moodle release will be made compatible with the new Editor.

What other changes can we make to Moodle and the text editors to give a better user experience?

Considerations

  • Accessibility of the editor - is it at or easy to get it to WCAG AA?
  • Accessibility of the code produced by the editor - is it at or easy to get it to WCAG AA?
  • Maintainability of the links between the editor and Moodle - how much work will we need to do every time we upgrade?
  • Appearance of the editor - can it be modified to look like the other toolbars currently in Moodle?
  • Do the dialogues look the same and have the same accessibilty features we expect from moodle dialogues? Do the dialogues scale/reflow on small screens?
  • Stong feature set - does it support the things our users have come to expect already?
  • String support - how difficult will it be to allow the strings to change when the Moodle language changes?
  • Mobile support - how well does it scale on small screens + touchscreens?
  • Plugin support - can our community write plugins easily?
  • Browser support - does it support all the browsers Moodle does?
  • Loading speed - how quick is it to load the editor ready for use?
  • Maintainability - is the source willing to support it for the lifetime we want (3 years+?)
  • Feature support - the current feature set of tinymce 3.5.8 is defined by the plugins we ship with it + plugins DB. If we remove features we need to be 100% sure they will not be missed (tough).

Out there suggestions

  • Add a picture editor to Moodle
  • Add a "html_tiny" text format with a super cut down editor that supports it (e.g. - no toolbar at all - but still html with bold, italics, cut/paste etc)
  • Drag and drop handling of media

Candidates

  • CKEditor4
  • Atto
  • TinyMCE 4
  • ???
.. CKEditor 4 Atto TinyMCE 4
Accessible Editor 9/10 9/10 9/10
Accessible Content ?/10 9/10 8/10
Maintainable with Moodle ?/10 7/10 ?/10
Editor Appearance 8/10 10/10 8/10
Featureset 9/10 5/10 9/10
String Support ?/10 10/10 5/10
Mobile Support ?/10 10/10 ?/10
Plugin Support 9/10 10/10 9/10
Browser Support 10/10 10/10 10/10
Loading Speed 7/10 8/10 5/10
Total 51/100 (incomplete - 40 missing) 88/100 59/100 (incomplete - 20 missing)

(It would be good to link to some reasoning for the scores in the above table)

CKEditor 4

Pros:

  • Huge community of developers
  • Plenty of plugins
  • Good existing documentation

Cons:

Atto

Pros:

  • Excellent accessibility
  • Excellent integration for Moodle strings
  • Inline HTML Source editor - no need to open a dialogue to edit the source

Cons:

  • No table/grid support
  • No Dragmath/ Tex Support
  • We need to document it ourselves
  • No external community to lean on

TinyMCE 4

Pros:

  • Menus and buttons declutter the screen
  • Huge community of developers
  • Plenty of plugins
  • Good existing documentation


Cons:

Sub Tasks

  1. Assess different editors
  2. Prototype alternatives
  3. Ask some users
  4. Decide on an editor
  5. Implement editor
    1. Getting the new editor to render without altering the existing DOM - prevents changes needed to maintain third party plugins.
    2. Getting AMOS strings working within Editor.
    3. Getting Filepicker working within Editor Dialogs.
    4. Add file management plugin (Marinas or other)
  6. Disable tinyMCE

Mock-Ups

Related Tracker Issues