21

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」の設定をレンダリングに適用しません...

4

6 に答える 6

38

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

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

おそらく、さまざまなエディターでさまざまなスタイルを使用したいからです。Jalilcontent.cssのようにメインを変更すると、それはできなくなります。

于 2010-09-14T14:59:55.680 に答える
9

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

content.cssCKEditorディレクトリ内のファイル！

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

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

それで全部です ：-）

于 2009-12-14T04:45:32.973 に答える
3

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

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

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

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

CKEDITOR.on( 'instanceReady', function( ev )
     {
         CKEDITOR.instances.e1.document.$.body.className = "foo";
     });
于 2009-12-11T14:49:52.890 に答える
2

ユーザー設定によっては、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);
于 2012-08-16T14:54:57.960 に答える
1

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

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

于 2009-12-11T08:24:51.817 に答える
0

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

// force to update all plugin files and styles
CKEDITOR.timestamp = '25062014';
CKEDITOR.config.contentsCss = CKEDITOR.config.contentsCss + '?' + CKEDITOR.timestamp;
于 2014-06-25T06:09:21.277 に答える