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

InishowenLabs commented 5 years ago

Preconditions (*)

Magento CE 2.3.x & 2.4-develop

Steps to reproduce (*)

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

Expected result (*)

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

Actual result (*)

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

magento-engcom-team commented 5 years ago

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 commented 5 years ago

@magento-engcom-team give me 2.3.0 instance

magento-engcom-team commented 5 years ago

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

magento-engcom-team commented 5 years ago

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 commented 5 years ago

Verified issue exists in vanilla instance.

<img src="{{media url="3475_2phase.png"}}" 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 commented 5 years ago

Is anyone has resolved it?

magento-engcom-team commented 5 years ago

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 commented 5 years ago

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

magento-engcom-team commented 5 years ago

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

minhluan259 commented 5 years ago

@kunj1988 How did you solve it?

progreg commented 5 years ago

@magento-engcom-team give me 2.3.0 instance

magento-engcom-team commented 5 years ago

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

magento-engcom-team commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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

magento-engcom-team commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

magento-engcom-team commented 5 years ago

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

magento-engcom-team commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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 --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('<img src="%s" alt="" />', $src);
         } else {
             if ($this->isUsingStaticUrlsAllowed()) {

m2-assistant[bot] commented 4 years ago

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 commented 4 years ago

: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 commented 4 years ago

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="bed-bathroom.html"}}">

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

elsdeniep commented 4 years ago

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

iphigenie commented 4 years ago

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 commented 4 years ago

That's excatly what I suggested: omit the (single or double) quotes like this:

elsdeniep commented 4 years ago

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 <a href="{{store direct_url="contact"}}"> 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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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] commented 3 years ago

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 commented 3 years ago

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.

update: I have used both one (one off cms) and three (custom widget template that puts that code in)

stale[bot] commented 3 years ago

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. Is this issue still relevant? If so, what is blocking it? Is there anything you can do to help move it forward? Thank you for your contributions!

LiamKarlMitchell commented 3 years ago

Still a problem stalebot

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed after 28 days if no further activity occurs. Is this issue still relevant? If so, what is blocking it? Is there anything you can do to help move it forward? Thank you for your contributions!

hostep commented 3 years ago

Issue was confirmed, stalebot shouldn't close those kind of issues. @sidolov, @sdzhepa

minhluan259 commented 3 years ago

Simple solution: Change in file vendor/magento/module-cms/Helper/Wysiwyg/Images.php

    public function getImageHtmlDeclaration($filename, $renderAsTag = false)
    {
        $fileUrl = $this->getCurrentUrl() . $filename;
        $mediaUrl = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
        $mediaPath = str_replace($mediaUrl, '', $fileUrl);
        $directive = sprintf('{{media url="%s"}}', $mediaPath);
        if ($renderAsTag) {
            $src = $this->isUsingStaticUrlsAllowed() ? $fileUrl : $this->escaper->escapeHtml($directive);
            $html = sprintf('<img src="%s" alt="" />', $src);
        } else {
            if ($this->isUsingStaticUrlsAllowed()) {
                $html = $fileUrl;
            } else {
                $directive = $this->urlEncoder->encode($directive);
                $html = $this->_backendData->getUrl(
                    'cms/wysiwyg/directive',
                    [
                        '___directive' => $directive,
                        '_escape_params' => false,
                    ]
                );
            }
        }
        return $html;
    }

to

    public function getImageHtmlDeclaration($filename, $renderAsTag = false)
    {
        $fileUrl = $this->getCurrentUrl() . $filename;
        $mediaUrl = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
        $mediaPath = str_replace($mediaUrl, '', $fileUrl);

        // Fix quote
        $directive = sprintf("{{media url='%s'}}", $mediaPath);

        if ($renderAsTag) {
            $src = $this->isUsingStaticUrlsAllowed() ? $fileUrl : $this->escaper->escapeHtml($directive);
            $html = sprintf('<img src="%s" alt="" />', $src);
        } else {
            if ($this->isUsingStaticUrlsAllowed()) {
                $html = $fileUrl;
            } else {
                $directive = $this->urlEncoder->encode($directive);
                $html = $this->_backendData->getUrl(
                    'cms/wysiwyg/directive',
                    [
                        '___directive' => $directive,
                        '_escape_params' => false,
                    ]
                );
            }
        }
        return $html;
    }

Result:

<img src="{{media url='path/img.png'}}" alt="" />

cptX commented 1 year ago

Still a problem in 2.4.5!

engcom-Bravo commented 6 months ago

Hi @InishowenLabs,

Thanks for your reporting and collaboration.

We have verified the issue in Latest 2.4-develop instance and the issue is no more reproducible.

Hence We are Closing this issue.

Thanks.

magento / magento2