Quill을 사용하여 텍스트를 선택/클릭 한 사용자 정의 div를 추가 하시겠습니까?

Question

이 demo에는 '제목 1', '제목 2'및 '보통'옵션이있는 드롭 다운 메뉴가 있습니다. div 클래스를 사용하여 내 옵션 (또는 드롭 다운 대신 새 버튼 추가)을 사용하여 사용자 정의 할 수있는 방법을 찾고 있습니다.

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

내가 어떻게해야합니까 예를 들어, 나는 "myThing"라는 새로운 옵션을 추가 할 수 있으며,이 회전이에

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

?

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>