web-dev-qa-db-ja.com

TinyMCEがCDATAを<script>タグに追加したり、<style>タグをコメントアウトしたりしないようにするにはどうすればよいですか？

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>要素を防ぐ方法を見つけることができないようです。

javascripthtmlcsstinymce
27
out_sid3r

回避できる場合は、サードパーティライブラリへの直接のカスタマイズを回避することをお勧めします。代わりに、tinymce構築呼び出しに渡されるconfigオブジェクトに以下を追加することにより、初期化中にエディターシリアライザーにカスタムノードフィルターを追加しました。

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

うまくいけば、これは他の人が同じボートで立ち往生するのを助けるでしょう。

7
Jonmark Weber

tinymceコンテンツを保存するときは、次のように出力からこれらのタグを削除するだけです。

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

..次にdbに保存します。

2
netoper

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

上記のコード行を見つけてファイルから削除してください。

2
naim shaikh

私にとっては、スクリプトタグのフォーマットを無効にするために次のコードを削除するように働きました。

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

また、スタイルタグのフォーマットについては、以下を削除する必要があります。

&&(i.firstChild.value="<!--\n"+n(o)+"\n-->")
0
Vašek Šindýlek

スタイルタグとスクリプトタグには、&lt;の代わりに<を使用してみてください。そうすれば、tinymceはスタイルタグとスクリプトタグを認識しません。

例えば：

スタイルの場合：

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

スクリプトの場合：

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