如何自定义 CKEditor 编辑器的 h1、h2、h3、标签格式的外观？

Question

如何自定义 CKEditor 的 h1、h2、h3、标签 fprmat 的外观，以便我可以使它们与我的本地 CSS 样式 h1、h2、h3 等相匹配。我使用的 CSS 文件是 boostrap .css 下面是ckeditor的config.js

/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';

    config.LinkUpload = false;
    config.LinkBrowser = false;

    config.skin = 'kama';

    config.Format   = 'p;h1;h2;h3;h4;h5;h6;pre;address;div' ;
    config.FontName = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
    config.FontSize = 'smaller;larger;xx-small;x-small;small;medium;large;x-large;xx-large' ;

    config.toolbar_Testimonial = [
                                    ['Bold','Italic','Underline','RemoveFormat']
                                 ];

    config.toolbar_KarlBell =  [
                                ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'], 
                                ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
                                ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
                                ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
                                ['OrderedList','UnorderedList','-','Outdent','Indent'],
                                ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
                                ['Link','Unlink','Anchor'],
                                ['Image','Flash','Table','Rule','Smiley','SpecialChar'],
                                ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
                                '/',
                                ['Styles','Format','Font','FontSize'],
                                ['TextColor','BGColor']
                            ] ; 
    config.toolbar_KarlBell = [
                                    ['Format','Bold','Italic','Underline','BulletedList','NumberedList','Link']
                                 ];                        

};

Answer 1

快速而肮脏的方法是将您的 css 包含在 ckeditor css 中：

你 /ckeditor/content.css 应该以：

@import "/css/boostrap.css"; /*your site css*/

...

请注意，文件中的其他内容将覆盖您的某些 css 声明，因此请相应地删除它们

content.css 是您自定义 ckeditor 在编辑期间显示其内容的方式所需要的。