tinyMCE editor setting localised path as src of uploaded image

Question

I've setup tinyMCE to do image uploading and it displays uploaded images in the editor, but on inspecting the source of the editors HTML I can see that the src attribute is set like it would be a file path:

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

I have a file_picker_callback which POSTs the image to my backend server to save the image, and returns an absolute URL in the "location" key as specified in the tinyMCE docs: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url

But I am unsure why regardless of providing an absolute URL the src set on the image begins with "../../../".

The relevant tinyMCE configuration:

  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();
      }
  });

I can see that there is an options object I can pass to the callback which sets some element attributes of the image, but I can't find a reference to what this object can contain in the docs :(

Would like some help to solve this and get absolute URLs in my image srcs, thanks

@MichaelFromin i believe i've shared the relevant configuration? (file_picker_callback/file_picker_types) — a7omiton
think i figured out why now, has to do with the URI scheme of the returned URL, they have to match, but my dev environment is using http while the url generated returns https. — a7omiton

Ego Slayer Ego Slayer · Accepted Answer · 2018-12-30T09:48:47

convert_urls: false,

By default all URLs are automatically converted to relative URLs. If you want to insert the real URL of the uploaded image, set convert_urls option to false. It will restore URLs to their original values.

tinyMCE editor setting localised path as src of uploaded image

1 Answers