1 子组件
<template>
<div ref="editor"></div>
</template>
<script>
import E from "wangeditor";
export default {
name: "wditor",
data() {
return {
editor: "",
info_: ""
};
},
model: {
prop: "value",
event: "change"
},
props: {
value: {
type: String,
default: ""
},
isClear: {
type: Boolean,
default: false
}
}, //接收父组件的方法
watch: {
isClear(val) {
// 触发清除文本域内容
if (val) {
this.editor.txt.clear();
this.info_ = "";
}
}
// value: function(value) {
// if (value !== this.editor.txt.html()) {
// this.editor.txt.html(this.value);
// }
// }
//value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
},
mounted() {
this.seteditor();
this.editor.txt.html(this.value);
},
methods: {
seteditor() {
this.editor = new E(this.$refs.editor);
// this.editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片
this.editor.customConfig.uploadImgServer = "http://pai.hoer.top/api/daily/upload";
this.editor.customConfig.uploadFileName = "Filedata";
this.editor.customConfig.lang = {
设置标题: "bold",
正文: "p",
链接文字: "link text",
链接: "link",
上传图片: "上传图片",
上传: "上传",
插入代码: "Insert code",
插入: "Insert",
设置列表: "Setup list",
无序列表: "Bulleted List",
有序列表: "Numbered List",
对齐方式: "Alignment",
靠左: "left",
靠右: "right",
居中: "center",
表格: "Table",
创建: "",
行: "row",
列: "Column",
的Table: "",
网络图片: "Network picture",
图片:"",
视频:" video",
格式如:"",
// 还可自定添加更多
};
// this.editor.customConfig.uploadImgHeaders = {
// 'X-CSRF-TOKEN':window.axios.defaults.headers.common['X-CSRF-TOKEN'] //头部token
// };
this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M
// this.editor.customConfig.uploadImgMaxLength = 1; // 限制一次最多上传 3 张图片
this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
this.editor.customConfig.menus = [
// "head", // 标题
"bold", // 粗体
// "fontSize", // 字号
// "fontName", // 字体
"italic", // 斜体
"underline", // 下划线
// "strikeThrough", // 删除线
// "foreColor", // 文字颜色
// "backColor", // 背景颜色
// "link", // 插入链接
// "list", // 列表
// "justify", // 对齐方式
// "quote", // 引用
// "emoticon", // 表情
// "table", // 表格
// "code", // 插入代码
"image", // 插入图片
// "video" // 插入视频
// "undo", // 撤销
// "redo" // 重复
]; //菜单配置
//下面是最重要的的方法
this.editor.customConfig.uploadImgHooks = {
before: function(xhr, editor, files) {
// 图片上传之前触发
},
success: function(xhr, editor, result) {
// 图片上传并返回结果，图片插入成功之后触发
},
fail: function(xhr, editor, result) {
// 图片上传并返回结果，但图片插入错误时触发
},
error: function(xhr, editor) {
// 图片上传出错时触发
},
timeout: function(xhr, editor) {
// 图片上传超时时触发
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
customInsert: function(insertImg, result, editor) {
insertImg(result.data.file);
// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
// let url = Object.values(result.data) ; //result.data就是服务器返回的图片名字和链接
// insertImg(url)
//在这里转成JSON格式
// result 必须是一个 JSON 格式字符串！！！否则报错
// for (let i = 0; i < result.data.length; i++) {
// let url = result.data[i].url;
// JSON.stringify(url);
// insertImg(url)
// }
}
};
this.editor.customConfig.onchange = html => {
this.info_ = html; // 绑定当前逐渐地值
this.$emit("change", this.info_); // 将内容同步到父组件中
};
// 创建富文本编辑器
this.editor.create();
}
}
};
</script>
<style>
.w-e-text-container {
/* min-height: 230px !important; */
}
.w-e-toolbar .w-e-menu {
padding: 10px !important;
}
</style>
<style scoped>
.toolbar {
/*background-color: #f1f1f1;*/
border: 1px solid #ccc;
}
.text {
/*background-color: #f1f1f1;*/
border: 1px solid #ccc;
/*min-height: 500px;*/
}
</style>
2父组件
<weditor v-model="commentVal" @change="changeContent" :isClear="isClear"></weditor>
<script>
import weditor from "./weditor.vue";
export default {
data() {
return {
commentVal: "",
isClear: true,
content:"",
};
},
components: {
weditor
},
methods:{
changeContent(val) {
this.content = val;
},
},
}
网友评论