如何更改ckeditor iframe CSS样式

概述我无法弄清楚如何修改CKeditor iframe的body CSS样式.我已经尝试了一系列基于网络上各种潜在解决方案的选项,但我对CKeditor的API并不是很熟悉,这使得事情变得相当困难.这是(具体)CKeditor 4.4.3. 您可以在以下JSfiddle中看到各种尝试(已评论)： http://jsfiddle.net/KS3p4/1/ CKEDITOR.stylesSet.add( @H_301_0@我无法弄清楚如何修改CKeditor iframe的body CSS样式.我已经尝试了一系列基于网络上各种潜在解决方案的选项,但我对CKeditor的API并不是很熟悉,这使得事情变得相当困难.这是(具体)CKeditor 4.4.3.

您可以在以下Jsfiddle中看到各种尝试(已评论)：

http://jsfiddle.net/KS3p4/1/

CKEDITOR.stylesSet.add( 'style_updates',[    // ATTEMPT 1    // Block-level styles...this is for the dropdown menu (not shown in current config)    { name: 'Body margin Fix',element: 'body',styles: { margin: '10px' } }]);editor = $('textarea').ckeditor( function(editor){    // ATTEMPT 2    //callback `this` refers to CKEDITOR.editor    this.ckeditorGet().addCSS('body { margin:10px; }')},{    // ATTEMTP 3    addCSS: 'body { margin:10px; }',stylesSet: 'styles_updates',uicolor: '#FFFFFF',scayt_autoStartup: true,autogrow_onStartup: true,enterMode: CKEDITOR.ENTER_BR,removePlugins: 'elementspath,resize',toolbar: [        { name: 'basicstyles',groups: [ 'basicstyles','cleanup' ],items: [ 'Bold','Italic','Underline' ] },{ name: 'clipboard',groups: [ 'clipboard','undo' ],items: [ 'PasteFromWord','Undo','Redo' ] },{ name: 'links',items: [ 'link','Unlink' ] },{ name: 'editing',groups: [ 'spellchecker' ],items: [ 'Scayt' ] },{ name: 'tools',items: [ 'Maximize' ] }    ]// ATTEMPT 4}).ckeditorGet().addCSS('body { margin:10px; }');

解决方法 编辑位于主CKEditor目录中的contents.CSS文件,或使用 config.contentsCss设置加载其他文件.

我看到你将样式系统设置与内容样式混淆了.这是两个完全不同的东西 – 样式系统负责应用和删除所选内容的“样式” – 例如它使用按样式和格式下拉以及粗体或斜体按钮 – 所有这些都是“样式”.

至于CKEDITOR.addCss() – 这个方法主要由插件使用,必须在创建编辑器之前使用它.实际上,它的doc正是这样说的,并且提到你应该使用contents.CSS;).

总结

以上是内存溢出为你收集整理的如何更改ckeditor iframe CSS样式全部内容，希望文章能够帮你解决如何更改ckeditor iframe CSS样式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。