mp-ui-pc/src/components/TinyEditor.vue

<template>
  <TinyEditor v-model="content" :placeholder="placeholder" api-key="ushn75pw8xd7ec18wwdatp7bi75o98pm0ob10zncyyrbkj4k" :init="options" />
</template>
<script>
import TinyEditor from '@tinymce/tinymce-vue'
import { publicFileSaveAPI } from '@/api/common'
import { publicFileGetUrl } from "@/api/common"
import { getToken } from '@/utils/auth'
export default {
  components: {
    TinyEditor
  },
  props: {
    value: {
      default: '',
      type: String
    },
    height: {
      default: 800,
      type: Number
    },
    placeholder: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      options: {
        base_url: '//itie-static.oss-cn-hangzhou.aliyuncs.com/assets/tinymce/',
        language: 'zh_CN',
        language_url: '//itie-static.oss-cn-hangzhou.aliyuncs.com/assets/tinymce/zh_CN.js',
        height: 500,
        resize: true,
        statusbar: false,
        // skin_url: '//itie-static.oss-cn-hangzhou.aliyuncs.com/assets/tinymce/oxide-dark', // 暗色皮肤
        // content_css: '//itie-static.oss-cn-hangzhou.aliyuncs.com/assets/tinymce/content.css',
        plugins: ['advlist anchor autolink autosave code codesample directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textpattern visualblocks visualchars wordcount placeholder indent2em'], // 插件
        image_advtab: true,
        images_upload_handler: this.updateImage,
        imagetools_toolbar: '',
        fontsize_formats: '8px 10px 12px 14px 16px 18px 20px 22px 24px 36px',
        toolbar: ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen indent2em']
      }
    }
  },
  computed: {
    content: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    updateImage(blobInfo, success, failure) {
      publicFileSaveAPI(
        { file: blobInfo.blob() },
        {
          "Authorization": "Bearer " + getToken(),
          "x-zz-timestamp": new Date().valueOf()
        }).then(res => {
        success(publicFileGetUrl + res.data.fileName)
      }).catch(err => {
        failure(err)
      })
    }
  }
}
</script>