Editor 2.7

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 & Damyon @ Moodle HQ

Moodle 2.7

Project goals

The purpose of this document is to plan how to update the default text editor in Moodle.

The aim of this change is to improve accessibility and usability, while replacing TinyMCE 3.5, which is now unsupported.

TinyMCE 3.5 will be kept in place for the next few releases, but will 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 need to be made compatible with the new editor.

Considerations

• Usability of the editor - is it easy to create content with?
• Accessibility of the editor - is it at or easy to get it to follow the WCAG AA standard?
• Accessibility of the code produced by the editor - will it produce content that is up to the WCAG AA standard?
• 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 its interface be modified to look like the other toolbars currently in Moodle?
• Do the dialogues look the same and have the same accessibility features we expect from Moodle dialogues? Do the dialogues scale/re-flow on small screens?
• Strong feature set - does it support the things our users have come to expect already?
• String support - how difficult will it be to allow strings to change when the Moodle language changes?
• Mobile support - how well does it scale on small screens and 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?
• Upstream support - will it be supported for the lifetime we want (3 years+?)
• RTL support - does it include RTL support for the content, user interface and included dialogues?
• Given we need to redo the dragmath support - is dragmath the best choice for an equation editor?
  • Cons of dragmath
    • Java applet
    • Requires tex filter to be enabled globally
    • Complaints about tex filter
    • Open GPL issue: MDL-32450
  • Alternative
    • MathJax filter + equation editor plugin

Out there suggestions

• Add a picture editor to Moodle. (Paintweb - previous GSOC project: Paint_tool_integration )
• 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
• ??? Are there other alternatives?

..	CKEditor 4	Atto	TinyMCE 4	TinyMCE 3.5
Usable Editor	Still minor room for improvement	Visual feedback for the state of the text under the cursor/caret needs improvement	Still minor room for improvement	Still minor room for improvement
Accessible Editor	Still minor room for improvement	Still minor room for improvement	Lots of warnings on the Chrome Accessibility Audit	Still room for improvement
Accessible Content	Fairly good	Fairly good	Fairly good Decorative images need empty alt tag	Still room for improvement Decorative images need empty alt tag
Maintainable with Moodle	Unknown	Needs documentation and acceptance tests	Unknown	Scripts already in place to help with this
Editor Appearance	Can be themed to look like existing toolbars Dialogues are easy to change Icons need work	Already looks like existing toolbars	Can be themed to look like existing toolbars Dialogues are easy to change Icons need work	The DOM is really nasty Uses tables for layout
Feature set	Almost 100% matching what we have already	Still many features left to implement	Almost 100% matching what we have already	100% of what we have
String Support	May need some work to get it working	Built with string support in mind	Will need some work to get it working	Scripts already in place to help with this
Mobile Support	Editor works well, the the dialogues don't	Editor works well, as do the dialogues it launches	Editor works well, the the dialogues don't	Very poor
Plugin Support	Plugins are easy to write Plenty of 3rd party plugins already out there	Plugins support YUI Plugins are easy to write Moodle is the only source of plugins	Plugins are easy to write Plenty of 3rd party plugins already out there	Plugins are easy to write Plenty of 3rd party plugins already out there
Loading Speed (Lets wait until all editors have comparible levels of Moodle integration before comparing speed please.)	-	-	-	-
Equation Editor	Has mathjax plugin - uses different maths delimiters so needs hacking to make it backwards compatible with our existing equations.	Has mathjax plugin - requires newly written mathjax filter but is 100% compatible with existing equations	Has dragmath plugin. Java based - ugly, not-accessible.	Has dragmath plugin. Java based - ugly, not-accessible.

CKEditor 4

Pros:

• Huge community of developers
• Plenty of plugins
• Good existing documentation
• Inline HTML Source editor - no need to open a dialogue to edit the source
• Ability to replace file browser with Moodle's filepicker
• baseFloatZIndex - allows the zIndex to be set in a more strict manner

Cons:

• Unfamiliar to Moodle developers

Atto

Pros:

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

Cons:

• Maintenance will rely on Moodle developers
• No table/grid support
• No Dragmath/ Tex Support
• We need to document it ourselves
• No external community to lean on

TinyMCE 4

Pros:

• Menus allow the toolbars to be less cluttered
• Huge community of developers
• Plenty of plugins
• Good existing documentation
• Simple hook for file-picker: http://www.tinymce.com/wiki.php/Configuration:file_browser_callback
• Uses LESS for style sheets

Cons:

• Swapping from WYSIWYG mode to Source mode launches a dialogue
• Uses Jake for LESS compilation
• Uses fonts for icons - icoMoon font service

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 Dialogues.
   4. Add file management plugin (Marinas or other)
6. Disable TinyMCE

Mobile Examples/Alternatives

• Evernote - has a minimal toolbar that collapses to a single toggle button with nothing else displayed
• Google Docs - has a simple toolbar that scrolls with a swipe
• Gmail - Single icon that launches a simple menu-like toolbar

Mock-Ups/Prototypes

http://prototype.moodle.net/editor