tinyMCE富文本图片自定义上传

一、建议大家使用tinyMCE富文本4.3及以上的版本，因为低版本是不支持图片上传这个功能的

1、要使TinyMCE能够上传图片，需要配置下参数，如下：

tinymce.init({
    selector: '#edit',
    language:'zh_CN',
    plugins: 'image',//启用图片插件
    toolbar: 'image',//在工具栏显示图片工具按钮
    images_upload_url: '/demo/upimg.php',//后端上传图片的地址
});

2、后台需要返回给TinyMCE的JSON数据，形如这样：{"location": "/img/1.jpg" }

二、使用images_upload_handler函数自定义上传逻辑，不使用编辑器默认的

1、示例如下：

var edit = tinymce.render({
  elem: "#edit",
  height: 600,
  plugins: 'image',
  toolbar: 'image',
  images_upload_handler: function (blobInfo, success, failure) {
    var form = new FormData();
    form.append('files', blobInfo.blob(), blobInfo.filename());
    $.ajax({
      url: '/index/upload.php',//后台图片上传地址
      type: "post",
      data: form,
      processData: false,
      contentType: false,
      success: function(result) {
        layer.msg(result.meta.message);
        success(result.data);
      },
      error: function(e) {
        layer.msg('服务器错误');
      }
    });
  }
  // 其余配置可参考官方文档
},(opt)=>{
  //加载完成后回调
});

三、上述都只能上传图片文件，如果你需要上传其他类型文件需要使用file_picker_callback函数

1、要使TinyMCE能够上传其他类型文件，需要配置下参数，如下：

tinymce.init({
    selector: '#edit',
    language:'zh_CN',
    plugins: 'link',
    toolbar: 'link',
    file_picker_callback: function(callback, value, meta) {},
});

2、编写file_picker_callback函数上传逻辑

var edit = tinymce.render({
  elem: "#edit",
  height: 600,
  plugins: 'link',
  toolbar: 'link',
  file_picker_callback: function (callback, value, meta) {
    //meta.filetype //可以获取上传文件的类型，以此你可以对文件类型些不同的逻辑
    var input = document.createElement('input');//创建一个file型input
    input.setAttribute('type', 'file');
    input.click();
    input.onchange = function() {
      var file = this.files[0];
      var form = new FormData();
      form.append("files", file); 
      $.ajax({
        url: "/index/upload.php",
        type: "post",
        data: form,
        processData: false,
        contentType: false,
        success: function(result) {
          layer.msg(result.meta.message);
          callback(result.data);
        },
        error: function(e) {
          layer.msg("服务器错误");
        }
      });
    };
  }
  // 其余配置可参考官方文档
},(opt)=>{
  //加载完成后回调
});

参考：tiny中文文档

转载：感谢您对油纸伞个人博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源油纸伞博客”。

很赞哦！ (2)