1 | /*
|
---|
2 | Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
|
---|
3 | For licensing, see LICENSE.html or http://ckeditor.com/license
|
---|
4 | */
|
---|
5 |
|
---|
6 | /**
|
---|
7 | * @fileOverview The "colorbutton" plugin that makes it possible to assign
|
---|
8 | * text and background colors to editor contents.
|
---|
9 | *
|
---|
10 | */
|
---|
11 | CKEDITOR.plugins.add( 'colorbutton',
|
---|
12 | {
|
---|
13 | requires : [ 'panelbutton', 'floatpanel', 'styles' ],
|
---|
14 |
|
---|
15 | init : function( editor )
|
---|
16 | {
|
---|
17 | var config = editor.config,
|
---|
18 | lang = editor.lang.colorButton;
|
---|
19 |
|
---|
20 | var clickFn;
|
---|
21 |
|
---|
22 | if ( !CKEDITOR.env.hc )
|
---|
23 | {
|
---|
24 | addButton( 'TextColor', 'fore', lang.textColorTitle );
|
---|
25 | addButton( 'BGColor', 'back', lang.bgColorTitle );
|
---|
26 | }
|
---|
27 |
|
---|
28 | function addButton( name, type, title )
|
---|
29 | {
|
---|
30 | var colorBoxId = CKEDITOR.tools.getNextId() + '_colorBox';
|
---|
31 | editor.ui.add( name, CKEDITOR.UI_PANELBUTTON,
|
---|
32 | {
|
---|
33 | label : title,
|
---|
34 | title : title,
|
---|
35 | className : 'cke_button_' + name.toLowerCase(),
|
---|
36 | modes : { wysiwyg : 1 },
|
---|
37 |
|
---|
38 | panel :
|
---|
39 | {
|
---|
40 | css : editor.skin.editor.css,
|
---|
41 | attributes : { role : 'listbox', 'aria-label' : lang.panelTitle }
|
---|
42 | },
|
---|
43 |
|
---|
44 | onBlock : function( panel, block )
|
---|
45 | {
|
---|
46 | block.autoSize = true;
|
---|
47 | block.element.addClass( 'cke_colorblock' );
|
---|
48 | block.element.setHtml( renderColors( panel, type, colorBoxId ) );
|
---|
49 | // The block should not have scrollbars (#5933, #6056)
|
---|
50 | block.element.getDocument().getBody().setStyle( 'overflow', 'hidden' );
|
---|
51 |
|
---|
52 | CKEDITOR.ui.fire( 'ready', this );
|
---|
53 |
|
---|
54 | var keys = block.keys;
|
---|
55 | var rtl = editor.lang.dir == 'rtl';
|
---|
56 | keys[ rtl ? 37 : 39 ] = 'next'; // ARROW-RIGHT
|
---|
57 | keys[ 40 ] = 'next'; // ARROW-DOWN
|
---|
58 | keys[ 9 ] = 'next'; // TAB
|
---|
59 | keys[ rtl ? 39 : 37 ] = 'prev'; // ARROW-LEFT
|
---|
60 | keys[ 38 ] = 'prev'; // ARROW-UP
|
---|
61 | keys[ CKEDITOR.SHIFT + 9 ] = 'prev'; // SHIFT + TAB
|
---|
62 | keys[ 32 ] = 'click'; // SPACE
|
---|
63 | },
|
---|
64 |
|
---|
65 | // The automatic colorbox should represent the real color (#6010)
|
---|
66 | onOpen : function()
|
---|
67 | {
|
---|
68 | var selection = editor.getSelection(),
|
---|
69 | block = selection && selection.getStartElement(),
|
---|
70 | path = new CKEDITOR.dom.elementPath( block ),
|
---|
71 | color;
|
---|
72 |
|
---|
73 | // Find the closest block element.
|
---|
74 | block = path.block || path.blockLimit || editor.document.getBody();
|
---|
75 |
|
---|
76 | // The background color might be transparent. In that case, look up the color in the DOM tree.
|
---|
77 | do
|
---|
78 | {
|
---|
79 | color = block && block.getComputedStyle( type == 'back' ? 'background-color' : 'color' ) || 'transparent';
|
---|
80 | }
|
---|
81 | while ( type == 'back' && color == 'transparent' && block && ( block = block.getParent() ) );
|
---|
82 |
|
---|
83 | // The box should never be transparent.
|
---|
84 | if ( !color || color == 'transparent' )
|
---|
85 | color = '#ffffff';
|
---|
86 |
|
---|
87 | this._.panel._.iframe.getFrameDocument().getById( colorBoxId ).setStyle( 'background-color', color );
|
---|
88 | }
|
---|
89 | });
|
---|
90 | }
|
---|
91 |
|
---|
92 |
|
---|
93 | function renderColors( panel, type, colorBoxId )
|
---|
94 | {
|
---|
95 | var output = [],
|
---|
96 | colors = config.colorButton_colors.split( ',' ),
|
---|
97 | total = colors.length + ( config.colorButton_enableMore ? 2 : 1 );
|
---|
98 |
|
---|
99 | var clickFn = CKEDITOR.tools.addFunction( function( color, type )
|
---|
100 | {
|
---|
101 | if ( color == '?' )
|
---|
102 | {
|
---|
103 | var applyColorStyle = arguments.callee;
|
---|
104 | function onColorDialogClose( evt )
|
---|
105 | {
|
---|
106 | this.removeListener( 'ok', onColorDialogClose );
|
---|
107 | this.removeListener( 'cancel', onColorDialogClose );
|
---|
108 |
|
---|
109 | evt.name == 'ok' && applyColorStyle( this.getContentElement( 'picker', 'selectedColor' ).getValue(), type );
|
---|
110 | }
|
---|
111 |
|
---|
112 | editor.openDialog( 'colordialog', function()
|
---|
113 | {
|
---|
114 | this.on( 'ok', onColorDialogClose );
|
---|
115 | this.on( 'cancel', onColorDialogClose );
|
---|
116 | } );
|
---|
117 |
|
---|
118 | return;
|
---|
119 | }
|
---|
120 |
|
---|
121 | editor.focus();
|
---|
122 |
|
---|
123 | panel.hide( false );
|
---|
124 |
|
---|
125 | editor.fire( 'saveSnapshot' );
|
---|
126 |
|
---|
127 | // Clean up any conflicting style within the range.
|
---|
128 | new CKEDITOR.style( config['colorButton_' + type + 'Style'], { color : 'inherit' } ).remove( editor.document );
|
---|
129 |
|
---|
130 | if ( color )
|
---|
131 | {
|
---|
132 | var colorStyle = config['colorButton_' + type + 'Style'];
|
---|
133 |
|
---|
134 | colorStyle.childRule = type == 'back' ?
|
---|
135 | function( element )
|
---|
136 | {
|
---|
137 | // It's better to apply background color as the innermost style. (#3599)
|
---|
138 | // Except for "unstylable elements". (#6103)
|
---|
139 | return isUnstylable( element );
|
---|
140 | }
|
---|
141 | :
|
---|
142 | function( element )
|
---|
143 | {
|
---|
144 | // Fore color style must be applied inside links instead of around it. (#4772,#6908)
|
---|
145 | return !( element.is( 'a' ) || element.getElementsByTag( 'a' ).count() ) || isUnstylable( element );
|
---|
146 | };
|
---|
147 |
|
---|
148 | new CKEDITOR.style( colorStyle, { color : color } ).apply( editor.document );
|
---|
149 | }
|
---|
150 |
|
---|
151 | editor.fire( 'saveSnapshot' );
|
---|
152 | });
|
---|
153 |
|
---|
154 | // Render the "Automatic" button.
|
---|
155 | output.push(
|
---|
156 | '<a class="cke_colorauto" _cke_focus=1 hidefocus=true' +
|
---|
157 | ' title="', lang.auto, '"' +
|
---|
158 | ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',null,\'', type, '\');return false;"' +
|
---|
159 | ' href="javascript:void(\'', lang.auto, '\')"' +
|
---|
160 | ' role="option" aria-posinset="1" aria-setsize="', total, '">' +
|
---|
161 | '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' +
|
---|
162 | '<tr>' +
|
---|
163 | '<td>' +
|
---|
164 | '<span class="cke_colorbox" id="', colorBoxId, '"></span>' +
|
---|
165 | '</td>' +
|
---|
166 | '<td colspan=7 align=center>',
|
---|
167 | lang.auto,
|
---|
168 | '</td>' +
|
---|
169 | '</tr>' +
|
---|
170 | '</table>' +
|
---|
171 | '</a>' +
|
---|
172 | '<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' );
|
---|
173 |
|
---|
174 | // Render the color boxes.
|
---|
175 | for ( var i = 0 ; i < colors.length ; i++ )
|
---|
176 | {
|
---|
177 | if ( ( i % 8 ) === 0 )
|
---|
178 | output.push( '</tr><tr>' );
|
---|
179 |
|
---|
180 | var parts = colors[ i ].split( '/' ),
|
---|
181 | colorName = parts[ 0 ],
|
---|
182 | colorCode = parts[ 1 ] || colorName;
|
---|
183 |
|
---|
184 | // The data can be only a color code (without #) or colorName + color code
|
---|
185 | // If only a color code is provided, then the colorName is the color with the hash
|
---|
186 | // Convert the color from RGB to RRGGBB for better compatibility with IE and <font>. See #5676
|
---|
187 | if (!parts[1])
|
---|
188 | colorName = '#' + colorName.replace( /^(.)(.)(.)$/, '$1$1$2$2$3$3' );
|
---|
189 |
|
---|
190 | var colorLabel = editor.lang.colors[ colorCode ] || colorCode;
|
---|
191 | output.push(
|
---|
192 | '<td>' +
|
---|
193 | '<a class="cke_colorbox" _cke_focus=1 hidefocus=true' +
|
---|
194 | ' title="', colorLabel, '"' +
|
---|
195 | ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'', colorName, '\',\'', type, '\'); return false;"' +
|
---|
196 | ' href="javascript:void(\'', colorLabel, '\')"' +
|
---|
197 | ' role="option" aria-posinset="', ( i + 2 ), '" aria-setsize="', total, '">' +
|
---|
198 | '<span class="cke_colorbox" style="background-color:#', colorCode, '"></span>' +
|
---|
199 | '</a>' +
|
---|
200 | '</td>' );
|
---|
201 | }
|
---|
202 |
|
---|
203 | // Render the "More Colors" button.
|
---|
204 | if ( config.colorButton_enableMore === undefined || config.colorButton_enableMore )
|
---|
205 | {
|
---|
206 | output.push(
|
---|
207 | '</tr>' +
|
---|
208 | '<tr>' +
|
---|
209 | '<td colspan=8 align=center>' +
|
---|
210 | '<a class="cke_colormore" _cke_focus=1 hidefocus=true' +
|
---|
211 | ' title="', lang.more, '"' +
|
---|
212 | ' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'?\',\'', type, '\');return false;"' +
|
---|
213 | ' href="javascript:void(\'', lang.more, '\')"',
|
---|
214 | ' role="option" aria-posinset="', total, '" aria-setsize="', total, '">',
|
---|
215 | lang.more,
|
---|
216 | '</a>' +
|
---|
217 | '</td>' ); // tr is later in the code.
|
---|
218 | }
|
---|
219 |
|
---|
220 | output.push( '</tr></table>' );
|
---|
221 |
|
---|
222 | return output.join( '' );
|
---|
223 | }
|
---|
224 |
|
---|
225 | function isUnstylable( ele )
|
---|
226 | {
|
---|
227 | return ( ele.getAttribute( 'contentEditable' ) == 'false' ) || ele.getAttribute( 'data-nostyle' );
|
---|
228 | }
|
---|
229 | }
|
---|
230 | });
|
---|
231 |
|
---|
232 | /**
|
---|
233 | * Whether to enable the <strong>More Colors</strong> button in the color selectors.
|
---|
234 | * @name CKEDITOR.config.colorButton_enableMore
|
---|
235 | * @default <code>true</code>
|
---|
236 | * @type Boolean
|
---|
237 | * @example
|
---|
238 | * config.colorButton_enableMore = false;
|
---|
239 | */
|
---|
240 |
|
---|
241 | /**
|
---|
242 | * Defines the colors to be displayed in the color selectors. This is a string
|
---|
243 | * containing hexadecimal notation for HTML colors, without the "#" prefix.
|
---|
244 | * <br /><br />
|
---|
245 | * Since 3.3: A color name may optionally be defined by prefixing the entries with
|
---|
246 | * a name and the slash character. For example, "FontColor1/FF9900" will be
|
---|
247 | * displayed as the color #FF9900 in the selector, but will be output as "FontColor1".
|
---|
248 | * @name CKEDITOR.config.colorButton_colors
|
---|
249 | * @type String
|
---|
250 | * @default <code>'000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,FFF0F5,FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF'</code>
|
---|
251 | * @example
|
---|
252 | * // Brazil colors only.
|
---|
253 | * config.colorButton_colors = '00923E,F8C100,28166F';
|
---|
254 | * @example
|
---|
255 | * config.colorButton_colors = 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00'
|
---|
256 | */
|
---|
257 | CKEDITOR.config.colorButton_colors =
|
---|
258 | '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,' +
|
---|
259 | 'B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,' +
|
---|
260 | 'F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,' +
|
---|
261 | 'FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,' +
|
---|
262 | 'FFF0F5,FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF';
|
---|
263 |
|
---|
264 | /**
|
---|
265 | * Stores the style definition that applies the text foreground color.
|
---|
266 | * @name CKEDITOR.config.colorButton_foreStyle
|
---|
267 | * @type Object
|
---|
268 | * @default (see example)
|
---|
269 | * @example
|
---|
270 | * // This is actually the default value.
|
---|
271 | * config.colorButton_foreStyle =
|
---|
272 | * {
|
---|
273 | * element : 'span',
|
---|
274 | * styles : { 'color' : '#(color)' }
|
---|
275 | * };
|
---|
276 | */
|
---|
277 | CKEDITOR.config.colorButton_foreStyle =
|
---|
278 | {
|
---|
279 | element : 'span',
|
---|
280 | styles : { 'color' : '#(color)' },
|
---|
281 | overrides : [ { element : 'font', attributes : { 'color' : null } } ]
|
---|
282 | };
|
---|
283 |
|
---|
284 | /**
|
---|
285 | * Stores the style definition that applies the text background color.
|
---|
286 | * @name CKEDITOR.config.colorButton_backStyle
|
---|
287 | * @type Object
|
---|
288 | * @default (see example)
|
---|
289 | * @example
|
---|
290 | * // This is actually the default value.
|
---|
291 | * config.colorButton_backStyle =
|
---|
292 | * {
|
---|
293 | * element : 'span',
|
---|
294 | * styles : { 'background-color' : '#(color)' }
|
---|
295 | * };
|
---|
296 | */
|
---|
297 | CKEDITOR.config.colorButton_backStyle =
|
---|
298 | {
|
---|
299 | element : 'span',
|
---|
300 | styles : { 'background-color' : '#(color)' }
|
---|
301 | };
|
---|