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！

一些初始的粗体文字

我错过了什么？

感谢您的帮助。

Answer 1

创建容器（<div id="editor">）后，需要初始化Quill编辑器。

另外，我建议您在下次遇到问题时发布之前检查开发者控制台。这是非常宝贵的帮助。

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

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

</body>
</html>

Answer 2

看起来你好几次包括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>

Quill文本编辑器不起作用

2 个答案: