ckeditor 3 различных стиля тела для полного предварительного просмотра страницы - PullRequest
1 голос
/ 11 февраля 2012

Можно ли изменить стиль тела при вводе полного предварительного просмотра страницы в ckeditor 3. Может быть, установить другой стиль тела для полной страницы, чем когда он не находится в режиме полной страницы. Причиной этого является использование ckeditor при просмотре веб-страницы на большом экране с развернутым браузером ... в этом случае она очень широкая и ее трудно читать. Поэтому я хотел бы добавить в стиль кузова (но только для режима полной страницы) что-то вроде:

...
margin: 5%;
padding: 5%;
border: 1px dotted #666;
...

... это придаст текстовому оформлению больше контента.

TNX!

1 Ответ

1 голос
/ 15 февраля 2012

Когда CKEditor переключен в полноэкранный режим, он добавляет класс " cke_maximized " в диапазон контейнера.

Таким образом, вы можете применять стили для всего диапазона контейнера (тело + панель инструментов), например:

.cke_maximized{
   margin: 5%;
   padding: 5%;
   border: 1px dotted #666;
}

или только для тела содержимого:

.cke_maximized iframe{
   margin: 5%;
   padding: 5%;
   border: 1px dotted #666;
}

Это только примерыи вы можете поэкспериментировать и выбрать более подходящий для вас селектор CSS.

ОБНОВЛЕНИЕ 1:

Конечно, вы можете использовать код JavaScript, если его недостаточно для вашегоцели.Вы можете использовать что-то вроде этого:

var editor = CKEDITOR.instances.editor1;

editor.on("afterCommandExec", function(e){
  if(e.data.name == 'maximize'){
      // maximized
      if(e.data.command.state == CKEDITOR.TRISTATE_ON){
          // add special css class to body(e.editor.document.getBody())
      } else {
      // minimized
      // remove special css from body
      }  
  }
});
...