Adding TinyMCE to frontend in Umbraco

Adding the TinyMCE to the frontend in a Umbraco website is an easy process, and with the code below can be easy to set-up.

First, we need to create a custom javascript file, and the code for this is below.

Now we have two options, you can copy the entire TinyMCE folder from Umbraco to a new location, or you can reference the tinymce.min.js file from the original location.

In this example, I'm just referencing the file from the default location as can be seen below.

Now add the following HTML to the page you want the TinyMCE editor to appear.

If all goes to plan, you should now have added the TinyMCE to the frontend in Umbraco, as the image below shows

TinyMCE RTE used in front-end of Umbraco website

You need to be careful here, as you are now allowing users to submit HTML to your server. In an upcoming post, I will show you how to sanitize the input before saving it to the server

I hope you find this blog helpful, if yes please leave a comment below

Leave a comment