如何防止 TinyMCE 将 CDATA 添加到 <script> 标签并注释掉 <style> 标签？答案

【问题标题】：How can I prevent TinyMCE from adding CDATA to <script> tags and from commenting out <style> tags?如何防止 TinyMCE 将 CDATA 添加到 <script> 标签并注释掉 <style> 标签？
【发布时间】：2026-01-09 15:40:04
【问题描述】：

让我们抛开在 Web 编辑器中允许 <script> 内容的问题；我完全了解他们。

我想要的是在文本内容中允许 <style> 和 <script> 元素，问题是，每当我这样做时，TinyMCE 会将它们更改为：

<style><!-- th{width:80px} --></style>

并且脚本内容改为：

<script>// <![CDATA[
$.address.unbind();
// ]]></script>

在我的 TinyMCE 初始化配置中，我有：

valid_elements : "*[*]",
extended_valid_elements : "*[*],script[charset|defer|language|src|type],style",
custom_elements: "*[*],script[charset|defer|language|src|type],style",
valid_children : "+body[style],+body[script]",
verify_html : false,
media_strict: false

但我似乎找不到阻止 TinyMCE禁用<style> 和 <script> 元素的方法。

【问题讨论】：

你有没有发现如何从 tinyMCE 中的样式标签中删除？
从我正在阅读的内容看来，TinyMCE 生成 XHTML 并将样式内容包装在注释中，以防止任何 XML 解析器无法解析内容（因为所有浏览器都支持注释语法）。编辑：您是否尝试过使用cleanup : false？
@BenRacicot 为什么要从样式标签中删除？
我在 WordPress 中包含的 TinyMCE 中遇到了同样的问题。尽管我能够编写一个 PHP 函数来排除某些标签被编辑器剥离（类似于您在此处所拥有的），但我发现注释代码始终存在。我不知道如何摆脱它。但我想我知道它为什么在那里。我相信这是为了防止标签中的代码被包裹在段落标签中，就像 TinyMCE 默认情况下对每个换行符所做的那样。所以我把注释代码留在了那里，因为我的脚本在前端仍然可以正常工作。
@naimshaikh 嘿 Naim，我没有尝试过，因为您没有指定它是否有效。我不愿意删除缩小的脚本，但会在星期一尝试。

标签： javascript html css tinymce

【解决方案1】：

如果可以避免，我建议避免对第三方库进行任何直接定制。相反，我在初始化期间向编辑器序列化程序添加了一个自定义节点过滤器，方法是将以下内容添加到传递给 tinymce 构造调用的配置对象中：

init_instance_callback : function(editor) {
    // jw: this code is heavily borrowed from tinymce.jquery.js:12231 but modified so that it will
    //     just remove the escaping and not add it back.
    editor.serializer.addNodeFilter('script,style', function(nodes, name) {
        var i = nodes.length, node, value, type;

        function trim(value) {
            /*jshint maxlen:255 */
            /*eslint max-len:0 */
            return value.replace(/(<!--\[CDATA\[|\]\]-->)/g, '\n')
                    .replace(/^[\r\n]*|[\r\n]*$/g, '')
                    .replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi, '')
                    .replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g, '');
        }
        while (i--) {
            node = nodes[i];
            value = node.firstChild ? node.firstChild.value : '';

            if (value.length > 0) {
                node.firstChild.value = trim(value);
            }
        }
    });
}

希望这将帮助其他陷入困境的人。

【讨论】：

工作完美，不敢相信我是第一个投票给这种“正确”答案的人

【解决方案2】：

您可以尝试更改 tinymce.min.js

,f.addNodeFilter("script,style",function(e,t){function n(e){return e.replace(/(<!--\[CDATA\[|\]\]-->)/g,"\n").replace(/^[\r\n]*|[\r\n]*$/g,"").replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi,"").replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g,"")}for(var r=e.length,i,o,a;r--;)i=e[r],o=i.firstChild?i.firstChild.value:"","script"===t?(a=i.attr("type"),a&&i.attr("type","mce-no/type"==a?null:a.replace(/^mce\-/,"")),o.length>0&&(i.firstChild.value="// <![CDATA[\n"+n(o)+"\n// ]]>")):o.length>0&&(i.firstChild.value="<!--\n"+n(o)+"\n-->")}),f.addNodeFilter("#comment",function(e){for(var t=e.length,n;t--;)n=e[t],0===n.value.indexOf("[CDATA[")?(n.name="#cdata",n.type=4,n.value=n.value.replace(/^\[CDATA\[|\]\]$/g,"")):0===n.value.indexOf("mce:protected ")&&(n.name="#text",n.type=3,n.raw=!0,n.value=unescape(n.value).substr(14))})

请从文件中找到并删除上述代码行。

【讨论】：

这会导致 type 属性出现问题。它现在将mce- 添加到所有类型属性中。似乎从样式标签中删除了，它打破了<script>

【解决方案3】：

当您存储 tinymce 内容时，只需从输出中删除这些标签，如下所示：

$tinyOutput = str_replace(array("// <![CDATA[", "// ]]>"), array("", ""), $_POST['tinyOutput']);

..然后保存到数据库..

【讨论】：

我更喜欢这个，因为我不想更改tinymce.min.js 代码。谢谢。

【解决方案4】：

对我来说，它可以删除以下用于禁用脚本标记格式的代码：

,o.length>0&&(i.firstChild.value="// <![CDATA[\n"+n(o)+"\n// ]]>")

对于样式标签的格式化，你应该删除：

&&(i.firstChild.value="<!--\n"+n(o)+"\n-->")

【讨论】：

【解决方案5】：

您可以尝试使用&lt; 代替< 作为样式和脚本标签。这样，tinymce 将无法识别样式和脚本标签。

例如：

风格：

&lt;style>th{width:80px}&lt;/style>

对于脚本：

&lt;script>
$.address.unbind();
&lt;/script>

【讨论】：