Тело настойчивый стиль inline в ckEditor - PullRequest
Новая
       6

Тело настойчивый стиль inline в ckEditor

0 голосов
/ 31 августа 2010

Я весь день пытаюсь установить атрибут постоянного свойства для тега body экземпляра ckeditor. Я не смог найти что-то вроде bodyStyle в ckeditor.config api (только bodyId и bodyClass). Поэтому я попробовал это сам, используя следующее решение (используется jQuery): 

$(this).find('textarea.editor').ckeditor().ckeditorGet().on( 'instanceReady', function( e ){
  var documentWrapper = e.editor.document,
    documentNode = documentWrapper.$,
    inh = $(documentNode.body);
    inh.css('background', inheritParentBackground);
});

Это работает довольно хорошо, но после того, как я вызову .updateElement () или если я дважды нажму кнопку источника, он снова удалит все стили, и instanceReady больше не будет вызываться. Я попытался запустить его вручную, но затем он сначала запускает обновление стиля и перезаписывается напрямую с ckeditor.

Что я на самом деле пытаюсь сделать: я хочу отредактировать Div на домашней странице, после нажатия кнопки редактирования всплывающих окон ajax с помощью ckeditor, и я хочу, чтобы редактор имел одинаковую высоту, ширину и фон, и я не могу обработайте это поверх bodyId или bodyClass, так что я думаю, что мне нужен bodyStyle, или у кого-то есть другая идея.

Ответы [ 3 ]

0 голосов
/ 01 сентября 2010

Я обнаружил грязный хак: 

$(this).find('textarea.editor').ckeditor({
        bodyId: Id+'" style="'+style,
    });

не очень приятно, но работает; -)

0 голосов
/ 13 июля 2013

У вас есть два варианта. Вы можете добавить встроенную таблицу стилей в обработчик instanceReady через: 

var myStyleSheet = e.editor.document.appendStyleText("body {background:...}");

Это добавляет пустой элемент <style> к заголовку документа редактора (iframed), содержащего предоставленный текст. Возвращаемым значением является CSSStyleSheet (объект DOM браузера), поэтому, если вы сохраните его где-нибудь, вы можете добавить, удалить или изменить правила стиля, используя методы DOM из javascript. Я не уверен, сохраняются ли они при смене режима (т.е. после двойного нажатия «Source») или при вызове setData (), но вы можете захватить эти вещи, используя события mode и contentDom, и повторно применить styleSheet в обработчик событий. Обратите внимание, что (по крайней мере для обработчика 'mode') вам нужно проверить, что editor.mode==='wysisyg', потому что editor.document равно нулю в режиме источника.

С другой стороны, если вы действительно хотите встроить свои стили в элемент редактора <body>, попробуйте определить функцию: 

function setEditorStyle(e)
{
    var ed = e.editor;
    if (ed.mode!=="wysiwyg") return;    // don't set styles when in "Source" mode
    // now change whatever styles you want, e.g.:
    ed.document.getBody().setStyles({backgroundColor:"blue",color:"#FFFFFF",...});
    // for setting just 1 style property, you can use .setStyle() instead
}

затем в настройках вашего редактора вам нужно добавить: 

..., on: { instanceReady: setEditorStyle, mode: setEditorStyle, ... }, ...

, который устанавливает стиль как после первого создания редактора iframe, так и после возврата в режим «wysiwyg» (обычное редактирование, а не режим исходного кода).

Я не знаю, почему ваши стили сбрасываются при вызове updateElement (); Я делаю то же самое (используя CKEditor v4) и updateElement () не сбрасывает встроенные стили, которые я установил на <body>. Возможно, это то, что изменилось с версиями CKeditor. В любом случае, если это проблема, вы можете просто вручную сбросить стиль после вызова updateElement (). (Я бы сказал «просто вызовите setEditorStyle ()», но, как показано выше, эта функция написана так, чтобы требовать параметр события e. Вместо этого вы можете переписать его, используя внешнюю переменную «ed» (например, глобальную переменную) - т.е. изменить 

var ed = e.editor;

до 

if (!ed) ed = e.editor;

и затем вы можете безопасно вызывать setEditorStyle () из любой точки вашего javascript после создания редактора.)

0 голосов
/ 31 августа 2010

Является ли http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.style тем, что вы ищете?

...