Vue3项目使用TinyMCE富文本编辑器以及图片上传示例

Vue有很多富文本编辑器，例如WangEditor、TextBus、TinyMCE等，这里介绍一下TinyMCE如何在Vue3项目中使用，默认TinyMCE的一些文件是通过官方的CDN加载的，这需要使用他们的apiKey，我们使用自托管就可以跳过这个限制

1. 安装依赖

npm install "@tinymce/tinymce-vue"

2. 准备静态资源

下载中文语言包：进入下载

下载TinyMCE静态资源包：进入下载

下载完成后，将TinyMCE静态资源包压缩包下tinymce\js目录下的tinymce目录放到vue3项目的public文件夹下

并且将中文语言包下langs\zh_CN.js文件放到langs文件夹下，最终如下图所示

3. 引入静态资源

修改项目的index.html，添加以下两行

  <script src="/tinymce/tinymce.min.js"></script>
  <script src="/tinymce/langs/zh_CN.js"></script>

4. 封装组件

<script setup>
import Editor from '@tinymce/tinymce-vue'

// 内容
const content = defineModel('content')
</script>

<template>
  <div class="tinymce">
    <Editor
      v-model="content" :init="{
        branding: false,
        language: 'zh_CN',
        menubar: 'edit view insert format table tools help',
        plugins: 'lists link image table code help wordcount',
        promotion: false,
        toolbar_mode: 'wrap',
      }"
    />
  </div>
</template>

<style scoped>
.tinymce {
  width: 100%;
}
</style>

5. 组件使用

需要使用富文本编辑器的地方，引入并用v-model传入content即可

测试可以正常使用🥰

6. 图片上传

在封装的组件中加入以下方法，具体根据项目实际修改，需要改的地方已经注释

// 图片上传
function imageUploadHandler(blobInfo, progress) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.withCredentials = false
    xhr.open('POST', '/upload') // 第二个参数改为真实上传接口
    // xhr.setRequestHeader('Authorization', `Bearer xxxx`) // 如果需要放置请求头，可以这样放

    xhr.upload.onprogress = (e) => {
      progress(e.loaded / e.total * 100)
    }

    xhr.onload = () => {
      if (xhr.status === 403) {
        reject({ message: `HTTP错误: ${xhr.status}`, remove: true })
        return
      }

      if (xhr.status < 200 || xhr.status >= 300) {
        reject(`HTTP错误: ${xhr.status}`)
        return
      }

      const json = JSON.parse(xhr.responseText)
      resolve(json.data) // 这里改为真实的上传接口成功返回的图片地址字段
    }

    xhr.onerror = () => {
      reject(`由于 XHR 传输错误，图片上传失败。错误代码：: ${xhr.status}`)
    }

    const formData = new FormData()
    formData.append('file', blobInfo.blob(), blobInfo.filename())

    xhr.send(formData)
  })
}

并且在template里面将该方法传给tinymce

images_upload_handler: imageUploadHandler,

加好后是这样：

这样，上传图片就可以正常使用了

Demo地址：查看仓库

官方文档地址：点击查看