Logo

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();
                            });

                            

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Shopping Cart

iBlender The best kitchen gadget in 2020
$ 350 for 5
SmartCleaner Smart tool for cooking
$ 650 for 4
CameraMax Professional camera for edge cutting shots
$ 150 for 3
4D Printer Manufactoring unique objects
$ 1450 for 7
MotionWire Perfect animation tool
$ 650 for 7

Select A Demo