Как изменить стиль CSS ckeditor iframe

Я не могу понять, как изменить ckeditor iframe body стиль CSS. Я пробовал кучу вариантов, основанных на различных потенциальных решениях по всему интернету, но я не очень хорошо знаком с API CKeditor, что делает вещи довольно сложными. Это (в частности) CKeditor 4.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; }');
6
ckeditor css styles

2 ответов

редактировать contents.css файл, который находится в главном каталоге CKEditor или использовать config.contentsCss установка для загрузки другого файла.

Я вижу, что вы перепутали Системные настройки стилей со стилем контента. Это две совершенно разные вещи-система стилей отвечает за применение и удаление "стилей" к выбранному контенту - она используется, например, по стилям и раскрывающимся спискам форматов, а также жирным шрифтом или курсивом - все они являются "стилями".

As для CKEDITOR.addCss() - этот метод должен использоваться плагинами в основном, и он должен использоваться до создания редактора. На самом деле, его doc говорит именно это и упоминает, что вы должны использовать contents.css ;).

10

подтвердите, что в CKEditor 4.5.9 я смог просто добавить несколько необходимых пользовательских стилей переопределения CSS через config.js (Так что меньше вероятность случайной перезаписи при обновлении версий 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; } }' );

в рамках существующих в:

  1. переопределить значение по умолчанию CKEditor .cke_editable content area размер шрифта тела от 13px до 14px-чтобы соответствовать размеру шрифта моих других полей формы начальной загрузки.
  2. для укажите, что при просмотре на iPhone .размер шрифта cke_editable должен быть увеличен до 16px, чтобы предотвратить увеличение iOS более чем на 100% моего уже мобильного оптимизированного макета страницы.

это означало, что мне не нужно было редактировать CKEditor content.css по умолчанию только для 2x простых CSS переопределяет.

С CKEditor это .ссылка на метод addCsshttp://docs.ckeditor.com/#!/api / CKEDITOR-метод-addCss

если вы хотите сделать больше, чем несколько CSS переопределяет вы должны вместо этого использовать config.contentsCss = '/css/mysitestyles.css'; чтобы переориентироваться на свою собственную версию по умолчанию CKEditor content.css. Или вы можете указать на их CSS по умолчанию, а затем свой собственный дополнительный файл с config.contentsCss = [ 'content.css', '/css/anotherfile.css' ];

С CKEditor это .ссылка на метод contentsCSShttp://docs.ckeditor.com/#!/api / CKEDITOR.config-cfg-contentsCss

2