Benutzerdefiniertes div zu ausgewähltem/angeklicktem Text mit Quill hinzufügen?

Question

In diesem demo gibt es ein Dropdown mit den Optionen "Überschrift 1", "Überschrift 2" und "Normal". Ich suche nach einer Möglichkeit, das mit meinen eigenen Optionen anzupassen (oder eine neue Schaltfläche anstelle von Dropdowns hinzuzufügen), die div-Klassen verwenden. Zum Beispiel möchte ich eine neue Option hinzufügen „Mything“ genannt und es stellt sich dies:

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

in dieser:

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

Wie kann ich das tun?

Answer 1

Sie können dies tun, indem Sie den Block Blot erweitern. Wie in der this section der Quilljs Guides gezeigt. Erweitern Sie einfach den Block Blot und setzen Sie Ihren Tag und Klassennamen. Beispiel:

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>