Tinymce 富文本编辑器 images_upload_handler 图片处理写法 Vue demo

以下是一个Vue demo，演示如何使用tinymce编辑器的`images_upload_handler`选项来上传图片并进行处理：

<template>
  <div>
    <textarea ref="myTextarea"></textarea>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'

export default {
  name: 'RichTextEditor',

  mounted() {
    const self = this

    tinymce.init({
      selector: 'textarea',
      plugins: ['image'],
      images_upload_handler: function (blobInfo, success, failure) {
        self.uploadImage(blobInfo.blob(), success, failure)
      }
    })
  },

  methods: {
    uploadImage(file, success, failure) {
      // 在这里编写上传图片的代码
      // 成功时调用success方法并传入图片的url
      // 失败时调用failure方法并传入错误信息
    }
  }
}
</script>

在这个示例中，我们使用了Vue和tinymce来创建一个富文本编辑器。在`mounted`方法中初始化了tinymce，并将`images_upload_handler`选项设置为一个函数，该函数会在上传图片时被调用。

在`images_upload_handler`函数中，我们调用了`uploadImage`方法，并将blob对象、成功回调函数和失败回调函数作为参数传递给它。在`uploadImage`方法中，我们可以编写自己的上传图片的代码，处理图片并返回图片的url。

请注意，`images_upload_handler`选项只适用于tinymce 5及以上版本。如果您使用的是较早的版本，您需要使用`file_picker_callback`选项来自定义文件选择器并上传图片。