Tinymce 图片上传和文件上传

引言

TinyMCE：功能强大、所见即所得的富文本编辑器，对于后端程序对上传图片的处理暂时不在本文范围内。
效果浏览：
Kapture 2024-05-07 at 16.48.22.gif
上传文件后的效果如下：

上传图片

启用图片插件

plugins: 'image'

在工具栏显示图片工具按钮

toolbar: 'image'

自定义出片处理方法。设置图片上传的相关参数如下（具体操作看下文）

上传文件

先启动个支持上传文件的插件

plugins: 'link'

在工具栏显示链接编辑按钮

toolbar: 'link'

添加file_picker_callback参数，自定义文件处理方法（具体操作看下文）

设置文件和图片上传的参数

images_file_types

用于设置图像对话框中允许上传哪些图像文件格式。
默认值： 'jpeg,jpg,jpe,jfi,jif,jfif,png,gif,bmp,webp'

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'image',
  toolbar: 'image',
  images_file_types: 'jpg,svg,webp'
});

在这个示例中，images_file_types设置为'jpg,svg,webp'，这意味着图像对话框中只能上传jpg,svg,webp格式的图像文件。

file_picker_types 和file_picker_callback

file_picker_types：指定所需的文件选择器类型。目前存在三种有效类型：file、image和media。
file_picker_callback：用于将自定义文件选择器添加到具有它的对话框中。小浏览按钮将出现在支持的文件类型字段中（file_picker_types设置的）。
示例代码：

tinymce.init({
  selector: 'textarea',
  plugins: 'image code link',
  toolbar: 'undo redo | link image | code',
  image_title: true,
  file_picker_types: 'file',
  file_picker_callback: () => {},
});

效果图：

file_picker_callback: () => {}这里放了一个空的回调函数，点击小浏览按钮没有任何反应
对于javascript代码示例如下，点击小按钮弹出文件选择器，可以上传本地文件到服务器。

file_picker_callback: (cb, value, meta) => {
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');

    input.addEventListener('change', (e) => {
      const file = e.target.files[0];

      const reader = new FileReader();
      reader.addEventListener('load', () => {
        const id = 'blobid' + (new Date()).getTime();
        const blobCache =  tinymce.activeEditor.editorUpload.blobCache;
        const base64 = reader.result.split(',')[1];
        const blobInfo = blobCache.create(id, file, base64);
        blobCache.add(blobInfo);
        cb(blobInfo.blobUri(), { title: file.name });
      });
      reader.readAsDataURL(file);
    });

    input.click();
  },

file_picker_types 和file_picker_callback结合使用，可以设置选择本地文件上传还是云文件上传。

block_unsupported_drop

当该block_unsupported_drop选项设置为时true，编辑器会阻止将不受支持的图像和文件拖放到编辑器中。拖入不受支持的文件会出现如下图的提示。

如果该block_unsupported_drop选项设置为false，将不受支持的文件放入编辑器中会导致浏览器离开编辑器的页面，在新页面中打开放入的文件或图片。

images_upload_handler

自定义图像和文件的处理方式,替换 TinyMCE 的默认 JavaScript 上传处理函数。
对于javascript示例代码:

const example_image_upload_handler = (blobInfo, progress) => new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();
  xhr.withCredentials = false;
  xhr.open('POST', 'postAcceptor.php');

  xhr.upload.onprogress = (e) => {
    progress(e.loaded / e.total * 100);
  };

  xhr.onload = () => {
    if (xhr.status === 403) {
      reject({ message: 'HTTP Error: ' + xhr.status, remove: true });
      return;
    }

    if (xhr.status < 200 || xhr.status >= 300) {
      reject('HTTP Error: ' + xhr.status);
      return;
    }

    const json = JSON.parse(xhr.responseText);

    if (!json || typeof json.location != 'string') {
      reject('Invalid JSON: ' + xhr.responseText);
      return;
    }

    resolve(json.location);
  };

  xhr.onerror = () => {
    reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
  };

  const formData = new FormData();
  formData.append('file', blobInfo.blob(), blobInfo.filename());

  xhr.send(formData);
});

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  images_upload_handler: example_image_upload_handler
});

补充

图片上传和文件上传区别在于数据量不一样。

Blob(Binary Large Object):表示二进制形式的大量数据，不一定符合任何文件格式(非结构数据)。Blob 存储将这些大量数据保存在称之为数据湖的非分层存储区域中。

FormData:
官方这样解释：

使用FormData上传文件示例：

uploadFile(file: File): Observable<void>> {
    const formData: FormData = new FormData();
    formData.append('file', file);
    return this.httpClient.post(`file/upload`,
      formData);
  }

上传文件时，使用 FormData 对象和 append 方法是一种常见的做法。

将一个文件或 Blob 添加到 FormData 对象时，浏览器会自动设置正确的 Content-Type 头部。
FormData 对象会自动生成一个合适的 boundary 字符串，这个字符串用于在 HTTP 请求体中分隔不同的参数。
FormData 对象允许你以二进制形式发送数据

总结

images_file_types: 用于设置图像对话框中允许上传的图像文件格式。
file_picker_callback: 用于自定义文件选择器的回调函数，允许你控制文件选择器的行为，例如添加文件类型限制、自定义文件处理逻辑等。
Blob:表示二进制形式的大量数据，可以是非结构数据。
FormData:浏览器遇见FormData对象会自动设置正确的 Content-Type 头部。

参考文章

tinymce官方文档
 FormData官方文档