How to create a rich text editor with Quill

At one time or another we’ve all used a rich text editor on the Web; if you’ve ever used WordPress, you’ve used one.

These types of editor are great for projects where you want to give the user the ability to edit something—such as a comment, or formatted message—but don’t want to ask them to use markup.

Today we’re going to look at doing this, using Quill, a JavaScript plugin built for the purpose.

Getting started

If you visit the Quill homepage and scroll a little you’ll see the download button. Click that to download the zip file containing everything you need to get started.

Next, you need to include the .js file and the Snow CSS theme:

<link rel="stylesheet" href="css/quill.snow.css">
<script src="js/quill.js"></script> 

These are the only two files you need to start with.

The HTML

This plugin is heavily dependent on HTML and most of the code is there, rather than in the JavaScript, so depending on how complex you want your editor to be you may need a lot of markup.

In my case I want to add buttons to:

  • Make the selected text bold.
  • Make it italic.
  • Underline it.
  • Strike it.
  • Change the text size.
  • Add a link to the selected text.

So first, let’s create the toolbar element that will hold all this:

<div id="toolbar" class="sc-toolbar-container toolbar">

</div>

The next step is to create the HTML for our buttons, I want them to have the theme’s style so I will add some extra classes, but those classes (for example: sc-format-button) aren’t necessary for the editor to work:

<div id="toolbar" class="sc-toolbar-container toolbar">
  <div class="sc-format-group">
      <span class="sc-bold sc-format-button"></span>
      <span class="sc-italic sc-format-button"></span>
      <span class="sc-strike sc-format-button"></span>
      <span class="sc-underline sc-format-button"></span>
      <span class="sc-link sc-format-button"></span>
      <span class="sc-format-separator"></span>
  </div>
</div>

As you can see I first defined a group that will hold all these buttons and then created all the buttons using assigned classes.

I added bold, italic, strike, underline and link options and then a separator.

The separator is just for show since we will now be adding the dropdown for the font size:

<select class="sc-size">
    <option value="small">Small</option>
    <option value="normal">Normal</option>
    <option value="large">Large</option>
</select>

Just add this bit of code before the closing toolbar tag and our toolbar is done, all we really need to do now is add an editor div where we will write everything:

<div id="editor">
  <p>Hello World!</p>
  <p>This is just some sample text you can <b>delete</b>.</p>
</div>

As you can see I simply added a div with some text in it to serve as sample text, but you can leave this div empty if you wish.

Finishing with JavaScript

Now that our HTML is all done we just need to connect all the pieces with JavaScript.

First of all we need to instantiate a new Quill object and pass the id of the div where we want the editor to be as a parameter.

var editor = new Quill('#editor');

If you test it out you can see that the editor does indeed work but in a very rudimentarily way: the buttons don’t really do anything and that is not what we want, to get the editor we want we must add some modules:

var editor = new Quill('#editor', {
   modules: {
    'toolbar': { container: '#toolbar' },
    'link-tooltip': true
  },
}); 

As you can see I added two simple modules, one to identify the toolbar and make it work properly and one to let Quill know we do have a link button and we want to activate the link-tooltip module.

The last thing to do in order to have our rich text editor work perfectly is to add the theme to it:

var editor = new Quill('#editor', {
   modules: {
    'toolbar': { container: '#toolbar' },
    'link-tooltip': true
  },
  theme: 'snow',
});

After we have this done our rich text editor is ready to be used by our the users.

If you want to see a demo of this code working you can check out this pen I created.

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website. More articles by Sara Vieira
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress