Добавить пользовательский div в выбранный / нажал на текст с Quill?

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>