如何为 tinyMce 设置图片上传大小？

Question

我正在使用 @tinymce/tinymce-angular，我正在尝试设置图像上传限制。我尝试使用 documentation 中提到的 images_upload_handler。这是我的代码

  imagesUploadHandler = (blobInfo, success, failure) => {    
    const size = blobInfo.blob().size;
    // Just for testing I set small size
    if (size > 100) {
      failure('error');
    } 
    console.log(size);

  }

问题是我看到关于大小限制的错误消息，但图像已添加到 tinyMce 中。如何防止图片添加失败？

示例 Stackblitz

Answer 1

我使用 BeforeSetContent 事件解决了这个问题。在设置内容之前需要检查内容类型是否为blob然后我们可以在editorUpload.blobCache中找到图像blob信息。

  setup = editor => {
    editor.on('BeforeSetContent', e => {
      // e.content = <img src="blob:http://localhost:4200/:id" />
      if (e.content && e.content.includes('blob:')) {
        const s = e.content
          .substr(e.content.indexOf('blob'), e.content.length)
          .replace('/>', '')
          .replace('>', '')
          .replace('"', '')
          .trim();
        if (e.target.editorUpload.blobCache.getByUri(s)) {
          let size = e.target.editorUpload.blobCache.getByUri(s).blob().size;
          const allowedSize = 10; // KB
          size = size / 1024; // KB
          if (size > allowedSize) {
            console.log('Max size Error');
            e.preventDefault();
            e.stopPropagation();
          }
        }
      }
    });
  }

Stackblitz example

如何为 tinyMce 设置图片上传大小？

How to set image upload size for tinyMce?

angular

tinymce

tinymce-plugins