Following the Quill Quickstart guide, I am trying to use the Quill text editor.
Below is the code.
<html>
<head>
<title></title>
<link href=".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=".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>
But I am not getting expected output. The output I am getting is this:
Hello World!
Some initial bold text
What am I missing?
Thanks for your help.
Following the Quill Quickstart guide, I am trying to use the Quill text editor.
Below is the code.
<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>
But I am not getting expected output. The output I am getting is this:
Hello World!
Some initial bold text
What am I missing?
Thanks for your help.
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Dec 12, 2016 at 7:30 Dheeraj KumarDheeraj Kumar 4,1759 gold badges49 silver badges81 bronze badges 1- Why you add jquery twice ? Jquery mini and jquery not minified ? – Tadeusz Majkowski Commented Oct 30, 2018 at 17:50
2 Answers
Reset to default 13You need to initialize the Quill editor after you have created the container (<div id="editor">).
On a side note, I would suggest checking the developer console before posting the next time you run into problems. It's of invaluable help.
<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 {
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>
Looks like you're including Quill's scripts several times.
Try starting from the example in the 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>