wysiwyg editor breaks images in backend but showing in frontend

[sujithathanga]

hai,

   At first the magento 2.1.7 , wysiwyg editor in backend works good .. Insert and edit images shows in both back end and Front end but suddenly it only showed in front end.. can anyone help me to solve this problem..

[Damian Culotta]

Hi @sujithathanga,

Maybe you can follow this issue on Github (and the references).

It seems was fixed but you should upgrade at least to 2.1.9.

[sujithathanga]

Ok thank you. But if i upgrade magento 2.1.7 to 2.1.9 means anything affected in my theme and plugin?

[Damian Culotta]

Hi @sujithathanga,

Maybe you'll find some small issues but it will depend on you theme and modules. I guess it shouldn't be a big problem but some details maybe will need some extra work.

My recomendation is to be on the last stable version all the time (because security). In your case you should upgrade to 2.1.12.

[treii28]

Is it the theme that breaks this? We have a similar problem where there seems to be some kind of sanitization of the image url going on but it appears to be either going on in the wrong place (too soon) or on the wrong thing. the actual tag (which appears to resemble either a templating tag or something angular-ish) is getting sanitized which breaks it whenever you do an add/insert image.
When you first do an add/insert image, it looks fine in the pop-over dialog as something like:

{{media url="wysiwyg/logo.png"}}

But the preview is broken below it. It requires you to enter an alt-text and the button on the bottom left reads 'Insert'. When you click 'Insert' it adds a broken link in the wysiwig editor (with the alt-text written to the right of it)

If you then right click the broken link to bring the image edit pop-over back up, it now appears as: 

{{media%20url="wysiwyg/logo.png"}}

(note the space after media has been replaced with a %20 - the preview is still broken, the button on the bottom left now reads 'Update' - clicking it changes nothing)

At this point, if you either click the 'HTML' button or turn-off the wysiwig editor with the show/hide editor button above the wysiwig editor, you can see the image link showing as something like:

<img src="{{media%20url=&quot;wysiwyg/logo.png&quot;}}" /><img src="{{media%20url=&quot;wysiwyg/logo.png&quot;}}" alt="logo" />

(note at this point, the %20 for the space wasn't actually the only thing sanitized. The double quotes are also sanitized as ". Also note it somehow doubles the link and you have to remove the second one now. this seems to occur when I opened the dialog the second time even though I hit 'cancel' when making this example)

If you replace the %20 with a space, and replace each &quot with a " and return to the wysiwig editor, it will repair the image so it shows in the wysiwig from that point forward (in so long as you don't try to update it using the same pop-over Insert/Update dialog). As a side note, if you then go back to view the raw HTML after making this change, the {{media=*}} content is no longer visible and it appears as something like:

<img src="https://www.albumenvy.com/admin_idraws/cms/wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvbG9nby5wbmcifX0,/key/408c6919f05940ec97cbfc4a0028c3d9b4e844117509d582c1e0a1240862e489/" />

If this is a theme issue, I would love to know as we are using a CleverSoft theme and it seems they have a notorious habit of denying responsibility for problems. This error was first noticed in the Magefan blog and Magefan has apparently added some kind of patch as an attempt to fix it for Magento 2.2.x (but it doesn't fix it in my tests). But the problem appears to occur anywhere the wysiwig editor exists (content editing, block editing, product description editing) and if it is the fault of something in the Cleversoft theme, I would really like to know.

[Devendra1991]

for Custom Product text type Attribute:

Inject Magento\Catalog\Helper\Output class in you Block Class.

use Magento\Catalog\Helper\Output as ProductAttribute;
class Planlist extends DataObject
{
/**
 * @var ProductAttribute 
 */
private $_productAttribute;
public function __construct(
...
ProductAttribute $productAttribute,
...
) {
...$this->_productAttribute = $productAttribute;
...
}

/**
     * Prepare product attribute html output
     *
     * @param ModelProduct $product
     * @param string $attributeHtml
     * @param string $attributeName
     * @return string
     * @SuppressWarnings(PHPMD.CyclomaticComplexity)
     */
    public function getAdditionalData($product, $attributeHtml, $attributeName)
    {
        return $this->_productAttribute->productAttribute($product, $attributeHtml, $attributeName);
    }
}

Call this Function where the need

$this->getAdditionalData($item,$item->getData('service_packages'),'service_packages');