logo标签列表

笔和墨水主题无法工作

javascripthtmlquill
10

我是一位快乐的业余爱好者，正在尝试构建自己的网站，并想使用Quill作为文章和其他内容的漂亮文本编辑器。但在进行起始示例时，它根本不起作用。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.quilljs.com/1.1.9/quill.js"></script>
    <link href="https://cdn.quilljs.com/1.1.9/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.1.9/quill.core.js"></script>
    <link href="https://cdn.quilljs.com/1.1.9/quill.core.css" rel="stylesheet">
  </head>
  <body>
    <div id="editor">
      <p>Hello World!</p>
      <p>Some initial <strong>bold</strong> text</p>
      <p><br></p>
    </div>
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>
  </body>
</html>

在控制台中，我收到以下错误信息：

quill无法导入themes/snow。您确定已注册吗？

控制台错误消息截图

我错过了什么？ 我应该在哪里以及如何注册它？

快速编辑：
还应该说明我尝试使用bubble（当然还更改了head中的CSS）。 当我尝试使用modules时，每个模块都会出现相同的错误消息。

4个回答
16

你在代码中重复引用了 Quill，而第二次引用的是没有包含主题的简化版本。请只引用主库：

<script src="https://cdn.quilljs.com/1.1.9/quill.js"></script>
<link href="https://cdn.quilljs.com/1.1.9/quill.snow.css" rel="stylesheet">
谢谢你的回答。它解决了我的问题。我在某个地方读到（现在找不到了），出于某种原因，我应该也有核心。 我试图点赞你的答案，但我无法做到。 - user2620460
@jhchen 也帮我修复了。user2620460，你可能是从 Quill 网站 [https://quilljs.com/docs/download/] 上下载的。 - ModusPwnens
8

核心应该放在所有其他内容之前才能正常工作。

<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.2.3/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.2.3/quill.core.js"></script>

<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.2.3/quill.js"></script>
<script src="//cdn.quilljs.com/1.2.3/quill.min.js"></script>

<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.2.3/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.2.3/quill.bubble.css" rel="stylesheet">
没有采用这种方法的同样问题：https://drive.google.com/file/d/0B9mk7Iu_--93MjhUZGgtVFB2U2M/view?usp=sharing 提供另一种解决方案。 - Hellen Fiallos
请看我上面的答案。 - Michael Seltenreich
2
这里有一个在codepen上可用的版本：链接 它所使用的仅仅是：
<link href="https://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.2.2/quill.js"></script>

我使用了以下容器：

<div id="myDiv"></div>

初始化脚本是最简单的：

var quill = new Quill('#myDiv', {theme: 'snow'});

没有错误。
1

所以我猜你最后载入的脚本是没有内置主题的 quill core。 下面的代码来自 quill 网站：

    <!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>

<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">

<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.3.6/quill.core.js"></script>

在注释中明确指出：“核心构建不带主题”

为了让您加载Quill：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- Include the Quill library -->
    <script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
    <!-- Include stylesheet -->
    <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
</head>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接