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');

因为您可能希望在不同的编辑器中使用不同的样式。如果您更改content.css之类的主{{1}}，则无法执行此操作。

Answer 2

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

CKEditor目录中的content.css文件！

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

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

这就是全部： - ）

Answer 3

查看此帖子：

CKEditor: Class or ID for editor body

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

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

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

Answer 4

有时当我需要动态地为CKEditor设置一些样式时，例如根据用户设置，我在编辑器的body对象上使用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;

如何让CKEditor用CSS渲染文本？

6 个答案: