鹅毛笔工具栏按钮在Laravel中不起作用

Question

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

<div id="editor-container">  </div>

<script>

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

Answer 1

尝试此代码

<!-- 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>

Answer 2

您的问题与Vue和羽毛笔的兼容性有关。

默认情况下，Laravel将加载Vue并安装到#app元素。 #app元素是您应用程序的根元素。因此，当您加载Quill时，它将无法正常工作。

要使其正常运行，您可以：

• 使用vue-quill-editor。
• 安装到视图中的其他元素，而不是#app
• 请勿在您的视图中使用Vue或加载Vue。