Allow TinyMCE to save content with inline style tags #24114
Conversation
|
Hi @gwharton. Thank you for your contribution
In case you'd like to rerun tests use the following comments:
For more details, please, review the Magento Contributor Guide documentation. |
|
Hi @VladimirZaets, thank you for the review.
|
|
@VladimirZaets Cheers for the quick review. Static tests were failing due to coding standards failures, so i've just corrected them. |
…<script> tag. These opening tags were being lost due to being stripped out into the <head> section when parsed through the dom object, and only the body returned, thus losing any opening <script> tags. Added <style> as valid child object to <body> in tinymce config. Without this it is not possible to have a code block that starts with <style>.
|
The exact same problem exists with the script tag which are also being stripped. Would you like me to update this PR to encompass script as well or submit new PR? |
sidolov
changed the title
ghost
added
Progress: testing in progress
and removed
Progress: ready for testing
labels
|
✔️ QA passed |
ghost
added
Progress: extended testing
and removed
Progress: testing in progress
labels
|
Hi @gwharton, thank you for your contribution! |
sidolov
added
the
Auto-Tests: Not Covered
Description (*)
Firstly, we need to decide whether we allow
<style>tags in TinyMCE editors. HTML5.1 and older forbid inline style tags (<style>is only valid in<head>), although most browsers allow it. HTML5.2 and newer now allow it, so lets get that out of the way and decided first.Then......
There are two issues that needed to be resolved to allow
<style>tags within the TinyMCE 4 editor.Issue 1
In the
decodeVariablesfunction of the magentovariable TinyMCE plugin and in theremoveDuplicateAncestorWidgetSpanElementfunction of the magentowidget TinyMCE plugin, the content of the TinyMCE editor is passed through aDOMParserto convert certain tags. Usually the content parsed through theDOMParseris available in thedoc.body.innerHTMLfield, and is returned by the plugins once alterations had been made. There is an issue however if the content of the TinyMCE editor starts with a<style>tag. TheDOMParsersplits the style elements off and makes them available indoc.head.innerHTMLand the remainder of the TinyMCE contents are parsed intodoc.body.innerHTML.Thus you can see how, in the original function that only processed
doc.body.innerHTML, that any<style>tags were getting stripped out. Note that this only happens if the<style>tag is the first item in the editor.<p>test</p><style>test</style>would get passed in its entirety todoc.body.innerHTMLand the bug would not happen, but<style>test</style><p>test</p>would get split betweendoc.head.innerHTMLanddoc.body.innerHTMLand the <style> tags would be lost.This PR corrects this by concatenating both
doc.head.innerHTMLanddoc.body.innerHTMLon return from the respective plugin functions.Issue 2
The TinyMCE editor enforces strict HTML5 adherence in terms of what tags can go where. Up to HTML5.1 the
<style>tag is not allowed in the<body>section of code. It can only be used in the<head>section. This can be confirmed in the source code to TinyMCE 4.9.5 which shows that in the preparation of the HTML5 schema, that<style>is not included as a valid tag within a<body>tag.HTML5.2 however DOES now allow the
<style>section to appear within<body>. This can be confirmed here. There are currently no versions of TinyMCE 4 that have been updated to allow it.This PR adds
<style>tag as valid to occur inside<body>in the TinyMCE config, and thus allows it to be a top level tag within a TinyMCE editor.Fixed Issues (if relevant)
Manual testing scenarios (*)
<p>test</p><style>test</style><style>test</style><p>test</p><p>test</p><style>test</style>Questions or comments
As suggested in the original description, there might be some contention as to whether to allow inline
<style>tags in the first place.Contribution checklist (*)