android 富文本编辑器_Vue实战VueQuillEditor富文本编辑器

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

简介

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

01

首先我们看一下引入后的富文本编辑器

02

安装Vue-Quill-Editor

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

npm install vue-quill-editor -S

03

在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)

04

在页面中布局

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

05

初期化定义控件

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

扫码关注我们

本人原创请不要侵权