首页vue3使用tinymce上传图片

vue3使用tinymce上传图片

时间: 2024-08-07 16:01:14 浏览: 144

Vue3中使用TinyMCE插件上传图片通常需要以下几个步骤：

首先，在项目中安装TinyMCE和相关的文件上传插件。可以使用npm或yarn来安装：
```
npm install @tinymce/tinymce-vue @tinymce/tinymce-skins tiny-mce-file-uploader
```

在main.js或入口文件中引入并配置TinyMCE：

import Vue from 'vue';
import { createInitalizationOptions } from '@tinymce/tinymce-vue';
Vue.use(createInitalizationOptions({
  selector: 'textarea', // 或者你想应用到的元素ID
  plugins: ['filemanager'],
  fileManagerLocation: '/path/to/file-manager', // 你的文件管理器URL
  toolbar: 'insertfile imagetools',
}));

这里启用了filemanager插件，并指定了上传文件的URL。

在HTML模板中添加TinyMCE编辑器：

<textarea v-tinymce></textarea>

当用户选择图片时，TinyMCE会触发image-upload-complete事件，可以通过监听这个事件处理上传后的图片：

export default {
  mounted() {
    this.$refs.tinyMCEEditor.on('image-upload-complete', (event) => {
      const blob = event.detail.blob; // 图片blob
      // 进行后续处理，例如保存到服务器或者显示在页面上
    });
  },
}