How to get TinyMCE to not destroy image upload URL’s

Came across a weird not so feature of TinyMCE where it munges the URL your upload script returns when it uploads an image. For example if your upload script returns a url of http://example.com/folder/image.jpg. TinyMCE takes it upon itself to rewrite that URL breaking it to ../../folder/image.jpg  I am not sure why but I think it is trying to help you in some way.

The best clue I could find in the docs as to why this happens is at the bottom of the page in the CORS section here. It appears TinyMCE is removing the domain you add to the url then it cuts from the current page. The problem I encountered was if my page was blog it would remove the http://example.com part and replace it with ../../blog/folder/image.jpg which is not what I wanted.

I was about to replace TinyMCE but I decided to try something else. I did some googling and found this in the docs.  

I included this in my tinymce configs.

relative_urls : false,
remove_script_host : false,
document_base_url :  "{{ prependURL }}"

Those 3 lines of code fixed it all. Totally didn’t expect TinyMCE to munge the URL’s I returned. This ate up an entire day as I kept thinking the reason the image didn’t display was because my code wasn’t creating the URL’s correctly. Then I thought it was my Nginx configs. Then before giving up on TinyMCE  I did this last thing.

prependURL is a variable that contains the url of website hosting the image such as https://example.com TinyMCE prepends that to the url you return to it, even if https://example.com is already part of it. Otherwise it removes https://example.com and replaces it with a relative URL such as ../../folder/image.jpg

I hope this saves someone else time.