Как установить размер загружаемого изображения для tinyMce?

Question

Я использую @ tinymce / tinymce- angular и пытаюсь установить ограничение на загрузку изображений. Я пытался использовать 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, тогда мы можем найти информацию о blob-изображении в editorUpload.blobCache.

  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