Use Quill as a Rich Text Editor in ASP.NET Core

Thursday, September 19, 2019

Use Quill as a Rich Text Editor in ASP.NET Core

Recently we ran into an issue where our preferred commercial UI components would not work with our preferred UI framework, which for this particular project happened to be Bulma. Specifically, our commercial components only offer Bootstrap or Material for UI support, and when we tried to use either options with our Bulma framework, things would get...not quite 'ugly', but some features did not play well together - at least not with the rich text editor which we really like.

So while looking for a new rich text editor for our project, we encountered Quill, an open-source rich text editor written in Javascript that, unlike TinyMCE or other 'free' components out there, doesn't try to tie you in to any cloud platform or come with other odd strings attached.

Setting up Quill in our project took a little research, but we've managed to put together some fast and easy instructions which we thought would be worth posting.

First, we add in the CDN references at the top of our page:

<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

Then we wire up our <form> tag like so:

<form id="form" asp-controller="OurController" asp-action="SaveData" onsubmit="handleSubmit()">

In our web form, we set up two fields: the first one will be our 'hidden' field for binding back to our ASP.NET model object, and the second field is for our rich text editor, like this:

<input type="hidden" id="jdr" asp-for="@Model.description"/>
<div id="description">
    @Html.Raw(Model.description)
</div>

The whole point of having a rich text editor is to generate 'rich text' i.e. HTML, so we want to make sure that when we go to display it, we're displaying what we're pulling out of our data source. In our data storage we convert this to/from Markdown, but when it comes to our display we're posting HTML - hence the @Html.Raw statement.

Finally, at the bottom of our page, we have some Javascript that binds everything together:

<script>
    let jdQuill = new Quill('#description', {
        theme: 'snow'
      });
    function handleSubmit(){
        console.info('handleSubmit called');
        document.getElementById('jdr').value = jdQuill.root.innerHTML;
    };
</script>

In our case, we have several editor instances, so we set up a more 'permanent' function for the form submit. It also took some research to find out that the quill.root.innerHTML value was what will actually give you the value of the rich text editor - it would be nice if the Quill documentation actually said anything about that, instead of finding it on Stack Overflow.