. . .

Customize CKEditor

Published: February 7, 2011

On This Page

     To add a new font in CKEditor’s font drop down list, add the following lines of code in your config.js

     

    CKEDITOR.editorConfig = function( config )
    {
    config.font_names ="Futura;" + config.font_names;
    };
    
    
    CKEDITOR.on( 'instanceCreated', function( e ){
    	e.editor.addCss("@font-face{font-family:'Futura'; src:url('http://www.your-url.com/font/Futura_Medium.ttf');"  );
    });

     

    To customize Toolbars of CKEditor, add the following lines of code in you config.js and customize as desired

     

    CKEDITOR.editorConfig = function( config )
    {
    	config.toolbar = 'Full';
    
    
    	config.toolbar_Full =
    	[
    	    ['Source','-','Save','NewPage','Preview','-','Templates'],
    	    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    	    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    	    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    	    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
    	    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    	    ['BidiLtr', 'BidiRtl'],
    	    ['TextColor','BGColor'],
    	    ['Link','Unlink','Anchor'],
    	    ['Styles','Format','Font','FontSize'],
    	    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    	    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],
    	    ['Maximize', 'ShowBlocks','-','About']
    	];
    
    
    
    
    
    };

     

    Don't forget to share this post

      Let's Build Digital Excellence Together


      • Cost Efficient Solutions.
      • Minimal Timelines.
      • Effective Communication.
      • High Quality Standards.
      • Lifetime Support.
      • Transparent Execution.
      • 24/7 Availability.
      • Scalable Teams.

      Join Our 200+ Happy Clients Across Globe


      Free Consultation.

        Do you need tech help of your startup/business? Experts from our team will get in touch with you.

        Please do not post jobs/internships inquiries here.