TinyMCE 6 产生 data:image 对象通过提供的脚本上传

Question

我们的 TinyMCE 自托管脚本：

const example_image_upload_handler = (blobInfo, progress) => new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();
  xhr.withCredentials = false;
  xhr.open('POST', '/p/account/project-post-image-upload');

  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('tinymce_file_upload', blobInfo.blob(), blobInfo.filename());

  xhr.send(formData);
});
  
tinymce.init({
  selector: '.tinymce',
  model: 'dom',
  plugins: 'autoresize image link lists',
  autoresize_bottom_margin: 20,
  skin: 'theme',
  content_css: 'tinymce/skins/content/theme/content.min.css',
  min_height: 300,
  toolbar_sticky: true,
  contextmenu: 'link image paste',
  toolbar: ' undo redo|formatselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | image link bullist numlist | hr',
  block_formats: 'Paragraph=p; Header 1=h1; Header 2=h2; Header 3=h3; Header 4=h4; Header 5=h5; Header 6=h6',
  menubar: false,
  media_dimensions: false,
  object_resizing : false,
  image_uploadtab: true,
  images_upload_handler: example_image_upload_handler,
  images_file_types: 'jpeg,jpg,png,gif',
  automatic_uploads: false,
  image_dimensions: false,
  image_class_list: [
    {title: 'Regular', value: 'tinymce_full_width img-fluid'}
  ],
  relative_urls : false,
  document_base_url: "/",
  setup: function(editor) {
    editor.on('init', function () {
      editor.getContainer().style.transition='border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out';
    }).on('focus', function(e) {
        editor.getContainer().style.boxShadow='0 0 0 .2rem rgb(54 97 11 / 25%)';
    }).on('blur', function(e){
        editor.getContainer().style.boxShadow='';
    }).on('keyup', function(e){

    });
  }
});

我们有一个将图像上传到我们的服务器的功能，但是截至最近，它忽略该脚本并仅在 src 中上传 data:image。我们如何减轻这种情况的发生？我是否错过了忽略上传脚本的东西？

Answer 1

看来我已经解决了这个问题。

在TinyMCE 6中，如果您通过

images_upload_handler

提供脚本，则

automatic_uploads

必须设置为

true

，否则它将忽略脚本并自动使用数据作为源来“上传”图像。看看 TinyMCE 的文档这里，尽管它没有明确说明这一点，但这就是让我的脚本工作的原因。