Question

我已经设置了tinyMCE来进行图像上传，并且它在编辑器中显示了上传的图像，但是在检查编辑器HTML的源代码时，我可以看到src属性被设置为类似于文件路径：

<img src="../../../api/images/1"/>

我有一个file_picker_callback，它将图像发布到后端服务器以保存图像，并按照tinyMCE文档中指定的“位置”键返回绝对URL：https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url

但是我不确定为什么无论提供绝对URL，图像上设置的src都以“ ../../../”开头。

相关的tinyMCE配置：

  tinymce.init({
      file_picker_types: 'file image',
      file_picker_callback: function(cb, value, meta) {
        let tinyMCE = this;
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*,.doc,.docx,.txt,.rtf,.odt,.pdf');

        input.onchange = function() {
          var file = this.files[0];
          var reader = new FileReader();
          reader.onload = function () {
            // Register the blob in TinyMCEs image blob registry.
            var id = 'blobid' + (new Date()).getTime();
            var blobCache =  tinyMCE.editorUpload.blobCache;
            var base64 = reader.result.split(',')[1];
            var blobInfo = blobCache.create(id, file, base64);
            blobCache.add(blobInfo);

            backend.save(file).then(
              fileLocation => {
                let options = {};
                if (meta.filetype == 'file') {
                  options = {
                    title: file.name,
                    text: 'My Attachment'
                  };
                }
                cb(fileLocation, options);
              },
              (/* error */) => {
                blobCache.removeByUri(blobInfo.blobUri());
              }
            );
          };
          reader.readAsDataURL(file);
        };

        input.click();
      }
  });

我看到有一个可以传递给回调的选项对象，该对象设置了图像的某些元素属性，但是我在文档中找不到对该对象的引用：（

想要一些帮助来解决此问题并在我的图像src中获取绝对URL，谢谢

Answer 1

convert_urls: false,

默认情况下，所有URL都会自动转换为相对URL。如果要插入上载图像的真实URL，请将convert_urls选项设置为false。它将URL恢复为原始值。

tinyMCE编辑器将本地化路径设置为上载图像的src

1 个答案: