将博客搬至CSDN

<template>
<div style="width: 100%; height: 100%;z-index: 1;">
<div ref="editor" style="width: 100%;height: 100%;z-index: 1;" />
</div>
</template>

<script>
import E from "wangeditor";
export default {
props: [
"id",
"value",
"width",
"height",
"uploadImgUrl",
"disabled",
"mapKey",
"menuFixed",
"pasteFilter",
"codeDefaultLang",
"hideLinkImg",
"uploadParams",
"uploadHeaders",
"isRealtime",
"disabledMenus"
],
data() {
return {
styleObject: {
width: "600px",
height: "400px"
},
menus: [
"head", // 标题
"bold", // 粗体
"fontSize", // 字号
"fontName", // 字体
"italic", // 斜体
"underline", // 下划线
"strikeThrough", // 删除线
"foreColor", // 文字颜色
"backColor", // 背景颜色
"link", // 插入链接
"list", // 列表
"justify", // 对齐方式
"quote", // 引用
"emoticon", // 表情
// "image", // 插入图片
"table", // 表格
// "video", // 插入视频
"code", // 插入代码
"undo", // 撤销
"redo", // 重复
"fullscreen" // 全屏
],
editor: null
};
},
watch: {
height(val) {
if (this.editor) {
this.editor.{val - 33}px !important`
);
}
}
},
mounted() {
this.createEditor();
},
methods: {
// 创建编辑器
createEditor() {
this.editor = new E(this.emit("input", html);
this.emit("load", originalName, resultText);
// };
// this.editor.customConfig.uploadImgFns.ontimeout = xhr => {
// this.emit("error");
// };
// this.editor.customConfig.uploadImgFileName = "file";
// this.editor.customConfig.pasteFilter = false;
// if (this.mapKey != undefined) {
// // 配置地图key，默认空
// this.editor.customConfig.mapAk = this.mapKey;
// }
// if (this.menuFixed != undefined) {
// // 配置菜单栏吸顶，默认true
// this.editor.customConfig.menuFixed = this.menuFixed;
// }
// if (this.pasteFilter != undefined) {
// // 配置粘贴过滤，默认为false
// this.editor.customConfig.pasteFilter = this.pasteFilter;
// }
// if (this.codeDefaultLang != undefined) {
// // 默认代码类型，默认javascript
// this.editor.customConfig.codeDefaultLang = this.codeDefaultLang;
// }
// if (this.hideLinkImg != undefined) {
// // 隐藏添加网络图片功能，默认显示
// this.editor.customConfig.hideLinkImg = this.hideLinkImg;
// }
// if (
// this.uploadParams != undefined &&
// this.uploadParams instanceof Object
// ) {
// // 上传图片自定义参数
// this.editor.customConfig.uploadParams = this.uploadParams;
// }
// if (
// this.uploadHeaders != undefined &&
// this.uploadHeaders instanceof Object
// ) {
// // 上传图片自定义头部
// this.editor.customConfig.uploadHeaders = this.uploadHeaders;
// }
// this.editor.create();
// if (this.value) {
// this.setHtml(this.value);
// }
// if (this.disabled) {
// this.disable();
// }
// this.listenChange();
},
// 筛选编辑器菜单
filterMenu(menus) {
if (menus instanceof Array) {
return menus.map((item, key) => {
if (item === "source") {
return null;
}
return item;
});
}
},
// 筛选不可用菜单
filterDisabledMenu(menus, disabledMenus) {
let menusToString = menus.join(",");
disabledMenus.forEach(res => {
menusToString = menusToString.replace(res, "").replace(",,", ",");
});
if (menusToString.length && menusToString[0] === ",") {
menusToString.substr(1, menusToString.length);
}
return menusToString.split(",");
},
// 插入图片
insertImg(url) {
this.editor.cmd.do(
"insertHtml",
"<img src=" + url + ' style="max-width:100%;"/>'
);
},
// 获取内容(html)
getHtml() {
return this.editor.txt.html();
},
// 获取内容(text)
getText() {
return this.editor.txt.text();
},
// 设置内容(html)
setHtml(hmtl) {
this.editor.txt.html(hmtl);
},
// 追加内容(html)
appendHtml(html) {
this.editor.txt.append(html);
},
// 插入内容
insertHtml(html) {
this.editor.cmd.do("insertHtml", html);
},
// 清空内容
clear() {
this.editor.txt.clear();
},
// 启用编辑器
enable() {
this.editor.enable();
},
// 禁用编辑器
disable() {
this.editor.disable();
},
// 销毁编辑器
destroy() {
this.editor.destroy();
},
// 恢复编辑器
undestroy() {
this.editor.undestroy();
}
// 监听内容改变
// listenChange() {
// this.editor.customConfig.onchange = () => {

//     this.$emit("change");
//     let result = "";
//     if (!this.getText()) {
//       result = this.getHtml();
//     }
//     if (this.isRealtime !== false) {
//       this.$emit("input", result);
//     }
//   };
// }

}
};
</script>