Note:

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

Editor 2.7: Difference between revisions

From MoodleDocs
(25 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Work in progress}}
{{Infobox Project
{{Infobox Project
|name = Text Editor Revamp
|name = Text Editor Revamp
|state = In Development
|state = In Production
|tracker =  
|tracker =  
|discussion = https://moodle.org/mod/forum/discuss.php?d=243197
|discussion = https://moodle.org/mod/forum/discuss.php?d=243197
Line 86: Line 85:
| '''Accessible Content'''
| '''Accessible Content'''
|  
|  
* '''Unknown'''
* Fairly good
|  
|  
* Fairly good
* Fairly good
Line 109: Line 108:
|  
|  
* Can be themed to look like existing toolbars
* Can be themed to look like existing toolbars
* Dialogues are easy to change
* Icons need work
|  
|  
* Already looks like existing toolbars
* Already looks like existing toolbars
|  
|  
* Can be themed to look like existing toolbars
* Can be themed to look like existing toolbars
* Menus stand out
* Dialogues are easy to change
* Can the menu visibility be toggled?
* Icons need work
|  
|  
* The DOM is really nasty
* The DOM is really nasty
Line 164: Line 165:
* Plenty of 3rd party plugins already out there
* Plenty of 3rd party plugins already out there
|-
|-
| '''Loading Speed'''
| '''Loading Speed''' (Lets wait until all editors have comparible levels of Moodle integration before comparing speed please.)
|
|
* Stock editor loads fairly quickly
* -
|
|
* Integrated editor loads fairly quickly
* -
|
|
* Stock editor loads slowly compared to CKEditor
* -
* Loads much quicker with the menus disabled
|  
|  
* Integrated editor loads slowly
* -
|-
|-
| '''Equation Editor'''
| '''Equation Editor'''
|  
|  
* XXX
* Has mathjax plugin - uses different maths delimiters so needs hacking to make it backwards compatible with our existing equations.
|  
|  
* XXX
* Has mathjax plugin - requires newly written mathjax filter but is 100% compatible with existing equations
|  
|  
* XXX
* Has dragmath plugin. Java based - ugly, not-accessible.
|  
|  
* XXX
* Has dragmath plugin. Java based - ugly, not-accessible.
|}
|}
(Sorry - editing the above table hurts my brain - just noting that it is not up to date)


=== CKEditor 4 ===
=== CKEditor 4 ===
Line 190: Line 191:
'''Pros:'''
'''Pros:'''
* Huge community of developers
* Huge community of developers
* Plenty of plugins
* Plenty of plugins (177 - http://ckeditor.com/addons/plugins/all)
* Good existing documentation
* Good existing documentation
* Sample plugin: http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1
* Inline HTML Source editor - no need to open a dialogue to edit the source
* Inline HTML Source editor - no need to open a dialogue to edit the source
* Ability to replace file browser with Moodle's filepicker
* Ability to replace file browser with Moodle's filepicker
* [http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-baseFloatZIndex baseFloatZIndex] - allows the zIndex to be set in a more strict manner
* [http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-baseFloatZIndex baseFloatZIndex] - allows the zIndex to be set in a more strict manner
* Release cycle seems to be based on minor releases every 5 weeks with major releases every 2-3 minor releases. This seems to imply that the changes between releases will be relatively minor (good), but - the downside is releases will only be supported for 5 weeks and all bug fixes will be mixed with new features after that (bad). https://groups.google.com/forum/#!topic/ckeditor-dev/09BBYK9-OTE
* Accessibility support - http://ckeditor.com/blog/CKEditor-WAI-ARIA-Usable-Accessibility http://ckeditor.com/addons/accessibility


'''Cons:'''
'''Cons:'''
* Unfamiliar to Moodle developers
* Unfamiliar to Moodle developers
* Currently disabled on Android
'''Technical notes (lessons learned from the prototypes)'''
* Code seems high quality, as is the documentation.
* Language strings can be mapped directly to AMOS
* Ships with a nice mathjax solution
* Has own collapse feature (which we disabled in favour of ours)
* Does initially include alot of separate JS and CSS files (which get browser cached by our loader)
* Good accessibility support
* Theme system is fairly easy to work with
* Has a lot of features without feeling super heavyweight
* Dialogues on mobile do not go "fullscreen" (so don't fit)
* Current prototype has 0 modifications to the upstream code.
'''Outstanding work from the prototype'''
* Moodle language loading not implemented for plugins yet (but there is nothing stopping it)
* Needs a hack to the code to prevent the window flash when accessing a repository
* Important missing plugins - Insert media, Manage files
* Update behat tests, may require changes to behat framework to wait for editor loading
'''Missing features'''
* Media Manager
* Emoticons
* Non-breaking space ??
* Cleanup Messy code
* Prevent automatic linking


=== Atto ===
=== Atto ===
Line 208: Line 238:
'''Cons:'''
'''Cons:'''
* Maintenance will rely on Moodle developers
* Maintenance will rely on Moodle developers
* No table/grid support
* No Dragmath/ Tex Support
* We need to document it ourselves
* We need to document it ourselves
* No external community to lean on
* No external community to lean on
'''Technical notes (lessons learned from the prototypes)'''
* Code is high quality, it is quick to build new plugins - https://github.com/damyon/moodle-editor_atto/tree/master/plugins/bold
* No mapping required for Language strings
* Ships with a nice mathjax solution
* Uses YUI in plugins - so easy for Moodle developers to learn
* Good accessibility support (but could do with some improvements)
* Fully themable in a moodle theme (even icons)
* Feels fast and nimble. This also means it does less.
* Uses Moodle dialogues - so dialgoues will be 100% as accessible as the rest of the dialogues in Moodle
'''Outstanding work from the prototype'''
* Important missing plugins - Tables/Grid, Manage files
* Update behat tests, behat framework will work nicely with this editor because it uses standard yui loading.
'''Missing features'''
* Fontface
* Fontsize
* Paste as plain text
* Paste from Word
* Find
* Find/Replace
* Media Manager
* Non-breaking space
* Cleanup Messy code
* Undo/redo
* Toolbar buttons to indicate state of selected text
* Advanced image formatting options


=== TinyMCE 4 ===
=== TinyMCE 4 ===
Line 227: Line 284:
* Uses Jake for LESS compilation
* Uses Jake for LESS compilation
* Uses fonts for icons - icoMoon font service
* Uses fonts for icons - icoMoon font service
'''Technical notes (lessons learned from the prototypes)'''
* Code is of average quality. It is hard to build new plugins, the documentation is lacking.
* Language strings are terrible and require nasty hacks to work at all and the solution is ugly.
* We have drag math for equations but it sucks
* There is alot of accessibility features built in - but there are numerous violations of the spec and everything does not work nicely with the keyboard.
* Skinning is hard and ugly.
* Loads slowly
* Requires yet another tool for building skins (jake)
* Despite being the most similar to tinymce3, this editor took the most work and the most hacks to get to the same level of integration.
'''Outstanding work from the prototype'''
* Split onblur hack from collapse plugin into it's own plugin.
* Improvements to the nasty lang string hack
* Implement missing plugins (manage files)
* Update behat tests, behat framework requires hacks for this editor because it loads things slowly and randomly.
[edit]


== Sub Tasks ==
== Sub Tasks ==
Line 247: Line 323:


== Mock-Ups/Prototypes ==
== Mock-Ups/Prototypes ==
http://prototype.moodle.net/editor


== Related Tracker Issues ==
== Related Tracker Issues ==


[[Category:Project]]
[[Category:Project]]

Revision as of 16:34, 21 July 2014

Text Editor Revamp
Project state In Production
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.

(Sorry - editing the above table hurts my brain - just noting that it is not up to date)

CKEditor 4

Pros:

Cons:

  • Unfamiliar to Moodle developers
  • Currently disabled on Android

Technical notes (lessons learned from the prototypes)

  • Code seems high quality, as is the documentation.
  • Language strings can be mapped directly to AMOS
  • Ships with a nice mathjax solution
  • Has own collapse feature (which we disabled in favour of ours)
  • Does initially include alot of separate JS and CSS files (which get browser cached by our loader)
  • Good accessibility support
  • Theme system is fairly easy to work with
  • Has a lot of features without feeling super heavyweight
  • Dialogues on mobile do not go "fullscreen" (so don't fit)
  • Current prototype has 0 modifications to the upstream code.

Outstanding work from the prototype

  • Moodle language loading not implemented for plugins yet (but there is nothing stopping it)
  • Needs a hack to the code to prevent the window flash when accessing a repository
  • Important missing plugins - Insert media, Manage files
  • Update behat tests, may require changes to behat framework to wait for editor loading

Missing features

  • Media Manager
  • Emoticons
  • Non-breaking space ??
  • Cleanup Messy code
  • Prevent automatic linking

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
  • We need to document it ourselves
  • No external community to lean on

Technical notes (lessons learned from the prototypes)

  • Code is high quality, it is quick to build new plugins - https://github.com/damyon/moodle-editor_atto/tree/master/plugins/bold
  • No mapping required for Language strings
  • Ships with a nice mathjax solution
  • Uses YUI in plugins - so easy for Moodle developers to learn
  • Good accessibility support (but could do with some improvements)
  • Fully themable in a moodle theme (even icons)
  • Feels fast and nimble. This also means it does less.
  • Uses Moodle dialogues - so dialgoues will be 100% as accessible as the rest of the dialogues in Moodle

Outstanding work from the prototype

  • Important missing plugins - Tables/Grid, Manage files
  • Update behat tests, behat framework will work nicely with this editor because it uses standard yui loading.

Missing features

  • Fontface
  • Fontsize
  • Paste as plain text
  • Paste from Word
  • Find
  • Find/Replace
  • Media Manager
  • Non-breaking space
  • Cleanup Messy code
  • Undo/redo
  • Toolbar buttons to indicate state of selected text
  • Advanced image formatting options

TinyMCE 4

Pros:

Cons:

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

Technical notes (lessons learned from the prototypes)

  • Code is of average quality. It is hard to build new plugins, the documentation is lacking.
  • Language strings are terrible and require nasty hacks to work at all and the solution is ugly.
  • We have drag math for equations but it sucks
  • There is alot of accessibility features built in - but there are numerous violations of the spec and everything does not work nicely with the keyboard.
  • Skinning is hard and ugly.
  • Loads slowly
  • Requires yet another tool for building skins (jake)
  • Despite being the most similar to tinymce3, this editor took the most work and the most hacks to get to the same level of integration.

Outstanding work from the prototype

  • Split onblur hack from collapse plugin into it's own plugin.
  • Improvements to the nasty lang string hack
  • Implement missing plugins (manage files)
  • Update behat tests, behat framework requires hacks for this editor because it loads things slowly and randomly.

[edit]

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

Related Tracker Issues