tinymce实现本地图片或者文件上传

Posted on | In |

使用tinymce官方demo的时候，demo中图片或者是视频上传是直接输入文件云上地址的，在实际使用大部分还是希望直接从本地上传图片，今天我们来学习一下看如何实现？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  file_picker_types: 'file image media',
  file_picker_callback: function(callback, value, meta) {
    // Provide file and text for the link dialog
    if (meta.filetype == 'file') {
      callback('mypage.html', {text: 'My text'});
    }

    // Provide image and alt text for the image dialog
    if (meta.filetype == 'image') {
      callback('myimage.jpg', {alt: 'My alt text'});
    }

    // Provide alternative source and posted for the media dialog
    if (meta.filetype == 'media') {
      callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
    }
  }
});

file_picker_types 是限制选择文件类型，file image media

一旦配置弄好，我们跑起来,右边会出现一个放大镜的小图标
tinymce
choose

完美

选择文件之后，假设是图片，我们还需要对文件进行上传的一些操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
let _this = this;
tinymce.init({
  selector: 'textarea',
  file_picker_types: 'file image media',
  file_picker_callback: function(callback, value, meta) {
    if (meta.filetype == 'image') {
    var input document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.onchange = function() {
        var file = this.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function() {
            var base64 = reader.result;
            _this.postBase64(base64,callback);
        };
    };
    input.click();
    }
  }
});

postBase64(base64,callback){
    let _this=this;
    //ajax 请求在这边写，在ajax请求回来之后加入callBack，会显示在提示框中，显示名称和地址，具体如下图看
    callback('myimage.jpg', {alt: 'My alt text'});
},

haschoose

附上官网地址以及对应配置的地址
https://www.tiny.cloud/docs/demo/basic-example/
https://www.tiny.cloud/docs/configure/file-image-upload/#file_picker_callback