如何让CKEditor用CSS渲染文本？

Question

我有一个 CKEditor 用于编辑网页中的文本。

在网页中，文本在其上下文中呈现，因此遵循页面 CSS 格式。

我的问题是如何告诉 CKEditor 将 CSS 样式表应用于编辑器渲染？当然不改变生成的源？

我的代码：

<textarea class="ActuContent" name="actu-content" cols="100" rows="20">my content></textarea>
<script type="text/javascript">
        window.onload = function()
        {
                CKEDITOR.replace( 'actu-content' );
        };
</script>

和我的 CSS：

.ActuContent{
    padding:10px 10px 10px 10px;
    color:#416a8b;
    font-size:1.6em;
}

我的 CKEditor Config.js 文件仅包含工具栏配置。

CKeditor 不会将“.ActuContent”的设置应用于其渲染...

Answer 1

这个问题的实际最佳答案是：

CKEDITOR.config.contentsCss = '/mycustom.css';
CKEDITOR.replace('myfield');

因为您可能希望在不同的编辑器中拥有不同的样式。如果您像Jalil 所做的那样更改主要content.css，你将无法做到这一点。

Answer 2

我找到了一个非常简单的方法来回答我的问题：

CKEditor 目录中的 content.css 文件！

我只需在编辑器中输入我想要应用的样式：

body {
    color: #416a8b;
    font-family: Arial;
    font-size: 18px;
    font-weight: 400;
   text-align: left;
}

仅此而已:-)

Answer 3

请参阅此帖子：

CKEditor：编辑器主体的类或 ID

解决方案nemisj 发布的内容会将类名设置到编辑器可编辑区域的主体上。

您可以在编辑器 onload 函数中执行此操作。在调用 .replace 之前调用此函数。

CKEDITOR.on( 'instanceReady', function( ev )
     {
         CKEDITOR.instances.e1.document.$.body.className = "foo";
     });

Answer 4

有时，当我需要动态为 CKEditor 设置某些样式时，例如根据用户设置，我会在编辑器主体上使用 setStyle() 和 setStyles() 函数目的。示例代码：

var editor = CKEDITOR.instances.editor1;
var size = ... // assign size value
editor.document.getBody().setStyle('font-size',size);

另一个示例：

var editor = CKEDITOR.instances.editor1;
var styles = {
    "font-family": "Arial",
    "color": "#333"
};
editor.document.getBody().setStyles(styles);

Answer 5

CKEditor 使用带有普通 HTML 元素的 DIV 来表示您正在编辑的文本。只需查看此 DIV 的内容并编写适当的样式表即可。

当然，只有在渲染之前不修改 CKEditor 的输出时，这才有效。

Answer 6

如果您更改 content.css 文件，您可能会发现它已被缓存。在浏览器中刷新它并不是一项简单的任务，因为 CKEDITOR.timestamp 仅添加到 js 文件中。我想出了以下解决方案：

// force to update all plugin files and styles
CKEDITOR.timestamp = '25062014';
CKEDITOR.config.contentsCss = CKEDITOR.config.contentsCss + '?' + CKEDITOR.timestamp;