Simplifying IT, Empowering Businesses

Creating Ionic apps is generally more convenient thanks to the cross-platform compatibility the toolkit offers. Today, our DEV IT engineers will explain the process of using ionic to build React applications via a Rich Text Editor. 

Let’s first discuss Rich Text Editor

A Rich Text Editor is an editor which supports formatting options, such as Font, Color, Size, Text Alignment, Indent, etc.

A rich text editor easily converts your text to Hypertext Markup Language (HTML) without any interference.  Thanks to this, rich text editors are usually known as WYSIWYG (What you see is what you get) Editors and are the preferred tools for most mobile app development companies out there.

For our example today, we will use Quill Rich Text Editor. Before diving right into it, let’s understand more about Quill Rich Text Editor.

Quill Rich Text Editor

Quill is a free, open-source, and customizable WYSIWYG editor. It is built for the modern web and is an API Driven Rich Text Editor. Quill also supports cross-platform applications, and this makes it an important tool for developers. It’s very easy to implement Rich Text Editor into an Ionic App. 

For today, we will use npm for quill implementation in the Ionic app. 

Follow along with the steps mentioned below: 

Step 1: Run the below commands in your ionic project 

Step 2: Add theme styling bubble.css or snow.css of quill.js to global.CSS 

Step 3: To Enable text selection to add the below code to global.scss. Ionic deactivates user-select everywhere per default. 

Step 4: Import QuillModule to app.module.ts 

Then add QuillModule to imports of NgModule 

Step 5: Import QuillModule particular to page module.ts 

Then add QuillModule to imports of NgModule

Then simply add <quill-editor></quill-editor> to your page.html and done. you can see a nice rich text editor in your app.

Quill Rich Text Editor Configuration Options:

Set required configurations into QuillModule like below: 

Useful Configurations:

• ngModel: Set value and two-way data binding for template-driven form
• formControl/formControlName: Set value and two-way data binding for reactive form
• readOnly: Set true or false for the Read-Only property
• styles: Set style object 
• placeholder: Set placeholder to placeholder
• required: Set true or false for the required field. The default value is false
• maxLength: Set Maximum Length 
• minLength: Set Minimum Length
• sanitize: Set true or false for Angular DomSanitizer to sanitize HTML
• modules: To configure/disable quill modules.
• format: Format provides 4 options “HTML”, “object”, “JSON”, and “text”. Editor set “HTML” as a default format. 

Format options return types:

– html = html string 

– object = quill operation object 

– json = quill operation json 

– text = plain text 

Editor sets all configurations as default. 

Here, I have added modules and desired results as shown below: 

Configuration sample – 1: 

Configuration sample – 2: 

Configuration sample – 3: 

Configuration sample – 4: 

Configuration sample – 5: 

The above configuration provides below functionality:

• superscript/subscript
• outdent/indent
• text direction
• font size & header customize dropdown
• clean all the edit

Quill Rich Text Editor provides the events shown below:

• onContentChanged: It calls when text updates 
• onSelectionChanged: It calls when selection updates 
• onEditorChanged: It calls when text or selection changes 
• onFocus: It calls when the editor focused 
• onBlur: It calls when the editor Blurred 

So, Using the following steps, configuration and methods you can easily implement Quill Rich Text Editor in your Ionic apps. 

Conclusion

We hope you found the information mentioned in this blog useful and easy to follow. If yes, please feel free to share it with your colleagues who may also be benefited from it.

If you have any queries about ionic apps, you can feel free to comment them down below and we will get back to you as soon as possible. Moreover, here is the documentation for the tools used today, and click here for npm-related support.