1 /* 2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved. 3 For licensing, see LICENSE.html or http://ckeditor.com/license 4 */ 5 6 CKEDITOR.plugins.add( 'colorbutton', 7 { 8 requires : [ 'panelbutton', 'floatpanel', 'styles' ], 9 10 init : function( editor ) 11 { 12 var config = editor.config, 13 lang = editor.lang.colorButton; 14 15 var saveRanges, 16 clickFn; 17 18 addButton( 'TextColor', 'fore', lang.textColorTitle ); 19 addButton( 'BGColor', 'back', lang.bgColorTitle ); 20 21 function addButton( name, type, title ) 22 { 23 editor.ui.add( name, CKEDITOR.UI_PANELBUTTON, 24 { 25 label : lang.label, 26 title : title, 27 className : 'cke_button_' + name.toLowerCase(), 28 29 panel : 30 { 31 css : [ CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ] 32 }, 33 34 onBlock : function( panel, blockName ) 35 { 36 var block = panel.addBlock( blockName ); 37 block.autoSize = true; 38 block.element.addClass( 'cke_colorblock' ); 39 block.element.setHtml( renderColors( panel, type ) ); 40 41 var keys = block.keys; 42 keys[ 39 ] = 'next'; // ARROW-RIGHT 43 keys[ 9 ] = 'next'; // TAB 44 keys[ 37 ] = 'prev'; // ARROW-LEFT 45 keys[ CKEDITOR.SHIFT + 9 ] = 'prev'; // SHIFT + TAB 46 keys[ 32 ] = 'click'; // SPACE 47 }, 48 49 onOpen : function() 50 { 51 if ( CKEDITOR.env.ie ) 52 { 53 editor.focus(); 54 saveRanges = editor.getSelection().getRanges(); 55 } 56 }, 57 58 onClose : function() 59 { 60 saveRanges = null; 61 } 62 }); 63 } 64 65 66 function renderColors( panel, type ) 67 { 68 var output = [], 69 colors = CKEDITOR.config.colorButton_colors.split( ',' ); 70 71 if ( !clickFn ) 72 { 73 clickFn = CKEDITOR.tools.addFunction( function( color, type ) 74 { 75 if ( color == '?' ) 76 { 77 // TODO : Implement the colors dialog. 78 // editor.openDialog( '' ); 79 return; 80 } 81 82 editor.focus(); 83 84 if ( saveRanges ) 85 { 86 editor.getSelection().selectRanges( saveRanges ); 87 saveRanges = false; 88 } 89 90 panel.hide(); 91 92 var style = new CKEDITOR.style( config['colorButton_' + type + 'Style'], { color : color || '#000' } ); 93 94 if ( color ) 95 style.apply( editor.document ); 96 else 97 style.remove( editor.document ); 98 }); 99 } 100 101 // Render the "Automatic" button. 102 output.push( 103 '<a class="cke_colorauto" _cke_focus=1 hidefocus=true' + 104 ' title="', lang.auto, '"' + 105 ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',null,\'', type, '\');"' + 106 ' href="javascript:void(\'', lang.auto, '\')">' + 107 '<table cellspacing=0 cellpadding=0 width="100%">' + 108 '<tr>' + 109 '<td>' + 110 '<span class="cke_colorbox" style="background-color:#000"></span>' + 111 '</td>' + 112 '<td colspan=7 align=center>', 113 lang.auto, 114 '</td>' + 115 '</tr>' + 116 '</table>' + 117 '</a>' + 118 '<table cellspacing=0 cellpadding=0 width="100%">' ); 119 120 // Render the color boxes. 121 for ( var i = 0 ; i < colors.length ; i++ ) 122 { 123 if ( ( i % 8 ) == 0 ) 124 output.push( '</tr><tr>' ); 125 126 var color = colors[ i ]; 127 output.push( 128 '<td>' + 129 '<a class="cke_colorbox" _cke_focus=1 hidefocus=true' + 130 ' title="', color, '"' + 131 ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'#', color, '\',\'', type, '\');"' + 132 ' href="javascript:void(\'', color, '\')">' + 133 '<span class="cke_colorbox" style="background-color:#', color, '"></span>' + 134 '</a>' + 135 '</td>' ); 136 } 137 138 // Render the "More Colors" button. 139 if ( config.colorButton_enableMore ) 140 { 141 output.push( 142 '</tr>' + 143 '<tr>' + 144 '<td colspan=8 align=center>' + 145 '<a class="cke_colormore" _cke_focus=1 hidefocus=true' + 146 ' title="', lang.more, '"' + 147 ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'?\',\'', type, '\');"' + 148 ' href="javascript:void(\'', lang.more, '\')">', 149 lang.more, 150 '</a>' + 151 '</td>' ); // It is later in the code. 152 } 153 154 output.push( '</tr></table>' ); 155 156 return output.join( '' ); 157 } 158 } 159 }); 160 161 CKEDITOR.config.colorButton_enableMore = false; 162 CKEDITOR.config.colorButton_colors = 163 '000,930,330,030,036,000080,339,333,' + 164 '800000,F60,808000,808080,008080,00F,669,808080,' + 165 'F00,F90,9C0,396,3CC,36F,800080,999,' + 166 'F0F,FC0,FF0,0F0,0FF,0CF,936,C0C0C0,' + 167 'F9C,FC9,FF9,CFC,CFF,9CF,C9F,FFF'; 168 169 CKEDITOR.config.colorButton_foreStyle = 170 { 171 element : 'span', 172 styles : { 'color' : '#(color)' }, 173 overrides : [ { element : 'font', attributes : { 'color' : null } } ] 174 }; 175 176 CKEDITOR.config.colorButton_backStyle = 177 { 178 element : 'span', 179 styles : { 'background-color' : '#(color)' } 180 }; 181