Menu
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?
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.
759
If you are unable to load Quill, or the page is loading slowly, resetting your browser cache often fixes the issue. To clear your cache: On your Chrome browser, click the three vertical dots in the top right corner. Click More Tools, and then Clear Browsing Data.
Quill Rich Text Editor Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.
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">
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">
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.
29
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With