使用 Quill 在文本上添加自定义 div 到 selected/clicked？

Question

在此 demo 中有一个下拉菜单，其中包含 "Heading 1"、"Heading 2" 和 "Normal" 选项。我正在寻找一种使用 div 类来使用我自己的选项（或添加新按钮而不是下拉菜单）对其进行自定义的方法。例如，我想添加一个名为 "myThing" 的新选项，它会变成：

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

进入这个：

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

我该怎么做？

Answer 1

您可以通过扩展块印迹来做到这一点。如 Quilljs 指南的 this section 所示。只需扩展 block blot，并设置您的标签和 class 名称。示例：

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>

使用 Quill 在文本上添加自定义 div 到 selected/clicked？

Add custom div to selected/clicked on text with Quill?

quill