CODEWITHSUNDEEP
tinymcetinymce-4
a7omiton
a7omiton

Reputation: 1617

tinyMCE editor setting localised path as src of uploaded image

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

Upvotes: 2

Views: 4180

Answers (1)

Ego Slayer
Ego Slayer

Reputation: 2067

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.

Upvotes: 10

Related Questions