Skip to main content

Adobe

SunEditor: An Alternative to the AEM RTE

Ever since I first worked with the AEM Rich Text Editor, it was clear to me that it was buggy, not easily extensible, and sometimes unusable. But the main issue for me was extensibility. There is no official API documentation or any documentation on how to build RTE Extensions. This is the reason I started searching for an alternative. Two years ago, I integrated CKEditor as an AEM Dialog Widget. This editor works, but was mainly a Proof of concept and not to be used in production.

Banner photo by Glenn Carstens-Peters on Unsplash

SunEditor

Recently, I stumbled upon SunEditor, which the author describes as “Pure javascript based WYSIWYG html editor, with no dependencies”. You can play with an example here. It seems to work really well and has a simple API that allows you to build plugins to your heart’s desire. The documentation and plugin examples are pretty good as well.
 

Integrating SunEditor with AEM

Since I liked it very much, I decided to build an integration for it with AEM. It turned out to be extremely simple! SunEditor starts with a <textarea> and initializes the editor around it. Additionally, the editor saves the HTML value into the <textarea>making Sun ideal as an AEM dialog widget!
I’ve created a simple project on github, that you can deploy and test for yourself: https://github.com/ahmed-musallam/AEM-SunEditor
Once you have it deployed to your AEM instance and have a component dialog that uses it, you should see something like this:
RTE extension
The editor allows you to edit almost everything the AEM RTE allows you to. It even allows you to author in full screen!
The editor does not support adding/authoring AEM images, but integrating that with AEM should not be difficult since SunEditor does support images. But that might be for a later post. For now, test this out and let me know how you like it!
 

Thoughts on “SunEditor: An Alternative to the AEM RTE”

  1. Does this component support souce code editing mode like RTE? With this mode, HTML code like ” This is Source Code edit mode test ” could be parsed.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Ahmed Musallam, Adobe Technical Lead

Ahmed is an Adobe Technical Lead and expert in the Adobe Experience Cloud.

More from this Author

Categories
Follow Us
TwitterLinkedinFacebookYoutubeInstagram