web-dev-qa-db-ja.com

CKEditorがソースモードでコードをフォーマットしないようにする

ソースモードで表示しているときにCKEditorで any 自動フォーマットを防ぐにはどうすればよいですか？

WYSIWYGインターフェイスを使用する代わりにHTMLソースコードを直接編集するのが好きですが、新しい行を記述したり、タグをインデントする方法でレイアウトしたりすると、WYSIWYGモードに切り替えてから再びソースモードに戻ると、すべてフォーマットされます。

私はCKEditorの開発チケット ProtectedSource要素のフォーマットを保持する に出くわしました。これは、かつて存在していた可能性のある設定をほのめかしており、まさに私が求めているものです。ソースモードで編集するときにすべての自動フォーマットを完全にオフにする方法を知りたいだけです。

私は（楽しいものではありませんが）絶対確実だと思った解決策を思いつきました。

protectedSource設定について学んだので、それを使用して、すべてのHTMLの前にHTMLコメントタグを作成し、その後に別のHTMLコメントタグを作成してから、コメントタグを見つける正規表現をprotectedSource配列にプッシュすることもできます。 （信じられないかもしれませんが）動作しません。

CKEditorの外部のブラウザーで式をまっすぐに試しましたが、はで機能していますが、CKEditorはコードを期待どおりに保護していません（コメントタグに関連するバグだと思われます） 、他の文字列で動作させることができるので）。ご参考までに、これは回避策として機能することを期待していたものですが、そうではありません。

config.protectedSource.Push( /<!-- src -->[\s\S]*<!-- end src-->/gi );

そして、私が計画したこと（ソースモードでフォーマットを無効にする設定がないように見えること）は、次のようなコメント付きタグ内にすべてのHTMLをネストすることでした。

<!-- src -->
<div>some code that shouldn't be messed with (but is)</div>
<!-- end src -->

誰かがこのシナリオについて何か提案があるか、私が説明した設定を知っているか、または誰かが2つのコメントタグでprotectedSourceを正しく機能させることができない理由について私に記入できる場合でも、聞いてみたいです。 。

他の多くの式を正常に機能させることができ、単一のコメントタグの領域内でHTMLを保護することもできるので、これは本当にバグだと思いますが、2つの異なるコメントタグ内のHTMLをそのままにしておくことはできません。

htmlformattingckeditorwysiwyg
20
Lev

これに対する私の解決策は、システムでコメントを使用することでしたが、ページコンテンツをCKEditorにフィードする前に、コメントをカスタムHTMLタグに変換します。次に、保存時に、コメントタグに変換し直します。

あなたの構文では、PHPでは次のようになります。ページコンテンツをtextareaに印刷する前に：

$content = str_replace(array('<!-- src -->','<!-- end src -->'),array('<protected>','</protected>'),$content);

結果のコンテンツを保存する前に：

$content = str_replace(array('<protected>','</protected>'),array('<!-- src -->','<!-- end src -->'),$content);

CKEditor構成の場合：

protectedSource:[/<protected>[\s\S]*<\/protected>/g]

お役に立てば幸いです。

5
Michael Bunkin

ソースに改行を保持したかったのですが、protectedSource機能はそのためにうまく機能します。これをconfig.jsに追加しました：

config.protectedSource = [/\r|\n/g];
5
Todd Kamin

config.allowedContent=true;トリックを行います

これが完全なHTMLコードです

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CKEditor</title>
        <script src="http://cdn.ckeditor.com/4.5.10/standard/ckeditor.js"></script>
    </head>
    <body>
        <textarea name="editor1"></textarea>
        <script>
            CKEDITOR.config.allowedContent=true;
            CKEDITOR.replace( 'editor1' );
        </script>
    </body>
</html>
2
Hari Das

編集フォームページのバックエンド出力を$ _GET変数の条件で囲むだけでこの問題を解決しました。「エキスパートモード」をクリックすると、ckeditorシステムではなくプレーンテキストエリアが読み込まれます。 ckeditorオブジェクトの呼び出しは、セットアップによって異なります。 （エディターオブジェクトを呼び出す/ビルドするカスタムクラスがあります）

                <div id="postdivrich" class="postarea">
<?php
if( isset( $_GET['expert'] ) )
{
    print "<div style=\"text-align:right;\"><a href=\"/admin/ckeditor/edit.php?node={$nNode}\">Editor mode</a></div>\n";
    print "<textarea name=\"content\" style=\"height:400px;width:{$nEwidth}px;\">{$aDoc['content']}</textarea>\n";
}
else
{
    print "<div style=\"text-align:right;\"><a href=\"/admin/ckeditor/edit.php?node={$nNode}&expert=true\">Expert mode</a></div>\n";
    require_once( 'admin/editor.class.php' );
    $aDoc['content'] = str_replace( "\r", '', str_replace( "\n", '', nl2br( $aDoc['content'] ) ) );
    $oEditor = new setEditor( $aDoc['content'], $nEwidth, "400", 'content' );
    $oEditor->ShowEditor();
}
?>
                </div>
1
AnOldMan

this 回答は役に立ちますか？基本的に、JavaScriptを追加するオプションをオフにすることができます。

0
Alex J