富文本功能实现vue3.0

安装

npm i wangeditor --save

引入

import WangEditor from "wangEditor";
import {
		onMounted,
		onBeforeUnmount,
	} from 'vue'

创建div

创建button按钮

div用来放富文本
按钮用来放点击事件

<div class="editor_text">说明书</div>
<el-button type="primary" @click="syncHTML">提交</el-button>

js部分

const editor = ref(null);

const content = reactive({
				html: "",
				text: "",
});
let instance;
onMounted(() => {
//创建富文本在上面div标签内
				instance = new WangEditor(editor.value);
				instance.config.zIndex = 1;
				instance.create();
});
onBeforeUnmount(() => {
//销毁富文本
				instance.destroy();
				instance = null;
});
//获取富文本中的内容
const syncHTML = () => {
	console.log(content.html);//富文本内容带标签
	console.log(content.text);//富文本内容不带表签
}
#  说明
本文为自己经验,如有误欢迎指正~
如有雷同纯属巧合,侵删~