Nuxt中使用富文本编辑器vue-quill-editor + 图片上次quill-image-extend-module

首先在 nuxt.config.js 中配置：

module.exports = {
// some nuxt config...
plugins: [
{ src: '~plugins/nuxt-quill-plugin.js', ssr: false }
],
// some nuxt config...
css: [
'quill/dist/quill.snow.css',
'quill/dist/quill.bubble.css',
'quill/dist/quill.core.css'
],
// some nuxt config...
}

然后在 plugins 文件夹中新建 nuxt-quill-plugin.js 文件，写入一下内容：

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor/dist/ssr'
Vue.use(VueQuillEditor)

然后在页面中调用：

<template>
<div>
<div
v-if="editorOption"
class="quill-editor"
v-model="content"
@change="onEditorChange($event)"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
v-quill:myQuillEditor="editorOption">
</div>
</div>
</template>
<script>
import Vue from "vue";
export default {
beforeMount() {
const VueQuillEditor = require("vue-quill-editor/dist/ssr");
const Quill = require("quill");
const { container, ImageExtend, QuillWatch } = require("quill-image-extend-module");
Quill.register("modules/ImageExtend", ImageExtend);
Vue.use(VueQuillEditor);
this.editorOption = {
// some quill options
modules: {
ImageExtend: {
// 如果不作设置，即{} 则依然开启复制粘贴功能且以base64插入
name: "img", // 图片参数名
size: 3, // 可选参数图片大小，单位为M，1M = 1024kb
action: "", // 服务器地址, 如果action为空，则采用base64插入图片
// response 为一个函数用来获取服务器返回的具体图片地址
// 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
// 则 return res.data.url
response: res => {
return res.info;
},
headers: xhr => {
// xhr.setRequestHeader('myHeader','myValue')
}, // 可选参数设置请求头部
sizeError: () => {}, // 图片超过大小的回调
start: () => {}, // 可选参数自定义开始上传触发事件
end: () => {}, // 可选参数自定义上传结束触发的事件，无论成功或者失败
error: () => {}, // 可选参数上传失败触发的事件
success: () => {}, // 可选参数上传成功触发的事件
change: (xhr, formData) => {
// xhr.setRequestHeader('myHeader','myValue')
// formData.append('token', 'myToken')
} // 可选参数每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
},
toolbar: {
// 如果不上传图片到服务器，此处不必配置
container: container, // container为工具栏，此次引入了全部工具栏，也可自行配置
handlers: {
image: function() {
// 劫持原来的图片点击按钮事件
QuillWatch.emit(this.quill.id);
}
}
}
}
}
},
data() {
return {
content: "",
editorOption: null
};
},
methods: {
onEditorBlur(editor) {
console.log("editor blur!", editor);
},
onEditorFocus(editor) {
console.log("editor focus!", editor);
},
onEditorReady(editor) {
console.log("editor ready!", editor);
},
onEditorChange({ editor, html, text }) {
console.log("editor change!", editor, html, text);
this.content = html;
}
}
};
</script>

感谢 @amoshydra 提供帮助

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论