Magento – Wrong URL returned by WYSIWYG editor for images

ce-1.7.0.2imagemagento-1.7wysiwyg

I've noticed a weird behavior from the WYSIWYG editor in the product description. Whenever I insert an image it will output

<img src="{{media url="http://example.com/media/wysiwyg/the-picture.jpg"}}" alt="" />

while in another context, such as static blocks editing, it would output

<img src="{{media url=wysiwyg/the-picture.jpg"}}" alt="" />

This results in displaying

<img alt="" src="http://example.com/media/http://example.com/media/wysiwyg/the-picture.jpg">

which is obviously not what I want.

I've searched on different topics, and no one seems to have that specific problem. Did anyone come across this, does anyone have a fix?

the error is due to Mage::getBaseUrl('media') does not pass the store parameter !

To solve this bug, change in :

app/code/core/Mage/Cms/Helper/Wysiwyg/Images.php

Find function : getImageHtmlDeclaration

and change :

$mediaPath = str_replace(Mage::getBaseUrl('media'), '', $fileurl);

$mediaPath = str_replace(mage::app()->getStore($this->_storeId)->getBaseUrl('media'), '', $fileurl);

Tracing the code, it looks to me that there is a constant missing in the helper routine located in Mage_Cms_Helper_Wysiwyg_Images::getBaseUrl()

The routine is as such:

public function getBaseUrl()
    {
        return Mage::getBaseUrl('media') . '/';
    }

and making the change to

public function getBaseUrl()
    {
        return Mage::getBaseUrl('media') . Mage_Cms_Model_Wysiwyg_Config::IMAGE_DIRECTORY . '/';
    }

fixes the issue.

This is called from Mage_Cms_Model_Wysiwyg_Images_Storage::getThumbnailUrl()

return str_replace('\\', '/', $this->getHelper()->getBaseUrl() . $thumbSuffix) . $randomIndex;

which clearly outputs the wrong url without the constant in place.

There are several things to keep in mind when using WYSIWYG for transactional e-mails:

Sending out HTML e-mails which can be viewed in a nice way in multiple e-mail clients is not always fun & easy: There are some "specialities" from mail client to mail client that need to be taken care of
It could mess up your e-mail design and won't benefit some special adaptions as mentioned above
You're limited to the WYSIWYG functions in your e-mail template. When I think of adding conditions like {{depend object.function()}} .... {{depend}} this can't be inserted with an WYSIWYG anyway.
It will not work with responsive e-mail templates as you would not be able to edit reponsive e-mails with a WYSIWYG editor
The WYSIWYG editor will try to interpret layout handles {{var items_html}} as widget instances which can cause problems (thanks to @SanderMangel for pointing that out).

I would not say that's impossible, if you find the ultimate WYSIWYG editor for transactional e-mails that does not cause problems, tell us :-)