vue实战026:TinyMCE重写图片上传功能

TinyMCE插入图片默认的是直接插入图片地址的，而通常我们希望能直接将图片上传至我们的服务器并返回图片的服务器地址，前面在vue实战024:Vue-Quill-Editor自定义图片上传中也提到了图片上传，原理是一样的。当我们选择图片后将图片上传服务器，服务器返回相应的图片链接，前端将图片链接插入到富文本的指定光标上位置，在提交富文本的内容的时候图片只是以图片地址提交。

 TinyMCE提供了图片异步上传处理函数images_upload_handler让用户配置上传图片的相关参数，这里有三个参数，图片数据（blobinfo是一个对象，包含上传文件的信息），成功时的回调函数（success，上传成功的时候向success传入一个图片地址），失败时的回调函数（failure，失败的时候向 failure 传入报错信息），这里我们可以通过images_upload_handler来重新自定义一个上传方法以便适配我们的项目。

更改上传方法我们同样在tinymce的init中去配置，如果你直接在上文vue实战025:配置TinyMCE富文本编辑器中的init中添加images_upload_handler方法你会发现根本找不到$axios，因为axios需要在方法中调用。

 所以这里我们需要重新来调整下tinymce的结构了，去掉模型中的init绑定，我们写个方法通过window.tinymce.init来配置init，然后在mounted调用该方法自动加载我们定义的配置信息，这时我们就必须挂载的tinymce对象才能正常显示编辑器（这里的DefaultInit就是我们之前在data中定义的init参数）。

methods: {
       init () {
        const self = this
        window.tinymce.init({
          // 默认配置
          ...this.DefaultInit,
          // 挂载的DOM对象
          selector: `#${this.tinymceId}`,
        })
      }
    }

 然后我们就可以在init中重写我们的images_upload_handler方法了，这里我用的是vue，数据发送用的是axios，这里的方法跟我们前面说到的“Vue实战024:Vue-Quill-Editor自定义图片上传”一样，但是没那么麻烦，接受参数之后直接将图片的url传给success即可，tinymce会自动帮你插入到光标所在位置的。

// 图片上传
images_upload_handler: function (blobInfo, success, failure){
    let formData = new FormData()
    console.log(blobInfo.filename())
    formData.append('img',blobInfo.blob())
    self.$axios.post('http://127.0.0.1:8000/upload/',formData)
    .then(response =>{
        console.log(response.data['url'])
        if(response.data['code']==200){
            success(response.data['url'])
        }else{
            failure('上传失败！')
        }
    })

除了点击上传外，tinymce最大的亮点就是可以直接复制粘贴上传，这样大大方便了我们编写文章，要实现这个功能相当的简单，前面我们已经加载了paste插件, 接下来只需要在初始化中插入配置项即可（粘贴后会自动调用图片上传接口将图片传至服务器中）:

 paste_data_images: true, // 设置为“true”即允许粘贴图像，而将其设置为“false”则不允许粘贴图像。

打开我们的后台，可以在图片存储路径中找到对应的图片信息 ，tinymce将图片自动上传至服务器了，是不是相当的方便快捷。

下面是到目前为止的完整代码，后续继续优化和完善。

<template>
  <div>
    <textarea :id= "tinymceId"  v-model="tinymceHtml"></textarea>
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/link' //超链接插件
import 'tinymce/plugins/code' //代码块插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/contextmenu'  //右键菜单插件
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/colorpicker' //选择颜色插件
import 'tinymce/plugins/textcolor'  //文本颜色插件
import 'tinymce/plugins/fullscreen' //全屏
import 'tinymce/plugins/help'       
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/toc'
import 'tinymce/plugins/codesample'
export default {
    data () {
      const ide = Date.now()
      return {
        tinymceId: ide,
        tinymceHtml:'',
        DefaultInit: {
            language_url:'/tinymce/langs/zh_CN.js',  //导入语言文件
            language: "zh_CN",//语言设置
            skin_url: '/tinymce/skins/ui/oxide',//主题样式
            height:500, //高度
            menubar: false,// 隐藏最上方menu菜单
            toolbar: true,//false禁用工具栏（隐藏工具栏）
            browser_spellcheck: true, // 拼写检查
            branding: false, // 去水印
            statusbar: false, // 隐藏编辑器底部的状态栏
            elementpath: false,  //禁用下角的当前标签路径
            paste_data_images: true, // 允许粘贴图像
            toolbar:['bold italic underline strikethrough blockquote|forecolor backcolor|formatselect |fontsizeselect  | alignleft aligncenter alignright alignjustify | outdent indent |codeformat blockformats| removeformat undo redo ',
            'bullist numlist toc pastetext|codesample charmap  hr insertdatetime |lists image media table link unlink |code searchreplace fullscreen help '],
            plugins: 'lists image media table wordcount code fullscreen help codesample toc insertdatetime  searchreplace  link charmap paste hr' ,
        }
      }
    },
    mounted () {
      this.init()
    },
    methods: {
       init () {
        const self = this
        window.tinymce.init({
          // 默认配置
          ...this.DefaultInit,
        // 图片上传
        images_upload_handler: function (blobInfo, success, failure){
            let formData = new FormData()
            console.log(blobInfo.filename())
            formData.append('img',blobInfo.blob())
            self.$axios.post('http://127.0.0.1:8000/upload/',formData)
            .then(response =>{
                console.log(response.data['url'])
                if(response.data['code']==200){
                    success(response.data['url'])
                }else{
                    failure('上传失败！')
                }
            })
          },
          // 挂载的DOM对象
          selector: `#${this.tinymceId}`,
        })
      }
    }
  }
</script>

欢迎关注本人的公众号：编程手札，文章也会在公众号更新