<!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>