Video Demo: Creating a Custom Rich Text Editor for AEM using Editor.js
Jorge Chércoles, January 26, 2023
As a follow up to the information I shared in the article, Using EditorJS to Implement a Custom Rich Text Editor in AEM, I have created a video demo that further explains how the custom RTE can be created for AEM. You'll see the proof of concept I created and I hope it will inspire you to create your own. If you have questions about this or other AEM development, please contact 3|SHARE and we'll be happy to talk to you about how we can help.
Transcript
Jorge Chércoles: [00:00:35] Hi, my name is Jorge Chércoles, AEM Backend Developer at 3|SHARE, and I would like to talk about the solution I developed as a replacement for the AEM Rich Text Editor. In most cases, the AEM editor is enough, but in terms of customization, we are bit more limited. In order to achieve that, we integrated Editor.js as a dialogue input for AEM.
First of all, let's talk about support. Where can you use it? This component is built to work everywhere. We can use it in component, page properties, content fragments, and even in experience fragments. And we can place it as a standalone input or within a multi field. It supports both AEM versions, AEM as a Cloud and AEM Managed Service.
For the demo, we will be using an AEM as a Cloud instance. The main difference with the [00:01:35]AEM out of the box Rich Text Editor is the UI and how the tools are distributed over the interface. We no longer have that infinite toolbar with two or three rows. The tools are distributed in three different panels, block, inline and tune.
We will go through all of them, showing where they can be found and how they work in the demo.
The editor and the plug-ins can be configured using xml files like we do with any other component. We can also take advantage of the sling resource merge. We can create a single configuration file for the editor and use it everywhere thanks to this sling: resourceSuperType property.
The editor functionality can be extended using plug-ins. Each option we have available, the table is the images, headings is considered a plug-in. The image image plug-in we developed, integrates our rendition system as well as a drag and drop feature. The possibilities are infinite and there are many plugins available as open source.[00:02:35]
Even though the component is functional and can be used within an AEM project, there are some drawbacks. Editor.js is built for modern front-end frameworks. Instead of saving html, it creates a JSON with all the information. And it's up to the developer to create the markup himself. This is the reason why custom work has to be done every time a plugin is added.
Even when creating a tune, all the plugins affected has to be mollified. In this proof of concept, the API is not exposed, so extending it when installed as a dependency is currently not possible.
Now that we have talked a little bit about the component, let's go into AEM and test it out!
I just created this component called Rich Text Editor, with some fields already in it. A title, a description, which uses the [00:03:35] Editor.js component we developed, and a multi-field called comments, which is basically a multi-field for the Editor.js.
All the information displayed in the component, the level required placeholder, description over here, can be authored in the xml configuration the same way we use in in other components. It also supports i18n, so if you have multi-language authoring labels, you can use it also here. The first time we focus the component, we can check that we can start typing on it and we have a plus icon over here.
If we click on it, we can see that there are many options here. They have the text heading, list, table and image. These are all the block components that we are able to use right now in the, in the editor. More can be added if we create a custom plug-in for, for example, a video embed [00:04:35] or something like that. If we have many options here, there is also a filter which allow us for searching for heading, or maybe the image or the list or whatever we are looking for.
Let's start first with the text component, which is the default. We are able to, to type on the editor and whatever we write lorem ipspum, just basic text. The next component we have is the heading where we can place titles for the html tags, H1, H2, H3. We can configure the block element with the six dots over here. We can modify the level from h1 to h6, all the available options as we can see here.
And we also have the ability [00:05:35] to align the text to the left, to the center, or to the right. Let's just align it to the left. And we also have this bottom tab over here where we can move the block one to the top, move it one to the bottom, or just drop. It's also available in the text. Here in the text, we have a lot of options.
Select the style . This is a custom plugin we develop as a class picker. This is a very frequent requested feature by the client where they want to provide a class for a block. In this case, we have some dummy examples for placing the color red, blue, or green, and we can actually remove the style if we want.
Now let's go to the next one. We have already seen the text, the heading. Let's place one for example, for the [00:06:35] record. And the next one is the list. If we click on it, it starts writing an unorder list. We can place the item, item. Item as we would do in any other editor. We can also tab the items. Okay. So we can have many indentation if we want to, or deindent with shift tab.
Okay. And for the element modifiers, we can select the unordered list or ordered list. We also have a select style here in the text component, but in this option we have different values. We can still place the color red or green, but we also have some options for unordered list or ordered list. In the case we have selected [00:07:35] the ordered list, we can use the alphabetical bullet, which places the A B C D format, or we can place the bullet Roman, which uses the the Roman number, numbering.
If we remove the style, it's fallbacks to an numeric one. And for the unordered list, the same. We can place for the circle or a square.
The next one is the table. No much to say here. We have a simple table. We can place some headings, some cells. We can add cells to the left, cells to the bottom. So we can fill all the information or we can leave it empty. We have up two. And we can add columns to the left, to the right, remove one and the same of the rows.
For the modifiers, we have two [00:08:35] modifiers. We can place it with headings in bold or headings default. Let's just place it in bold here and fix this typo over here. And move on to the next component, which is the image component. This is a custom one I already talk about. It opens a button where it says click or drop an image here.
If we click on it an asset picker is open and we can select any photo we want, so let's pick for example, the, the asset image over here and it renders the, the image. If we want to use the other functionality, we can select the image from the AEM side panel and drop it here, and it works the same. The element is rendered.
Now that we have some data here, let's fill the title on the [00:09:35] top and add some comments over here. Let's add some comment one. With maybe another image. Let's drop this one here and a comment two with, for example, a list on it, item one, item two, so have some dummy data. Whenever we hit done, all the information is displayed here.
We don't have many styling to the html but it's enough to see that everything is rendered properly. We have the, the title, which is the first input we had. And then the editor information. We had the, the first paragraph we added a heading, the list, table over here with the, with the headings in bold. And we add the two images, and for the comment section the same.
We have the first comment with an image and the second comment with a list. [00:10:35] If we go to View as Published, we can check that it's actually the same. For the renditions we can check that the image over here, both images does used the REN transform from ACS Common.
Now going back to the editor, we still have to take a deep look to the inline tools. So, the inline tools only apply or only are shown when we have some text selected. If we select the epsom text, for example, we have this tool over here which is native from the editor. It's not a plugin from ourself or anything, where you can actually transform the block to any other.
This can be done in the plugin. When you create one, you can provide this option to appear here or not. And the other options we have is the bold. We also have the italic. [00:11:35] And we also have the link feature here. If we click on it, we have an input for a path and a checkbox for open in a new tab. We can either type a full website in the path or we can click the icon and a page picker will open. We can then navigate through our structure tree and select the page we want. Select the end page and open in a new tab. So whenever we save, if we go back to View as Published and refresh the page, we can see that the text is bold, the text is italic and also have a link which is right now not working because we don't have the the sling mapping configuration enabled.
That's pretty much it from the Editor.js implementation of the custom Rich Text Editor in AEM. [00:12:35] Remember that all the features we have seen are also viable inside content fragments and page properties as well as experience fragments. So, don't hesitate. Take a look into it and if you want to, there is more information available in the blog.
Thank you very much.
Jorge Chércoles
Jorge Chércoles is an AEM Backend Developer at 3|SHARE. His passion is coding whether that is at work or outside of work. He loves that it gives him the ability to create things out of nothing. At 3|SHARE, Jorge enjoys the work environment and independence he has while doing his job. He is an Adobe Certified Expert having earned the Adobe Experience Manager Sites Developer certification.