QuillJS is a beautiful open-source text editor for web applications. In this tutorial I’m going to show you how to configure it, and in the second step we will get the typed text.

You can find the full code here: https://jsfiddle.net/nfandrich/kdhjbo6m/

Step 1: Import QuillJS

Add the following script and the stylesheets to your header element. I recommend downloading the files and uploading them to your web server.

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

Add the jquery library before the closing body tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

Step 2: Initialize Quill

Add a div container where the editor will be loaded.

<div id="editor"></div>

To show quill editor in this container, add a inline script before the closing body tag. What you will get is a basic quill editor. Let’s configure it.

<script>
  var editor = new Quill('#editor', {
    theme: 'snow'
  });
</script>

Step 3: Configure quill

Let’s change and extend the script from step 2 like this:

<script>
  // The activated editor functions
  var toolbarOptions = [
    ['bold', 'italic'],
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    ['link', 'underline', 'blockquote', 'code-block']
  ];

  // Quill configuration
  var options = {
    modules: {
      toolbar: toolbarOptions
    },
    placeholder: 'Type something...',
    readOnly: false,
    theme: 'snow'
  };
  
  // The quill instance
  var editor = new Quill('#editor', options);
</script>

Explanation

• The toolbarOptions array includes all editor functions we want to offer to our users.
• The options array includes some configuration settings. We can choose the editor theme, the placeholder text and much more.

Step 4: Get text from editor

With a simple button, a div container and three lines of javascript we can get the text from the editor like this:

<button id="submit" class="btn btn-primary mt-2">Submit</button>
<div id="editorContent"></div>

Place the following javascript code below the quill instance:

// The quill instance
var editor = new Quill('#editor', options);

$(document).on('click', '#submit', function() {
  $('#editorContent').html(editor.root.innerHTML);
});

If you type something and press the submit button, you will see the text from editor below the button.

Full code here: https://jsfiddle.net/nfandrich/kdhjbo6m/

Sources

• QuillJS Website (https://quilljs.com)

Struggling with image upload in PHP? In this post I explained how to upload images using the package Intervention Image.