Как я могу изменить стиль CSS ckeditor iframe



Я не могу понять, как изменить стиль CSS CKeditor iframe body. Я перепробовал множество вариантов, основанных на различных потенциальных решениях в интернете, но я не очень хорошо знаком с 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; }');
160   2  

2 ответов:

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

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

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

Подтвердите, что в 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; } }' );

В рамках существующего раздела CKEDITOR.editorConfig = function( config ) { ... } в:

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

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

Ckeditor's .ссылка на метод 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's .contentsCSS метод ссылка http://docs.ckeditor.com/#!/по API/с CKEditor.конфиг-конфигурационный contentsCss

    Ничего не найдено.

Добавить ответ:
Отменить.