重新定位 quill 文本编辑器的工具栏

Question

我想将 quill 文本编辑器的工具栏从其默认位置分离，并将其放置在一个完全独立的 div 中。我该怎么做？

我还想编辑顺序以及将工具栏放在单独的 div 后显示哪些工具。

注意：我正在使用主题雪

Answer 1

您可以创建自己的自定义工具栏元素和register it with Quill。

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

要获取工具栏的 HTML，您可以使用浏览器 Devtools 复制现有工具栏。使用自定义工具栏，您还可以移动按钮并根据需要设置样式。