如何让 CKEditor 用 CSS 渲染文本？

Posted 2023-02-16

【中文标题】如何让 CKEditor 用 CSS 渲染文本？

【英文标题】：How to make CKEditor render text with a CSS?

【发布时间】：2010-12-25 14:06:16

【问题描述】：

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

【参考方案1】：

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

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

因为您可能希望在不同的编辑器中有不同的样式。如果您将主要的content.css 更改为Jalil did，您将无法这样做。

【讨论】：

请注意，您还可以通过传递数组来使用多个样式表：CKEDITOR.config.contentsCss = ['/1.css', '/2.css'];

你好 Rene，myfield 是什么？在你的情况下。

myfield 是通过替换内容来放置编辑器的文本区域或 div 的 ID

这对我不起作用。我指定了一个 css，但是当我检查编辑器 iframe 时，它​​仍然会拉入原始 contents.css：P

【参考方案2】：

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

CKEditor 目录中的content.css 文件！

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

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

就是这样:-)

【讨论】：

如果您使用 asp.net 服务器端控件，您必须在代码后面或 CKEditor:CKEditorControl 标记中明确解决此问题，如 ckeditor.ContentsCss = "/fckeditor/contents.css";

【参考方案3】：

查看此贴：

CKEditor: Class or ID for editor body

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

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

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

【讨论】：

在我看来这是一个非常优雅的解决方案。马上试试。

这个解决方案对我不起作用 :-( 它给了我一个 Javascript 错误 (Internet Explorer 6 / 8)。

【参考方案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);

【参考方案5】：

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

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

【讨论】：

我不明白你说的如何申请。我更新了我的问题以在其中添加一些代码...

编辑了我的问题以放置一些代码。你能解释一下你的想法吗？

其实我不懂你怎么“看看这个DIV的内容？

在您的浏览器显示的 HTML 中，您的 textarea 所在的位置有一个 DIV。使用浏览器的调试工具来查看它的内部。 ***.com/questions/1887216/…

你是对的......我可以看到我的 textarea 变得不可见并替换了我的一些 CKEditor HTML 代码......但内容似乎在 iframe 中： 知道我可以在哪里“跟进”这个吗？

【参考方案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;