目录

基础使用：

进阶版：

使用 el-upload 图片上传：

进阶版2.0：

可拖动调整图片大小：

基础使用：

富文本编辑器：

此方法得到的图片为base64编码，图片上传在下面。

npm install vue-quill-editor –save

直接使用：

<template><div>富文本编辑器<quill-editor ref="myQuillEditor" v-model="value" :options="editorOption" /><el-button type="primary" size="mini" @click="submit">确认</el-button></div></template><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";export default {components: {quillEditor,},data() {return {value: "", //富文本内容editorOption: {},//配置};},mounted() {},methods: {// 获取编辑数据submit() {console.log(this.$refs["myQuillEditor"].value);},},};</script>

------------------------------------------------------------------------------------------------------------------------

进阶版：

编辑器 使用 el-upload 图片上传：

效果图：

先npm下载

npm install vue-quill-editor –save

页面引入

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

html代码：

<el-uploadv-show="false"id="quill-upload"ref="quill-upload":action="serverUrl":headers="headers"name="file"multiple:limit="3"list-type="picture":show-file-list="false":before-upload="beforeUpload":on-error="uploadError":on-success="handleExceed"><el-button size="small" type="primary"></el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload><el-row v-loading="uillUpdateImg"><quill-editorref="myQuillEditor"@change="onEditorChange($event)"v-model="value":options="editorOption"/></el-row><el-button type="primary" size="mini" @click="submit">确认</el-button>

data数据：图片上传的地址serverUrl需要改动，不需要token的话去掉headers

//因为是组件所以需要挂载components: {quillEditor,},data() {return { headers: "",//请求头uillUpdateImg: false, //根据图片上传状态来确定是否显示loading动画serverUrl: "https://api/xxxxxxxx", //上传的图片服务器地址value: "", //富文本内容editorOption: {//符文本编辑器的配置placeholder: "",theme: "snow",modules: {toolbar: {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"], // 清除字体样式["image"], // 上传图片、上传视频],handlers: {image: function (value) {if (value) {// 给个点击触发Element-ui，input框选择图片文件document.querySelector("#quill-upload input").click();} else {this.quill.format("image", false);}},},},},},},};

图片上传需要token

mounted() {let token = localStorage.getItem("user_token");this.headers = {Authorization: token,};},

图片上传的事件：

methods: { // 富文本编辑器上传图片onEditorChange({ quill, html, text }) {//富文本编辑器内容发生改变的时候this.value = html;this.$emit("textChange", html); //将富文本编辑器输入的文本发送给父组件，父组件涉及提交添加或者更改},beforeUpload() {//上传图片之前开启loadingthis.uillUpdateImg = true;},uploadError() {//图片上传失败,关闭loadingthis.uillUpdateImg = false;this.$message.error("图片插入失败");},handleExceed(response, file, fileList) {//图片添加成功let quill = this.$refs.myQuillEditor.quill;console.log(response);if (response.code == 200) {let length = quill.getSelection().index;// 插入图片 response.data.url为服务器返回的图片地址quill.insertEmbed(length, "image", response.data.data);// 调整光标到最后quill.setSelection(length + 1);} else {this.$message.error("图片插入失败");}this.fileList = fileList;this.uillUpdateImg = false;},// 编辑好的数据submit() {console.log(this.$refs["myQuillEditor"].value);},},

此时的图片不可以拖动改变大小

默认的文本编译可以只能设置字体[{size:['small',false,'large','huge']}]，如果要设置12px,16px这样的需要增加设置：修改依赖包中的代码，引入Quill下面加

import { Quill,quillEditor } from "vue-quill-editor";import "quill/dist/quill.core.css";import "quill/dist/quill.snow.css";import "quill/dist/quill.bubble.css";// 自定义字体大小let Size = Quill.import('attributors/style/size')Size.whitelist = ['10px', '12px', '16px', '18px', '20px','22px','24px','26px','28px', '30px', '32px','40px',]Quill.register(Size, true)// 自定义字体类型var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif']var Font = Quill.import('formats/font')Font.whitelist = fontsQuill.register(Font, true)

然后再建一个css文件引入进去

css内容：

.editor {line-height: normal !important;height: 300px;}.SizeTiShi{font-size: 12px;color: #999999;text-align: right;/* margin-right: 20px; */margin-top: 60px;}.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' !important;font-size: 14px;}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before {content: '10px' !important;font-size: 10px;}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {content: '12px' !important;font-size: 12px;}.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' !important;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' !important;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' !important;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' !important;font-size: 22px;}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {content: '24px' !important;font-size: 24px;}.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' !important;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' !important;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' !important;font-size: 30px;}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='32px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='32px']::before {content: '32px' !important;font-size: 32px;}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='40px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='40px']::before {content: '40px' !important;font-size: 40px;}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before {content: '文本' !important;}.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' !important;}.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' !important;}.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' !important;}.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' !important;}.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' !important;}.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' !important;}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before {content: '标准字体' !important;}.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: '衬线字体' !important;}.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: '等宽字体' !important;}.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: "宋体" !important;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: "黑体" !important;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: "微软雅黑" !important;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: "楷体" !important;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: "仿宋" !important;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" !important;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" !important;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" !important;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";}

这样就可以了

--------------------------------------------------------------------------------------------------------------------------

进阶版2.0：

可拖动调整图片大小：

安装插件：

npm install quill-image-drop-module -S // 拖拽npm install quill-image-resize-module -S // 改变大小

找到项目中build / webpack.dev.conf.js /plugins配置项，添加代码

new webpack.ProvidePlugin({'window.Quill': 'quill/dist/quill.js','Quill': 'quill/dist/quill.js'})

加完要重启项目哦，在这加

main.js中引入

//富文本编辑器import VueQuillEditor, { Quill } 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' // 调整大小组件。import { ImageDrop } from 'quill-image-drop-module'; // 拖动加载图片组件。Quill.register('modules/imageResize', imageResize );Quill.register('modules/imageDrop', ImageDrop);Vue.use(VueQuillEditor);

在页面data的editorOption的modules里面加：

// 调整图片大小imageResize: {displayStyles: {backgroundColor: "black",border: "none",color: "white",},modules: ["Resize", "DisplaySize", "Toolbar"],},

完事

写的不好，欢迎指教！