quil - 我已经导入了安装的羽毛笔，但是用户界面的问题

Question

好吧，我按照示例 https://www.youtube.com/watch?v=Sh3_k_QPGzw

我没有得到任何示例中所示的 Quill 工具栏

<div style="text-align:center">
<div class="container-fluid">
<div class="row pt-5">
<div class="col-md-8">

<form [formGroup]="editorForm" (ngsubmit)="onSubmit()">
<div class="form-group">
      <label for="editor"><h3>editor</h3></label>
      <quill-editor></quill-editor>
    </div>
  </form>
</div>

Answer 1

我刚试过你的例子：

<div class="form-group">
    <label for="editor"><h3>editor</h3></label>
    <quill-editor></quill-editor>
</div>

结果：

它可以很好地显示所有标准工具栏项目，因此请确保您还导入quill.snow.css并quill.bubble.css

<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">

在你的 html 和

@import "./app/quill/quill-emoji.css";
@import "./app/quill/quill-mention.css";

在你的styles.css.

如果您使用自己的自定义工具栏容器，您还需要在其中创建按钮。

来自官方文档：

var quill = new Quill('#editor', {
  modules: {
    toolbar: {
      container: '#toolbar',  // Selector for toolbar container
      handlers: {
        'bold': customBoldHandler
      }
    }
  }
});

因为容器选项很常见，所以也允许使用顶级简写。

var quill = new Quill('#editor', {
  modules: {
    // Equivalent to { toolbar: { container: '#toolbar' }}
    toolbar: '#toolbar'
  }
});

官方文档和一些很好的例子：

• 工具栏上的文档

• 例子

• Stackblitz 示例

• 带有自定义工具栏容器的 CodePen 示例