Кнопки панели инструментов Quill не работают в Laravel

Question

Я использую Quill Editor в Laravel. Существует проблема с панелью инструментов. Когда я нажимаю на кнопку панели инструментов, она не отвечает. Это мой код:

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

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