vue3使用富文本编辑器wangeditor，支持实现图片上传的功能

vue3使用富文本编辑器wangeditor，支持完全自己实现图片上传的过程，如上传图片到某个云服务器，走后端接口上传图片。

安装wangeditor

NPM

npm i wangeditor --save

正常安装后几行代码即可创建一个编辑器：

import E from "wangeditor"
const editor = new E("#div1")
editor.create()

CDN

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"
></script>
<script type="text/javascript">
  const E = window.wangEditor
  const editor = new E("#div1")
  // 或者 const editor = new E(document.getElementById('div1'))
  editor.create()
</script>

vue3组件内使用富文本编辑器wangeditor

组件内代码：

<template>
    <!-- 富文本 -->
    <div class="mgb20" ref="editorRef"></div>
</template>
<script setup>
import WangEditor from 'wangeditor'
import http from '@/api'
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'

const editorRef = ref(null)
onMounted(() => {
  editor = new WangEditor(editorRef.value)
  editor.config.zIndex = 1
  // 设置编辑区域高度为 500px
  instance.config.height = 300
  // 自己实现上传图片
  // 如果想完全自己实现图片上传的过程，如上传图片到某个云服务器，可以使用如下代码。
  editor.config.customUploadImg = function (resultFiles, insertImgFn) {
    // resultFiles 是 input 中选中的文件列表
    // insertImgFn 是获取图片 url 后，插入到编辑器的方法

    // 上传图片，返回结果，将图片插入到编辑器中
    insertImgFn(imgUrl)
  }
  // 注意，先配置 height ，再执行 create()
  editor.create()
})
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  editor.destroy()
  editor= null
})
// 获取富文本的内容
// editor.txt.html()
</script>

如果想使用base64 保存图片的话，可以如下：

设置 editor.config.uploadImgShowBase64 = true 可使用 base64 格式保存图片。即，可选择本地图片，编辑器用 base64 格式显示图片。

【注意】uploadImgShowBase64（base64 格式）和 uploadImgServer（上传图片到服务器）两者不能同时使用！！！