tinymce上传图片、文件到腾讯云存储

http://tinymce.ax-z.cn/general/upload-images.php

 

<template>
  <div>
    <editor
      :id="id"
      :init="{
        ...defaultOptions,
        ...options
      }"
      :value="value"
      @input="$emit('input', $event)"
      @onChange="diyChange"
    />
  </div>
</template>

<script>
import Tinymce from '@tinymce/tinymce-vue'
import 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default'
import 'tinymce/themes/mobile/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/media'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/fullscreen'
import { cosUpload, getCosUrl } from '@/assets/js/util'

export default {
  name: 'TinyMCE',
  props: {
    value: String,
    options: {
      type: Object,
      default: () => {
        return {}
      }
    },
    id: String
  },
  components: {
    editor: Tinymce
  },
  data() {
    return {
      defaultOptions: {
        language_url: '/static/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/ui/CUSTOM',
        content_css: '/static/tinymce/skins/ui/CUSTOM/content.css',
        plugins: 'link lists image code table wordcount fullscreen ',
        toolbar:
          'undo redo bold italic underline strikethrough fontselect fontsizeselect formatselect alignleft aligncenter alignright alignjustify outdent indent forecolor backcolor removeformat fullscreen image link',
        external_plugins: {
          ax_wordlimit: '/static/tinymce/ax_wordlimit/plugin.min.js'
        },
        images_upload_credentials: true,
        file_picker_types: 'file image media',
        file_picker_callback: (callback, value, meta) => {
          //文件分类
          var filetype = ''
          switch (meta.filetype) {
            case 'image':
              filetype = '.jpg, .jpeg, .png, .gif, .jfif, .svg'
              break
            case 'media':
              filetype = '.mp4, .mov'
              break
            case 'file':
              filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx'
              break
          }
          //模拟出一个input用于添加本地文件
          var input = document.createElement('input')
          input.setAttribute('type', 'file')
          input.setAttribute('accept', filetype)
          input.click()
          input.onchange = async function() {
            var file = this.files[0]
            let lastIndex = file.name.lastIndexOf('.')
            // 存储桶上传文件
            let res = await cosUpload(
              {
                fileData: file,
                fileMain: {
                  fileNames: file.name.substring(0, lastIndex),
                  suffix: file.name.substring(lastIndex + 1)
                }
              },
              'public-read',
              'statics'
            )
            // 解析云文件地址 // 获取存储桶文件地址
            let data = await getCosUrl(res.fileUrl, false, 'statics')
            switch (meta.filetype) {
              case 'image':
                callback(data.Url)
                break
              case 'media':
                callback(data.Url)
                break
              case 'file':
                callback(data.Url, { text: file.name })
                break
            }
          }
        }
      }
    }
  },
  methods: {
    diyChange(event) {
      this.$emit('change', event)
    }
  }
}
</script>