vue3 富文本编辑器

wangeditor

一、简单用法

首先：npm install wangeditor --save

    <div id="richText"  style="height: 400px;background-color: #fff;" ></div>

import { ref, onMounted } from 'vue'
import E from 'wangeditor'
const phoneEditor = ref('')
onMounted(() => {
  phoneEditor.value = new E('#richText')
  // 上传图片到服务器，base64形式
  phoneEditor.value.config.uploadImgShowBase64 = true
  // 隐藏网络图片
  phoneEditor.value.config.showLinkImg = false
  // 创建一个富文本编辑器
  phoneEditor.value.create()
  // 富文本内容
  phoneEditor.value.txt.html()
})

二、官网使用步骤

安装

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

<t