2010-08-31 3 views
0

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

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

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

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

+0

Это «стойкие» не «настойчивый» , Обычно я не исправляю правописание людей, но в этом случае это может повлиять на возможность поиска этого вопроса с помощью поиска, поэтому вы должны это исправить! – Doin

ответ

0

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

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

не очень хорошо, но это работает ;-)

0
+0

no Вы можете определять стили только с помощью этого статического метода, но я не вижу, где я мог бы прикрепить его к заговору. Закрыто: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#addCss Но этот постулат добавляет атрибут стиля и имеет самый низкий приоритет, поэтому правило перегружается всем – fehrlich

0

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

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

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

С другой стороны, если вы действительно хотите установить ваши стили инлайн на <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 после того, как редактор был создан.)