wangEditor富文本编辑器在vue中的应用
代码实例:
<template>
<div class="editor-tool">
<a-button class="btn" v-on:click="getContent">保存</a-button>
<div ref="editor" style="text-align: left;"></div>
</div>
</template>
<script>
import E from "wangeditor";
export default {
name: "editor",
props: {
content: {
type: String,
},
},
data() {
return {
editorContent: "",
};
},
methods: {
getContent: function() {
this.$emit("Edit", this.editorContent);
},
},
watch: {
content: function(newVal) {
this.editorContent = newVal;
},
},
mounted() {
var editor = new E(this.$refs.editor);
editor.customConfig.onchange = (html) => {
this.editorContent = html;
};
//进入debug状态
editor.customConfig.debug = true;
//删除黏贴文件的样式
editor.customConfig.pasteFilterStyle = false;
//用Base64存图
editor.customConfig.uploadImgShowBase64 = true;
//忽略黏贴文件的图片
editor.customConfig.pasteIgnoreImg = true;
// 配置服务器端地址 upload:上传图片地址
editor.customConfig.uploadImgServer = "/upload";
editor.customConfig.customUploadImg = function(files, insert) {
console.log(files, insert);
var objectURL = URL.createObjectURL(files[0]);
// 上传代码返回结果之后,将图片插入到编辑器中
insert(objectURL);
};
clearTimeout(this.timer);
this.timer = setTimeout(() => {
//设置延迟执行
editor.create();
editor.txt.html(this.editorContent);
}, 500);//延时获取编辑器内容
},
};
</script>