backend wysiwig add image creates broken link #14569
Description
Magento v2.2.2
In any admin menu/editor that includes the wysiwig editor (product content, content pages, content blocks, etc) , when you use the icon to insert/edit image, it appears to be running some kind of url sanitize code on the template and/or angular mark-up for the image reference that is left in place when you add an image to the first line of the 'general' tab after clicking the 'browse' icon, selecting an image and clicking 'insert file'.
Upon returning to the pop-over, it shows the image URL as something like:
{{media url="wysiwyg/logo.png"}}
but the preview below it is a broken image.
If you then click 'insert' you get a similar broken image icon in the editor. If you then right click the broken icon and click 'insert/edit image', the image URL has now changed slightly to show something like:
{{media%20url="wysiwyg/logo.png"}}
again with the preview as a broken image
If you actually view the html and/or turn the wysiwig off to examine the image in the raw mark-up, it appears as:
<p><img src="{{media%20url="wysiwyg/logo.png"}}" alt="test" /></p>
I have figured out as of this point that if you replace the %20 with a space and replace each " with a " character such that the raw html looks like:
<p><img src="{{media url="wysiwyg/logo.png"}}" alt="test" /></p>
it will function properly when you return to the editor mode (until and if you try to edit it in the same manner again using the 'browse' button)
Consequently if you then go back to view the raw HTML code again, it now changes yet one more time to now show similar to the following:
<p><img src="https://www.oursite.com/admin_123/cms/wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvbG9nby5wbmcifX0,/key/41a39fb2aff93949f1d592e918b6948760f226289e96de3f035c2f55624c63bd/" alt="test" /></p>