我们的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.我们如何减轻这种情况的发生?我是否遗漏了忽略上传脚本的内容?

推荐答案

看起来我好像解决了这个问题.

在TinyMCE 6中,如果您通过images_upload_handler提供脚本,则必须将automatic_uploads设置为true,否则它将忽略脚本并自动使用数据作为源来"上传"图像.看看TinyMCE的docs here,尽管它没有明确说明这一点,但这就是让我的脚本工作的原因.

Javascript相关问答推荐

通过实现regex逻辑自定义数据表搜索

如何使用React渲染器放置根dis?

使用typeof运算符获取对象值类型-接收字符串而不是数组

序列查找器功能应用默认值而不是读取响应

如何在Angular中插入动态组件

网页自检测外部元素无法加载

在这种情况下,如何 for each 元素添加id?

引用在HTMLAttributes<;HTMLDivElement>;中不可用

如何在Vue 3中创建自定义 Select 组件,并将选项作为HTML而不是props 传递?

加载背景图像时同步旋转不显示的问题

如何使用子字符串在数组中搜索重复项

PDF工具包阿拉伯字体的反转数字

如何在Angular17 APP中全局设置AXIOS

Jest toHaveBeenNthCalledWith返回当前设置的变量值,而不是调用时的值

如何在JAVASCRIPT中合并两组对象并返回一些键

在Odoo中如何以编程方式在POS中添加产品

如何更改Html元素S的 colored颜色 ,然后将其褪色为原始 colored颜色

如何在独立的Angular 应用程序中添加Lucide-Angel?

react 路由DOM有条件地呈现元素

需要从对象生成列表