vue3+若依 wangEditor 实现富文本添加

1. 安装  这里是官网提供的安装方法 参考地址wangEditor

yarn add @wangeditor/editor  
# 或者 npm install @wangeditor/editor --save

// vue3
yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

2. 在src下面的components 创建 WangEditor 文件 创建index.vue 

 内容如下

 3.在main.js中 注册挂载

import WangEditor from '@/components/WangEditor'
app.component('WangEditor', WangEditor)

4.在需要使用的页面直接使用即可 :value="进行传值=>子组件用于后台数据回显"

相关属性 变量

const WangEditorContent = ref("这是富文本里面的内容")
const isClear = ref(false); // 用来控制富文本是否进行清空 false不 true是
function changeEditor(val) {
  console.log(val);  // 富文本改变
}

效果图如图所示