Magento2: WYSIWYG editor inserting " instead of correct " in 2.3.0 when inserting image

[InishowenLabs]

Preconditions (*)

1. Magento CE 2.3.x & 2.4-develop

Steps to reproduce (*)

1. Content --> Block --> Insert Image... --> [select image to insert] --> WYSIWYG editor inserts: <img src="{{media url=&quot;wysiwyg/filename.png&quot;}}" alt="" />

Expected result (*)

1. Should instead look like <img src="{{media url="wysiwyg/filename.png"}}" alt="" />

Actual result (*)

1. The following is inserted instead of the correct code: <img src="{{media url=&quot;wysiwyg/filename.png&quot;}}" alt="" />
   
   

[magento-engcom-team]

Hi @InishowenLabs. Thank you for your report.
To help us process this issue please make sure that you provided the following information:

• [ ] Summary of the issue
• [ ] Information on your environment
• [ ] Steps to reproduce
• [ ] Expected and actual results

Please make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, please, add a comment to the issue:

@magento-engcom-team give me $VERSION instance

where $VERSION is version tags (starting from 2.2.0+) or develop branches (for example: 2.3-develop).
For more details, please, review the Magento Contributor Assistant documentation.

@InishowenLabs do you confirm that you was able to reproduce the issue on vanilla Magento instance following steps to reproduce?

• [ ] yes
• [ ] no

[InishowenLabs]

@magento-engcom-team give me 2.3.0 instance

[magento-engcom-team]

Hi @InishowenLabs. Thank you for your request. I'm working on Magento 2.3.0 instance for you

[magento-engcom-team]

Hi @InishowenLabs, here is your Magento instance.
Admin access: https://i-19737-2-3-0.instances.magento-community.engineering/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

[InishowenLabs]

Verified issue exists in vanilla instance.

<img src="{{media url=&quot;3475_2phase.png&quot;}}" alt="" />

Correcting to <img src="{{media url="3475_2phase.png"}}" alt="" /> then viewing the WYSIWYG version of the editor and back to HTML changes the quotation marks back to ".

[kunj1988]

Is anyone has resolved it?

[magento-engcom-team]

Hi @engcom-backlog-andrii. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: :point_down:

• [ ] 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
  Details

  If the issue has a valid description, the label Issue: Format is valid will be added to the issue automatically. Please, edit issue description if needed, until label Issue: Format is valid appears.

• [x] 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue. If the report is valid, add Issue: Clear Description label to the issue by yourself.

• [x] 3. Add Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• [x] 4. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento-engcom-team give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!
  

• [ ] 5. Verify that the issue is reproducible on 2.2-develop branch.

  Details

  - Add the comment @magento-engcom-team give me 2.2-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x

• [x] 6. Add label Issue: Confirmed once verification is complete.

• [x] 7. Make sure that automatic system confirms that report has been added to the backlog.

[kunj1988]

@engcom-backlog-andrii I have resolved this issue can you assign this task to me?

[magento-engcom-team]

@engcom-backlog-andrii Thank you for verifying the issue. Based on the provided information internal tickets MAGETWO-97128 were created

[minhluan259]

@kunj1988 How did you solve it?

[progreg]

@magento-engcom-team give me 2.3.0 instance

[magento-engcom-team]

Hi @progreg. Thank you for your request. I'm working on Magento 2.3.0 instance for you

[magento-engcom-team]

Hi @progreg, here is your Magento instance.
Admin access: https://i-19737-2-3-0.instances.magento-community.engineering/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

[kunj1988]

@kunj1988 How did you solve it?

You need to edit OR override this file: 'app/code/Magento/Cms/Helper/Wysiwyg/Images.php'
with below code
From: $src = $this->isUsingStaticUrlsAllowed() ? $fileUrl : $this->escaper->escapeHtml($directive);
To: $src = $this->isUsingStaticUrlsAllowed() ? $fileUrl : $this->escaper->escapeHtml($directive, null, true);

The same need to edit OR override this file: 'lib/internal/Magento/Framework/Escaper.php'

From:

/**
     * Escape string for HTML context.
     *
     * AllowedTags will not be escaped, except the following: script, img, embed,
     * iframe, video, source, object, audio
     *
     * @param string|array $data
     * @param array|null $allowedTags
     * @return string|array
     */
    public function escapeHtml($data, $allowedTags = null)
    {
        if (!is_array($data)) {
            $data = (string)$data;
        }

        if (is_array($data)) {
            $result = [];
            foreach ($data as $item) {
                $result[] = $this->escapeHtml($item, $allowedTags);
            }
        } elseif (strlen($data)) {
            if (is_array($allowedTags) && !empty($allowedTags)) {
                $allowedTags = $this->filterProhibitedTags($allowedTags);
                $wrapperElementId = uniqid();
                $domDocument = new \DOMDocument('1.0', 'UTF-8');
                set_error_handler(
                    function ($errorNumber, $errorString) {
                        throw new \Exception($errorString, $errorNumber);
                    }
                );
                $data = $this->prepareUnescapedCharacters($data);
                $string = mb_convert_encoding($data, 'HTML-ENTITIES', 'UTF-8');
                try {
                    $domDocument->loadHTML(
                        '<html><body id="' . $wrapperElementId . '">' . $string . '</body></html>'
                    );
                } catch (\Exception $e) {
                    restore_error_handler();
                    $this->logger->critical($e);
                }
                restore_error_handler();

                $this->removeNotAllowedTags($domDocument, $allowedTags);
                $this->removeNotAllowedAttributes($domDocument);
                $this->escapeText($domDocument);
                $this->escapeAttributeValues($domDocument);

                $result = mb_convert_encoding($domDocument->saveHTML(), 'UTF-8', 'HTML-ENTITIES');
                preg_match('/<body id="' . $wrapperElementId . '">(.+)<\/body><\/html>$/si', $result, $matches);
                return !empty($matches) ? $matches[1] : '';
            }  else {
                $result = htmlspecialchars($data, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8', false);
            }
        } else {
            $result = $data;
        }
        return $result;
    }

To:

/**
     * Escape string for HTML context.
     *
     * AllowedTags will not be escaped, except the following: script, img, embed,
     * iframe, video, source, object, audio
     *
     * @param string|array $data
     * @param array|null $allowedTags
     * @param boolean $allowedQuotes
     * @return string|array
     */
    public function escapeHtml($data, $allowedTags = null, $allowedQuotes = false)
    {
        if (!is_array($data)) {
            $data = (string)$data;
        }

        if (is_array($data)) {
            $result = [];
            foreach ($data as $item) {
                $result[] = $this->escapeHtml($item, $allowedTags);
            }
        } elseif (strlen($data)) {
            if (is_array($allowedTags) && !empty($allowedTags)) {
                $allowedTags = $this->filterProhibitedTags($allowedTags);
                $wrapperElementId = uniqid();
                $domDocument = new \DOMDocument('1.0', 'UTF-8');
                set_error_handler(
                    function ($errorNumber, $errorString) {
                        throw new \Exception($errorString, $errorNumber);
                    }
                );
                $data = $this->prepareUnescapedCharacters($data);
                $string = mb_convert_encoding($data, 'HTML-ENTITIES', 'UTF-8');
                try {
                    $domDocument->loadHTML(
                        '<html><body id="' . $wrapperElementId . '">' . $string . '</body></html>'
                    );
                } catch (\Exception $e) {
                    restore_error_handler();
                    $this->logger->critical($e);
                }
                restore_error_handler();

                $this->removeNotAllowedTags($domDocument, $allowedTags);
                $this->removeNotAllowedAttributes($domDocument);
                $this->escapeText($domDocument);
                $this->escapeAttributeValues($domDocument);

                $result = mb_convert_encoding($domDocument->saveHTML(), 'UTF-8', 'HTML-ENTITIES');
                preg_match('/<body id="' . $wrapperElementId . '">(.+)<\/body><\/html>$/si', $result, $matches);
                return !empty($matches) ? $matches[1] : '';
            } elseif($allowedQuotes) {
                $result = htmlspecialchars($data, ENT_SUBSTITUTE, 'UTF-8', false);
            } else {
                $result = htmlspecialchars($data, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8', false);
            }
        } else {
            $result = $data;
        }
        return $result;
    }

[kunj1988]

I have worked on it. Please assign this to me. #mm19in

[magento-engcom-team]

Hi @kunj1988. Thank you for working on this issue.
Looks like this issue is already verified and confirmed. But if your want to validate it one more time, please, go though the following instruction:

• [ ] 1. Add/Edit Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• [ ] 2. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento-engcom-team give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!
  

• [ ] 3. Verify that the issue is reproducible on 2.2-develop branch.

  Details

  - Add the comment @magento-engcom-team give me 2.2-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x

• [ ] 4. If the issue is not relevant or is not reproducible any more, feel free to close it.

[minhluan259]

I notice one more issue of tinymce 4 in magento 2.3.0
We can't use style background media:
<div style="background: url('{{media url="wysiwyg/catalog/img-cat-01.png"}}');">

[swnsma]

@magento-engcom-team give me 2.3-develop instance

[magento-engcom-team]

Hi @swnsma. Thank you for your request. I'm working on Magento 2.3-develop instance for you

[magento-engcom-team]

Hi @swnsma, here is your Magento instance.
Admin access: https://i-19737-2-3-develop.instances.magento-community.engineering/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

[elsdeniep]

As a remark: single quotes should be used. Which is not a solution for this issue, however.
For solution: see end of this comment.

From Magento docs:

When used with an anchor tag, the markup tag is placed inside
the double quotes of the anchor.
To avoid confusion, you can alternate using single-and double quotes
for each nested set of quotes.

Example WITH forward slash at the end, so additional references can be appended as a path:
<a href="{{store url='apparel/shoes'}}">Shoe Sale</a>

Example resulting in frontend url WITHOUT trailing slash:
<a href="{{store direct_url='contact'}}">Contact Form</a>

However, It's NOT working in our case.

_Solution:_
What works however, is when I omit the (single or double) quotes like this: <a href="{{store direct_url=contact}}">

[reinaldomendes]

I did a patch using 'cweagans/composer-patches' as in the docs
https://devdocs.magento.com/guides/v2.3/comp-mgr/patching.html

---

composer.json

    //....
     "extra": {
        "magento-force": "override",
        "composer-exit-on-patch-failure": true,
        "magento/module-cms"  : {
                "Fix: tinymce image insert ent_quotes": "patches/composer/module-cms-tinymce-quotes-patch.diff"
       }
    }
   ...

patches/composer/module-cms-tinymce-quotes-patch.diff
```diff
diff --git a/Helper/Wysiwyg/Images.php
index cd3473c6..724d9b2a 100644
--- a/Helper/Wysiwyg/Images.php
+++ b/Helper/Wysiwyg/Images.php
@@ -205,6 +205,7 @@ class Images extends \Magento\Framework\App\Helper\AbstractHelper
$directive = sprintf('{{media url="%s"}}', $mediaPath);
if ($renderAsTag) {
$src = $this->isUsingStaticUrlsAllowed() ? $fileUrl : $this->escaper->escapeHtml($directive);

• $src = html_entity_decode($src,ENT_QUOTES,'UTF-8');
  $html = sprintf('', $src);
  } else {
  if ($this->isUsingStaticUrlsAllowed()) {

[m2-assistant[bot]]

Hi @engcom-Charlie. Thank you for working on this issue.
Looks like this issue is already verified and confirmed. But if you want to validate it one more time, please, go though the following instruction:

• [ ] 1. Add/Edit Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• [ ] 2. Verify that the issue is reproducible on 2.4-develop branch

  Details

  - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!

• [ ] 3. If the issue is not relevant or is not reproducible any more, feel free to close it.

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[magento-engcom-team]

:white_check_mark: Confirmed by @engcom-Charlie
Thank you for verifying the issue. Based on the provided information internal tickets MC-30081 were created

Issue Available: @engcom-Charlie, _You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself._

[LiamKarlMitchell]

Confirming that @reinaldomendes patch on Magento 2.3.0 fixes it.

Does not fix for a tags.

Expected:
<a href="{{store url="bed-bathroom.html"}}">

Result after save:
<a href="{{store url=&quot;bed-bathroom.html&quot;}}">

Single quotes work, but examples I see seem to mostly use double quote.

[elsdeniep]

Official Magento: use single quotes.
Best solution (unofficial): omit the (single or double) quotes like this:
<a href="{{store direct_url=contact}}">

[iphigenie]

I am having similar issues with data-mage-init quotes being mangled and broken.
was trying to tabs on a cms page

So I tested just for a links:

<a href="{{store direct_url=contact}}"> is preserved through save
<a href="{{store direct_url='contact'}}"> is preserved through save
<a href='{{store direct_url="contact"}}'> will save but the next time you open the editor it has been changed to <a href="{{store direct_url="contact"}}"> which will break the next time you make a change and save that page/block

All worked safe iirc in TinyMCE 3

leaving quotes totally out is preserved, even though it isnt really valid format, though alas it is not always possible for all scenarios eg using data-mage-init from testing only works with double quotes in the inner parts.

[elsdeniep]

That’s exactly what I seuggested: omit the (single or double) quotes like this:

From: Joelle Nebbe-Mornod
Sent: Wednesday, May 13, 2020 12:58 PM
To: magento/magento2
Cc: elsdeniep ; Mention
Subject: Re: [magento/magento2] WYSIWYG editor inserting " instead of correct " in 2.3.0 when inserting image (#19737)

I am having similar issues with data-mage-init quotes being mangled and broken.
was trying to tabs on a cms page

So I tested just for a links:

is preserved through save
is preserved through save
will save but the next time you open the editor it has been changed to which will break

so @elsdeniep your example might have worked with single double when it didnt with double single which they do in their example.

All worked safe iirc in TinyMCE 3

leaving quotes actually is preserved, though alas it is not always possible for all scenarios eg using data-mage-init some scenarios error if single quotes are used or if quotes are omitted.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

--
Deze e-mail is gecontroleerd op virussen door AVG.
http://www.avg.com

[iphigenie]

Agreed @elsdeniep I just tested and confirmed to revive this. I dont know if it should be split into a new ticket or not

It is interesting that the examples in magento documentation you quote are in the format that gets broken, not one of the two that would work.

I was blaming tinymce and thinking I needed to find a way to tweak it, but the patches here suggest that what needs to change Magento's classes that feed data into tinyMCE, to tell it to not encode these html tag attributes that are its own Magento variables! As in "don't encode anything in curly brackets dammit"

Seriously: Magento CMS wysiwyg integration is breaking its own variables!
Obviously there is a partial solution with the "dont quote" approach but some variables entries will have spaces, and then it can't work.

And alas for my scenario where I need to pass data-mage-init the only format that is valid is with double quotes inside, and it is the one format that tinymce+magento garble

data-mage-init="{blah: {}}" data-mage-init="{'blah': {}}" would both be left alone in tinyMCE but they are not valid for javascript behind and just break the pages badly (not just this piece of content breaks but anything else also using data-mage-init or its script tag equivalent).

data-mage-init='{"blah": {}}' and the url encoded version data-mage-init="{"blah": {}}" both work for the requirejs javascript processing but they both get modified on reload by tinymce+magento and break the pages badly on the next save.

It felt like a rather niche concern but thanks to this ticket we can see that variables added via wysiwyg tool also get broken

[edward-simpson]

I'm seeing what seems like a related issue in 2.3.4 (perhaps change in functionality to remove this bug?).

In cms block, with editor disabled, adding an image simply adds the image path as a simple string into (e.g. 'media/path/to/image.jpg').

With the editor enabled, it inserts an img tag, with the src set to the same url as above, which obviously does not work because it's a relative path! Updating the URL to include a leading / then causes the image to appear correctly in the wysiwyg

Edit: sorry I have just realised, the stores I have seen this occurring on are not both 2.3.4, one is 2.3.3!

[elsdeniep]

Below is a recap of the solution given earlier.

No quotes at all (= working solution)
In order to solve the quotes issue, just omit the (single or double) quotes like this:
<a href="{{store direct_url=contact}}">

Single quotes
Not working: use of single quotes, although Magento dev doc says you should. From Magento dev doc:

When used with an anchor tag, the markup tag is placed inside the double quotes of the anchor.
To avoid confusion, you can alternate using single -and double quotes for each nested set of quotes.
Example WITH forward slash at the end, so additional references can be appended as a path:
<a href="{{store url='apparel/shoes'}}">Shoe Sale</a>

Double quotes
Use of double quotes are not Magento standard. Use of double quotes however, didn't use to break the code, which it does now.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed after 14 days if no further activity occurs. Thank you for your contributions.

[iphigenie]

Just leaving this for others who might have the same issues. This is still the case: Magento CMS wysiwyg integration is breaking its own variables.

Obviously there is a partial solution with the "dont quote" approach but when we are using data-mage-init variables entries will have spaces, and then it can't work. This can break widgets that use javascript and all javascript on the page!

data-mage-init="{blah: {}}" data-mage-init="{'blah': {}}" are not broken on load by tinymce+magento but they are not valid javascript data and so this just breaks the pages badly (not just this piece of content breaks but anything else also using data-mage-init or its script tag equivalent).

data-mage-init='{"blah": {}}' and the url encoded version data-mage-init="{"blah": {}}" both work for the requirejs javascript processing but they both get broken on reload by tinymce+magento which then break the pages badly on the next save.

all three solutions are not routine option

Solution one: use the data-mage-init='{"blah": {}}' format but every time this block or page is edited, you need to go in source and manually put the quoting back in place. Hope that all your content editors remember!

Solution two: suggested by an extension developer, going back to tinymce3 and extending that to allow these tags through

Solution three: encapsulate this in separate block or template so it is NOT run through the wysiwyg.