富文本功能实现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);//富文本内容不带表签
}
# 说明
本文为自己经验,如有误欢迎指正~
如有雷同纯属巧合,侵删~