Rich text editor...quill use put...

Use div instead of textarea when quilling on mobile....

import dom

 <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>

js.. Be careful to rewrite the image preview method!!.. If not, the default base64 will be used for processing.. That will cause the text to be too long!!!

 // Initialize rich text.. 
            var quill = new Quill('#introduce' , {
                theme: 'snow',
                modules: {
                    toolbar: [
                        [{header: [1, 2, 3, false]}],
                        ['bold', 'italic', 'underline'],
                        [{'list': 'ordered'}, {'list': 'bullet'}],
                        [{'align': []}],
                        [{'font': []}],
                        [{'color': []}, {'background': []}],
                        ['image', 'video']
                    ]
                },
            });
            // Rewrite the editor's image preview method 
            var toolbar = quill.getModule('toolbar' );
            toolbar.addHandler('image', function () {
                var fileInput = this.container.querySelector('input.ql-image[type=file]');
                if (fileInput == null) {
                    fileInput = document.createElement('input');
                    fileInput.setAttribute('type', 'file');
                    fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
                    fileInput.classList.add('ql-image');
                    fileInput.addEventListener('change', function () {
                        if (fileInput.files != null && fileInput.files[0] != null) {
                            var formData = new FormData();
                            formData.append('file', fileInput.files[0]);
                            $.ajax({
                                url: '/home/upload/uploadFormImg',
                                type: 'POST',
                                cache: false,
                                data: formData,
                                processData: false,
                                contentType: false 
                            }).done( function (res) {
                                 // The return value after your image is uploaded successfully... so the format is up to you! 
                                console.log(res);
                                 var range = quill.getSelection( true ) ;
                                quill.insertEmbed(range.index, 'image', res.data[0]);
                                quill.setSelection(range.index + 1);
                            }).fail(function (res) {
                            });
                        }
                    });
                    this.container.appendChild(fileInput);
                }
                fileInput.click();
            });

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324520145&siteId=291194637