Quill: Thêm công cụ mới vào Toolbar - Part 3

Ở bài viết này, chúng ta sẽ tìm hiểu sâu hơn vào toolbar. Sau đó thêm 1 nút trên toolbar cho phép người dùng làm 1 tính năng mới.
Do Quill hỗ trợ toolbar bằng Javascript với HTML, nên chúng ta sẽ có ví dụ được viết bằng cả 2 cách

Sử dụng Javascript Array

Khai báo button mới trong toolbar container:

• Khai báo button trong toolbar container
• Khai báo event cho new button đó
• Khai báo css cho new button

Khai báo button trong toolbar:

['<new-button-name>']

Để xử lý event khi user click vào button, bạn khai báo event cùng tên với button 'new-button-name':

handlers: {
    "example1": function () {
        this.quill.insertText(this.quill.getSelection().index, 'Hello', 'link', 'https://nhatkyhoctap.blogspot.com');
        console.log(this.quill.getText())
    }
}

Hàm insertText

insertText(index: Number, text: String, source: String = 'api'): Delta
insertText(index: Number, text: String, format: String, value: any,
           source: String = 'api'): Delta
insertText(index: Number, text: String, formats: { [String]: any },
           source: String = 'api'): Delta

Để thêm nội dung hiển thị trong button, bạn khai báo trong css:

.ql-example1:after {
    content: "Ω";
}

.ql-example1 {
    margin-bottom: 0.3em;
}

Đoạn code đầy đủ:

var toolbar = {
    container: [
        //...
        ['video'],
        ['image'],
        ['example1'],['clean']
    ],
    handlers: {
        "example1": function () {
            this.quill.insertText(this.quill.getSelection().index, 'Hello', 'link', 'https://nhatkyhoctap.blogspot.com');
            console.log(this.quill.getText())
        }
    }
};

Sử dụng HTML container

Khai báo ql-example2 trong thẻ div toolbar

<form id="form" asp-controller="Home" asp-action="SaveData" onsubmit="handleSubmit()">
    <input type="hidden" id="jdr" asp-for="@Model.Content" />
    <div id="toolbar">
        <!-- Add font size dropdown -->
        <select class="ql-size">
            <option value="small"></option>
            <!-- Note a missing, thus falsy value, is used to reset to default -->
            <option selected></option>
            <option value="large"></option>
            <option value="huge"></option>
        </select>
        <!-- Add a bold button -->
        <button class="ql-bold"></button>
        <!-- Add subscript and superscript buttons -->
        <button class="ql-script" value="sub"></button>
        <button class="ql-script" value="super"></button>
        <button class="ql-example2"><span>♥</span></button>
    </div>
    <div id="editor">
        @Html.Raw(Model.Content)
    </div>
    <input type="submit" value="Save data" />
</form>
<div id="editor"></div>

Xử lý Javascript

var toolbar2 = {
  container: "#toolbar",
  handlers: {
        example2: insertHeart
  }
}
function insertHeart() {
    const cursorPosition = jdQuill.getSelection().index;
    jdQuill.insertText(cursorPosition, "♥");
    jdQuill.setSelection(cursorPosition + 1);
}
var jdQuill = new Quill('#editor', {
    modules: {
        toolbar: toolbar2//toolbar//toolbarOptions
    },
    theme: 'snow'
});