Javascript 如何使 CKEditor 使用 CSS 呈现文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1886582/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make CKEditor render text with a CSS?
提问by Jalil
I have a CKEditor used to edit a text in a web-page.
我有一个 CKEditor 用于编辑网页中的文本。
In the web-page, the text renders in its context and therefore follows the page CSS formatting.
在网页中，文本在其上下文中呈现，因此遵循页面 CSS 格式。
My question is how to tell CKEditor to apply a CSS style-sheet to the editor rendering ? Without of course changing the generated source ?
我的问题是如何告诉 CKEditor 将 CSS 样式表应用于编辑器渲染？当然不改变生成的源？
My code :
我的代码：
<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>
and my CSS :
和我的 CSS ：
.ActuContent{
padding:10px 10px 10px 10px;
color:#416a8b;
font-size:1.6em;
}
And my CKEditor Config.js file only contains the toolbar config.
而我的 CKEditor Config.js 文件只包含工具栏配置。
CKeditor does not apply the settings of ".ActuContent" to its rendering ...
CKeditor 不会将“.ActuContent”的设置应用于其渲染...
回答by Rene
The actual best answer to this question would be:
这个问题的实际最佳答案是：
CKEDITOR.config.contentsCss = '/mycustom.css';
CKEDITOR.replace('myfield');
Because you probably would like to have different styles in different editors. If you change the main content.csslike Jalil did, you would not be able to do that.
因为您可能希望在不同的编辑器中有不同的样式。如果你content.css像Jalil 那样改变 main ，你将无法做到这一点。
回答by Jalil
I found a very easy way to answer my question :
我找到了一个非常简单的方法来回答我的问题：
the content.cssfile in CKEditor directory !
content.cssCKEditor 目录中的文件！
I only had to put in the style I wanted to be applied inside the Editor :
我只需要在编辑器中输入我想要应用的样式：
body {
color: #416a8b;
font-family: Arial;
font-size: 18px;
font-weight: 400;
text-align: left;
}
That's all :-)
就这样 ：-）
回答by MustStayAnonymous
See this posting:
看到这个帖子：
CKEditor: Class or ID for editor body
The solution posted by nemisj will set the class name onto the body of the editor's editable area.
nemisj 发布的解决方案将类名设置到编辑器可编辑区域的主体上。
You can do this in an editor onload function. Call this before you call .replace.
您可以在编辑器的 onload 函数中执行此操作。在调用 .replace 之前调用它。
CKEDITOR.on( 'instanceReady', function( ev )
{
CKEDITOR.instances.e1.document.$.body.className = "foo";
});
回答by Alexander Poleschuk
Sometimes when I need to set some styles to the CKEditor on the fly, for example depending on user settings, I use setStyle()and setStyles()functions on the editor's body object. Sample code:
有时当我需要动态地为 CKEditor 设置一些样式时，例如根据用户设置，我在编辑器的主体对象上使用setStyle()和setStyles()函数。示例代码：
var editor = CKEDITOR.instances.editor1;
var size = ... // assign size value
editor.document.getBody().setStyle('font-size',size);
Another sample:
另一个示例：
var editor = CKEDITOR.instances.editor1;
var styles = {
"font-family": "Arial",
"color": "#333"
};
editor.document.getBody().setStyles(styles);
回答by Aaron Digulla
CKEditor uses a DIVwith normal HTML elements to represent the text you're editing. Just have a look at the content of this DIVand write a appropriate style sheet.
CKEditor 使用DIV带有普通 HTML 元素的 a 来表示您正在编辑的文本。只需查看此内容DIV并编写适当的样式表即可。
Of course, this only works if you don't modify the output of CKEditor before you render it.
当然，这只有在渲染之前不修改 CKEditor 的输出时才有效。
回答by Sergey Payu
If you change content.css file you may discover that it's been cached. It's not a trivial task to refresh it in your browser since CKEDITOR.timestamp is added only to js files. I came up with the following solution:
如果您更改 content.css 文件，您可能会发现它已被缓存。由于 CKEDITOR.timestamp 仅添加到 js 文件，因此在浏览器中刷新它并不是一项简单的任务。我想出了以下解决方案：
// force to update all plugin files and styles
CKEDITOR.timestamp = '25062014';
CKEDITOR.config.contentsCss = CKEDITOR.config.contentsCss + '?' + CKEDITOR.timestamp;
