Quill Text Editor
Quill is an, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.
For more info please visit the plugin's Demo Page or Github Repo.
For more info please visit the plugin's Demo Page or Github Repo.
Basic Demo
Compose a message
<div class="card card-custom">
<div class="card-header">
<h3 class="card-title">
Basic Demo
</h3>
</div>
<div class="card-body">
<div id="kt_quil_1" style="height: 325px">
Compose a message
</div>
</div>
</div>
// Class definition
var KTQuilDemos = function() {
// Private functions
var demo1 = function() {
var quill = new Quill('#kt_quil_1', {
modules: {
toolbar: [
[{
header: [1, 2, false]
}],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Type your text here...',
theme: 'snow' // or 'bubble'
});
}
return {
// public functions
init: function() {
demo1();
demo2();
}
};
}();
jQuery(document).ready(function() {
KTQuilDemos.init();
});
Auto Save
Compose a message
<div class="card card-custom">
<div class="card-header">
<h3 class="card-title">
Auto Save
</h3>
</div>
<div class="card-body">
<div id="kt_quil_2" style="height: 325px">
Compose a message
</div>
</div>
</div>
// Class definition
var KTQuilDemos = function() {
// Private functions
var demo2 = function() {
var Delta = Quill.import('delta');
var quill = new Quill('#kt_quil_2', {
modules: {
toolbar: true
},
placeholder: 'Type your text here...',
theme: 'snow'
});
// Store accumulated changes
var change = new Delta();
quill.on('text-change', function(delta) {
change = change.compose(delta);
});
// Save periodically
setInterval(function() {
if (change.length() > 0) {
console.log('Saving changes', change);
/*
Send partial changes
$.post('/your-endpoint', {
partial: JSON.stringify(change)
});
Send entire document
$.post('/your-endpoint', {
doc: JSON.stringify(quill.getContents())
});
*/
change = new Delta();
}
}, 5 * 1000);
// Check for unsaved data
window.onbeforeunload = function() {
if (change.length() > 0) {
return 'There are unsaved changes. Are you sure you want to leave?';
}
}
}
return {
// public functions
init: function() {
demo2();
}
};
}();
jQuery(document).ready(function() {
KTQuilDemos.init();
});
