使用 Quill 将自定义 div 添加到选定/单击的文本？

Question

在此演示中，有一个下拉菜单，其中包含选项“标题 1”、“标题 2”和“正常”。我正在寻找一种使用 div 类使用我自己的选项（或添加新按钮而不是下拉菜单）进行自定义的方法。例如，我想添加一个名为“myThing”的新选项，结果如下：

<p>Lorem ipsum dolor sit amet</p>

进入这个：

<div class="myThing">Lorem ipsum dolor sit amet</div>

我怎么做？

Answer 1

您可以通过扩展块印迹来做到这一点。如Quilljs 指南的本节所示。只需扩展块印迹，并设置标签和类名即可。例子：

var Block = Quill.import('blots/block');

class MyThing extends Block {}
MyThing.blotName = 'my-thing';
MyThing.className = 'my-thing';
MyThing.tagName = 'div';

Quill.register(MyThing);

var quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      ['my-thing']
    ]
  }
});

.ql-toolbar .ql-my-thing {
  width: 60px !important;
}
.ql-toolbar .ql-my-thing:before {
  content: 'My Thing';
}
.my-thing {
  background: #f00;
  color: #fff;
}

<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>

<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>