Question

如何自定义CKEditor的h1，h2，h3，tag 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如何显示其内容所需的内容。

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

1 个答案: