Question

在这个demo中，有一个下拉选项＆＃34;标题1＆＃34;，＆＃34;标题2＆＃34; ＆＃34;正常＆＃34;。我正在寻找一种方法来使用div类自定义（或添加新按钮而不是下拉列表）。例如，我想添加一个名为＆＃34; myThing＆＃34;的新选项。它变成了这个：

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

进入这个：

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

我该怎么做？

Answer 1

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

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以选择/单击文本？

1 个答案: