How to Integrate a Rich Text Editor into Angular Forms

Out of the box, Angular forms are powerful and versatile. Even though Angular forms are versatile, we’ve found that clients need more flexibility when interacting with their applications. For example, a form isn’t the best medium for generating complex, formatted documents such as an email.

Why not use a word processor or email app?

The short answer is automation, convenience and accuracy. Let’s say a user receives an order and adds it to their system, and they need to confirm that the order has been submitted to the client. Without an integrated email system, they would have to open their external email app and then manually type out an email with that order’s information. This can pose a few problems but the first one that comes to mind is the potential for error when transferring data between two different mediums. Additionally, the information on that order is already stored and available for users to call upon, so why not use that?

Why use a Rich Text Editor?

Again, this boils down to a good user experience and helps limit the potential for user error. Instead of opening Outlook and/or Word to get access to formatting tools, you can integrate a rich text editor and get most, if not all the options you’ll need to create dynamic, formattable data.

Getting Started

For this example, we’re going to use the TincyMCE component for Angular. They have a pretty robust free version and getting an API key is easy. Besides that, it’s used reliably across the internet, most notably in WordPress until they updated their page editors.

Once you’ve created an account and got an API key, you’ll need to add the tinymce-angular component to your project:

Import the component into your module of choice. Note if you add it to a “shared module” you must also export.

Once the component is installed and imported, you now have access to the <editor></editor> component across your project. Wonderful.

Integrating TinyMCE Into A Reactive Form

Sticking with the email example, we’re using Angular’s reactive forms to get this set up. Taking a moment to think about what a basic email needs, we’re going to go with the following model:

• Contact
• Subject
• Message

Assuming we’ve componentized our new email form, our form.component.ts file is going to look like this:

Let’s break down the code above:

The init property in our component contains the configuration for your editor. You can consult the TinyMCE Documentation for the options available to you. The emailForm object is a new instance of reactive form group.

Once this is built, we can start to create our template:

We’re not winning any design awards here – but at this point we do have a perfectly functioning form that uses a rich text editor.

Within the form mockup – you’ll notice the editor component which is bound to the “message” form control in our emailForm object. Binding to a FormGroup instance gives us easy access to validity tracking and to subscribe to any changes in value or validity for that form control. You can learn more about Angular Reactive Forms here.

At this point, we encourage you to play around with the setup on an IDE like StackBlitz.

Displaying Info From TinyMCE

Now that we’re hooked up, we must properly consume the info from our email form. What TinyMCE returns is stringified HTML. So, if we fill out the form and log the value to the console we’ll get this:

If you look at the value of the message key, you’ll see raw HTML with the formatting you created built in! So, if you’re passing this to a backend template, or showing the info in a new component, the formatting is taken care of for you.

A Quick Note on Security

Luckily most programming languages have ways to safely parse and render raw HTML. While TinyMCE and, in our case, Angular have safeguards against malicious script injections, it’s always a good idea to make sure you review the security features built into third-party libraries to avoid potential XSS or SQL Injection.

Prepopulating Your Rich Text Editor

We previously mentioned the ability to prepopulate your form. If you have a specific format for your email, you can inject that into your editor instance. If we revisit the form.component.ts file we can create an exampleEmail object:

As you can see, we can use JavaScript template literals to make the stringified HTML as dynamic as you want.

And that’s a high-level overview of using TinyMCE in your Angular forms. While it’s not appropriate in all situations, it’s a great tool that allows us to give our clients flexibility with forms if/when they need it.

We highly encourage you to look at all features and plugins available in the TinyMCE Documentation. While not a complete replacement for a word processor, TinyMCE has everything from tables, to special characters which gives you a lot of the features you would find in your favorite word processor.

If you want to play around with the example we used above you can fork the project I created in StackBlitz.