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 上述两个就行了。