2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
7 * @fileOverview The "colorbutton" plugin that makes it possible to assign
8 * text and background colors to editor contents.
11 CKEDITOR
.plugins
.add( 'colorbutton', {
12 requires: 'panelbutton,floatpanel',
13 // jscs:disable maximumLineLength
14 lang: 'af,ar,az,bg,bn,bs,ca,cs,cy,da,de,de-ch,el,en,en-au,en-ca,en-gb,eo,es,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,oc,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
15 // jscs:enable maximumLineLength
16 icons: 'bgcolor,textcolor', // %REMOVE_LINE_CORE%
17 hidpi: true, // %REMOVE_LINE_CORE%
18 init: function( editor
) {
19 var config
= editor
.config
,
20 lang
= editor
.lang
.colorbutton
;
22 if ( !CKEDITOR
.env
.hc
) {
23 addButton( 'TextColor', 'fore', lang
.textColorTitle
, 10, {
24 contentTransformations: [
29 left: function( element
) {
30 return !!element
.attributes
.color
;
32 right: function( element
) {
33 element
.name
= 'span';
35 element
.attributes
.color
&& ( element
.styles
.color
= element
.attributes
.color
);
36 delete element
.attributes
.color
;
44 normalizeBackground
= editor
.config
.colorButton_normalizeBackground
;
46 if ( normalizeBackground
=== undefined || normalizeBackground
) {
47 // If background contains only color, then we want to convert it into background-color so that it's
48 // correctly picked by colorbutton plugin.
49 bgOptions
.contentTransformations
= [
52 // Transform span that specify background with color only to background-color.
54 left: function( element
) {
55 var tools
= CKEDITOR
.tools
;
56 if ( element
.name
!= 'span' || !element
.styles
|| !element
.styles
.background
) {
60 var background
= tools
.style
.parse
.background( element
.styles
.background
);
62 // We return true only if background specifies **only** color property, and there's only one background directive.
63 return background
.color
&& tools
.objectKeys( background
).length
=== 1;
65 right: function( element
) {
66 var style
= new CKEDITOR
.style( editor
.config
.colorButton_backStyle
, {
67 color: element
.styles
.background
69 definition
= style
.getDefinition();
71 // Align the output object with the template used in config.
72 element
.name
= definition
.element
;
73 element
.styles
= definition
.styles
;
74 element
.attributes
= definition
.attributes
|| {};
83 addButton( 'BGColor', 'back', lang
.bgColorTitle
, 20, bgOptions
);
86 function addButton( name
, type
, title
, order
, options
) {
87 var style
= new CKEDITOR
.style( config
[ 'colorButton_' + type
+ 'Style' ] ),
88 colorBoxId
= CKEDITOR
.tools
.getNextId() + '_colorBox';
90 options
= options
|| {};
92 editor
.ui
.add( name
, CKEDITOR
.UI_PANELBUTTON
, {
95 modes: { wysiwyg: 1 },
97 toolbar: 'colors,' + order
,
98 allowedContent: style
,
99 requiredContent: style
,
100 contentTransformations: options
.contentTransformations
,
103 css: CKEDITOR
.skin
.getPath( 'editor' ),
104 attributes: { role: 'listbox', 'aria-label': lang
.panelTitle
}
107 onBlock: function( panel
, block
) {
108 block
.autoSize
= true;
109 block
.element
.addClass( 'cke_colorblock' );
110 block
.element
.setHtml( renderColors( panel
, type
, colorBoxId
) );
111 // The block should not have scrollbars (#5933, #6056)
112 block
.element
.getDocument().getBody().setStyle( 'overflow', 'hidden' );
114 CKEDITOR
.ui
.fire( 'ready', this );
116 var keys
= block
.keys
;
117 var rtl
= editor
.lang
.dir
== 'rtl';
118 keys
[ rtl
? 37 : 39 ] = 'next'; // ARROW-RIGHT
119 keys
[ 40 ] = 'next'; // ARROW-DOWN
120 keys
[ 9 ] = 'next'; // TAB
121 keys
[ rtl
? 39 : 37 ] = 'prev'; // ARROW-LEFT
122 keys
[ 38 ] = 'prev'; // ARROW-UP
123 keys
[ CKEDITOR
.SHIFT
+ 9 ] = 'prev'; // SHIFT + TAB
124 keys
[ 32 ] = 'click'; // SPACE
127 refresh: function() {
128 if ( !editor
.activeFilter
.check( style
) )
129 this.setState( CKEDITOR
.TRISTATE_DISABLED
);
132 // The automatic colorbox should represent the real color (#6010)
135 var selection
= editor
.getSelection(),
136 block
= selection
&& selection
.getStartElement(),
137 path
= editor
.elementPath( block
),
143 // Find the closest block element.
144 block
= path
.block
|| path
.blockLimit
|| editor
.document
.getBody();
146 // The background color might be transparent. In that case, look up the color in the DOM tree.
148 color
= block
&& block
.getComputedStyle( type
== 'back' ? 'background-color' : 'color' ) || 'transparent';
150 while ( type
== 'back' && color
== 'transparent' && block
&& ( block
= block
.getParent() ) );
152 // The box should never be transparent.
153 if ( !color
|| color
== 'transparent' )
156 if ( config
.colorButton_enableAutomatic
!== false ) {
157 this._
.panel
._
.iframe
.getFrameDocument().getById( colorBoxId
).setStyle( 'background-color', color
);
165 function renderColors( panel
, type
, colorBoxId
) {
167 colors
= config
.colorButton_colors
.split( ',' ),
168 colorsPerRow
= config
.colorButton_colorsPerRow
|| 6,
169 // Tells if we should include "More Colors..." button.
170 moreColorsEnabled
= editor
.plugins
.colordialog
&& config
.colorButton_enableMore
!== false,
171 // aria-setsize and aria-posinset attributes are used to indicate size of options, because
172 // screen readers doesn't play nice with table, based layouts (#12097).
173 total
= colors
.length
+ ( moreColorsEnabled
? 2 : 1 );
175 var clickFn
= CKEDITOR
.tools
.addFunction( function( color
, type
) {
176 var applyColorStyle
= arguments
.callee
;
177 function onColorDialogClose( evt
) {
178 this.removeListener( 'ok', onColorDialogClose
);
179 this.removeListener( 'cancel', onColorDialogClose
);
181 evt
.name
== 'ok' && applyColorStyle( this.getContentElement( 'picker', 'selectedColor' ).getValue(), type
);
184 if ( color
== '?' ) {
185 editor
.openDialog( 'colordialog', function() {
186 this.on( 'ok', onColorDialogClose
);
187 this.on( 'cancel', onColorDialogClose
);
197 editor
.fire( 'saveSnapshot' );
199 // Clean up any conflicting style within the range.
200 editor
.removeStyle( new CKEDITOR
.style( config
[ 'colorButton_' + type
+ 'Style' ], { color: 'inherit' } ) );
203 var colorStyle
= config
[ 'colorButton_' + type
+ 'Style' ];
205 colorStyle
.childRule
= type
== 'back' ?
206 function( element
) {
207 // It's better to apply background color as the innermost style. (#3599)
208 // Except for "unstylable elements". (#6103)
209 return isUnstylable( element
);
210 } : function( element
) {
211 // Fore color style must be applied inside links instead of around it. (#4772,#6908)
212 return !( element
.is( 'a' ) || element
.getElementsByTag( 'a' ).count() ) || isUnstylable( element
);
215 editor
.applyStyle( new CKEDITOR
.style( colorStyle
, { color: color
} ) );
218 editor
.fire( 'saveSnapshot' );
221 if ( config
.colorButton_enableAutomatic
!== false ) {
222 // Render the "Automatic" button.
223 output
.push( '<a class="cke_colorauto" _cke_focus=1 hidefocus=true' +
224 ' title="', lang
.auto
, '"' +
225 ' onclick="CKEDITOR.tools.callFunction(', clickFn
, ',null,\'', type
, '\');return false;"' +
226 ' href="javascript:void(\'', lang
.auto
, '\')"' +
227 ' role="option" aria-posinset="1" aria-setsize="', total
, '">' +
228 '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' +
230 '<td colspan="' + colorsPerRow
+ '" align="center"><span class="cke_colorbox" id="', colorBoxId
, '"></span>', lang
.auto
, '</td>' +
235 output
.push( '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' );
237 // Render the color boxes.
238 for ( var i
= 0; i
< colors
.length
; i
++ ) {
239 if ( ( i
% colorsPerRow
) === 0 )
240 output
.push( '</tr><tr>' );
242 var parts
= colors
[ i
].split( '/' ),
243 colorName
= parts
[ 0 ],
244 colorCode
= parts
[ 1 ] || colorName
;
246 // The data can be only a color code (without #) or colorName + color code
247 // If only a color code is provided, then the colorName is the color with the hash
248 // Convert the color from RGB to RRGGBB for better compatibility with IE and <font>. See #5676
250 colorName
= '#' + colorName
.replace( /^(.)(.)(.)$/, '$1$1$2$2$3$3' );
252 var colorLabel
= editor
.lang
.colorbutton
.colors
[ colorCode
] || colorCode
;
253 output
.push( '<td>' +
254 '<a class="cke_colorbox" _cke_focus=1 hidefocus=true' +
255 ' title="', colorLabel
, '"' +
256 ' onclick="CKEDITOR.tools.callFunction(', clickFn
, ',\'', colorName
, '\',\'', type
, '\'); return false;"' +
257 ' href="javascript:void(\'', colorLabel
, '\')"' +
258 ' role="option" aria-posinset="', ( i
+ 2 ), '" aria-setsize="', total
, '">' +
259 '<span class="cke_colorbox" style="background-color:#', colorCode
, '"></span>' +
264 // Render the "More Colors" button.
265 if ( moreColorsEnabled
) {
266 output
.push( '</tr>' +
268 '<td colspan="' + colorsPerRow
+ '" align="center">' +
269 '<a class="cke_colormore" _cke_focus=1 hidefocus=true' +
270 ' title="', lang
.more
, '"' +
271 ' onclick="CKEDITOR.tools.callFunction(', clickFn
, ',\'?\',\'', type
, '\');return false;"' +
272 ' href="javascript:void(\'', lang
.more
, '\')"', ' role="option" aria-posinset="', total
, '" aria-setsize="', total
, '">', lang
.more
, '</a>' +
273 '</td>' ); // tr is later in the code.
276 output
.push( '</tr></table>' );
278 return output
.join( '' );
281 function isUnstylable( ele
) {
282 return ( ele
.getAttribute( 'contentEditable' ) == 'false' ) || ele
.getAttribute( 'data-nostyle' );
288 * Whether to enable the **More Colors** button in the color selectors.
290 * Read more in the [documentation](#!/guide/dev_colorbutton)
291 * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
293 * config.colorButton_enableMore = false;
295 * @cfg {Boolean} [colorButton_enableMore=true]
296 * @member CKEDITOR.config
300 * Defines the colors to be displayed in the color selectors. This is a string
301 * containing hexadecimal notation for HTML colors, without the `'#'` prefix.
303 * **Since 3.3:** A color name may optionally be defined by prefixing the entries with
304 * a name and the slash character. For example, `'FontColor1/FF9900'` will be
305 * displayed as the color `#FF9900` in the selector, but will be output as `'FontColor1'`.
307 * **Since 4.6.2:** The default color palette has changed. It contains fewer colors in more
308 * pastel shades than the previous one.
310 * Read more in the [documentation](#!/guide/dev_colorbutton)
311 * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
313 * // Brazil colors only.
314 * config.colorButton_colors = '00923E,F8C100,28166F';
316 * config.colorButton_colors = 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00';
318 * // CKEditor color palette available before version 4.6.2.
319 * config.colorButton_colors =
320 * '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,' +
321 * 'B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,' +
322 * 'F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,' +
323 * 'FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,' +
324 * 'FFF0F5,FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF';
326 * @cfg {String} [colorButton_colors=see source]
327 * @member CKEDITOR.config
329 CKEDITOR
.config
.colorButton_colors
= '1ABC9C,2ECC71,3498DB,9B59B6,4E5F70,F1C40F,' +
330 '16A085,27AE60,2980B9,8E44AD,2C3E50,F39C12,' +
331 'E67E22,E74C3C,ECF0F1,95A5A6,DDD,FFF,' +
332 'D35400,C0392B,BDC3C7,7F8C8D,999,000';
335 * Stores the style definition that applies the text foreground color.
337 * Read more in the [documentation](#!/guide/dev_colorbutton)
338 * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
340 * // This is actually the default value.
341 * config.colorButton_foreStyle = {
343 * styles: { color: '#(color)' }
346 * @cfg [colorButton_foreStyle=see source]
347 * @member CKEDITOR.config
349 CKEDITOR
.config
.colorButton_foreStyle
= {
351 styles: { 'color': '#(color)' },
353 element: 'font', attributes: { 'color': null }
358 * Stores the style definition that applies the text background color.
360 * Read more in the [documentation](#!/guide/dev_colorbutton)
361 * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
363 * // This is actually the default value.
364 * config.colorButton_backStyle = {
366 * styles: { 'background-color': '#(color)' }
369 * @cfg [colorButton_backStyle=see source]
370 * @member CKEDITOR.config
372 CKEDITOR
.config
.colorButton_backStyle
= {
374 styles: { 'background-color': '#(color)' }
378 * Whether to enable the **Automatic** button in the color selectors.
380 * Read more in the [documentation](#!/guide/dev_colorbutton)
381 * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
383 * config.colorButton_enableAutomatic = false;
385 * @cfg {Boolean} [colorButton_enableAutomatic=true]
386 * @member CKEDITOR.config
390 * Defines how many colors will be shown per row in the color selectors.
392 * Read more in the [documentation](#!/guide/dev_colorbutton)
393 * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
395 * config.colorButton_colorsPerRow = 8;
398 * @cfg {Number} [colorButton_colorsPerRow=6]
399 * @member CKEDITOR.config
403 * Whether the plugin should convert `background` CSS properties with color only, to a `background-color` property,
404 * allowing the [Color Button](http://ckeditor.com/addon/colorbutton) plugin to edit these styles.
406 * config.colorButton_normalizeBackground = false;
409 * @cfg {Boolean} [colorButton_normalizeBackground=true]
410 * @member CKEDITOR.config