CKEditor 将 CSS 样式添加到预览和编辑器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3608084/
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
CKEditor add CSS styling to Preview and Editor
提问by Francisc
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.
谢谢你。
回答by Anpher
Setup CKEDITOR.config.contentsCssvariable. CKEDITOR.config.bodyClassand CKEDITOR.config.bodyIdcould help too. These are only options you have (i think).
设置CKEDITOR.config.contentsCss变量。 CKEDITOR.config.bodyClass和CKEDITOR.config.bodyId也可以提供帮助。这些只是您拥有的选项（我认为）。
回答by Ravaka
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
享受
