Magento2: inserted image in product description got broken on front end

[forvin]

My site is built by Magento 2.1. Newly added products will not appear until you manually re-index via SSH. But inserted image in product description will break after you re-index your magento. Anybody know how to fix the two problems? Thank you !

[wert2all]

Please, format this issue according to the Issue reporting guidelines: with steps to reproduce, actual result and expected result.

[allanpaiste]

Preconditions

Using custom Ubuntu xenial vagrant-box, php7, apache

1. Have latest stable release of Magento 2.1 installed.
2. Install sample data (sampledata:deploy).
3. {optional} disable xdebug php module (makes testing faster).
4. {optional} disable js merging/minifying (if running in developer mode, makes testing faster).

Steps to reproduce

1. Log into admin
2. Navigate to PRODUCTS >> Inventory >> Catalog
3. Filter the list by name: "Breathe-Easy Tank"
4. Select the product that has that exact name (should be last in the list)
5. In the editor form open up: Content >> Description
6. Enable WYSIWYG editor
7. Use the Insert/Edit image icon in the editor toolbar
8. Use the "Browse" icon/button (it's next to "Image url" field) in the popup that opens
9. Choose any image
10. (the image will show up in the product description area)
11. save the product
12. switch to storefront in another tab
13. search for "Breathe-Easy Tank"
14. choose the product in result that has that exact name
15. find the product description on the page (the added image should be visible there)
16. [admin tab] sign out from admin
17. [storefront tab] reload the category page

Expected result

Image gets rendered in the description area

Actual result

Image is not rendered, instead you get broken image link icon

Notes

What I have now experienced is that the media directive in product description never gets converted to the common format of {{media}}. Instead, it remains an admin link. This means that it kind of looks OK for you after you have saved it and remain logged in in admin, but as soon as you log out or as soon as someone else visits the product page - the image link is broken.

Seems that same happens with category description. Even if you try to use media directives, they never get converted to proper image url's.

Issue prevalent: product pages, category pages.

[kassner]

The actual URL generated in the frontend for the image is similar to:

http://magento.dev/admin/cms/wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvXzkwODgyOTA2X21lZGlhaXRlbTkwODgyOTA1LmpwZyJ9fQ,,/key/63c0a22e66f27a455e7909536728d8fe3fe5042ab22c7813ddd77c476c6a2f15/

Accessing the url directly redirects you to the admin dashboard (if logged in).

[dthampy]

Internal ticket ->MAGETWO-57796 has been created for this issue. Thank you for the detailed bug report.

[devhn]

Same problem as @allanpaiste. Revealing admin url is a security issue:

http://domain.com/admin_x8ds75/cms/wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvZ2lmdGNhcmRzL3Rlc3QuanBnIn19/key/33b667a795c3983972e19c299be458e89007ce028ff3c58cbe264eabadee061a/

We have a lot of product descriptions which show a broken image and it happens only when administrator log's out from Magento admin. This should be high priority.

[shiftedreality]

Hi @forvin

This issue was fixed in develop branch and will be ported to 2.1.x branch.
Closed.

[christian-walker]

@shiftedreality is there a timetable for when it will be ported over to the 2.1.x branch?

[ferrarinim]

I've downloaded and replace the file into the server folder lib/web/mage/adminhtml/wysiwyg/tiny_mce/setup.js

but I'm still having the problem...

[shiftedreality]

Hi @ferrarinim. Please re-edit your product description, because you have corrupted data in your DB.

[ferrarinim]

Hi @shiftedreality... I've tried but after some time the image disappears...
look at http://www.e-miko.com/mayliss-chelsea-vernice-black.html

[minhluan259]

I've update two files setup.js and Eav.php
But I still have same issue #7393

[minhluan259]

@shiftedreality , @mmansoorebay
I've tested in product page, the issue was fixed.
But it's not fix in category page.

[shiftedreality]

Hi @minhluan259

Please, open another ticket with your environment details and we will investigate this case also.
Thanks.

[minhluan259]

Hi, @shiftedreality
I've exactly same issue #7393

[wigman]

I can confirm that these changes fix the problem on product pages:

• adding "'add_directives' => true," on line 183 of app/code/Magento/Cms/Model/Wysiwyg/Config.php

• KEEPING "content = this.decodeContent(content);" on line 396 of lib/web/mage/adminhtml/wysiwyg/tiny_mce/setup.js

• adding"content = decodeURIComponent(content);" on line 183 of lib/web/mage/adminhtml/wysiwyg/tiny_mce/setup.js

Or in short, all commits mentioned by @mmansoorebay
For me they where a bit confusing though, because some things are removed an re-added again. But if you follow through all the commits it works eventually.

So, thanks for that;-)

[twistedatrocity]

@wigman
In CE 2.1.5 the issue still persists. However for me the edits were a little different.

Adding:
'add_directives' => true,
to line 183 of:
vendor/magento/module-cms/Model/Wysiwyg/Config.php

Was enough to fix it for me. Note that I use dynamic media urls.

If I added the content = decodeURIComponent(content); To the tiny_mce setup.js file it would throw error about parsing URI in the editor. So left it out.

My dynamic media urls for images work fine now in product editor.

[gboz17]

@twistedatrocity I was getting the URI error as well. Your suggestions worked for me.

[shiftedreality]

This issue can not be fixed for previously saved entities. Please re-edit broken descriptions and insert images again.

[stianmartinsen]

I'm also experiencing this issue in CE 2.1.5.

Adding
'add_directives' => true,
to
customizeWysiwyg in /vendor/magento/module-catalog/Ui/DataProvider/Product/Form/Modifier/Eav.php

fixes the issue, but I don't want to change core files or overwrite the function. How come this isn't merged into 2.1 when it was merged into develop 5 months ago?

[Talv]

I can confirm what was said above - adding 'add_directives' => true into WYSIWYG config fixes it. No changes to JS files are required (at least not on 2.1.5).

I decided to pack the fix into a module, since I'm putting together 3rd shop on 2.1 (bug exists since 2.1.0 ...), and fix is still not merged into stable branch.. unbelievable.

https://github.com/Talv/magento2-wysiwyg-fix

[jetfuelcreative]

@Talv, does this work for categories, too? Doesn't seem to be working for me.

[real34]

@shiftedreality what do you mean by "it is in develop"? I still see nothin as f today in https://github.com/magento/magento2/blob/99e85cbc45223baa3551e4c534b650c0d2c6358b/app/code/Magento/Cms/Model/Wysiwyg/Config.php#L161

Would it be possible to reopen this issue so it could be triaged by @magento-team or @vrann and included in the March milestone?

[shiftedreality]

Looks like this fix was not delivered into 2.1 branch.
Found the intenal ticket that stuck MAGETWO-59690.
Thanks.

[goivvy]

@jetfuelcreative https://github.com/Talv/magento2-wysiwyg-fix works fine here, I think you need to re-upload the images.

[hostep]

@shiftedreality: the line:

content = decodeURIComponent(content);

introduces a new bug in the tinymce editor, namely when you insert a % somewhere, for example: this product contains 10% sugar or something like that, the editor starts throwing errors:
error: error in [unknown object].fireEvent(): event name: tinymceSetContent error message: URI malformed

Should I create a new issue for this, or should we continue in this issue?

I found another issue reported on stackexchange with the same problem: https://magento.stackexchange.com/q/167523/2911

UPDATE: @twistedatrocity already mentioned this above

[shiftedreality]

@hosted create a new issue, I will link it internally.
Thanks.

[hostep]

@shiftedreality: just created a new issue: https://github.com/magento/magento2/issues/9452

[ebofi]

@shiftedreality @hostep @stianmartinsen @antboiko

Issue exist on Magento 2.1.6. Any fix available

[jpcsguru]

this still happens in mage 2.1.6

[anujeetphj]

@twistedatrocity , I am not able to override class Custom\Module\Model\Wysiwyg\Config.php.

I followed the below steps:
In Custom\Module\etc\di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
    <preference for="Magento\Cms\Model\Wysiwyg\Config" type="Custom\Module\Model\Wysiwyg\Config"/>
</config>

In Custom\Module\Model\Wysiwyg

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace Custom\Module\Model\Wysiwyg;

use Magento\Framework\Filesystem;
use Magento\Framework\App\Filesystem\DirectoryList;
use Magento\Ui\Component\Wysiwyg\ConfigInterface;

/**
 * Wysiwyg Config for Editor HTML Element
 */
class Config extends \Magento\Framework\DataObject implements ConfigInterface
{
    /**
     * Wysiwyg status enabled
     */
    const WYSIWYG_ENABLED = 'enabled';

    /**
     * Wysiwyg status configuration path
     */
    const WYSIWYG_STATUS_CONFIG_PATH = 'cms/wysiwyg/enabled';

    /**
     *
     */
    const WYSIWYG_SKIN_IMAGE_PLACEHOLDER_ID = 'Magento_Cms::images/wysiwyg_skin_image.png';

    /**
     * Wysiwyg status hidden
     */
    const WYSIWYG_HIDDEN = 'hidden';

    /**
     * Wysiwyg status disabled
     */
    const WYSIWYG_DISABLED = 'disabled';

    /**
     * Wysiwyg image directory
     */
    const IMAGE_DIRECTORY = 'wysiwyg';

    /**
     * @var \Magento\Framework\AuthorizationInterface
     */
    protected $_authorization;

    /**
     * @var \Magento\Framework\View\Asset\Repository
     */
    protected $_assetRepo;

    /**
     * @var \Magento\Variable\Model\Variable\Config
     */
    protected $_variableConfig;

    /**
     * @var \Magento\Widget\Model\Widget\Config
     */
    protected $_widgetConfig;

    /**
     * Core event manager proxy
     *
     * @var \Magento\Framework\Event\ManagerInterface
     */
    protected $_eventManager;

    /**
     * Core store config
     *
     * @var \Magento\Framework\App\Config\ScopeConfigInterface
     */
    protected $_scopeConfig;

    /**
     * @var array
     */
    protected $_windowSize;

    /**
     * @var \Magento\Backend\Model\UrlInterface
     */
    protected $_backendUrl;

    /**
     * @var \Magento\Store\Model\StoreManagerInterface
     */
    protected $_storeManager;

    /**
     * @var Filesystem
     */
    protected $filesystem;

    /**
     * @param \Magento\Backend\Model\UrlInterface $backendUrl
     * @param \Magento\Framework\Event\ManagerInterface $eventManager
     * @param \Magento\Framework\AuthorizationInterface $authorization
     * @param \Magento\Framework\View\Asset\Repository $assetRepo
     * @param \Magento\Variable\Model\Variable\Config $variableConfig
     * @param \Magento\Widget\Model\Widget\Config $widgetConfig
     * @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
     * @param \Magento\Store\Model\StoreManagerInterface $storeManager
     * @param Filesystem $filesystem
     * @param array $windowSize
     * @param array $data
     * @SuppressWarnings(PHPMD.ExcessiveParameterList)
     */
    public function __construct(
        \Magento\Backend\Model\UrlInterface $backendUrl,
        \Magento\Framework\Event\ManagerInterface $eventManager,
        \Magento\Framework\AuthorizationInterface $authorization,
        \Magento\Framework\View\Asset\Repository $assetRepo,
        \Magento\Variable\Model\Variable\Config $variableConfig,
        \Magento\Widget\Model\Widget\Config $widgetConfig,
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig,
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        Filesystem $filesystem,
        array $windowSize = [],
        array $data = []
    ) {
        $this->_backendUrl = $backendUrl;
        $this->_eventManager = $eventManager;
        $this->_scopeConfig = $scopeConfig;
        $this->_authorization = $authorization;
        $this->_assetRepo = $assetRepo;
        $this->_variableConfig = $variableConfig;
        $this->_widgetConfig = $widgetConfig;
        $this->_windowSize = $windowSize;
        $this->_storeManager = $storeManager;
        $this->filesystem = $filesystem;
        parent::__construct($data);
    }

    /**
     * Return Wysiwyg config as \Magento\Framework\DataObject
     *
     * Config options description:
     *
     * enabled:                 Enabled Visual Editor or not
     * hidden:                  Show Visual Editor on page load or not
     * use_container:           Wrap Editor contents into div or not
     * no_display:              Hide Editor container or not (related to use_container)
     * translator:              Helper to translate phrases in lib
     * files_browser_*:         Files Browser (media, images) settings
     * encode_directives:       Encode template directives with JS or not
     *
     * @param array|\Magento\Framework\DataObject $data Object constructor params to override default config values
     * @return \Magento\Framework\DataObject
     */
    public function getConfig($data = [])
    {
        $config = new \Magento\Framework\DataObject();

        $config->setData(
            [
                'enabled' => $this->isEnabled(),
                'hidden' => $this->isHidden(),
                'use_container' => false,
                'add_variables' => true,
                'add_widgets' => true,
                'no_display' => false,
                'encode_directives' => true,
                'baseStaticUrl' => $this->_assetRepo->getStaticViewFileContext()->getBaseUrl(),
                'baseStaticDefaultUrl' => str_replace('index.php/', '', $this->_backendUrl->getBaseUrl())
                    . $this->filesystem->getUri(DirectoryList::STATIC_VIEW) . '/',
                'directives_url' => $this->_backendUrl->getUrl('cms/wysiwyg/directive'),
                'popup_css' => $this->_assetRepo->getUrl(
                    'mage/adminhtml/wysiwyg/tiny_mce/themes/advanced/skins/default/dialog.css'
                ),
                'content_css' => $this->_assetRepo->getUrl(
                    'mage/adminhtml/wysiwyg/tiny_mce/themes/advanced/skins/default/content.css'
                ),
                'width' => '100%',
                'height' => '500px',
                'plugins' => [],
            ]
        );

        $config->setData('directives_url_quoted', preg_quote($config->getData('directives_url')));

        if ($this->_authorization->isAllowed('Magento_Cms::media_gallery')) {
            $config->addData(
                [
                    'add_images' => true,
                    'files_browser_window_url' => $this->_backendUrl->getUrl('cms/wysiwyg_images/index'),
                    'files_browser_window_width' => $this->_windowSize['width'],
                    'files_browser_window_height' => $this->_windowSize['height'],
                ]
            );
        }

        if (is_array($data)) {
            $config->addData($data);
        }

        if ($config->getData('add_variables')) {
            $settings = $this->_variableConfig->getWysiwygPluginSettings($config);
            $config->addData($settings);
        }

        if ($config->getData('add_widgets')) {
            $settings = $this->_widgetConfig->getPluginSettings($config);
            $config->addData($settings);
        }

        return $config;
    }

    /**
     * Return path for skin images placeholder
     *
     * @return string
     */
    public function getSkinImagePlaceholderPath()
    {
        $staticPath = $this->_storeManager->getStore()->getBaseStaticDir();
        $placeholderPath = $this->_assetRepo->createAsset(self::WYSIWYG_SKIN_IMAGE_PLACEHOLDER_ID)->getPath();
        return $staticPath . '/' . $placeholderPath;
    }

    /**
     * Check whether Wysiwyg is enabled or not
     *
     * @return bool
     */
    public function isEnabled()
    {
        $wysiwygState = $this->_scopeConfig->getValue(
            self::WYSIWYG_STATUS_CONFIG_PATH,
            \Magento\Store\Model\ScopeInterface::SCOPE_STORE,
            $this->getStoreId()
        );
        return in_array($wysiwygState, [self::WYSIWYG_ENABLED, self::WYSIWYG_HIDDEN]);
    }

    /**
     * Check whether Wysiwyg is loaded on demand or not
     *
     * @return bool
     */
    public function isHidden()
    {
        $status = $this->_scopeConfig->getValue(
            self::WYSIWYG_STATUS_CONFIG_PATH,
            \Magento\Store\Model\ScopeInterface::SCOPE_STORE
        );
        return $status == self::WYSIWYG_HIDDEN;
    }
}

I am getting 500 internal server error
On checking error log files , below is the error

PHP Fatal error: Uncaught TypeError: Argument 4 passed to Magento\\Catalog\\Controller\\Adminhtml\\Product\\Builder\\Interceptor::__construct() must be an instance of Magento\\Cms\\Model\\Wysiwyg\\Config, instance of Custom\\Module\\Model\\Wysiwyg\\Config given, called in vendor/magento/framework/ObjectManager/Factory/AbstractFactory.php on line 93 and defined in var/generation/Magento/Catalog/Controller/Adminhtml/Product/Builder/Interceptor.php

I've cleared var folder, ran setup:di:compile and deployed static files. Nothing worked as expected.

[twistedatrocity]

@anujeetphj I did not override anything, I just modified the core code. I know it's not recommended to do this but since many game breaking bug fixes are not being backported into 2.1.x releases I am maintaining my own changelog and set of patches to check against should we need to upgrade. So far I have had to reapply all of them on each release.

[denchev]

Issue still exists in Magento 2.1.6.

[veloraven]

This issue has been already fixed and the fix will be available in one of the nearest releases.

[treestonemedia]

How can we fix until 2.2.0 is released?

[korostii]

Hi @treestonemedia, actually, 2.1.6 _is_ already released, as well as 2.1.7 :)

Anyway, the only release guaranteed to have this fix included is 2.2.0.
Judging by the past experience, porting it to 2.1.x might take forever or longer.

[treestonemedia]

@korostii ok - so what IS the solution?

[hostep]

@treestonemedia: scroll up a little bit to the comment from @Talv, he mentions a small extension which might fix this.

@okorshenko: are there already plans to backport MAGETWO-57796 and MAGETWO-66885 to 2.1.x? If not, I'll try creating a PR for this.

[judaschwartz]

OK so i tried the sulotion by @Talv and it breaks the images becuase it just inserts this into the html <img src="{{media url=" wysiwyg="" product-tables="" csimg.jpg"}}"="" width="718" height="1200"> any ideas

[okorshenko]

Hi @hostep
We just created new branch 2.1.8-preview. Please checkout this branch to see what issues will be included to next patch release. We are still pushing new fixes to this branch.

[hostep]

Nice job @okorshenko, this is another huge step forwards in better communicating to the community about what is happening internally, very happy to see this happening!
I'm assuming this will happen for all upcoming minor releases from now on?

If I may, some other things you might consider:

• Use the Milestones feature for every upcoming release, so we can see what github issues are supposed to be solved in a particular new release.
• And it would also be highly appreciated if new minor releases are released much more frequently, like every few weeks and contain a small amount of fixes, like 10 bug fixes per release is more then enough. With the current pace (which is really slow) of releasing minor releases and the huge amount of changes in a minor release it's much harder to understand what is happening. And it comes at quite a big cost to upgrade to a new minor release (especially if you are maintaining multiple projects like we do). And it can also get frustrating if bugs aren't getting solved over multiple months sometimes.

I already mentioned these things a couple of times in the past, but I don't think it hurts to remind you guys about this.

Anyway, I don't want to complain too much, we've seen huge leaps forwards since the beginning of 2017 about communicating towards the community, so big applause for that 👏 👍

(Also big thanks to @korostii, I think his comments have helped to accomplish this new step forwards as well.)

[magento-team]

Internal ticket to track issue progress: MAGETWO-70435

[magento-engcom-team]

@forvin, thank you for your report.
The issue is already fixed in 2.2.0

[kenmaxnejp]

Issue still exists in Magento 2.2.0.

[hostep]

@kenmaxnejp: yes indeed, but the cause of the bug is different this time. The new bug should get fixed by https://github.com/magento/magento2/pull/11048/commits/62378774f239c2019e39bdd353c8c6c674b54fb1. I believe the fix is scheduled to be part of Magento 2.2.2 which should get released by the end of this year from what I've heard.

[kenmaxnejp]

@hostep Thanks for the update. I confirmed the fix 6237877 works in Magento 2.2.0. I posted those images all over again after I edited the file and it works. Actually I cannot find app/code/Magento/Cms/Helper/Wysiwyg/Images.php, so I edited vendor/magento/module-cms/Helper/Wysiwyg/Images.php instead.

[Vishrootways]

How to solve this error in Magento 2.1.8 version? Please help us if anyone know.

[Vishrootways]

How to solve this error in Magento 2.1.8 version? Please help us if anyone know.

[hostep]

@Vishrootways: update to a newer version of Magento, it was fixed in 2.1.9 or 2.1.10 if I remember correctly.

[Vishrootways]

Hi @hostep thank you. Is there any patch to solve this issue in 2.1.8?
and also we are getting this issue in 2.2.2.

[pradeepnew]

We are getting this issue in magento version 2.2.2 and 2.2.3. Any solution?

[hostep]

@pradeepnew or @Vishrootways: can you open a new issue with the exact steps to reproduce this on a clean installation, that would be really appreciated!

[BB-000]

I am having very similar issue (just not on product description) on 2.3.1...... 🤦‍♂️