CKEditor将CSS样式添加到预览和编辑器

时间:2010-08-31 10:22:02

标签: css class ckeditor customization

是否可以添加CSS来设置编辑器文本以及预览?

的样式

CMS有一组不同的CSS文件来自网站的公共部分,我希望编辑器(至少)尝试并反映它在网站中的样子。

例如,所有标签的类别为.floatLeft {float:left; margin:0 10px 10px 0;}我想在编辑器中看起来一样。

谢谢。

2 个答案:

答案 0 :(得分:26)

设置CKEDITOR.config.contentsCss变量。 CKEDITOR.config.bodyClassCKEDITOR.config.bodyId也可以提供帮助。 这些只是你有的选择(我认为)。

答案 1 :(得分:6)

更确切地说,您可以编辑ckeditor / plugins / styles / styles / default.js并添加类似{name:'FloatLeft',element:'span',attributes:{'class':'的文件向左飘浮' }}。

然后你添加到你的ckeditor / contents.css(如果你决定使用编辑器样式)或在你自己的style.css中添加类声明.floatLeft {float:left; margin:0 10px 10px 0;}

保存后不要忘记清除浏览器缓存:)

享受