How to change default Heading names in QuillJS (react-js)?

I have my Quill text editor set up like this in the constructor:

this.modules = {
            toolbar: {
                container: [
                ...
                [{ 'header': [1, 2, false], 3 }],
                ...]
            }
        };

It produces a drop down menu with these names: 'Heading 1', 'Heading 2', 'Normal', 'Heading 3'.

I want to keep the values / functions attached to those names the same. I just want to change the names to: 'Title', 'Subheading', 'Paragraph', 'Small Paragraph'.

How would I change the names to 'Title', 'Subheading', 'Paragraph', 'Small Paragraph'?

Solution

In fact, header behaviour is somewhat unexpected. You can achieve the result you want in two possible ways. The first approach would be to configure the editor's toolbar using HTML, and add a few more details:

var quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: '#toolbar'
  }
});

#toolbar .ql-header {
  width: 160px;
}

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<div id="toolbar">
  <div class="ql-formats">
    <select class="ql-header">
      <option value="1">Title</option>
      <option value="2">Subheading</option>
      <option value="3">Small Paragraph</option>
      <option selected="selected">Normal text</option>
    </select>
    <button class="ql-clean"></button>
  </div>
</div>
<div id="editor">
  <p>Try me...</p>
</div>

I must tell you that it is not possible to set the option false, or normal, or paragraph in the header. I already tried, and unfortunately, the desired result does not appear. And likewise, I have no way of telling you why. In case you want to find out the reason, I suggest you look at header source code.

Therefore, to remove the header formatting and leave the text as normal (as a simple paragraph), you can use the clean format, as shown in the previous example.

A second approach that could be used to solve your problem would be to create a new format. You could configure this new format to receive values, and behave in different ways according to the past value, which would even include removing the format itself if a false value was passed. There is an example of how to do this here. The highlight project (Nº 1) has everything you need.

In summary, the first approach uses two formats to do what you want. If that is not desired, I suggest you take the second approach. Even if it turns out to be a little more complex, it'll allow you to achieve exactly what you want.