Quillでテキストの選択/クリックにカスタムdivを追加しますか？

Question

このdemoには、「見出し1」、「見出し2」、「標準」というオプションがあります。私は自分のオプションでカスタマイズする方法を探しています（またはドロップダウンの代わりに新しいボタンを追加する）divクラスを使用しています。例えば、私は「myThing」と呼ばれる新しいオプションを追加したい、それがこのターン：この中

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