vue-quill-editor-upload : 实现vue-quill-editor上传图片到服务器 vue-quill-editor-uploadA plug-in for uploading images to your server when you use vue-quill-editor.富文本编辑器vue-quill-editor的辅助插件，用于上传图片到你的服务器说明由于本模块不兼容其他模块，很有局限性，现已经开发了新的插件，并且增加了复制粘贴拖拽上传等功能，也能兼容别人的模块，大家要使用的话使用新模块quill-image-extend-module，完美兼容调整大小resize-moduleinstallnpmnpm install vue-quill-editor-upload --save基本使用<template> <!-- bidirectional data binding（双向数据绑定） --> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption"> </quill-editor> </template> <script> import {quillRedefine} from 'vue-quill-editor-upload' import {quillEditor} from 'vue-quill-editor' export default { components: {quillEditor, quillRedefine}, data () { return { content: '', editorOption: {} // 必须初始化为对象 init to Object } }, created () { this.editorOption = quillRedefine( { // 图片上传的设置 uploadConfig: { action: '', // 必填参数 图片上传地址 // 必选参数 res是一个函数，函数接收的response为上传成功时服务器返回的数据 // 你必须把返回的数据中所包含的图片地址 return 回去 res: (respnse) => { return respnse.info }, name: 'img' // 图片上传参数名 } } ) console.log(this.editorOption) } } </script>useYou have to install vue-quill-editor first.请确保您已安装了 vue-quill-editorimportimport {quillRedefine} from 'vue-quill-editor-upload'quillRedefine是一个函数quillRedefine 可接收的所有参数(all params){ // 图片上传的设置 uploadConfig: { action: '', // 必填参数 图片上传地址 // 必选参数 res是一个函数，函数接收的response为上传成功时服务器返回的数据 // 你必须把返回的数据中所包含的图片地址 return 回去 res: (respnse) => { return respnse.info }, methods: 'POST', // 可选参数 图片上传方式 默认为post token: sessionStorage.token, // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage name: 'img', // 可选参数 文件的参数名 默认为img size: 500, // 可选参数 图片限制大小，单位为Kb, 1M = 1024Kb accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon', // 可选参数 可上传的图片格式 // start: function (){} start: () => { }, // 可选参数 接收一个函数 开始上传数据时会触发 end: () => { }, // 可选参数 接收一个函数 上传数据完成（成功或者失败）时会触发 success: () => {}, // 可选参数 接收一个函数 上传数据成功时会触发 error: () => { } // 可选参数 接收一个函数 上传数据中断时会触发 }, // 以下所有设置都和vue-quill-editor本身所对应 placeholder: '', // 可选参数 富文本框内的提示语 theme: '', // 可选参数 富文本编辑器的风格 toolOptions: [], // 可选参数 选择工具栏的需要哪些功能 默认是全部 handlers: {} // 可选参数 重定义的事件，比如link等事件 }demofirstyou must to do: :options="editorOption" to bound Parameters你必须绑定option :options="editorOption"<template> <!-- bidirectional data binding（双向数据绑定） --> <quill-editor :options="editorOption"> </quill-editor> </template>secondreturn editorOption必须在return 中书写editorOPtion 并且设置默认为空对象 data () { return { content: '', editorOption: {} // 必须初始化为对象 init to Object } }threeinit in created在created生命周期中生成实际数据created () { this.editorOption = quillRedefine( { // 图片上传的设置 uploadConfig: { action: '', // 必填参数 图片上传地址 // 必选参数 res是一个函数，函数接收的response为上传成功时服务器返回的数据 // 你必须把返回的数据中所包含的图片地址 return 回去 res: (respnse) => { return respnse.info // 这里切记要return回你的图片地址 } } } ) // console.log(this.editorOption) }注意事项 （matters need attention）由于不同的用户的服务器返回的数据格式不尽相同因此在uploadConfig中，你必须如下操作 // 你必须把返回的数据中所包含的图片地址 return 回去 res: (respnse) => { return respnse.info // 这里切记要return回你的图片地址 }比如你的服务器返回的成功数据为{ code: 200, starus: true, result: { img: 'http://placehold.it/100x100' // 服务器返回的数据中的图片的地址 } }那么你应该在参数中写为： // 你必须把返回的数据中所包含的图片地址 return 回去 res: (respnse) => { return respnse.result.img // 这里切记要return回你的图片地址 }example完整用例<template> <!-- bidirectional data binding（双向数据绑定） --> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption"> </quill-editor> </template> <script> import {quillRedefine} from 'vue-quill-editor-upload' import {quillEditor} from 'vue-quill-editor' export default { components: {quillEditor, quillRedefine}, data () { return { content: '', editorOption: {} // 必须初始化为对象 init to Object } }, created () { this.editorOption = quillRedefine( { // 图片上传的设置 uploadConfig: { action: '', // 必填参数 图片上传地址 // 必选参数 res是一个函数，函数接收的response为上传成功时服务器返回的数据 // 你必须把返回的数据中所包含的图片地址 return 回去 res: (respnse) => { return respnse.info }, methods: 'POST', // 可选参数 图片上传方式 默认为post token: sessionStorage.token, // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage name: 'img', // 可选参数 文件的参数名 默认为img size: 500, // 可选参数 图片限制大小，单位为Kb, 1M = 1024Kb accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon', // 可选参数 可上传的图片格式 // start: function (){} start: () => { }, // 可选参数 接收一个函数 开始上传数据时会触发 end: () => { }, // 可选参数 接收一个函数 上传数据完成（成功或者失败）时会触发 success: () => { }, // 可选参数 接收一个函数 上传数据成功时会触发 error: () => { } // 可选参数 接收一个函数 上传数据中断时会触发 }, // 以下所有设置都和vue-quill-editor本身所对应 placeholder: '', // 可选参数 富文本框内的提示语 theme: '', // 可选参数 富文本编辑器的风格 toolOptions: [], // 可选参数 选择工具栏的需要哪些功能 默认是全部 handlers: {} // 可选参数 重定义的事件，比如link等事件 } ) console.log(this.editorOption) } } </script> 原文转自：https://segmentfault.com/a/1190000012830730

quill-editor 富文本插件（含全部全部工具栏） quill-editor 富文本插件使用一、npm 安装 vue-quill-editor二、在main.js中引入import VueQuillEditor from 'vue-quill-editor' // require styles 引入样式 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor)三、在模块中引用<template>      <quill-editor        v-model="content"        ref="myQuillEditor"        :options="editorOption"        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"       @change="onEditorChange($event)">     </quill-editor> </template>  <script>     import { quillEditor } from 'vue-quill-editor'     export default{         data(){ const toolbarOptions = [['bold', 'italic', 'underline', 'image']];             return {                 content:null,                 editorOption:{ modules:{ toolbar:toolbarOptions, theme:'snow', } }             }         },         methods:{             onEditorBlur(){//失去焦点事件             },             onEditorFocus(){//获得焦点事件             },             onEditorChange(){//内容改变事件             }         }     } </script> 全部工具栏const toolbarOptions = [ ['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'] //上传图片、上传视频 ];更改图片按钮的事件函数由于quill插件默认插入图片是base64格式的，若图片较大会引起内容太大无法保存到数据库里面，这样为了上传图片或者插入网络图片，要先更改图片按钮的事件下函数，具体是在editorOption->modules->toolbar中加入handlers对象，并插入名称为image的函数，函数的内容设定为自身所需内容，如下data () { return { content: '', editorOption: { ... modules: { toolbar: { container: toolbarOptions, handlers: { 'image': function (value) { if (value) { // 自定义内容 } else { this.quill.format('image', false) } } } } } } }修改配置，使图片能够上传到服务器富文本编辑器中的图片上传是将图片转为base64格式的，如果需要上传图片到服务器，需要修改配置。创建一个quill-config文件 /*富文本编辑图片上传配置*/ const uploadConfig = { action: '', // 必填参数 图片上传地址 methods: 'POST', // 必填参数 图片上传方式 token: '', // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage name: 'img', // 必填参数 文件的参数名 size: 500, // 可选参数 图片大小，单位为Kb, 1M = 1024Kb accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' // 可选 可上传的图片格式 }; // toolbar工具栏的工具选项（默认展示全部） const toolOptions = [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{'header': 1}, {'header': 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'] ]; const handlers = { image: function image() { var self = this; var fileInput = this.container.querySelector('input.ql-image[type=file]'); if (fileInput === null) { fileInput = document.createElement('input'); fileInput.setAttribute('type', 'file'); // 设置图片参数名 if (uploadConfig.name) { fileInput.setAttribute('name', uploadConfig.name); } // 可设置上传图片的格式 fileInput.setAttribute('accept', uploadConfig.accept); fileInput.classList.add('ql-image'); // 监听选择文件 fileInput.addEventListener('change', function () { // 创建formData var formData = new FormData(); formData.append(uploadConfig.name, fileInput.files[0]); formData.append('object','product'); // 如果需要token且存在token if (uploadConfig.token) { formData.append('token', uploadConfig.token) } // 图片上传 var xhr = new XMLHttpRequest(); xhr.open(uploadConfig.methods, uploadConfig.action, true); // 上传数据成功，会触发 xhr.onload = function (e) { if (xhr.status === 200) { var res = JSON.parse(xhr.responseText); let length = self.quill.getSelection(true).index; //这里很重要，你图片上传成功后，img的src需要在这里添加，res.path就是你服务器返回的图片链接。 self.quill.insertEmbed(length, 'image', res.path); self.quill.setSelection(length + 1) } fileInput.value = '' }; // 开始上传数据 xhr.upload.onloadstart = function (e) { fileInput.value = '' }; // 当发生网络异常的时候会触发，如果上传数据的过程还未结束 xhr.upload.onerror = function (e) { }; // 上传数据完成（成功或者失败）时会触发 xhr.upload.onloadend = function (e) { // console.log('上传结束') }; xhr.send(formData) }); this.container.appendChild(fileInput); } fileInput.click(); } }; export default { placeholder: '', theme: 'snow', // 主题 modules: { toolbar: { container: toolOptions, // 工具栏选项 handlers: handlers // 事件重写 } } }引用<template> <div id="Test"> <quill-editor ref="myQuillEditor" v-model="content" :options="quillOption"> </quill-editor> </div> </template> <script> import { quillEditor } from 'vue-quill-editor' import quillConfig from './quill-config.js' export default { components: { quillEditor }, data () { return { content: '<h1>hello quill-editor</h1>', quillOption: quillConfig, } } } </script> <style> </style>

Vue轻量级富文本编辑器-Vue-Quill-Editor 先看效果图：女神镇楼下载Vue-Quill-Editornpm install vue-quill-editor --save下载quill（Vue-Quill-Editor需要依赖）npm install quill --save代码<template> <div class="edit_container"> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"> </quill-editor> </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 { content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`, editorOption: {} } }, methods: { onEditorReady(editor) { // 准备编辑器 }, onEditorBlur(){}, // 失去焦点事件 onEditorFocus(){}, // 获得焦点事件 onEditorChange(){}, // 内容改变事件 }, computed: { editor() { return this.$refs.myQuillEditor.quill; }, } } </script>OK,搞定，简洁的富文本编辑器就展现在你眼前了，另外附上API。Vue-Quill-Editor自定义 toolbar 菜单editorOption: { placeholder: "请在这里输入", modules:{ 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'] //上传图片、上传视频 ] } },存储及将数据库中的数据反显为HTML字符串后台接收到数据后会将字符中的标签进行转码，所以我们要先进行一个解码的操作让他变成标签形式的字符串：例如后台接收的数据如下："<h1>title<" ，对应解码后就是<h1>title</h1>。//把实体格式字符串转义成HTML格式的字符串 escapeStringHTML(str) { str = str.replace(/&lt;/g,'<'); str = str.replace(/&gt;/g,'>'); return str; }然后将返回值赋值给对应的参数：<div v-html="str" class="ql-editor"> {{str}} </div> 上面的str就是转码函数返回的值，我们要先在data中定义，所以我现在将新增跟展示放在一起，代码如下：<template> <div class="edit_container"> <!-- 新增时输入 --> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"> </quill-editor> <!-- 从数据库读取展示 --> <div v-html="str" class="ql-editor"> {{str}} </div> </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 { content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`, str: '', editorOption: {} } }, methods: { onEditorReady(editor) { // 准备编辑器 }, onEditorBlur(){}, // 失去焦点事件 onEditorFocus(){}, // 获得焦点事件 onEditorChange(){}, // 内容改变事件 // 转码 escapeStringHTML(str) { str = str.replace(/&lt;/g,'<'); str = str.replace(/&gt;/g,'>'); return str; } }, computed: { editor() { return this.$refs.myQuillEditor.quill; }, }, mounted() { let content = ''; // 请求后台返回的内容字符串 this.str = this.escapeStringHTML(content); } } </script>最后提醒大家一句，插件只兼容IE10以上，不能向下兼容，如果要向下兼容，只能放弃使用这个插件。