CODEWITHSUNDEEP
javascripthtmlquill
user2620460
user2620460

Reputation: 188

Quill themes not working

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.

Upvotes: 10

Views: 16009

Answers (4)

Vadim Plisko
Vadim Plisko

Reputation: 21

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>

Upvotes: 1

Michael Seltenreich
Michael Seltenreich

Reputation: 3488

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.

Upvotes: 2

Hellen Fiallos
Hellen Fiallos

Reputation: 99

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

Upvotes: 8

jhchen
jhchen

Reputation: 14767

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

Upvotes: 16

Related Questions