TinyMCE 如何限制上传图片大小？

TinyMCE 上传图片大小限制：轻松掌控

想要限制用户在 TinyMCE 编辑器中上传的图片大小？没问题！TinyMCE 提供了 image_uploadtab 和 image_upload_handler 两个配置选项，可以帮助你轻松实现这一目标。

步骤一：启用上传图片选项卡

首先，在初始化 TinyMCE 时，将 image_uploadtab 选项设置为 true，以便启用上传图片选项卡：

tinymce.init({
  selector: 'textarea',
  plugins: 'image',
  toolbar: 'image',
  image_uploadtab: true,
  // ...其他配置
});

步骤二：设置图片上传处理器

接下来，使用 image_upload_handler 选项来指定一个函数，该函数将用于处理上传的图片。在这个函数中，你可以添加图片大小限制的逻辑：

tinymce.init({
  // ...其他配置
  image_upload_handler: function (blobInfo, success, failure) {
    if (blobInfo.blob().size > 1024 * 1024) { // 限制图片大小为 1MB
      failure('图片大小不能超过 1MB');
      return;
    }
    // 处理上传图片的代码，例如将图片上传到服务器
  }
});

在上面的代码中：

• blobInfo 对象包含了上传图片的信息，例如文件大小、文件类型等。
• success 函数用于在图片上传成功后调用。
• failure 函数用于在图片上传失败后调用，并向用户显示错误消息。

代码示例：

tinymce.init({
  selector: 'textarea',
  plugins: 'image',
  toolbar: 'image',
  image_uploadtab: true,
  image_upload_handler: function (blobInfo, success, failure) {
    if (blobInfo.blob().size > 1024 * 1024) { 
      failure('图片大小不能超过 1MB');
      return;
    }
    // 处理上传图片的代码，例如：
    const formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());

    fetch('/upload', {
      method: 'POST',
      body: formData
    })
    .then(res => res.json())
    .then(data => success(data.location))
    .catch(error => failure('上传图片失败'));
  }
});

在这个示例中，我们限制上传的图片大小为 1MB。如果上传的图片超过了这个限制，就会显示错误消息 '图片大小不能超过 1MB'。如果上传的图片符合要求，就会将图片上传到服务器，并将上传成功后的图片地址返回给 TinyMCE 编辑器。

通过以上步骤，你可以轻松地限制用户在 TinyMCE 编辑器中上传的图片大小，从而更好地控制网站内容和性能。