vue-quill-editor 富文本编辑器 及其图片上传至服务器

vue-quill-editor

安装：

cnpm i -S vue-quill-editor quill

引入：

main.js

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
// 全局引入
import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor)

调用编辑器的组件内部

import {quillEditor} from "vue-quill-editor"; //调用编辑器

使用：

<quill-editor ref="myTextEditor"
              v-model="content"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @ready="onEditorReady($event)"
              @change="onEditorChange($event)"
>
</quill-editor>

    components: {
        quillEditor
    },
    data() {
        return {
        	// 在这里预定义输入内容
            content: ``,
            editorOption: {
                modules: {
                	// 在这里配置项目，按需导入功能
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'],
                        ['blockquote', 'code-block'],
                        [{ 'header': 1 }, { 'header': 2 }],
                        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                        [{ 'script': 'sub' }, { 'script': 'super' }],
                        [{ 'indent': '-1' }, { 'indent': '+1' }],
                        [{ 'direction': 'rtl' }],
                        [{ 'size': ['small', false, 'large', 'huge'] }],
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                        [{ 'font': [] }],
                        [{ 'color': [] }, { 'background': [] }],
                        [{ 'align': [] }],
                        ['clean'],
                        ['link', 'image', 'video']
                    ],
                }
            }
        }
    },
    methods: {
      onEditorBlur(editor) {
        console.log('editor blur!', editor)
      },
      onEditorFocus(editor) {
        console.log('editor focus!', editor)
      },
      onEditorReady(editor) {
        console.log('editor ready!', editor)
      },
      onEditorChange(event) {
        console.log(event.html);
      }, // 内容改变事件
    },

图片上传至服务器

		<!-- 设置其 opacity 为 0 -->
        <input type="file" class="imgPut" @change="imgPut($event)" accept="image/*">
        <!--富文本编辑器组件-->
        <div class="edit_container">
            <quill-editor
                    ref="myQuillEditor"
                    :options="editorOption"
                    @change="onEditorChange($event)"
            >
            </quill-editor>
        </div>

        <div class="submit">
            <el-button type="primary" @click="submit">点击上传</el-button>
        </div>

富文本编辑器配置

    editorOption: {
        modules: {
            toolbar: {
                container: [
                    [{'size': ['small', 'large', 'huge']}],
                    ['bold'],
                    [{'color': []}],
                    [{'align': []}],
                    ['link', 'image'],
                ],
                    handlers: {
                    'image': function (value) {
                        if (value) {
                            document.querySelector('.imgPut').click();
                        } else {
                            this.quill.format('image', false);
                        }
                    }
                }
            },
        }
    },

			// 获取富文本编辑器内容
            onEditorChange(event) {
                this.content = event.html;
            },
            // 提交内容
            submit() {
                this.$http.post('/article', {
                    content: this.content,
                })
                    .then(res => {
                        this.$check(res.data, '文章发布成功', () => {
                            this.content = '';
                            // 还原编辑器的内容
                           this.$refs.myQuillEditor.quill.container.children[0].innerHTML = ''
                        });
                    })
            },
            // 将富文本编辑器的内容上传至服务器，以 url 保存在 content 内
            imgPut(e) {
                let file = e.target.files[0];
                
                let form = new FormData();
                form.append('img', file);

                this.$http.post('/img', form)
                    .then(res => {
                        this.$check(res.data, false, () => {
                            let quill = this.$refs.myQuillEditor.quill;

                            // 获取光标所在位置
                            let length = quill.getSelection().index;
                            // 插入图片，resres.data.imgUrl 为服务器返回的图片链接地址
                            quill.insertEmbed(length, 'image', res.data.imgUrl);
                            // 调整光标到最后
                            quill.setSelection(length + 1)
                        });
                    })
            }

在任意位置使用生成的内容：

<div class="ql-container ql-snow content">
   <div class="ql-editor" ref="content">
   </div>
</div>

this.$refs.content.innerHTML = data.content;// data.content 为 quill 生成的内容

编辑器内输入内容

<!-- content 属性 -->
<quill-editor ref="myQuillEditor" :content="article" :options="editorOption" autocomplete="off" @change="onEditorChange($event)" />

注意 vue-quill-editor 和 element 样式冲突解决

  .quill-editor {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.42;
    height: 100%;
    outline: none;
    padding: 0 !important;
    tab-size: 4;
    -moz-tab-size: 4;
    text-align: left;
    word-wrap: break-word;
  }