Integrating a rich text editor into Angular Forms
Published
March 11, 2020
Microsoft continues to develop their business intelligence stack, recently taking the next step to create a concise and unified ecosystem by enabling shared datasets. For businesses that rely solely on the Microsoft stack for their warehouses, SQL Service Analysis Services (SSAS) and Visual Studio have been the rule of thumb for data modelers, but Microsoft is changing this paradigm.
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 breakdown 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.