ckeditor 3 不同的正文样式用于整页预览答案

【问题标题】：ckeditor 3 different body style for full page previewckeditor 3 不同的正文样式用于整页预览
【发布时间】：2012-02-11 12:10:10
【问题描述】：

在 ckeditor 3 中输入全页预览时是否可以更改正文样式。也许为整页设置不同的正文样式而不是未处于全页模式时。这样做的原因是在使用最大化浏览器在更大屏幕上查看网页时使用 ckeditor ......在这种情况下，它非常宽并且很难阅读内容。所以我想添加正文样式（但仅适用于整页模式），例如：

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

...这将使文本处理器对内容具有更多外观。

TNX！

【问题讨论】：

标签： styles ckeditor fullscreen

【解决方案1】：

当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
      }  
  }
});

【讨论】：

Tnx。 @Aleh Zasypkin 对于这个提示 - 我已经尝试过了，但它仍然没有用......关闭，但对于生产目的仍然不方便。因为 iframe 被硬编码为 100% 宽度和 100% 高度（可以在 ckeditor.js 中更改），所以正文内容的空间更大。添加了 cke_maximized 样式，但使用此样式，您无法控制 iframe 中的内容。最好的方法是使用一些 javascript 在最大化事件时更改或添加 iframe 内的正文内容样式。
是的，在这种情况下，除了 JS 代码你别无选择。请看我上面的更新。
谢谢阿莱！我同时遇到了这种解决方案。像魅力一样工作......你帮了很多忙！