wangeditor4转发时将原信息作为引用放在新内容之后，并不可编辑

下载   
npm install @wangeditor/editor-for-vue --save

官网地址

快速开始 | wangEditor

父组件代码

    <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>