Quill 文本编辑器不工作

Question

在 Quill Quickstart guide 之后，我正在尝试使用 Quill 文本编辑器。

下面是代码。

<html>
  <head>
    <title></title>
    <link href="https://cdn.quilljs.com/1.1.6/quill.snow.css" rel="stylesheet">
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="Scripts/jquery-3.1.1.js"></script>
    <script src="https://cdn.quilljs.com/1.1.6/quill.js"></script>

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

    <style>
      #editor-container {
        height: 375px;
      }
    </style>
  </head>

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

但我没有得到预期的输出。我得到的输出是这样的：

Hello World!

Some initial bold text

我错过了什么？

感谢您的帮助。

Answer 1

看起来您多次包含了 Quill 的脚本。

尝试从 quickstart guide...

中的示例开始

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.1.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.1.6/quill.js"></script>

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

Answer 2

您需要在创建容器后初始化 Quill 编辑器(<div id="editor">)。

附带说明一下，我建议您在下次运行遇到问题时先检查开发人员控制台。这是非常宝贵的帮助。

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <link href="https://cdn.quilljs.com/1.1.6/quill.snow.css" rel="stylesheet">
  <script src="https://cdn.quilljs.com/1.1.6/quill.js"></script>
  <style>
  #editor {
    height: 375px;
  }
  </style>
</head>
<body>

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

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

</body>
</html>

Quill 文本编辑器不工作

Quill text editor is not working

javascript

jquery

quill