21

我有一个 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”的设置应用于其渲染...

4

6 回答 6

38

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

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

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

于 2010-09-14T14:59:55.680 回答
9

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

content.cssCKEditor 目录下的文件！

我只需要输入我想在 Editor 中应用的样式：

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

就这样 ：-）

于 2009-12-14T04:45:32.973 回答
3

看到这个帖子：

CKEditor：编辑器主体的类或 ID

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

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

CKEDITOR.on( 'instanceReady', function( ev )
     {
         CKEDITOR.instances.e1.document.$.body.className = "foo";
     });
于 2009-12-11T14:49:52.890 回答
2

有时，当我需要即时为 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);
于 2012-08-16T14:54:57.960 回答
1

CKEditor 使用DIV带有普通 HTML 元素的 a 来表示您正在编辑的文本。只要看看这个的内容DIV并写一个合适的样式表。

当然，这只适用于在渲染之前不修改 CKEditor 的输出。

于 2009-12-11T08:24:51.817 回答
0

如果您更改 content.css 文件，您可能会发现它已被缓存。由于 CKEDITOR.timestamp 仅添加到 js 文件中，因此在浏览器中刷新它并非易事。我想出了以下解决方案：

// force to update all plugin files and styles
CKEDITOR.timestamp = '25062014';
CKEDITOR.config.contentsCss = CKEDITOR.config.contentsCss + '?' + CKEDITOR.timestamp;
于 2014-06-25T06:09:21.277 回答