Vue实战Vue-Quill-Editor富文本编辑器

     做博客系统、商城系统、cms系统等系统的时候需要自动生成网页，自动生成多媒体等图片网页的时候我们就用到了富文本编辑器。以前用jquery的时候经常使用的有百度富文本编辑器UEditor，不过因为后期自适应不大好使，也就换成别的了，有时候用过Ckeditor。自从用了element ui后打算做一个博客系统，后来就研究了一下Vue-Quill-Editor，嵌入到element ui中。Vue-Quill-Editor，这是一款基于Quill、适用于Vue的富文本编辑器。

1.安装Vue-Quill-Editor

接下来我们看一下怎么安装Vue-Quill-Editor富文本编辑器，首先用cmd运行打开vue的项目路径。运行Vue-Quill-Editor的安装语句

npm install vue-quill-editor -S

2.在vue页面中引入vue-quill-editor

 import 'quill/dist/quill.core.css';
 import 'quill/dist/quill.snow.css';
 import 'quill/dist/quill.bubble.css';
 import {
    quillEditor,
    // Quill
  } from 'vue-quill-editor';
  import * as Quill from 'quill' //引入编辑器
  import {
    container,
    ImageExtend,
    QuillWatch
  } from 'quill-image-extend-module'
  Quill.register('modules/ImageExtend', ImageExtend)

3.在页面中布局

  <div prop="content">
          <quill-editor ref="myTextEditor" v-model="Articleform.content" :options="editorOption"></quill-editor>
  </div>

4.初期化定义控件

export default {
  name: 'content_VueEditor',
  data: function() {
    return {
      userInfo: {},
      content: '',
      editorOption: {
        modules: {
          ImageExtend: {
            loading: true, // 可选参数 是否显示上传进度和提示语
            name: 'file', // 图片参数名
            size: 3, // 可选参数 图片大小，单位为M，1M = 1024kb
            action: constHelp['WEBAPIURL'] + 'blog/ArticleUpload', //服务器地址, 如果action为空，则采用base64插入图片
            // response 为一个函数用来获取服务器返回的具体图片地址
            // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
            // 则 return res.data.url
            response: (res) => {
              return res.data;
            },
            headers: (xhr) => {}, // 可选参数 设置请求头部
            start: () => {}, // 可选参数 自定义开始上传触发事件
            end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
            error: () => {}, // 可选参数 自定义网络错误触发的事件
            change: (xhr, formData) => {} // 可选参数 选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
          },
          toolbar: {
            handlers: {
              'image': function() {
                QuillWatch.emit(this.quill.id)
              }
            },
            container: [
              ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
              ["blockquote", "code-block"], // 引用  代码块
              [{
                header: 1
              }, {
                header: 2
              }], // 1、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]
              }], // 标题
              [{
                color: []
              }, {
                background: []
              }], // 字体颜色、字体背景颜色
              [{
                font: []
              }], // 字体种类
              [{
                align: []
              }], // 对齐方式
              ["clean"], // 清除文本格式
              ["link", "image", "video"] // 链接、图片、视频
            ], //工具菜单栏配置
          }
        },
        placeholder: '请在这里留下您的痕迹', //提示
        readyOnly: false, //是否只读
        theme: 'snow', //主题 snow/bubble
        syntax: true, //语法检测
      }
    }
  },
  created() {
  },
  components: {
    quillEditor
  },
  methods: {
    onEditorChange({
      editor,
      html,
      text
    }) {
      this.content = html;
    },
    submit() {
      console.log(this.content);
      this.$message.success('提交成功！');
    }
  }
}

总结

    在vue中使用vue-quill-editor基本上就这些配置，不是很高新的技术，只是希望写下来为了大家以后写代码的时候可以复制粘贴，更好的专心于业务，不用太过担心技术上的问题。