ckeditorフルページプレビュー用に3種類のボディスタイル

Question

ckeditor 3でフルページプレビューを入力するときにボディスタイルを変更することは可能ですか？フルページモードではない場合とは別のボディスタイルをフルページに設定することがあります。 これは、ブラウザを最大化して大画面でWebページを表示するときにckeditorを使用するためです。この場合は非常に幅が広​​く、コンテンツを読むのが難しいからです。コンテンツへより多くのテキストプロセッサの外観を与える

... 
margin: 5%; 
padding: 5%; 
border: 1px dotted #666; 
... 

...：だから私は、ボディスタイル（だけフルページモード用）のようなものを追加したいと思います。

TNX！

Answer 1

CKEditorをフルスクリーンモードに切り替えると、コンテナスパンに「cke_maximized」クラスが追加されます。

だから、あなたのようなコンテナ全体のスパン（ボディ+ツールバー）のスタイルを適用することがあります。

コンテンツ本体用

.cke_maximized{ 
    margin: 5%; 
    padding: 5%; 
    border: 1px dotted #666; 
} 

か、単に：

.cke_maximized iframe{ 
    margin: 5%; 
    padding: 5%; 
    border: 1px dotted #666; 
} 

ものは一例であり、あなたが実験して選ぶことができますあなたに適したCSSセレクター。

UPDATE 1：それはあなたの目的には十分でない場合

確かに、あなたはjavascriptのコードを使用することができます。次のようなものを使用できます。

var editor = CKEDITOR.instances.editor1; 

editor.on("afterCommandExec", function(e){ 
    if(e.data.name == 'maximize'){ 
     // maximized 
     if(e.data.command.state == CKEDITOR.TRISTATE_ON){ 
      // add special css class to body(e.editor.document.getBody()) 
     } else { 
     // minimized 
     // remove special css from body 
     } 
    } 
});