October: Rich Editor Improvements

[daftspunk]

:trophy: We did it! This enhancement has been fully funded!

Thank-you to all the backers who helped make this happen. This feature has been implemented and is available in Build 340+

Funds raised: / $799

---

This is a proposal to improve the Rich Editor form widget (richeditor). There are some limitations with the Redactor plugin used. Primarily the product is no longer supported, since the latest Redactor II version requires a new OEM license.

Known issues

• Code cleaning is too strict (#1917, #1611, #1212)
• ANSI/CP1252 encoding (#1634)
• Design / Code sync (#1611, #1627, #1739)
• Revert hotfix and retest (#1733)

• Miscellaneous (#1743, #1243, #1604)

  Wish list

• [x] Ability to define "Custom CSS classes" to style elements in the Rich Editor

• [x] Maintain the integrity of markup, as opposed to stripping out tags and attributes
• [x] Toolbar buttons can be customized using the form field definition
• [x] Code mode should use the native code editor
• [x] The markup output should be suitable for humans (beautified)
• [x] "Quick Upload" feature where uploads are dumped in a special folder in the media manager
  

  Proposed technology

Updating to Redactor II has a cost of $1495 USD for an OEM license. There is an alternative product called Froala Editor that has an equivalent cost of $799 USD. The Froala editor is cheaper and appears to be more polished overall, in terms of features and the editing precision.

Discovery notes

• Most of the items on the wish list are supported by Froala out of the box.
• Plugin development is required for using Ace Editor code mode.
• Plugin development is required for the Predefined Page Links feature.

• The Froala editor appears to suffer from memory leaks due to detached nodes in the DOM tree.

  Action items

• [x] Perform discovery R&D

• [x] Resolve detached node / memory issues
• [x] Raise funds for OEM license
• [x] Convert from Redactor to Froala
• [x] Restyle the toolbar appearance
• [x] Refit the Snippets implementation
• [x] Refit the Media Manager implementation
• [x] Refit the Predefined Page Links implementation
• [x] Refit the Multi-Lingual Rich Editor widget
• [x] Implement items on the wish list
• [x] Confirm known issues are fixed
• [x] Native Rich Editor messages should remain multi-lingual

[daftspunk]

Proposed UI

Developers can supply a custom CSS stylesheet to appear in the Rich Editor

The styles can then be made available to various element types

More granular control over the editor "clean up" behavior

[pedzed]

Shouldn't the tags be a multi-selectbox? And of course more tags should be addable to the list.

[daftspunk]

Update: These changes have been merged in to the develop branch and are available for testing in Build 336+.

[daftspunk]

This implementation is now complete. To obtain the very latest changes, enable the config setting cms.edgeUpdates and perform an update. All the features are available in Build 337 and beyond.

We now need to enable the license by accepting the claim, if you have submitted a bounty for this issue, please confirm it is complete to release the funds.

Thanks to everyone who contributed to making this improvement possible.

<3

[gabsource]

@daftspunk with the previous editor we could somehow extend the JS code inside a plugin to add buttons to the rich editor toolbar. Do you have any hint on adding custom button (froala plugins) without modifying OctoberCMS editor code ?

[daftspunk]

Take a look at the froala documentation on how to define a new button. At this point the button would have to be added using the form field definition (toolbarButtons) although we should probably allow the default set to be modified also, please log as a separate issue and it will be flagged as high priority.

[jonpxpx]

Still seems we are unable to save while in code view, changes are not saved.

[daftspunk]

Please create a new issue for any further issues. Thanks!