【富文本编辑器】vue-cli3.0 使用tinyMCE富文本编辑器之 上传附件插件的使用记录

现在能够使用的富文本编辑器有很多
比如：

• 百度的UEditor：感觉是个巨坑，
• quill_editor：简单使用还行
• wang_editor : 个人还是比较喜欢这款编辑器的，如果项目业务要求不高，强烈推荐使用这款编辑器，引用非常的简单，界面也比较干净。唯一缺点就是功能略少了一些。
• tinyMCE：个人非常喜欢这个款编辑器，也强烈推荐使用。原因：使用简单，有丰富的插件可以满足很多业务需求， 比如 对表格的处理，图片上传，附件上传，引入地图等等。。。

tinyMCE 编辑器整合vue_cli 3.0

关于tinyMCE的整合有很多很好的文章，这里给大家推荐一下先：

• https://blog.csdn.net/liub37/article/details/83310879
• https://blog.csdn.net/bianyingchao/article/details/106019228
• 中文官方文档
  这里我就不过多的赘述了。

tinyMCE 插件包下载

首先，感谢大佬提供的插件
附上插件包地址： https://github.com/Five-great/tinymce-plugins
git上讲述了很多插件的使用，但是我用vue引用的时候还是遇到坑了，接下来讲述一下 插件包中 upfile插件的使用及遇坑遭遇

upfile 插件的使用

1，下载插件

2，导入插件包

下载源码后，将压缩包解压，把文件夹中的upfile文件复制黏贴到我们vue项目中的node_modules目录下
具体路径： node_modules/tinymce/plugins/upfile

3，在vue页面中引用

在 script中引入插件

import 'tinymce/plugins/upfile'

在plugins 和 toolbar中引入插件

plugins: {
      type: [String, Array],
      default: 'lists image table textcolor wordcount contextmenu fullscreen upfile'
    },
    toolbar: {
      type: [String, Array],
      default: 'undo redo |  formatselect  | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image insertfile  table | removeformat fullscreen upfile '
    }

重写回调函数，该函数会在点击【上传】按钮后自动调用，获取文件信息

  file_callback: (file, succFun) => {
          // 自定义处理文件操作部分
          var formData = new FormData()
          formData.append('file', file)
          this.$axios({
            method: 'POST',
            url: '/api/upload/file',
            data: formData
          }).then(res => {
            if (res.data.status === 200) {
              var url = res.data.data.url
              var name = res.data.data.name
              succFun(url, { text: name }) // 成功回调函数 text 显示的文本
            } else {
              this.$notify.error({
                title: '文件上传失败！',
                message: res.data.message
              })
            }
          }).catch(res => {
            this.$notify.error({
              title: '文件上传失败！',
              message: '您上传的文件超过了100MB,请压缩后再上传。'
            })
          })
        }
      },

妥了，现在我们进页面看一下吧。。。

工具栏里面多了一个文件上传的按钮，哦耶~~~
但是点击一看， what Fuck~

啥都没有，这是什么情况呢？？？
我们去看一下插件包的源码。。。

在index.js文件中可以看到，实际引用的是plugin.js 文件，那我们只能点击进去看看了。。。

这里可以看到，他引用了一个叫做 upfiles.html的页面，这个页面刚在插件包下面，那么既然刚才页面显示不出来，很有可能就是页面引入出了问题，就是那个路径

var baseURL=tinymce.baseURL||'.';
	var iframe1 = baseURL+'/plugins/upfile/upfiles.html';

说直白了就是路径不对了，
所以接下来我吧插件包中的upfiles.html 文件复制到public下面，路径如下：

把他和中文语言包和样式包放在一直，至少这个路径是我清楚的，接下来更改plugin.js 文件中的路径：

好了，打完收工。去看页面把~~

这下终于是妥妥的了。。。。。

tinyMCE组件源码

分享一下我的源码

<template>
  <div>
    <Editor v-model="myValue"
          :init="init"
          :disabled="disabled"
          @onClick="onClick">
        </Editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons'
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/link'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/upfile'
import 'tinymce/plugins/attachment'
export default {
  components: {
    Editor
  },
  props: {
    // 传入一个value，使组件支持v-model绑定
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: 'lists image table textcolor wordcount contextmenu fullscreen upfile'
    },
    toolbar: {
      type: [String, Array],
      default: 'undo redo |  formatselect  | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image insertfile  table | removeformat fullscreen upfile '
    }
  },
  data () {
    return {
      // 初始化配置
      init: {
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide', // skin路径
        height: 420, // 编辑器高度
        branding: false, // 是否禁用“Powered by TinyMCE”
        menubar: true, // 顶部菜单栏显示
        plugins: this.plugins,
        toolbar: this.toolbar,
        relative_urls: false,
        remove_script_host: true,
        images_upload_handler: (blobInfo, success, failure) => {
          console.log(blobInfo)
          this.handleImgUpload(blobInfo, success, failure)
        },
        file_callback: (file, succFun) => {
          // 自定义处理文件操作部分
          var formData = new FormData()
          formData.append('file', file)
          this.$axios({
            method: 'POST',
            url: '/api/upload/file',
            data: formData
          }).then(res => {
            if (res.data.status === 200) {
              var url = res.data.data.url
              var name = res.data.data.name
              succFun(url, { text: name }) // 成功回调函数 text 显示的文本
            } else {
              this.$notify.error({
                title: '文件上传失败！',
                message: res.data.message
              })
            }
          }).catch(res => {
            this.$notify.error({
              title: '文件上传失败！',
              message: '您上传的文件超过了100MB,请压缩后再上传。'
            })
          })
        }
      },
      myValue: this.value
      // attachment_max_size: 100 * 1024 * 1024,
      // content_css: 'tinymce/skins/content/snow/content.css',
      // attachment_upload_handler: (file, successCallback, failureCallback, progressCallback) => {}
    }
  },
  mounted () {
    tinymce.init({})
  },
  methods: {
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    onClick (e) {
      this.$emit('onClick', e, tinymce)
    },
    // 可以添加一些自己的自定义事件，如清空内容
    clear () {
      this.myValue = ''
    },
    handleImgUpload (blobInfo, success, failure) {
      console.log(blobInfo.blob())
      var formData = new FormData()
      formData.append('file', blobInfo.blob())
      this.$axios({
        method: 'POST',
        url: '/api/upload/image',
        data: formData
      }).then(res => {
        if (res.data.status === 200) {
          success(res.data.data)
        }
      })
    }
  },
  watch: {
    value (newValue) {
      this.myValue = newValue
    },
    myValue (newValue) {
      this.$emit('input', newValue)
    }
  }
}
</script>

最后，再次感谢大神提供的插件。