Quill themes not working

Question

I'm a happy amateur trying to build my own website, and thought I'd use Quill as a nice texteditor for articles and stuff. When going through the starting example, it simply doesn't work.

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

It gives me the following error message in the console:

quill Cannot import themes/snow. Are you sure it was registered?

Console Error message screenshot

What am I missing? Where and how am I supposed to register it?

Quick edit:
Should also say I tried with bubble instead (and of course changed the CSS in the head). When I tried with modules I got the same error message for each module as well.

score 16 · Answer 1 · answered Jan 09 '17 at 01:04

16

You are including Quill twice and the second time is a reduced version without themes. Just include the main library:

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

answered Jan 09 '17 at 01:04

jhchen

14,355
14
63
91

Thanks for the answer. It solved my problem. I read somewhere (can't find it now) I should have the core as well for some reason. I tried up upvote your answer, but I couldn't. – user2620460 Jan 09 '17 at 01:19
@jhchen fixed it for me too. user2620460 you probably got it from the Quill website [https://quilljs.com/docs/download/] – ModusPwnens Dec 03 '18 at 23:03

score 8 · Answer 2 · answered Apr 07 '17 at 15:40

8

Core should go before everything else to work.

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

answered Apr 07 '17 at 15:40

Hellen Fiallos

91
1
2

Same issue without doing that: https://drive.google.com/file/d/0B9mk7Iu_--93MjhUZGgtVFB2U2M/view?usp=sharing Give another solution then. – Hellen Fiallos Apr 07 '17 at 20:29
See my answer above – Michael Seltenreich Apr 07 '17 at 21:55

score 2 · Answer 3 · answered Apr 07 '17 at 21:54

Here's a working version on codepen

All it uses is:

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

and for my container I used:

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

The initialization script is the simplest:

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

No errors.

Vadim Plisko · Answer 4 · 2020-05-18T23:09:24.040

So I guess your last loading script is quill core without build in theme. Next code taken from quill website:

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

And it clearly states in comment "Core build with no theme"

In order for you to load 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>

Quill themes not working

4 Answers4