How to use?
Add the following library Quill stylesheet and script in your page.
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="./assets/vendor/quill/dist/quill.snow.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./assets/vendor/quill/dist/quill.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// INITIALIZATION OF QUILLJS EDITOR
// =======================================================
var quill = $.HSCore.components.HSQuill.init('.js-quill');
});
</script>
Basic example
<!-- Quill -->
<div class="quill-custom">
<div class="js-quill" style="min-height: 15rem;"
data-hs-quill-options='{
"placeholder": "Type your message...",
"modules": {
"toolbar": [
["bold", "italic", "underline", "strike", "link", "image", "blockquote", "code", {"list": "bullet"}]
]
}
}'>Creative mind at Htmlstream
</div>
</div>
<!-- End Quill -->
Extend
By assigning a variable, you can call the standard methods of the plugin:
<script>
$(document).on('ready', function () {
// INITIALIZATION OF QUILLJS EDITOR
// =======================================================
var quill = $.HSCore.components.HSQuill.init('.js-quill');
quill.getLength();
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-quill-options='{
...
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-quill-options='{}'. For more detailed or missing attributes/functions, see the official Quill documentation page.
| Parameters | Description | Default value |
|---|---|---|
|
|
Theme for editor | snow |