web-dev-qa-db-ja.com

CSSでCKEditorにテキストをレンダリングさせる方法は？

Webページのテキストを編集するために使用されるCKEditorがあります。

Webページでは、テキストはそのコンテキストでレンダリングされるため、ページのCSSフォーマットに従います。

私の質問は、CSSスタイルシートをエディターレンダリングに適用するようにCKEditorに指示する方法です。もちろん、生成されたソースを変更せずに？

私のコード：

<textarea class="ActuContent" name="actu-content" cols="100" rows="20">my content></textarea>
<script type="text/javascript">
        window.onload = function()
        {
                CKEDITOR.replace( 'actu-content' );
        };
</script>

と私のCSS：

.ActuContent{
    padding:10px 10px 10px 10px;
    color:#416a8b;
    font-size:1.6em;
}

そして、私のCKEditorConfig.jsファイルにはツールバー構成のみが含まれています。

CKeditorは「.ActuContent」の設定をレンダリングに適用しません...

javascriptcssxhtmlckeditor
21
Jalil

この質問に対する実際の最良の答えは次のとおりです。

CKEDITOR.config.contentsCss = '/mycustom.css';
CKEDITOR.replace('myfield');

おそらく、エディターごとに異なるスタイルを使用したいからです。メインを変更した場合content.cssのように Jalil did 、あなたはそれをすることができないでしょう。

39
Rene

私は私の質問に答える非常に簡単な方法を見つけました：

content.css CKEditorディレクトリのファイル！

エディター内に適用したいスタイルを入力するだけで済みました。

body {
    color: #416a8b;
    font-family: Arial;
    font-size: 18px;
    font-weight: 400;
   text-align: left;
}

それで全部です ：-）

9
Jalil

この投稿を参照してください：

CKEditor：エディター本体のクラスまたはID

Nemisjによって投稿されたソリューションは、エディターの編集可能領域の本体にクラス名を設定します。

これは、エディターのonload関数で実行できます。 .replaceを呼び出す前に、これを呼び出します。

CKEDITOR.on( 'instanceReady', function( ev )
     {
         CKEDITOR.instances.e1.document.$.body.className = "foo";
     });
3
MustStayAnonymous

ユーザー設定によっては、CKEditorにその場でいくつかのスタイルを設定する必要がある場合、エディターの本体オブジェクトでsetStyle()関数とsetStyles()関数を使用することがあります。サンプルコード：

var editor = CKEDITOR.instances.editor1;
var size = ... // assign size value
editor.document.getBody().setStyle('font-size',size);

別のサンプル：

var editor = CKEDITOR.instances.editor1;
var styles = {
    "font-family": "Arial",
    "color": "#333"
};
editor.document.getBody().setStyles(styles);
2
Alexander Poleschuk

CKEditorは、通常のHTML要素でDIVを使用して、編集中のテキストを表します。このDIVの内容を見て、適切なスタイルシートを書いてください。

もちろん、これは、レンダリングする前にCKEditorの出力を変更しない場合にのみ機能します。

1
Aaron Digulla

Content.cssファイルを変更すると、キャッシュされていることに気付く場合があります。 CKEDITOR.timestampはjsファイルにのみ追加されるため、ブラウザーで更新するのは簡単な作業ではありません。私は次の解決策を思いついた：

// force to update all plugin files and styles
CKEDITOR.timestamp = '25062014';
CKEDITOR.config.contentsCss = CKEDITOR.config.contentsCss + '?' + CKEDITOR.timestamp;
0
Sergey Payu