Add custom div to selected/clicked on text with Quill?

Question

In this demo there's a dropdown with the options "Heading 1", "Heading 2" and "Normal". I'm looking for a way to customize that with my own options (or adding a new button instead of dropdowns) using div classes. For example, I want to add a new option called "myThing" and it turns this:

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

into this:

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

How do I do that?

Answer 1

You can do this by extending the block blot. As shown in the this section of the Quilljs guides. Just extend the block blot, and set your tag and class name. Example:

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>