Reposition the toolbar of quill text editor

Question

I want to detach the toolbar of quill text editor from its default position and place it in an entirely separate div. How do I do that?

Also I want to edit the order and which tools are shown after placing the toolbar in separate div.

note: I'm using theme snow

person_v1.32 person_v1.32 · Accepted Answer · 2021-05-26T01:44:27

You can create your own custom toolbar element and register it with Quill.

Example code from the docs:

<!-- Create toolbar container -->
<div id="toolbar">
  <!-- Add font size dropdown -->
  <select class="ql-size">
    <option value="small"></option>
    <!-- Note a missing, thus falsy value, is used to reset to default -->
    <option selected></option>
    <option value="large"></option>
    <option value="huge"></option>
  </select>
  <!-- Add a bold button -->
  <button class="ql-bold"></button>
  <!-- Add subscript and superscript buttons -->
  <button class="ql-script" value="sub"></button>
  <button class="ql-script" value="super"></button>
</div>
<div id="editor"></div>

<!-- Initialize editor with toolbar -->
<script>
  var quill = new Quill('#editor', {
    modules: {
      toolbar: '#toolbar'
    }
  });
</script>

To get the HTML for the toolbar, you can use your browser Devtools to copy your existing toolbar. With a custom toolbar, you can also move buttons around and style them however you want.

Reposition the toolbar of quill text editor

1 Answers