如何防止 TinyMCE 将 CDATA 添加到<脚本>标签中，并注释掉<样式>标签

How can I prevent TinyMCE from adding CDATA to <script> tags and from commenting out <style> tags?

本文关键字：标签 样式 注释 脚本 CDATA 添加 何防止 TinyMCE      更新时间：2023-09-26

让我们把允许在 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 构造调用中的配置对象：

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);
            }
        }
    });
}

希望这将帮助被困在同一条船上的其他人。

你可以尝试更改 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))})

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

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

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

..然后保存到数据库。

对我来说，

它删除了以下用于禁用脚本标签格式的代码：

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

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

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

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

例如：

对于样式：

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

对于脚本：

&lt;script>
$.address.unbind();
&lt;/script>
相关文章：