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

Inspired Digital Experiences for Manufacturing & Automotive

Whether you’re just beginning your digital transformation journey or are well on your way, we invite you to explore our partnership with Adobe and our diverse capabilities in manufacturing and automotive.

Download Lookbook

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:

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!