tinymce-vue vue3 上传图片 示例

TinyMCE Vue 是一个将 TinyMCE（一个流行的富文本编辑器）集成到 Vue.js 应用中的组件。要在 Vue3 中使用 TinyMCE 配合上传图片，首先你需要安装相关的依赖和配置TinyMCE。以下是一个简单的示例：

1. 安装依赖：

npm install tinymce @tinymce/tinymce-vue vue-file-upload --save

2. 在 main.js 或者 vue.config.js 中引入并配置Vue文件上传插件（这里使用vue-file-upload为例）：

import VueFileUpload from 'vue-file-upload';
import '@tinymce/tinymce-vue/dist/tinymce.vue';

Vue.use(VueFileUpload);

3. 在组件中引入TinyMCE，并配置图片上传功能：

<template>
  <div>
    <tinymce-vue
      :config="tinymceConfig"
      v-model="editorContent"
      @file-added="handleImageUpload"
    ></tinymce-vue>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editorContent: '',
      tinymceConfig: {
        plugins: 'image',
        toolbar: 'image',
        images_upload_url: '/api/upload-image', // 图片上传的API URL
        images_upload_base64: true, // 是否支持base64上传
        images_rendition_target_width: 800, // 图片缩略图宽度
      },
    };
  },
  methods: {
    handleImageUpload(file) {
      this.$fileUpload.upload(file).then((response) => {
        // 处理上传成功的响应，比如更新富文本中的src属性
        const imageUrl = response.url;
        const imgElement = document.createElement('img');
        imgElement.src = imageUrl;
        this.editorContent = this.editorContent.replace(/\[\[image\]\]/, imgElement.outerHTML);
      });
    },
  },
};
</script>

在这个示例中，`tinymceConfig` 配置了TinyMCE的插件、工具栏以及图片上传的URL。当用户在编辑器中添加图片时，`handleImageUpload`方法会被调用，然后通过VueFileUpload上传图片，并更新富文本内容中的图片链接。