下载
npm install @wangeditor/editor-for-vue --save官网地址
父组件代码
<wangeditor
@change="grtUrl"
:editcontent="editcontent"
:actionstate="actions"
ref="wangeditor"
></wangeditor>
wangeditor 组件代码
<template>
<div class="website">
<div
id="websiteEditorElem"
class="websiteEd"
style="background: #ffffff; border-bottom: none"
></div>
</div>
</template>
<script>
import E from "wangeditor";
import { decode } from "@/utils/localencryption";
import { getfileserverpost } from "@/api/rollcall";
import axios from "axios";
export default {
name: "wangEditor2",
props: {
editcontent: {
type: String,
},
actionstate: {
type: String,
},
},
data() {
return {
editor: "",
name: "",
formCaseEnd: {},
contents: "",
action: "",
};
},
watch: {},
computed: {},
mounted() {
this.init();
this.onChange();
},
methods: {
handClear() {
this.editor.txt.clear();
},
handDisable() {
this.editor.disable();
},
handeditcontent(n, v) {
this.contents = n;
if (v != 1) {
this.editor.txt.html(n);
}
},
handfileListOn(row) {
if (typeof row == "string") {
console.log(row, "you1");
let editorDom =
document.getElementsByClassName("w-e-text-container");
editorDom[0].setAttribute(
"style",
"height:410px;border-bottom:1px solid #ccc"
);
} else if (typeof row == "number") {
console.log(row, "无u");
let editorDom =
document.getElementsByClassName("w-e-text-container");
editorDom[0].setAttribute(
"style",
"height:485px;border-bottom:1px solid #ccc"
);
}
},
onChange() {
getfileserverpost().then((res) => {
if (res.status == 200) {
this.action = res.data;
}
});
},
init() {
this.editor = new E("#websiteEditorElem");
this.$nextTick(() => {
// console.log(editorDom[0], "dom----");
if (this.actionstate == "edit") {
let editorDom =
document.getElementsByClassName("w-e-text-container");
editorDom[0].setAttribute("style", "height:350px;border-bottom:1px solid #ccc");
const dom2 = document.getElementById("websiteEditorElem");
var div = document.createElement("p");
div.innerHTML = this.contents;
dom2.children[1].children[0].appendChild(div);
dom2.children[1].children[0].removeAttribute(
"contenteditable"
);
dom2.children[1].children[0].children[0].setAttribute(
"contenteditable",
"true"
);
dom2.children[1].children[0].children[0].setAttribute(
"style",
"outline:0px solid transparent;"
);
}
if (this.actionstate == "details") {
this.handfileListOn();
}
if (this.actionstate == "create") {
let editorDom =
document.getElementsByClassName("w-e-text-container");
editorDom[0].setAttribute(
"style",
"height:350px;border-bottom:1px solid #ccc"
);
}
});
if (this.actionstate == "details") {
this.editor.config.menus = [];
} else {
this.editor.config.excludeMenus = [
"emoticon",
"link",
"code",
"video",
];
}
// if (this.actionstate == "create" || this.actionstate == "edit") {
// }
this.editor.config.lang = "en";
this.editor.i18next = window.i18next;
this.editor.config.placeholder = "";
this.editor.config.showFullScreen = false;
this.editor.config.uploadImgShowBase64 = true;
this.editor.config.showLinkImg = false;
this.editor.config.debug = true;
this.editor.config.uploadFileName = "image";
this.editor.config.customUploadImg = (resultFiles, insertImgFn) => {
let imageUrl = [];
const token = decode("token");
resultFiles.forEach((item) => {
if (item) {
return new Promise((innerResolve) => {
let form = new FormData();
var newName = this.$md5(
String(new Date().getTime())
);
console.log(this.action, "this.action--");
form.append("file", item, newName);
form.append("auth_token", decode("token"));
form.append("output", "json");
axios({
//url: "https://testfs.mijicall.com:8080/group1/upload",
url: this.action,
method: "POST",
data: form,
})
//成功回调
.then((res) => {
console.log(res, "===res");
if (res.data) {
const urlItem =
res.data.domain + "" + res.data.src;
let obj = {};
obj.name = urlItem.substring(
urlItem.lastIndexOf("/") + 1,
urlItem.indexOf("?")
);
obj.url =
urlItem.indexOf("auth_token") == -1
? urlItem +
`?auth_token=${token}`
: urlItem;
console.log(obj, "obi--");
insertImgFn(obj.url);
}
});
});
}
});
};
this.editor.config.focus = true;
this.editor.create();
this.editor.txt.html(this.contents);
this.editor.config.onchange = (html) => {
this.info_ = html; // 绑定当前逐渐地值
this.$emit("change", this.info_);
};
},
},
};
</script>
<style lang="scss" scoped>
.website {
width: 100% !important;
//height: 350px;
min-height: 300px;
}
.websiteEd {
//height: 340px;
}
.formDate {
width: 350px;
height: 170px;
padding-top: 20px;
background: #f0f0f0;
}
</style>