In this tutorial, we will learn how to integrate Classic CK Editor 5 in an elixir form.

CKEditor is an HTML WYSIWYG editor and is open source.

How to integrate it?

CKEditor’s build is available in a CDN (Content Delivery Network). It is hosted on servers spread across the globe. Therefore, its scripts are loaded faster because they are served from the nearest locations to the end user.

If the same version of CK Editor is downloaded on a browser (even from a different website), it is loaded from cache. So, it speeds up the next requests.

Downloading the editor can be done by using <script > tag.

Create Classic Editor

Suppose, we need to add CKEditor to the description field of a form to edit product details. The id of textarea tag is product_description .

The classic editor is added to the form after the page loads and below script runs.

To remove any tools from the editor, we can add tool names to removePlugins in the .create method. Below code removes ‘ImageUpload’ and ‘MediaEmbed’ tools from the CKEditor.

We also have to stop HTML textarea editor to show up before CKEditor is loaded in its place. To do that, we will have to make the textarea hidden as shown below by adding class: ‘invisible’ to the textarea tag.

Once we edit in the CKEditor and submit the form. The editor sends the edited text along with HTML markup to the backend in string format. The edited text in the backend is saved with HTML markup.

For example: In Aviacommerce, we saved the description of a jewelry in bold as shown below.

Description of a product in Aviacommerce

The description for this product in backend got saved with HTML markup as shown below.

Description in backend stored with HTML markup

With this setup, we are ready to serve the front-end with HTML markup we have stored in the backend record description this case.

Front-end Rendering

Let’s discuss how the rendering of HTML happens here. Description containing HTML markup is retrieved from the backend. This is fed to the editor with innerHTML element which renders all the HTML in the description.

With these kinds of editors integrated, applications are subjected to XSS attacks. For example, Aviastore which is a demo application of Aviacommerce experienced this kind of XSS attack when a user tried to input <script> into an editor. Therefore, making the innerHTML run contents of the script tag. Luckily we had anticipated this and handled it on our side.

XSS attack attempt on Aviastore

In AngularSpree also, we created this kind of editor where we wanted to allow innerHTML to be executed along with preventing the XSS attacks. Therefore, we handled this by adding sanitizeHTML pipe . (Click to go to the code) The sanitizeHTML pipe of Angular lets you desanitize HTML only while keeping other sanitization as it is, thereby preventing XSS attacks.

But, to our relief, we do not have to worry about these things with CKEditor. CKEditor handles it on its own. For example, I tried to add some text in bold along with a script in <script> tag. Below is the output.

CKEditor handling sanitization

Above Image shows that CKEditor is handling the rendering of HTML markup while preventing XSS attack by sanitizing malicious script.