1 参考文档
开发文档
https://github.com/surmon-china/vue-quill-editor
例子
vue-quill-editor | Homepage | Surmon's projects
中文开发文档
版本号(注意:不适用于vue3)
"quill": "^1.3.7",
"quill-image-drop-module": "^1.0.3",
"quill-image-resize-module": "^3.0.0",
"vue": "^2.6.11",
"vue-quill-editor": "^3.0.6"
2 截图
3 源代码
3.1 vue.config.js
// 解决import模块quill-image-resize-module错误 const webpack = require('webpack') module.exports = { chainWebpack: config => { config.plugin('provide').use(webpack.ProvidePlugin, [{ 'window.Quill': 'quill/dist/quill.js', 'Quill': 'quill/dist/quill.js' }]); } }
3.2 vue源代码
<template> <div> <quill-editor ref="myTextEditor" v-bind:options="editorOption" v-model="content"> </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' import { Quill } from 'vue-quill-editor' // 设置调整图片大小 import ImageResize from "quill-image-resize-module"; Quill.register("modules/imageResize", ImageResize); // 设置拖拽 import { ImageDrop } from "quill-image-drop-module"; Quill.register("modules/imageDrop", ImageDrop); export default { components: { quillEditor }, data () { return { content: "Hello quill", editorOption: null } }, created: function(){ // 工具栏配置 const toolbarOption = [ ["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"], ["image", "video"] ]; this.editorOption = { theme: "snow", placeholder: "请输入正文", modules: { // 设置拖拽 imageDrop: true, //设置图片大小, 也可以使用"imageResize:true",官网上采用的是下面的配置方式 imageResize: { displayStyles: { backgroundColor: 'black', border: 'none', color: 'white' }, modules: [ 'Resize', 'DisplaySize', 'Toolbar' ] }, toolbar: { container: toolbarOption } } } } } </script> <style> </style>