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

Vue-Quill-Editor

主流富文本编辑器对比

前言：vue中很多项目都需要用到富文本编辑器，在使用了ueditor和tinymce后，发现并不理想。所以果断使用vue-quill-editor来实现。

wangEditor（国产，基于javascript和css开发的web富文本编辑器，开源免费）优势：轻量简介，最重要的是开源且中文文档齐全。缺点：更新不及时。没有强大的开发团队支撑。
UEditor（百度）优势：插件多，基本曼度各种需求，由百度web前端研发部开发。缺点：插件提交较大，网页加载速度相对就慢了些。使用复杂。属于前后端不分离插件。在使用时需要配置后端的一些东西，使用不便。

Kindeditor （）优势：文档齐全，为中文，阅读方便。缺点：图片上传存在问题，上传历史过多，会全部加载，导致浏览器卡顿。
补充：Tinymce也是一款不错的富文本编辑器，种植，各有优势和劣势，关键是选择一款最适合的就好。因为笔者在开发vue，所以直接使用vue-quill-editor较为方便些。具体看情况使用。

vue-quill-editor基本配置

npm install vue-quill-editor -s

main.js中引入

import Quill from 'quill'
import  VueQuillEditor  from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
import ImageResize from 'quill-image-resize-module' // 图片缩放组件。
import { ImageDrop }  from 'quill-image-drop-module'; // 图片拖动组件。
Quill.register('modules/ImageExtend', ImageExtend)
Quill.register('modules/imageResize', ImageResize)
Quill.register('modules/imageDrop', ImageDrop);

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

使用

需要注意的是toolbar的配置

  1. 只需要填写功能名的    

 加粗 - bold；

     斜体 - italic

     下划线 - underline

     删除线 - strike

     引用- blockquote

     代码块 - code-block

     公式 - formula

     图片 - image

     视频 - video

     清除字体样式- clean

     这一类的引用 直接['name','name']这种格式就好了
  2. 需要有默认值的

 标题 - header 

  [{ 'header': 1 }, { 'header': 2 }] 值字体大小
 
  列表 - list
  [{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered，bullet
 
  上标/下标 - script
  [{ 'script': 'sub'}, { 'script': 'super' }],  值sub，super
 
  缩进 - indent
  [{ 'indent': '-1'}, { 'indent': '+1' }], 值-1，+1等
 
  文本方向 - direction
  [{'direction':'rtl'}]

View Code

结构

<template>
    <div class="edit_wrap">
    <quill-editor v-model="content" ref="quillEditor" :options="editorOption" @blur="onBlur($event)"
        @focus="onFocus($event)" @change="onChange($event)">
    </quill-editor>
    <el-upload class="upload-demo" action="" drag :auto-upload="false" :show-file-list="false"
        :on-change='changeUpload'>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">点击上传</div>
        <div class="el-upload__tip">支持绝大多数图片格式，单张图片最大支持5MB</div>
    </el-upload>
    <button v-on:click="save">保存</button>
    </div>
</template>

<script>
export default {
  name: '',
  data() { 
    return {
        content:'请输入编辑内容',
        editorOption: {
              modules: {
                  imageDrop: true,
                imageResize: {
                  displayStyles: {
                    backgroundColor: 'black',
                    border: 'none',
                    color: 'white'
                  },
                  modules: ['Resize', 'DisplaySize', 'Toolbar']
                },
                toolbar: [
                       ['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'], //清除字体样式
                     ['image', 'video'] //上传图片、上传视频
                 ],
              },
            theme: 'snow',
        }
    }
  },
  props: {

  },
  components:{
  },
  mounted() {

  },
    computed: {
        editor() {
                return this.$refs.quillEditor.quill;
        },
    },
    methods:{
        changeUpload() {},
        onBlur() {}, // 失去焦点事件
        onFocus() {}, // 获得焦点事件
        onChange() {}, // 内容改变事件
        save(event) {
                alert(this.content);
        },
    }
 }
</script>

<style scoped>
</style>

View Code

汉化

汉化只需要更改toolbar工具栏中的样式即可实现

<style>
  .editor {
    line-height: normal !important;
    height: 800px;
  }
  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
      content: '保存';
      padding-right: 0px;
  }
 
  .ql-snow .ql-tooltip[data-mode=video]::before {
      content: "请输入视频地址:";
  }
 
  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
  }
 
  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: '标题1';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: '标题2';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: '标题3';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: '标题4';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: '标题5';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: '标题6';
  }
 
  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
    content: '衬线字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
    content: '等宽字体';
  }
  </style>

View Code

实现以上配置后就可以看到效果如图：

以上就是vue-quill-editor的基本配置了。

本文参考：https://www.cnblogs.com/wjlbk/p/12884661.html

备注：再引入的过程中会出现引入报错的问题报错的主要是依赖的问题，修改vue.config.js文件的 configureWebpack 模块；这个副文本编辑器还是比较简单对于简单需求可以考虑使用；

    configureWebpack: { // webpack 配置
      output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.js】
        filename: `js/[name].[hash:6].vw.js`,
        chunkFilename: `js/[name].[hash:6].vw.js`
        // chunkFilename: `js/[id].vw.js`
      },
      plugins: [
        new webpack.ProvidePlugin({
          'window.Quill': 'quill/dist/quill.js',
          'Quill': 'quill/dist/quill.js'
        })
      ]
    },