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

Is it possible to add CSS to style the Editor text as well as the Preview?

是否可以添加CSS来设置编辑器文本和预览的样式？

The CMS has a different set of CSS files from the public part of the website and I want the editor to try (at least) and reflect the way it would look in the site.

CMS具有来自网站公共部分的不同CSS文件集，我希望编辑器尝试（至少）并反映它在网站中的外观。

For example, all tags with a class of .floatLeft{float:left;margin:0 10px 10px 0;} I want to look the same in the Editor.

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

Thank you.

谢谢。

2 个解决方案

#1

Setup CKEDITOR.config.contentsCss variable. CKEDITOR.config.bodyClass and CKEDITOR.config.bodyId could help too. These are only options you have (i think).

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

#2

To be more exact, you can edit your ckeditor/plugins/styles/styles/default.js and add in files something like { name : 'FloatLeft', element : 'span', attributes : { 'class' : 'floatleft' }}.

更确切地说，您可以编辑ckeditor / plugins / styles / styles / default.js并添加类似{name：'FloatLeft'，element：'span'，attributes：{'class'：'floatleft'}的文件}。

Then you add to your ckeditor/contents.css (if you decided to use the editor style) or in your own style.css the class declaration .floatLeft{float:left;margin:0 10px 10px 0;}

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

Do not forget to clear the browser cache after saving :)

保存后别忘了清除浏览器缓存:)

Enjoy

请享用

#1