Overview Official Website
Quilljs is a lightweight and powerful datetime picker.
Usage
Quilljs's CSS and Javascript files are bundled in the vender.min.css and vendor.js and globally included in all pages.
Snow Editor#
Use snow-editor id to set snow editor.
Hello World!
This is a simple editable area.
- Select a text to reveal the toolbar.
- Edit rich document on-the-fly, so elastic!
End of simple area
<!-- Quill Editors -->
<div id="snow-editor" style="height: 300px;">
<h3><span class="ql-size-large">Hello World!</span></h3>
<p><br></p>
<h3>This is a simple editable area.</h3>
<p><br></p>
<ul>
<li>Select a text to reveal the toolbar.</li>
<li>Edit rich document on-the-fly, so elastic!</li>
</ul>
<p><br></p>
<p>End of simple area</p>
</div>
// Snow theme
var quill = new Quill('#snow-editor', {
theme: 'snow',
modules: {
'toolbar': [[{ 'font': [] }, { 'size': [] }], ['bold', 'italic', 'underline', 'strike'], [{ 'color': [] }, { 'background': [] }], [{ 'script': 'super' }, { 'script': 'sub' }], [{ 'header': [false, 1, 2, 3, 4, 5, 6] }, 'blockquote', 'code-block'], [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }], ['direction', { 'align': [] }], ['link', 'image', 'video'], ['clean']]
},
});
Bubble Editor#
Use bubble-editor id to set bubble editor.
Hello World!
This is a simple editable area.
- Select a text to reveal the toolbar.
- Edit rich document on-the-fly, so elastic!
End of simple area
<!-- Bubble Editors -->
<div id="bubble-editor" style="height: 300px;">
<h3><span class="ql-size-large">Hello World!</span></h3>
<p><br></p>
<h3>This is a simple editable area.</h3>
<p><br></p>
<ul>
<li>Select a text to reveal the toolbar.</li>
<li>Edit rich document on-the-fly, so elastic!</li>
</ul>
<p><br></p>
<p>End of simple area</p>
</div>
// Bubble theme
var quill = new Quill('#bubble-editor', {
theme: 'bubble'
});