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