Home

Different color pickers for text and background in CKEditor

Taewook Kang

Different color pickers for text and background in CKEditor
  1. Go to ckeditor/config.js. Within editorConfig function add the following lines:
    config.colorButton_enableMore = false ;
    config.colorButton_colors = '000000,feb71a,705e5f,95703c,7e4a5e,8b5543,6d715a,5c6e76' ;
    config.colorButton_colors2 = 'ffffff,e6e6e6,f6f6f6,e8dadc,f8d273,f3f9e3,fbeabe,f4f8db,FFFF00' ;
    
    config.colorButton_colors is going to be the text colors and config.colorButton_colors2 is going to be the background color choices.
  2. Save and close config.js.
  3. Go to ckeditor/ckeditor.js and search for the following code:
    x=n.colorButton_colors.split(',')
    
  4. Replace the code with the following:
    x=(u=='fore')?n.colorButton_colors.split(','):n.colorButton_colors2.split(',')
    
  5. Save and close ckeditor.js.

(Works with CKEditor 3.5.+)