重新定位鹅毛笔文本编辑器的工具栏

Question

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

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

注意：我使用的是主题雪

Answer 1

您可以创建自己的自定义工具栏元素并将其注册到 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 复制现有工具栏。使用自定义工具栏，您还可以移动按钮并根据需要设置它们的样式。

Answer 2

对于那些有同样问题并且正在使用 React 的人来说，这非常简单：

我创建了一个非常基本的自定义工具栏，因为我需要工具栏位于底部而不是顶部。

const CustomToolbar = () => {
  return (
    <div id="toolbar">
      <button className="ql-bold"></button>
      <button className="ql-italic"></button>
    </div>
  );
};

const YourMainComponent = () => {
 return (
  <ReactQuill
   theme="snow"
   value={value}
   onChange={setValue}
   modules={{ toolbar: { container: '#toolbar' } }}
  />

  <CustomToolbar />
 )
}

因为我希望工具栏位于底部，所以我在实际的

ReactQuill

之后渲染它。