quill 富文本编辑器自定义按钮-526互联

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" />


    <div id="toolbar">
        <button class="ql-bold"></button>
        <button class="ql-italic"></button>
        <!-- new add -->
        <button id="add_hr_btn">hr</button>
    </div>

    <div id="editor">
        <p>Hello World!</p>
    </div>

</body>

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

<!-- Initialize Quill editor -->
<script>
    class HR {
        constructor(quill, options) {
            this.quill = quill;
            this.options = options;

            this.container = document.querySelector(options.container);

            const btn = document.getElementById('add_hr_btn');
            btn.onclick = function () { this.update(); }.bind(this);
            // this.update();
        }

        update() {
            let p = document.createElement('p');
            p.setAttribute('style', 'border-bottom: 1px solid red;');
            this.container.appendChild(p);
        }
    }

    Quill.register('modules/hr', HR);

    var quill = new Quill('#editor', {
        modules: {
            toolbar: {
                container: '#toolbar'
            },
            hr: {
                container: '.ql-editor'
            }
        },
        theme: 'snow',
    });
</script>

</html>