您现在的位置是: 网站首页> PHP PHP

tinyMCE富文本图片自定义上传

Smile 2020-04-02 PHP 阅读:2767

简介用tinyMCE富文本编辑文章时一般都需要在文章中插入或者上传图片和文件,需要配置tinyMCE富文本一些参数,需要指定上传方法,将图片或者文件上传到服务器保存,然后服务器返回一个url给前端作为链接

一、建议大家使用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)

文章评论

站点信息