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,es-mx,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',
91 options
= options
|| {};
93 editor
.ui
.add( name
, CKEDITOR
.UI_PANELBUTTON
, {
96 modes: { wysiwyg: 1 },
98 toolbar: 'colors,' + order
,
99 allowedContent: style
,
100 requiredContent: style
,
101 contentTransformations: options
.contentTransformations
,
104 css: CKEDITOR
.skin
.getPath( 'editor' ),
105 attributes: { role: 'listbox', 'aria-label': lang
.panelTitle
}
108 onBlock: function( panel
, block
) {
111 block
.autoSize
= true;
112 block
.element
.addClass( 'cke_colorblock' );
113 block
.element
.setHtml( renderColors( panel
, type
, colorBoxId
) );
114 // The block should not have scrollbars (http://dev.ckeditor.com/ticket/5933, http://dev.ckeditor.com/ticket/6056)
115 block
.element
.getDocument().getBody().setStyle( 'overflow', 'hidden' );
117 CKEDITOR
.ui
.fire( 'ready', this );
119 var keys
= block
.keys
;
120 var rtl
= editor
.lang
.dir
== 'rtl';
121 keys
[ rtl
? 37 : 39 ] = 'next'; // ARROW-RIGHT
122 keys
[ 40 ] = 'next'; // ARROW-DOWN
123 keys
[ 9 ] = 'next'; // TAB
124 keys
[ rtl
? 39 : 37 ] = 'prev'; // ARROW-LEFT
125 keys
[ 38 ] = 'prev'; // ARROW-UP
126 keys
[ CKEDITOR
.SHIFT
+ 9 ] = 'prev'; // SHIFT + TAB
127 keys
[ 32 ] = 'click'; // SPACE
130 refresh: function() {
131 if ( !editor
.activeFilter
.check( style
) )
132 this.setState( CKEDITOR
.TRISTATE_DISABLED
);
135 // The automatic colorbox should represent the real color (http://dev.ckeditor.com/ticket/6010)
138 var selection
= editor
.getSelection(),
139 block
= selection
&& selection
.getStartElement(),
140 path
= editor
.elementPath( block
),
146 // Find the closest block element.
147 block
= path
.block
|| path
.blockLimit
|| editor
.document
.getBody();
149 // The background color might be transparent. In that case, look up the color in the DOM tree.
151 automaticColor
= block
&& block
.getComputedStyle( type
== 'back' ? 'background-color' : 'color' ) || 'transparent';
153 while ( type
== 'back' && automaticColor
== 'transparent' && block
&& ( block
= block
.getParent() ) );
155 // The box should never be transparent.
156 if ( !automaticColor
|| automaticColor
== 'transparent' )
157 automaticColor
= '#ffffff';
159 if ( config
.colorButton_enableAutomatic
!== false ) {
160 this._
.panel
._
.iframe
.getFrameDocument().getById( colorBoxId
).setStyle( 'background-color', automaticColor
);
163 var range
= selection
&& selection
.getRanges()[ 0 ];
166 var walker
= new CKEDITOR
.dom
.walker( range
),
167 element
= range
.collapsed
? range
.startContainer : walker
.next(),
172 if ( element
.type
=== CKEDITOR
.NODE_TEXT
) {
173 element
= element
.getParent();
176 currentColor
= normalizeColor( element
.getComputedStyle( type
== 'back' ? 'background-color' : 'color' ) );
177 finalColor
= finalColor
|| currentColor
;
179 if ( finalColor
!== currentColor
) {
184 element
= walker
.next();
187 selectColor( panelBlock
, finalColor
);
190 return automaticColor
;
195 function renderColors( panel
, type
, colorBoxId
) {
197 colors
= config
.colorButton_colors
.split( ',' ),
198 colorsPerRow
= config
.colorButton_colorsPerRow
|| 6,
199 // Tells if we should include "More Colors..." button.
200 moreColorsEnabled
= editor
.plugins
.colordialog
&& config
.colorButton_enableMore
!== false,
201 // aria-setsize and aria-posinset attributes are used to indicate size of options, because
202 // screen readers doesn't play nice with table, based layouts (http://dev.ckeditor.com/ticket/12097).
203 total
= colors
.length
+ ( moreColorsEnabled
? 2 : 1 );
205 var clickFn
= CKEDITOR
.tools
.addFunction( function applyColorStyle( color
, type
) {
208 editor
.fire( 'saveSnapshot' );
210 if ( color
== '?' ) {
211 editor
.getColorFromDialog( function( color
) {
213 return applyColor( color
);
217 return applyColor( color
);
220 function applyColor( color
) {
221 // Clean up any conflicting style within the range.
222 editor
.removeStyle( new CKEDITOR
.style( config
[ 'colorButton_' + type
+ 'Style' ], { color: 'inherit' } ) );
223 var colorStyle
= config
[ 'colorButton_' + type
+ 'Style' ];
225 colorStyle
.childRule
= type
== 'back' ?
226 function( element
) {
227 // It's better to apply background color as the innermost style. (http://dev.ckeditor.com/ticket/3599)
228 // Except for "unstylable elements". (http://dev.ckeditor.com/ticket/6103)
229 return isUnstylable( element
);
230 } : function( element
) {
231 // Fore color style must be applied inside links instead of around it. (http://dev.ckeditor.com/ticket/4772,http://dev.ckeditor.com/ticket/6908)
232 return !( element
.is( 'a' ) || element
.getElementsByTag( 'a' ).count() ) || isUnstylable( element
);
236 editor
.applyStyle( new CKEDITOR
.style( colorStyle
, { color: color
} ) );
237 editor
.fire( 'saveSnapshot' );
242 if ( config
.colorButton_enableAutomatic
!== false ) {
243 // Render the "Automatic" button.
244 output
.push( '<a class="cke_colorauto" _cke_focus=1 hidefocus=true' +
245 ' title="', lang
.auto
, '"' +
246 ' onclick="CKEDITOR.tools.callFunction(', clickFn
, ',null,\'', type
, '\');return false;"' +
247 ' href="javascript:void(\'', lang
.auto
, '\')"' +
248 ' role="option" aria-posinset="1" aria-setsize="', total
, '">' +
249 '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' +
251 '<td colspan="' + colorsPerRow
+ '" align="center"><span class="cke_colorbox" id="', colorBoxId
, '"></span>', lang
.auto
, '</td>' +
256 output
.push( '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' );
258 // Render the color boxes.
259 for ( var i
= 0; i
< colors
.length
; i
++ ) {
260 if ( ( i
% colorsPerRow
) === 0 )
261 output
.push( '</tr><tr>' );
263 var parts
= colors
[ i
].split( '/' ),
264 colorName
= parts
[ 0 ],
265 colorCode
= parts
[ 1 ] || colorName
;
267 // The data can be only a color code (without #) or colorName + color code
268 // If only a color code is provided, then the colorName is the color with the hash
269 // Convert the color from RGB to RRGGBB for better compatibility with IE and <font>. See http://dev.ckeditor.com/ticket/5676
271 colorName
= '#' + colorName
.replace( /^(.)(.)(.)$/, '$1$1$2$2$3$3' );
273 var colorLabel
= editor
.lang
.colorbutton
.colors
[ colorCode
] || colorCode
;
274 output
.push( '<td>' +
275 '<a class="cke_colorbox" _cke_focus=1 hidefocus=true' +
276 ' title="', colorLabel
, '"' +
277 ' onclick="CKEDITOR.tools.callFunction(', clickFn
, ',\'', colorName
, '\',\'', type
, '\'); return false;"' +
278 ' href="javascript:void(\'', colorLabel
, '\')"' +
279 ' data-value="' + colorCode
+ '"' +
280 ' role="option" aria-posinset="', ( i
+ 2 ), '" aria-setsize="', total
, '">' +
281 '<span class="cke_colorbox" style="background-color:#', colorCode
, '"></span>' +
286 // Render the "More Colors" button.
287 if ( moreColorsEnabled
) {
288 output
.push( '</tr>' +
290 '<td colspan="' + colorsPerRow
+ '" align="center">' +
291 '<a class="cke_colormore" _cke_focus=1 hidefocus=true' +
292 ' title="', lang
.more
, '"' +
293 ' onclick="CKEDITOR.tools.callFunction(', clickFn
, ',\'?\',\'', type
, '\');return false;"' +
294 ' href="javascript:void(\'', lang
.more
, '\')"', ' role="option" aria-posinset="', total
, '" aria-setsize="', total
, '">', lang
.more
, '</a>' +
295 '</td>' ); // tr is later in the code.
298 output
.push( '</tr></table>' );
300 return output
.join( '' );
303 function isUnstylable( ele
) {
304 return ( ele
.getAttribute( 'contentEditable' ) == 'false' ) || ele
.getAttribute( 'data-nostyle' );
308 * Selects the specified color in the specified panel block.
311 * @member CKEDITOR.plugins.colorbutton
312 * @param {CKEDITOR.ui.panel.block} block
313 * @param {String} color
315 function selectColor( block
, color
) {
316 var items
= block
._
.getItems();
318 for ( var i
= 0; i
< items
.count(); i
++ ) {
319 var item
= items
.getItem( i
);
321 item
.removeAttribute( 'aria-selected' );
323 if ( color
&& color
== normalizeColor( item
.getAttribute( 'data-value' ) ) ) {
324 item
.setAttribute( 'aria-selected', true );
330 * Converts a CSS color value to an easily comparable form.
333 * @member CKEDITOR.plugins.colorbutton
334 * @param {String} color
337 function normalizeColor( color
) {
338 return CKEDITOR
.tools
.convertRgbToHex( color
|| '' ).replace( /#/, '' ).toLowerCase();
344 * Whether to enable the **More Colors** button in the color selectors.
346 * Read more in the [documentation](#!/guide/dev_colorbutton)
347 * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
349 * config.colorButton_enableMore = false;
351 * @cfg {Boolean} [colorButton_enableMore=true]
352 * @member CKEDITOR.config
356 * Defines the colors to be displayed in the color selectors. This is a string
357 * containing hexadecimal notation for HTML colors, without the `'#'` prefix.
359 * **Since 3.3:** A color name may optionally be defined by prefixing the entries with
360 * a name and the slash character. For example, `'FontColor1/FF9900'` will be
361 * displayed as the color `#FF9900` in the selector, but will be output as `'FontColor1'`.
363 * **Since 4.6.2:** The default color palette has changed. It contains fewer colors in more
364 * pastel shades than the previous one.
366 * Read more in the [documentation](#!/guide/dev_colorbutton)
367 * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
369 * // Brazil colors only.
370 * config.colorButton_colors = '00923E,F8C100,28166F';
372 * config.colorButton_colors = 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00';
374 * // CKEditor color palette available before version 4.6.2.
375 * config.colorButton_colors =
376 * '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,' +
377 * 'B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,' +
378 * 'F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,' +
379 * 'FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,' +
380 * 'FFF0F5,FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF';
382 * @cfg {String} [colorButton_colors=see source]
383 * @member CKEDITOR.config
385 CKEDITOR
.config
.colorButton_colors
= '1ABC9C,2ECC71,3498DB,9B59B6,4E5F70,F1C40F,' +
386 '16A085,27AE60,2980B9,8E44AD,2C3E50,F39C12,' +
387 'E67E22,E74C3C,ECF0F1,95A5A6,DDD,FFF,' +
388 'D35400,C0392B,BDC3C7,7F8C8D,999,000';
391 * Stores the style definition that applies the text foreground color.
393 * Read more in the [documentation](#!/guide/dev_colorbutton)
394 * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
396 * // This is actually the default value.
397 * config.colorButton_foreStyle = {
399 * styles: { color: '#(color)' }
402 * @cfg [colorButton_foreStyle=see source]
403 * @member CKEDITOR.config
405 CKEDITOR
.config
.colorButton_foreStyle
= {
407 styles: { 'color': '#(color)' },
409 element: 'font', attributes: { 'color': null }
414 * Stores the style definition that applies the text background color.
416 * Read more in the [documentation](#!/guide/dev_colorbutton)
417 * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
419 * // This is actually the default value.
420 * config.colorButton_backStyle = {
422 * styles: { 'background-color': '#(color)' }
425 * @cfg [colorButton_backStyle=see source]
426 * @member CKEDITOR.config
428 CKEDITOR
.config
.colorButton_backStyle
= {
430 styles: { 'background-color': '#(color)' }
434 * Whether to enable the **Automatic** button in the color selectors.
436 * Read more in the [documentation](#!/guide/dev_colorbutton)
437 * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
439 * config.colorButton_enableAutomatic = false;
441 * @cfg {Boolean} [colorButton_enableAutomatic=true]
442 * @member CKEDITOR.config
446 * Defines how many colors will be shown per row in the color selectors.
448 * Read more in the [documentation](#!/guide/dev_colorbutton)
449 * and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
451 * config.colorButton_colorsPerRow = 8;
454 * @cfg {Number} [colorButton_colorsPerRow=6]
455 * @member CKEDITOR.config
459 * Whether the plugin should convert `background` CSS properties with color only, to a `background-color` property,
460 * allowing the [Color Button](http://ckeditor.com/addon/colorbutton) plugin to edit these styles.
462 * config.colorButton_normalizeBackground = false;
465 * @cfg {Boolean} [colorButton_normalizeBackground=true]
466 * @member CKEDITOR.config