1

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

4
  • Can you share your complete TinyMCE configuration? Aug 17, 2018 at 18:34
  • @MichaelFromin i believe i've shared the relevant configuration? (file_picker_callback/file_picker_types)
    – a7omiton
    Aug 17, 2018 at 19:49
  • 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
    Aug 17, 2018 at 20:29
  • I want save file, what is the "backend" in you script?
    – sunny
    Oct 6, 2023 at 19:37

1 Answer 1

8
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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.