web-dev-qa-db-ja.com

ckeditor iframeCSSスタイルを変更するにはどうすればよいですか

CKeditoriframeのbodyCSSスタイルを変更する方法がわかりません。私はウェブ上のさまざまな潜在的な解決策に基づいてたくさんのオプションを試しましたが、物事をかなり難しくしているCKeditorのAPIにあまり詳しくありません。これは（具体的には）CKeditor4.4.3です。

次のJSfiddleでさまざまな試み（コメント）を確認できます。

http://jsfiddle.net/KS3p4/1/

CKEDITOR.stylesSet.add( 'style_updates', [
    // ATTEMPT 1
    // Block-level styles...this is for the dropdown menu (not shown in current config)
    { name: 'Body Margin Fix', element: 'body', styles: { margin: '10px' } }
]);

editor = $('textarea').ckeditor( function(editor){
    // ATTEMPT 2
    //callback `this` refers to CKEDITOR.editor
    this.ckeditorGet().addCss('body { margin:10px; }')
}, {
    // ATTEMTP 3
    addCss: 'body { margin:10px; }',
    stylesSet: 'styles_updates',
    uiColor: '#FFFFFF',
    scayt_autoStartup: true,
    autoGrow_onStartup: true,
    enterMode: CKEDITOR.ENTER_BR,
    removePlugins: 'elementspath, resize',
    toolbar: [
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline' ] },
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'PasteFromWord', 'Undo', 'Redo' ] },
        { name: 'links', items: [ 'Link', 'Unlink' ] },
        { name: 'editing', groups: [ 'spellchecker' ], items: [ 'Scayt' ] },
        { name: 'tools', items: [ 'Maximize' ] }
    ]
// ATTEMPT 4
}).ckeditorGet().addCss('body { margin:10px; }');
cssstylesckeditor
12
BrendonKoz

メインのCKEditorディレクトリにある_contents.css_ファイルを編集するか、 _config.contentsCss_ 設定を使用して別のファイルをロードします。

スタイルシステムの設定とコンテンツのスタイルを混同しているようです。これらは2つのまったく異なるものです-スタイルシステムは選択されたコンテンツに「スタイル」を適用および削除する責任があります-それは使用されます。スタイルとフォーマットのドロップダウン、および太字または斜体のボタンによって、これらはすべて「スタイル」です。

CKEDITOR.addCss() -このメソッドは主にプラグインによって使用され、エディターを作成する前に使用する必要があります。実際、そのドキュメントにはこれが正確に記載されており、_contents.css_;）を使用する必要があると記載されています。

15
Reinmar

CKEditor 4.5.9で、_config.js_を介して必要なカスタムオーバーライドCSSスタイルをいくつか追加できたことを確認します（将来CKEdtorバージョンを更新することで誤って上書きされる可能性が低くなります）

追加した：

_// Add override CSS styles for inside editable contents area.
CKEDITOR.addCss( '.cke_editable { font-size: 14px; } @media screen and (max-device-width: 767px) and (-webkit-min-device-pixel-ratio:0) { .cke_editable { font-size: 16px !important; } }' );
_

既存のCKEDITOR.editorConfig = function( config ) { ... }セクション内で：

  1. CKEditorのデフォルトの.cke_editableコンテンツ領域の本文のフォントサイズを13pxから14pxにオーバーライドし、他のBootstrapフォームフィールドのフォントサイズと一致させます。
  2. IPhoneで表示するときに、.cke_editableフォントサイズを16pxに増やして、iOSがすでにモバイル向けに最適化されたページレイアウトの100％を超えてズームインしないようにする必要があることを指定します。

つまり、2倍の単純なCSSオーバーライドのために、CKEditorの_content.css_をデフォルトから編集する必要がなかったということです。

CKEditorの.addCssメソッドリファレンス http://docs.ckeditor.com/#!/api/CKEDITOR-method-addCss

いくつかのCSSオーバーライドを実行したい場合は、代わりに_config.contentsCss = '/css/mysitestyles.css';_を使用して、CKEditorのデフォルトの_content.css_の独自のカスタマイズバージョンを再ポイントする必要があります。または、デフォルトのCSSを指定してから、_config.contentsCss = [ 'content.css', '/css/anotherfile.css' ];_を使用して独自の追加ファイルを指定することもできます。

CKEditorの.contentsCSSメソッドリファレンス http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss

2
Alan Howshall