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