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.
Become an Experience Maker in Financial Services and Insurance
This lookbook spotlights how Perficient and Adobe, together, helped some of the world’s best brands create and capture the memories of their clients, employees, and other key target audiences.
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!