vue-quill-editor富文本工具加强模块的应用
vue-quill-editor富文本加强模块包含quill-image-extend-module（上传图片）、'quill-image-resize-module （图片大小调整）
https://www.kancloud.cn/liuwa... 这是官网文档，然而示例里对于action的局部是个字符串url，不晓得怎么用对应axio的api，所以从其余博客找到的示例再批改的。
革新需要
若依告诉布告性能应用的根本的quill组件。外面如同是反对action配置url，上传图片到服务器，然而没看到示例怎么用。
所以采纳quill的加强组件去实现。
代码
Editor index.vue(上传组件)的代码间接贴出来（参考的某位的博客的内容，具体忘了谁的）
<template> <div> <quill-editor ref="Editor" :content="content" :options="editorOption" class="editor" @change="onEditorChange($event)" :style="styles" ></quill-editor> </div></template><script>import { fileImageApi } from '@/api/ecmall/systemSetting'import "quill/dist/quill.snow.css";import { Quill,quillEditor } from "vue-quill-editor";import ImageResize from "quill-image-resize-module"; // 援用Quill.register("modules/imageResize", ImageResize); // 注册// 工具栏配置const toolbarOptions = [ ["bold", "italic", "underline", ], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike' "strike"] ["code-block"], // 援用 代码块-----['blockquote', 'code-block'] [{ header: 1 }, { header: 2 }], // 1、2 级题目-----[{ header: 1 }, { header: 2 }] [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }] /* [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }] [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }] [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}] */ [{ size: ["small", false, "large", "huge"] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]// [{ header: [1, 2, 3, 4, 5, false] }], // 题目-----[{ header: [1, 2, 3, 4, 5, 6, false] }] [{ color: [] }, { background: [] }], // 字体色彩、字体背景色彩-----[{ color: [] }, { background: [] }] /* [{ font: [] }], // 字体品种-----[{ font: [] }] */ [{ align: [] }], // 对齐形式-----[{ align: [] }] /* ["clean"], // 革除文本格式-----['clean'] */ ["link", "image"] // 链接、图片、视频-----['link', 'image', 'video']];const handlers = { //重写图片上传 image: function image() { let self = this; let fileInput = this.container.querySelector("input.ql-image[type=file]"); if (fileInput === null) { fileInput = document.createElement("input"); fileInput.setAttribute("type", "file"); // 设置图片参数名 fileInput.setAttribute("name", "file"); // 可设置上传图片的格局 fileInput.setAttribute( "accept", "image/png, image/gif, image/jpeg, image/bmp, image/x-icon" ); fileInput.classList.add("ql-image"); // 监听抉择文件 fileInput.addEventListener("change", function() { let params = new FormData(); params.append("multipart", fileInput.files[0]); const data = { model: 1, pid: 2 } fileImageApi(params,data).then(res => { let length = self.quill.getSelection(true).index; //写入图片 self.quill.insertEmbed(length, "image", res.url); self.quill.setSelection(length + 1); fileInput.value = ""; }); }); this.container.appendChild(fileInput); } fileInput.click(); }};export default { name: "Editor", props: { /* 编辑器的内容 */ value: { type: String, default: "", }, /* 高度 */ height: { type: Number, default: '400', }, /* 最小高度 */ minHeight: { type: Number, default: '300', }, /* 只读 */ readOnly: { type: Boolean, default: false, } }, data() { return { content: "<h1>1</h1>", editorOption: { theme: "snow", placeholder: "请输出注释", modules: { toolbar: { container: toolbarOptions, // 工具栏 handlers: handlers }, imageResize: { displaySize: true }, readOnly: this.readOnly, } } }; }, watch: { value: { handler(val) { this.content=val }, immediate: true, } }, mounted() { }, created() {}, components: { quillEditor }, computed: { styles() { let style = {}; if (this.minHeight) { style.minHeight = `${this.minHeight}px`; } if (this.height) { style.height = `${this.height}px`; } return style; }, }, methods: { onChange() { this.$emit("input", document.querySelector(".ql-editor").innerHTML); }, onEditorChange({ quill, html, text }) { console.log('editor change!', quill, html, text) this.content = html this.$emit("input",this.content ) } }};</script><style lang="less" scoped></style>父组件调用如下：
<editor v-model="form.noticeContent" :min-height="500"/> 对于image-resize-module引入报错 imports 谬误
批改vue.config.js
configureWebpack 内增加, plugins: [ new webpack.ProvidePlugin({ 'window.Quill': 'quill/dist/quill.js', 'Quill': 'quill/dist/quill.js' }), ],装置quill-image-extend-module（上传图片）、'quill-image-resize-module （图片大小调整） npm install 上述两个就行了。