vue 3.x项目中使用富文本编辑器 ----------wangeditor

官网wangeditor

下载wangeditor插件

npm install wangeditor --save

在要使用的组件中引入使用

<template>
  <div class="home">
     <div id="richText"  style="height: 400px;background-color: #fff;" ></div>
      <button @click="getMsg">获取富文本内容</button>
  </div>
</template>

<script setup>
 
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()
})

let getMsg = ()=>{
  console.log(phoneEditor.value.txt.html())
}
</script>

<style scoped>

</style>