How To Integrate WYSIWYG Editor in Elixir/Phoenix application
Tutorial on how to integrate WYSIWYG editor in an Elixir/Phoenix Application
What is WYSIWYG Editor?
Gmail's composing email editor shown below has various tools such as Bold, Italic, Bullets, Paragraphs, underline, Image attaches, link, etc. for users to format text. This enables the sender to format text in the email exactly same as he wants the receiver to see it without getting into the markup.
Formatting text in traditional text fields is not possible and hence the text is rendered in a single line which does not look good.
As the name suggests, What You See Is What You Get (WYSIWYG) editor returns the exactly formatted text as the user had added. These editors conceal the markup and allow the Web page developer to think entirely in terms of how the content should appear.
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.
The description for this product in backend got saved with HTML markup as shown below.
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.
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.
Above Image shows that CKEditor is handling the rendering of HTML markup while preventing XSS attack by sanitizing malicious script.
You can refer to this cool blog where DomSanitizer in Angular is explained.
AVIACOMMERCE: OPEN SOURCE E-COMMERCE
Aviacommerce is an open source e-commerce framework. It does not compromise on speed and reliability. Check it out on www.aviacommerce.org
If you enjoyed this story, please click the 👏 button and share to help others find it! Feel free to leave a comment below.
