vue3富文本编辑器图片上传

在Vue3中使用富文本编辑器并上传图片，可以使用第三方库如tinymce或quill。这些库都提供了图片上传的功能，可以通过配置实现。具体实现步骤如下：

1. 安装富文本编辑器库，如tinymce或quill。
2. 在组件中引入库并进行配置，包括图片上传的配置。
3. 在上传图片的方法中，将图片上传至服务器，并返回图片的url。
4. 在富文本编辑器中插入图片，使用返回的url。

以下是一个使用tinymce实现图片上传的示例代码：

<template>
  <div>
    <editor v-model="content" :init="editorInit"></editor>
  </div>
</template>

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

export default {
  components: {
    Editor,
  },
  data() {
    return {
      content: '',
      editorInit: {
        plugins: 'image',
        toolbar: 'image',
        images_upload_handler: this.uploadImage,
      },
    };
  },
  methods: {
    uploadImage(blobInfo, success, failure) {
      const formData = new FormData();
      formData.append('file', blobInfo.blob(), blobInfo.filename());
      axios.post('/upload', formData).then((response) => {
        success(response.data.url);
      }).catch(() => {
        failure('Image upload failed');
      });
    },
  },
};
</script>

<style>
  /* tinymce editor style */
  .tox-tinymce {
    height: 500px;
  }
</style>