好用的富文本编辑器vue-quill-editor推荐

好用的富文本编辑器vue-quill-editor推荐

---

 

文章目录

• 系列文章目录
• 前言
• 一、vue-quill-editor是什么？
• 二、使用步骤
• 总结

 

---

前言

vue-quill-editor是本文主要讲的富文本编辑器

 

一、vue-quill-editor是什么？

vue-quill-editor是一款好用的富文本编辑器，并且开源

二、使用步骤

现在有很多好用的富文本编辑器，有开源的，也有付费的，下线推荐几款富文本编辑器：

tinyMCE  

ckeditor5

medium-editor

simditor

summernote

wangeditor

kindeditor

draft-js

trumbowyg

jodit

vue-quill-editor

 

 

      tinymce这款编辑器值得推荐（不差钱的公司），这款富文本编辑器功能非常强大，但是是付费的，我们公司是不可能用的，想都不要想 ~F~U~C~K

 

      vue-quill-editor是本文主要讲的富文本编辑器，下面先上图

 

那么我们直击正题，在vue中使用quill呢，我们需要npm进行安装，安装命令如下：

npm install vue-quill-editor --save

执行完这一步就把代码包下载到了本地，下面的应用方式不是全局的，是创建的模板方式应用，与官网的不一样，请老铁勿喷

 

首先在components文件夹下建立Editor文件夹，创建index.vue组件

import Quill from 'quill'import { quillEditor } from "vue-quill-editor";import "quill/dist/quill.core.css";import "quill/dist/quill.snow.css";import "quill/dist/quill.bubble.css";

上面的三个css必须导入，如果不导入富文本编辑器就会变形  

下面给看官老铁门全部的代码，后面有对代码的详解：

<template>  <div>    <!-- 图片上传组件辅助 -->    <el-upload      class="avatar-uploader quill-img"      :action="uploadImgUrl"      name="file"      :headers="headers"      :show-file-list="false"      :on-success="quillImgSuccess"      :on-error="uploadError"      :before-upload="quillImgBefore"      accept='.jpg,.jpeg,.png,.gif'    ></el-upload>​    <!-- 富文本组件 -->    <quill-editor      class="editor"      v-model="content"      ref="quillEditor"      :options="editorOption"      @blur="onEditorBlur($event)"      @focus="onEditorFocus($event)"      @change="onEditorChange($event)"    >    </quill-editor>  </div></template>​<script>import { getToken } from '@/utils/auth'​// 工具栏配置const toolbarOptions = [  ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线  ["blockquote", "code-block"],                    // 引用  代码块  [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表  [{ indent: "-1" }, { indent: "+1" }],            // 缩进  [{ size: ["small", false, "large", "huge"] }],   // 字体大小  [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题  [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色  [{ align: [] }],                                 // 对齐方式  ["clean"],                                       // 清除文本格式  ["link", "image", "video"]                       // 链接、图片、视频];import Quill from 'quill'import { quillEditor } from "vue-quill-editor";import "quill/dist/quill.core.css";import "quill/dist/quill.snow.css";import "quill/dist/quill.bubble.css";import ImageResize from 'quill-image-resize-module'  //添加Quill.register('modules/imageResize', ImageResize)  //添加​​export default {  props: {    /* 编辑器的内容 */    value: {      type: String    },    /* 图片大小 */    maxSize: {      type: Number,      default: 4000 //kb    }  },  components: { quillEditor },  data() {    return {      content: this.value,      uploadImgUrl: "",      editorOption: {        theme: "snow", // or 'bubble'        placeholder: "请输入内容",        modules: {          imageResize: {   //添加            displayStyles: {   //添加              backgroundColor: 'black',              border: 'none',              color: 'white'            },            modules: ['Resize', 'DisplaySize', 'Toolbar']   //添加          },          toolbar: {            container: toolbarOptions,            handlers: {              image: function(value) {                if (value) {                  // 触发input框选择图片文件                  document.querySelector(".quill-img input").click();                } else {                  this.quill.format("image", false);                }              }            }          }        }      },      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址      headers: {        Authorization: 'Bearer ' + getToken()      }    };  },  watch: {    value: function() {      this.content = this.value;    }  },  methods: {    onEditorBlur() {      //失去焦点事件    },    onEditorFocus() {      //获得焦点事件    },    onEditorChange() {      //内容改变事件      this.$emit("input", this.content);    },​    // 富文本图片上传前    quillImgBefore(file) {      let fileType = file.type;      if(fileType === 'image/jpeg' || fileType === 'image/png'){        return true;      }else {        this.$message.error('请插入图片类型文件(jpg/jpeg/png)');        return false;      }    },​    quillImgSuccess(res, file) {      // res为图片服务器返回的数据      // 获取富文本组件实例      let quill = this.$refs.quillEditor.quill;      // 如果上传成功      if (res.code == 200) {        // 获取光标所在位置        let length = quill.getSelection().index;        // 插入图片  res.url为服务器返回的图片地址        quill.insertEmbed(length, "image", res.url);        // 调整光标到最后        quill.setSelection(length + 1);      } else {        this.$message.error("图片插入失败");      }    },    // 富文本图片上传失败    uploadError() {      // loading动画消失      this.$message.error("图片插入失败");    }  }};</script> ​<style>​.editor {  white-space: pre-wrap!important;  line-height: normal !important;  /* height: 192px; */}.ql-editor{  min-height: 450px;}.quill-img {  display: none;}.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>

上面是全部的代码，直接当做模板引用即可

其中vue-quill-editor对图片上传和图片改变大小不太友好，做了简单的更改其中图片上传使用了elementui的upload上传方式，直接访问elementui官网就能有详细的解释，如有不懂的请下面留言，看到后会解答

<!-- 图片上传组件辅助 -->    <el-upload      class="avatar-uploader quill-img"      :action="uploadImgUrl"      name="file"      :headers="headers"      :show-file-list="false"      :on-success="quillImgSuccess"      :on-error="uploadError"      :before-upload="quillImgBefore"      accept='.jpg,.jpeg,.png,.gif'    ></el-upload>

图片改变大小使用的是github上推荐的插件

https://github.com/surmon-china/vue-quill-editor

 

它是vue-quill-editor的一个插件，能够调整vue-quill-editor中插入的图片，非常实用。

安装

npm install quill-image-resize-module --save

引入插件组件

import ImageResize from 'quill-image-resize-module'  //添加Quill.register('modules/imageResize', ImageResize)  //添加

配置工具栏

​// 工具栏配置const toolbarOptions = [  ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线  ["blockquote", "code-block"],                    // 引用  代码块  [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表  [{ indent: "-1" }, { indent: "+1" }],            // 缩进  [{ size: ["small", false, "large", "huge"] }],   // 字体大小  [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题  [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色  [{ align: [] }],                                 // 对齐方式  ["clean"],                                       // 清除文本格式  ["link", "image", "video"]                       // 链接、图片、视频];

还有非常重要的一步，就是要配置build文件夹中的base.conf.js文件，我的是vue.config.js文件，添加下面代码

// 富文本编辑器var webpack = require('webpack');plugins: [      new webpack.ProvidePlugin({        'window.Quill': 'quill/dist/quill.js',        'Quill': 'quill/dist/quill.js'      })    ]

---

总结

各位看官老铁，写这篇文章不容易，请不要diss我

                                                                     请关注