Vue +vue-quill-editor+ Element UI使用富文本编辑器(后续更新上传视频、链接、表格....)

如果你们有问题，可以发评论提问，我看见一定回复！！！！！

文章目录

一、基本使用
- 1、下载vue-quill-editor组件
- 2、引入· 富文本组件
- 3、工具栏相关配置
- 4、设置工具栏中文提示
- 5、修改vue-quill-editor字体及字号
- 6、在页面中使用组件
二、扩展使用
- 1、上传图片 - 支持图片拖拽和放大缩小
- 2、上传图片 - 图片动态上传到服务器

一、基本使用

1、下载vue-quill-editor组件

npm install vue-quill-editor -S

2、引入· 富文本组件

方式一：全局引入 (在 main.js文件中)

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'Vue.use(VueQuillEditor)

方式二：按需引入（在单个组件中引用）

import { quillEditor } from 'vue-quill-editor'export default {components: {quillEditor}
}

3、工具栏相关配置

const toolbarOptions = [["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线["blockquote", "code-block", "formula"], // 引用  代码块 插入公式[{ header: 1 }, { header: 2 }], // 1、2 级标题[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表[{ script: "sub" }, { script: "super" }], // 上标/下标[{ indent: "-1" }, { indent: "+1" }], // 缩进[{ direction: "rtl" }], // 文本方向[{ size: [false,"14px","16px","18px","20px","22px","26px","28px","30p,] }], // 字体大小[{ header: [1, 2, 3, 4, 5,6, false] }], // 标题[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色[{ font: ["SimSun","SimHei","Microsoft-YaHei","KaiTi","FangSong","Arial","Times-New-Roman","sans-serif",] }], // 字体种类[{ align: [] }], // 对齐方式["clean"], // 清除文本格式["link", "image", "video", "report"], // 链接、图片、视频、自定义行为
];

4、设置工具栏中文提示

setTitleConfig() {// toolbar标题const titleConfig = [{ Choice: '.ql-insertMetric', title: '跳转配置' },{ Choice: '.ql-bold', title: '加粗' },{ Choice: '.ql-italic', title: '斜体' },{ Choice: '.ql-underline', title: '下划线' },{ Choice: '.ql-header', title: '段落格式' },{ Choice: '.ql-strike', title: '删除线' },{ Choice: '.ql-blockquote', title: '块引用' },{ Choice: '.ql-code', title: '插入代码' },{ Choice: '.ql-code-block', title: '插入代码段' },{ Choice: '.ql-font', title: '字体' },{ Choice: '.ql-size', title: '字体大小' },{ Choice: '.ql-list[value="ordered"]', title: '编号列表' },{ Choice: '.ql-list[value="bullet"]', title: '项目列表' },{ Choice: '.ql-direction', title: '文本方向' },{ Choice: '.ql-header[value="1"]', title: 'h1' },{ Choice: '.ql-header[value="2"]', title: 'h2' },{ Choice: '.ql-align', title: '对齐方式' },{ Choice: '.ql-color', title: '字体颜色' },{ Choice: '.ql-background', title: '背景颜色' },{ Choice: '.ql-image', title: '图像' },{ Choice: '.ql-video', title: '视频' },{ Choice: '.ql-link', title: '添加链接' },{ Choice: '.ql-formula', title: '插入公式' },{ Choice: '.ql-clean', title: '清除字体格式' },{ Choice: '.ql-script[value="sub"]', title: '下标' },{ Choice: '.ql-script[value="super"]', title: '上标' },{ Choice: '.ql-indent[value="-1"]', title: '向左缩进' },{ Choice: '.ql-indent[value="+1"]', title: '向右缩进' },{ Choice: '.ql-header .ql-picker-label', title: '标题大小' },{ Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },{ Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },{ Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },{ Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },{ Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },{ Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },{ Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },{ Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },{ Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },{ Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },{ Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },{ Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },{ Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },{ Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },{ Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }];for (const item of titleConfig) {const tip = document.querySelector(".quill-editor " + item.Choice);if (!tip) continue;tip.setAttribute("title", item.title);}
},// 使用
mounted() {this.$nextTick(() => {this.setTitleConfig();});
},

5、修改vue-quill-editor字体及字号

修改字体和字号

import { Quill } from "vue-quill-editor";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'//自定义样式一定要在原插件css下面引入
import "@/assets/css/quillEditor.css";
// 自定义字体大小
var sizes = [false,"14px","16px","18px","20px","22px","26px","28px","30px",];
var Size = Quill.import("formats/size");
Size.whitelist = sizes;
// 自定义字体
var fonts = ["SimSun","SimHei","Microsoft-YaHei","KaiTi","FangSong","Arial","Times-New-Roman","sans-serif",];
var Font = Quill.import("formats/font");
Font.whitelist = fonts;
Quill.register(Font, true);

在assets/css文件夹下创建css文件quillEditor.css

/* 字体风格 */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {content: "宋体";font-family: "SimSun";
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {content: "黑体";font-family: "SimHei";
}.ql-snow.ql-picker.ql-font.ql-picker-label[data-value="Microsoft-YaHei"]::before,
.ql-snow.ql-picker.ql-font.ql-picker-item[data-value="Microsoft-YaHei"]::before {content: "微软雅黑";font-family: "Microsoft YaHei";
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {content: "楷体";font-family: "KaiTi";
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {content: "仿宋";font-family: "FangSong";
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {content: "Arial";font-family: "Arial";
}.ql-snow.ql-picker.ql-font.ql-picker-label[data-value="Times-New-Roman"]::before,
.ql-snow.ql-picker.ql-font.ql-picker-item[data-value="Times-New-Roman"]::before {content: "Times New Roman";font-family: "Times New Roman";
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {content: "sans-serif";font-family: "sans-serif";
}.ql-font-SimSun { font-family: "SimSun"; }
.ql-font-SimHei { font-family: "SimHei"; }
.ql-font-Microsoft-YaHei { font-family: "Microsoft YaHei"; }
.ql-font-KaiTi { font-family: "KaiTi"; }
.ql-font-FangSong { font-family: "FangSong"; }
.ql-font-Arial { font-family: "Arial"; }
.ql-font-Times-New-Roman { font-family: "Times New Roman"; }
.ql-font-sans-serif { font-family: "sans-serif"; }/* 字体大小 */
.ql-snow .ql-picker.ql-size .ql-picker-label::before { content: "字体大小"; }
.ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "常规"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {content: "14px";font-size: 14px;
}.ql-size-14px { font-size: 14px; }.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {content: "16px";font-size: 16px;
}.ql-size-16px { font-size: 16px; }.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {content: "18px";font-size: 18px;
}.ql-size-18px { font-size: 18px; }.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {content: "20px";font-size: 20px;
}.ql-size-20px { font-size: 20px; }.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {content: "22px";font-size: 22px;
}.ql-size-22px { font-size: 22px; }.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {content: "26px";font-size: 26px;
}.ql-size-26px { font-size: 26px; }.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {content: "28px";font-size: 28px;
}.ql-size-28px { font-size: 28px; }.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {content: "30px";font-size: 30px;
}.ql-size-30px { font-size: 30px; }/* 段落大小 */
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-item::before {content: "常规";
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before {content: "标题大小";
}/* 默认设置 */
.ql-snow .ql-editor { font-size: 14px; }
/* 查看样式 */
.view-editor .ql-toolbar { display: none; }
.view-editor .ql-container.ql-snow { border: 0; }
.view-editor .ql-container.ql-snow .ql-editor { padding: 0; }
/* 编辑样式 */
.edit-editor .ql-toolbar { display: block; }
.edit-editor .ql-container.ql-snow {border: 1px solid #ccc;min-height: inherit;
}/* 自定义toobar样式设计 --- 根据情况设计 */
/* 工作汇报弹窗 */
.ql-snow.ql-toolbar .ql-formats .ql-report {background: url("@/assets/logo.png") no-repeat;background-size: contain;display: inline-block;height: 18px;margin: 3px 5px;width: 28px;
}

6、在页面中使用组件

基本使用quill-editor

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

<script>
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下面引入  (看上面修改字体字号)
import "@/assets/css/quillEditor.css";
// 导入修改字体及字号 工具栏相关配置 设置工具栏中文提示（详细内容看下边）
import { titleConfig, toolbarOptions } from "@/assets/js/quillEditor";export default {components: {quillEditor,},data() {return {content: ``, //双向数据绑定数据editorOption: {modules: {toolbar: {container: toolbarOptions, //工具栏相关配置handlers: {image: function (value) {if (value) {alert("上传图片");// 调用element的图片上传组件document.querySelector(".avatar-uploader input").click();} else {this.quill.format("image", false);}},},},},placeholder: "请输入正文....",theme: "snow", //主题 snow：有工具栏的；bubble：只有文本域的},};},methods: {// 失去焦点事件onEditorBlur(quill) {console.log('editor blur!', quill)},// 获得焦点事件onEditorFocus(quill) {console.log('editor focus!', quill)},// 准备富文本编辑器onEditorReady(quill) {console.log('editor ready!', quill)},// 内容改变事件onEditorChange({ quill, html, text }) {console.log("内容改变事件", quill, html, text);this.content = html;},//设置工具栏中文提示setTitleConfig() {for (const item of titleConfig) {const tip = document.querySelector(".quill-editor " + item.Choice);if (!tip) continue;tip.setAttribute("title", item.title);// 更改提示信息的内容}},},mounted() {this.$nextTick(() => {this.setTitleConfig();});},
};
</script>

在assets/js文件夹下创建js文件quillEditor.js

import { Quill } from "vue-quill-editor";
// 自定义字体大小
const sizes = [false,"14px","16px","18px","20px","22px","26px","28px","30px",];
const Size = Quill.import("formats/size");
Size.whitelist = sizes;
// 自定义字体
const fonts = ["SimSun","SimHei","Microsoft-YaHei","KaiTi","FangSong","Arial","Times-New-Roman","sans-serif",];
var Font = Quill.import("formats/font");
Font.whitelist = fonts;
Quill.register(Font, true);// 工具栏相关配置
export const toolbarOptions = [["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线["blockquote", "code-block", "formula"], // 引用  代码块[{ header: 1 }, { header: 2 }], // 1、2 级标题[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表[{ script: "sub" }, { script: "super" }], // 上标/下标[{ indent: "-1" }, { indent: "+1" }], // 缩进[{ direction: "rtl" }], // 文本方向[{ size: sizes }], // 字体大小[{ header: [1, 2, 3, 4, 5, false] }], // 标题[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色[{ font: fonts }], // 字体种类[{ align: [] }], // 对齐方式["clean"], // 清除文本格式["link", "image", "video", "report"], // 链接、图片、视频、自定义行为
];// 设置工具栏中文提示
export const titleConfig = [{ Choice: ".ql-insertMetric", title: "跳转配置" },{ Choice: ".ql-bold", title: "加粗" },{ Choice: ".ql-italic", title: "斜体" },{ Choice: ".ql-underline", title: "下划线" },{ Choice: ".ql-header", title: "段落格式" },{ Choice: ".ql-strike", title: "删除线" },{ Choice: ".ql-blockquote", title: "块引用" },{ Choice: ".ql-code", title: "插入代码" },{ Choice: ".ql-code-block", title: "插入代码段" },{ Choice: ".ql-font", title: "字体" },{ Choice: '.ql-list[value="ordered"]', title: "编号列表" },{ Choice: '.ql-list[value="bullet"]', title: "项目列表" },{ Choice: ".ql-direction", title: "文本方向" },{ Choice: '.ql-header[value="1"]', title: "h1" },{ Choice: '.ql-header[value="2"]', title: "h2" },{ Choice: ".ql-align", title: "对齐方式" },{ Choice: ".ql-color", title: "字体颜色" },{ Choice: ".ql-background", title: "背景颜色" },{ Choice: ".ql-image", title: "图像" },{ Choice: ".ql-video", title: "视频" },{ Choice: ".ql-link", title: "添加链接" },{ Choice: ".ql-formula", title: "插入公式" },{ Choice: ".ql-clean", title: "清除字体格式" },{ Choice: '.ql-script[value="sub"]', title: "下标" },{ Choice: '.ql-script[value="super"]', title: "上标" },{ Choice: '.ql-indent[value="-1"]', title: "向左缩进" },{ Choice: '.ql-indent[value="+1"]', title: "向右缩进" },{ Choice: ".ql-size .ql-picker-item:nth-child(2)", title: "标准" },{ Choice: ".ql-align .ql-picker-item:first-child", title: "居左对齐" },{Choice: '.ql-align .ql-picker-item[data-value="center"]',title: "居中对齐",},{Choice: '.ql-align .ql-picker-item[data-value="right"]',title: "居右对齐",},{Choice: '.ql-align .ql-picker-item[data-value="justify"]',title: "两端对齐",},
];

二、扩展使用

1、上传图片 - 支持图片拖拽和放大缩小

安装依赖包，包含编辑器包，拖拽包，缩放包

npm i quill-image-drop-module  -S // 拖拽插件
npm i quill-image-resize-module -S // 放大缩小插件

在组件里引入使用：

import { Quill } from "vue-quill-editor";
import resizeImage from 'quill-image-resize-module' // 图片缩放组件引用
import { ImageDrop } from 'quill-image-drop-module'; // 图片拖动组件引用
Quill.register('modules/imageDrop', ImageDrop); // 注册
Quill.register('modules/resizeImage ', resizeImage ) // 注册

设置editorOption对象

 // 富文本编辑器配置editorOption: {modules: {imageDrop: true,      // 图片拖拽imageResize: {        // 放大缩小displayStyles: {backgroundColor: "black",border: "none",color: "white"},modules: ["Resize", "DisplaySize", "Toolbar"]},toolbar: {container: toolbarOptions, //工具栏handlers: {}},}}

当按照按照以上步骤正确的引入各种插件后，会显示以下报错：
出现这个错误的原因是：插件需要配置webpack支持。

修改根目录下的vue.config.js文件(需要重新运行一下项目)

const { defineConfig } = require("@vue/cli-service");
const webpack = require("webpack");module.exports = defineConfig({transpileDependencies: true,configureWebpack: {plugins: [new webpack.ProvidePlugin({"window.Quill": "quill/dist/quill.js",Quill: "quill/dist/quill.js",}),],},
});

2、上传图片 - 图片动态上传到服务器

组件内调用element的upload组件和vue-quill-editor编辑器

<template><div class="home"><!-- 图片上传组件辅助--><el-uploadclass="avatar-uploader":action="uploadUrl"name="files":show-file-list="false":on-success="uploadSuccess"></el-upload><!--富文本编辑器组件--><quill-editorv-model="content"ref="myQuillEditor":options="editorOption"@change="onEditorChange($event)"></quill-editor></div>
</template>

配置editorOption对象（定义富文本编辑器内的图片上传按钮点击事件，当点击上传图片图标时，触发 upoad 组件的图片上传事件）

    uploadUrl: "#######", // 服务器上传地址content: ``, //双向数据绑定数据editorOption: {modules: {toolbar: {container: toolbarOptions, //工具栏handlers: {image: function (value) {if (value) {alert("上传图片");// 调用element的图片上传组件document.querySelector(".avatar-uploader input").click();} else {this.quill.format("image", false);}},}},}}

methods中，完善 upload图片上传成功事件。图片上传成功后，把图片加载到富文本编辑器内

methods: {// 内容改变事件onEditorChange({ quill, html, text }) {console.log("内容改变事件", quill, html, text);this.content = html;},uploadSuccess(res) {console.log(res, "上传图片");// 获取富文本组件实例let quill = this.$refs.myQuillEditor.quill;// 如果上传成功if (res) {// 获取光标所在位置let length = quill.getSelection().index;// 插入图片，res为服务器返回的图片链接地址quill.insertEmbed(length, "image", res.data[0].servicePath);// 调整光标到最后quill.setSelection(length + 1);} else {// 提示信息，需引入Messagethis.$message.error("图片插入失败！");}},
},

Vue +vue-quill-editor+ Element UI使用富文本编辑器(后续更新上传视频、链接、表格....)相关推荐

element ui html编辑器,Vue + Element UI使用富文本编辑器
第一步下载组件 npm install vue-quill-editor 第二步在需要使用的组件内引入· 富文本组件 import { quillEditor } from 'vue-quill-ed ...
Vue + Element UI 使用富文本编辑器
第一步,先下载组件 npm install vue-quill-editor 第二步,在需要使用的位置引入(富文本组件) import { quillEditor } from 'vue-quill- ...
elementui上传图片加参数_Vue + Element UI使用富文本编辑器
第一步下载组件 npm install vue-quill-editor 第二步在需要使用的组件内引入· 富文本组件 import { quillEditor } from 'vue-quill-ed ...
vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
VUE-element UI使用富文本
富文本使用的是vue-quill-editor 需求: 使用富文本编辑器,上传图文信息.因为vue-quill-editor是将图片转为base64编码,所以当图片比较大(图片数量较多),提交后台时参 ...
学习日志day46（2021-09-10）（1、使用富文本编辑器simditor）
学习内容:学习JavaWeb(Day46) 1.使用富文本编辑器simditor 1.使用富文本编辑器simditor (1)常见的富文本编辑器有simditor.CKEditor.tinymce.k ...
杨老师教你学会使用富文本编辑器KindEditor之添加页面设计
2018-12-06 进行整理本篇文章,主要是解决如何引入富文本编辑器的使用 2019-06-18 进行了二次完善,解决了富文本编辑器的图片上传和附件上传问题本篇文章进行二次更新操作,完善了上传图片 ...
使用富文本编辑器wangEditor完成图片文件的上传
项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等,在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存,这里wangEditor也可以参考wang ...
富文本生成静态html,如何更加安全快速的使用富文本编辑器
众所周知,富文本编辑器是目前用途广泛的前端插件,它可以直接编辑并保存多样化的文本格式.适用于论坛留言,简单文章发布,自定义静态页面等.本文简单对一种安全使用富文本编辑器的方法进行介绍.文章实例文章使 ...