vue使用wangEditor编辑器上传图片
vue使用wangEditor上传图片
·
wangEditor富文本编辑器官网:wangeditor官网
1.安装wangEditor
npm install @wangeditor/editor-for-vue --save
2.引入组件
//局部引入
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
//vue中使用组件
components: { Editor, Toolbar },
data() {
return {
editor: null,
html: '',
editorConfig: {
placeholder: '请输入内容...',
// 所有的菜单配置,都要在 MENU_CONF 属性下
MENU_CONF: {
//配置上传图片
uploadImage: {
customUpload: this.uploadImg
}
}
},
mode:"default"
};
},
//这里需要引入css样式
<style src="@wangeditor/editor/dist/css/style.css"></style>
3.使用editor组件
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden;"
v-model="html"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
/>
4.配置自定义上传图片方法
//上传图片
uploadImg(file, insertFn){
let imgData = new FormData();
imgData.append('file', file);
//调用上传图片接口,上传图片 我这里testUpImg是测试接口
testUpImg(imgData).then(response => {
if(response.data.code == 0){
//插入后端返回的url
insertFn(response.data.data.url);
}else{
}
})
},
onCreated(editor) {
this.editor = Object.seal(editor) // 一定要用 Object.seal() ,否则会报错
},
下面是完整代码
<template>
<div>
<div style="border: 1px solid #ccc;">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden;"
v-model="html"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
/>
</div>
<el-button style="width:70px" type="primary" round @click="sendBlog()">提交</el-button>
<el-button style="width:70px" @click="clearForm()" round>清空</el-button>
</div>
</template>
<script>
// npm 安装
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { testUpImg } from "@/api/blog/testApi.js";
export default {
components: { Editor, Toolbar },
data() {
return {
editor: null,
html: '',
editorConfig: {
placeholder: '请输入内容...',
// 所有的菜单配置,都要在 MENU_CONF 属性下
MENU_CONF: {
//配置上传图片
uploadImage: {
customUpload: this.uploadImg
}
}
},
mode:"default"
};
},
created() {
},
methods: {
sendBlog() {
console.log(this.html);
},
//上传图片
uploadImg(file, insertFn){
let imgData = new FormData();
imgData.append('file', file);
//调接口,上传图片
testUpImg(imgData).then(response => {
if(response.data.code == 0){
insertFn(response.data.data.url);
}else{
}
})
},
onCreated(editor) {
this.editor = Object.seal(editor) // 一定要用 Object.seal() ,否则会报错
},
//清空
clearForm(){
this.html = '';
},
},
mounted() {
},
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy() // 组件销毁时,及时销毁编辑器
},
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
更多推荐
已为社区贡献1条内容
所有评论(0)