Magento 2.4.2-p2 WYSIWYG编辑器代码重复问题求助

问题描述 #

在Magento 2.4.2-p2版本中，前端创建自定义页面时，切换WYSIWYG编辑器的显示/隐藏状态会自动生成冗余代码；保存页面后，后端编辑区域出现代码重复（如<ol>标签嵌套、列表项被错误拆分），但前端页面显示正常。在默认Magento 2.4.2-p2环境测试，该问题依然存在。

原始代码 #

<div>
    <h3 class="passages">LOREM IPSUM</h3>
    <p class="intro">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </p>
    <ol class="intro">
        <li>What is a variations?</li>
            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc..</p>
        <li>Why do we use Loreum?</li>
    </ol>
</div>

保存后异常代码 #

<div>
<h3 class="passages">LOREM IPSUM</h3>
<p class="intro">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<ol class="intro">
<ol class="intro">
<li>What is a variations?</li>
</ol>
</ol>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc..</p>
<ol class="intro">
<li>Why do we use Loreum?</li>
</ol>
</div>

问题原因 #

这是Magento 2.4.2-p2内置的TinyMCE编辑器的解析bug：编辑器对非标准HTML列表结构（比如<li>标签后直接放置<p>标签，未将<p>嵌套在<li>内部）的处理逻辑存在缺陷，切换可视化/源代码模式时会错误重构HTML结构，导致标签重复和内容拆分。

不关闭WYSIWYG的解决方法 #

1. 修正HTML结构（推荐） #

按照标准HTML规范调整代码，将<li>后的<p>标签嵌套到<li>内部（<ol>/<ul>的直接子元素只能是<li>）。调整后的代码如下：

<div>
    <h3 class="passages">LOREM IPSUM</h3>
    <p class="intro">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </p>
    <ol class="intro">
        <li>What is a variations?
            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc..</p>
        </li>
        <li>Why do we use Loreum?</li>
    </ol>
</div>

这种符合规范的结构不会被编辑器错误解析，切换模式和保存后代码能保持完整。

2. 调整TinyMCE编辑器配置 #

找到Magento的TinyMCE配置文件vendor/magento/module-cms/view/adminhtml/web/js/tinymce/settings.js，修改valid_children参数，允许<li>包含<p>标签：

valid_children: "+body[style], +li[div|p|ul|ol|h1|h2|h3|h4|h5|h6]",

修改后执行静态资源部署命令：

php bin/magento setup:static-content:deploy -f

注意：修改核心文件会在Magento升级时被覆盖，建议通过自定义模块重写该配置文件。

3. 升级Magento版本 #

该bug在Magento 2.4.3及以上版本中已被官方修复，若业务允许，升级到更高版本可彻底解决问题。

内容的提问来源于stack exchange，提问作者Ajith