How to use
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="./node_modules/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="./node_modules/quill/dist/quill.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../assets/js/hs.quill.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
(function() {
// INITIALIZATION OF QUILLJS EDITOR
// =======================================================
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"}]
]
}
}'>
</div>
</div>
<!-- End Quill -->
Modal example
Text Editor
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Text Editor</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<!-- Quill -->
<div class="quill-custom">
<div class="js-quill" style="min-height: 15rem;"
data-hs-quill-options='{
"placeholder": "Type your message...",
"attach": "#exampleModal",
"modules": {
"toolbar": [
["bold", "italic", "underline", "strike", "link", "image", "blockquote", "code", {"list": "bullet"}]
]
}
}'>
</div>
</div>
<!-- End Quill -->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
Methods
| Parameters | Description | Default value |
|---|---|---|
|
|
Theme for editor | snow |