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

admin管理员组

文章数量:1290953

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'?

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'?

• javascript
• quill
• react-quill

Share Improve this question Follow asked Jan 24, 2020 at 20:51 Page COWPage COW 76533 gold badges1818 silver badges4141 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

You can change only CSS if want continue use modules and formats options and not raw HTML.

CSS mode:

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]:before, .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]:before {
    content: "<new-text-here>";
}

It's important to notice that each data-value is your value in header.

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./1.3.6/quill.js"></script>

<!-- Include stylesheet -->
<link href="https://cdn.quilljs./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 plex, it'll allow you to achieve exactly what you want.

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

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

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

<!-- Include stylesheet -->
<link href="https://cdn.quilljs./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>

****

****

---

jjj

---

本文标签： javascriptHow to change default Heading names in QuillJS (reactjs)Stack Overflow