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.

$(function () {
    tinymce.init({
        selector: 'textarea#customRte',
        content_css: '/css/bootstrap.v4.3.1.css',
        plugins: ['lists hr'],
        menubar: 'favs help',
        toolbar: 'undo redo | styleselect | bold italic | numlist bullist | hr',
        toolbar_mode: 'floating',
        tinycomments_mode: 'embedded',
        tinycomments_author: 'Author name',
        formats: {
            alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6', classes: 'text-left' },
            aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6', classes: 'text-center' },
            alignright: { selector: 'p,h1,h2,h3,h4,h5,h6', classes: 'text-right' },
            alignjustify: { selector: 'p,h1,h2,h3,h4,h5,h6', classes: 'text-justify' }
        },
        style_formats: [
            {
                title: 'Headers', items: [
                    { title: 'Header 1', format: 'h1' },
                    { title: 'Header 2', format: 'h2' },
                    { title: 'Header 3', format: 'h3' },
                    { title: 'Header 4', format: 'h4' },
                    { title: 'Header 5', format: 'h5' },
                    { title: 'Header 6', format: 'h6' }
                ]
            },
            {
                title: 'Inline', items: [
                    { title: 'Bold', icon: 'bold', format: 'bold' },
                    { title: 'Italic', icon: 'italic', format: 'italic' }
                ]
            },
            {
                title: 'Blocks', items: [
                    { title: 'Paragraph', format: 'p' }
                ]
            },
            {
                title: 'Alignment', items: [
                    { title: 'Text Left', selector: 'p,h1,h2,h3,h4,h5,h6', classes: 'text-left', icon: 'alignleft' },
                    { title: 'Text Centre', selector: 'p,h1,h2,h3,h4,h5,h6', classes: 'text-center', icon: 'aligncenter' },
                    { title: 'Text Right', selector: 'p,h1,h2,h3,h4,h5,h6', classes: 'text-right', icon: 'alignright' },
                    { title: 'Text Justify', selector: 'p,h1,h2,h3,h4,h5,h6', classes: 'text-justify', icon: 'alignjustify' }
                ]
            }
        ]
    });
})

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.

Html.RequiresJs("~/Umbraco/lib/tinymce/tinymce.min.js", 1);
Html.RequiresJs("~/Scripts/Custom/tinyMCECustom.js", 2);

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

<div class="container">
    <div class="row mb-5">
        <div class="col mt-2 mb-5">
            <textarea id="customRte">
    Welcome to TinyMCE!
  </textarea>
        </div>
    </div>
</div>

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

TinyMCE RTE

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.