Laravel 中的 Quill：工具栏不响应点击事件

Question

我在 Laravel 中使用鹅毛笔编辑器。工具栏有问题。当我单击工具栏的按钮时，它没有响应。这是我的代码：

<div id="editor-container">  </div>
...
<!-- Initialize Quill editor -->
<script>
    var quill = new Quill('#editor-container', { theme: 'snow'});
</script>

Answer 1

您的问题与 Vue 和 Quill 兼容性有关。

默认情况下，Laravel 将加载 Vue 并挂载到

#app

元素。

#app

元素是应用程序的根元素。所以当你加载 Quill 时，它不起作用。

为了使其发挥作用，您可以：

• 使用 vue-quill-editor。
• 安装到视图中的其他元素，而不是

  #app

• 不要使用 Vue 或不要在您的视图中加载 Vue。

Answer 2

试试这个代码

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

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