富文本编辑器...quill 的使用放...

移动端 quill 时候用的 是 div 而不是 textarea....

引入 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..注意要重写图片预览方法!!..如果不重写的话,会使用默认的base64 来处理..那样会造成文本太长!!!

 //初始化富文本..
            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']
                    ]
                }
            });
            //重写编辑器的图片预览方法
            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) {
                                //你的图片上传成功后的返回值...所以格式由你来定!
                                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();
            });
            quill.on('text-change', function (delta, oldDelta, source) {
                //监听文本变化..将值赋给 vue 的shop 对象...
                /*   if (source == 'api') {
                       console.log("An API call triggered this change.");
                   } else if (source == 'user') {

                   }*/
                t.shop.introduce = quill.container.firstChild.innerHTML;
            });