<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();
});
<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();
});
Lorem Ipsum is simply dummy text of the printing and industry.
There are many variations of passages of Lorem Ipsum available.
Contrary to popular belief, Lorem Ipsum is not simply random text.
If you are going to use a passage of Lorem Ipsum, you need.
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details