Skip to content
Permalink
Browse files

Merge branch 't/16733'

  • Loading branch information...
mlewand committed Dec 22, 2016
2 parents 644ba61 + 5d2849d commit 43c41940dc8c75aa2449c29634e48467d8561d4b
@@ -3,6 +3,10 @@

## CKEditor 4.6.2

New Features:

* [#16733](http://dev.ckeditor.com/ticket/16733): Added new color palette for [Color Button](http://ckeditor.com/addon/colorbutton) plugin and added [`config.colorButton_colorsPerRow`](http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-colorButton_colorsPerRow) option.

Fixed Issues:

* [#10373](http://dev.ckeditor.com/ticket/10373): Fixed: Context menu items can be dragged into the editor.
@@ -1,8 +1,8 @@
# Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
# For licensing, see LICENSE.md or http://ckeditor.com/license

auto =
bgColorTitle =
auto =
bgColorTitle =
colors.000 = Tooltip with a human-readable name for the #000 color.
colors.800000 = Tooltip with a human-readable name for the #800000 color.
colors.8B4513 = Tooltip with a human-readable name for the #8B4513 color.
@@ -43,6 +43,28 @@ colors.F0FFFF = Tooltip with a human-readable name for the #F0FFFF color.
colors.F0F8FF = Tooltip with a human-readable name for the #F0F8FF color.
colors.E6E6FA = Tooltip with a human-readable name for the #E6E6FA color.
colors.FFF = Tooltip with a human-readable name for the #FFF color.
more =
panelTitle =
textColorTitle =
colors.1ABC9C = Tooltip with a human-readable name for Strong Cyan (#1ABC9C) color.
colors.2ECC71 = Tooltip with a human-readable name for Emerald (#2ECC71) color.
colors.3498DB = Tooltip with a human-readable name for Bright Blue (#3498DB) color.
colors.9B59B6 = Tooltip with a human-readable name for Amethyst (#9B59B6) color.
colors.4E5F70 = Tooltip with a human-readable name for Grayish Blue (#4E5F70) color.
colors.F1C40F = Tooltip with a human-readable name for Vivid Yellow (#F1C40F) color.
colors.16A085 = Tooltip with a human-readable name for Dark Cyan (#16A085) color.
colors.27AE60 = Tooltip with a human-readable name for Dark Emerald (#27AE60) color.
colors.2980B9 = Tooltip with a human-readable name for Strong Blue (#2980B9) color.
colors.8E44AD = Tooltip with a human-readable name for Dark Violet (#8E44AD) color.
colors.2C3E50 = Tooltip with a human-readable name for Desaturated Blue (#2C3E50) color.
colors.F39C12 = Tooltip with a human-readable name for Orange (#F39C12) color.
colors.E67E22 = Tooltip with a human-readable name for Carrot (#E67E22) color.
colors.E74C3C = Tooltip with a human-readable name for Pale Red (#E74C3C) color.
colors.ECF0F1 = Tooltip with a human-readable name for Bright Silver (#ECF0F1) color.
colors.95A5A6 = Tooltip with a human-readable name for Light Grayish Cyan (#95A5A6) color.
colors.DDD = Tooltip with a human-readable name for Light Gray (#DDD) color.
colors.D35400 = Tooltip with a human-readable name for Pumpkin (#D35400) color.
colors.C0392B = Tooltip with a human-readable name for Strong Red (#C0392B) color.
colors.BDC3C7 = Tooltip with a human-readable name for Silver (#BDC3C7) color.
colors.7F8C8D = Tooltip with a human-readable name for Grayish Cyan (#7F8C8D) color.
colors.999 = Tooltip with a human-readable name for Dark Gray (#999) color.
more =
panelTitle =
textColorTitle =
@@ -1,4 +1,4 @@
/*
/*
Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/
@@ -45,7 +45,29 @@ CKEDITOR.plugins.setLang( 'colorbutton', 'en', {
F0FFFF: 'Azure',
F0F8FF: 'Alice Blue',
E6E6FA: 'Lavender',
FFF: 'White'
FFF: 'White',
'1ABC9C': 'Strong Cyan',
'2ECC71': 'Emerald',
'3498DB': 'Bright Blue',
'9B59B6': 'Amethyst',
'4E5F70': 'Grayish Blue',
'F1C40F': 'Vivid Yellow',
'16A085': 'Dark Cyan',
'27AE60': 'Dark Emerald',
'2980B9': 'Strong Blue',
'8E44AD': 'Dark Violet',
'2C3E50': 'Desaturated Blue',
'F39C12': 'Orange',
'E67E22': 'Carrot',
'E74C3C': 'Pale Red',
'ECF0F1': 'Bright Silver',
'95A5A6': 'Light Grayish Cyan',
'DDD': 'Light Gray',
'D35400': 'Pumpkin',
'C0392B': 'Strong Red',
'BDC3C7': 'Silver',
'7F8C8D': 'Grayish Cyan',
'999': 'Dark Gray'
},
more: 'More Colors...',
panelTitle: 'Colors',
@@ -165,6 +165,7 @@ CKEDITOR.plugins.add( 'colorbutton', {
function renderColors( panel, type, colorBoxId ) {
var output = [],
colors = config.colorButton_colors.split( ',' ),
colorsPerRow = config.colorButton_colorsPerRow || 6,
// Tells if we should include "More Colors..." button.
moreColorsEnabled = editor.plugins.colordialog && config.colorButton_enableMore !== false,
// aria-setsize and aria-posinset attributes are used to indicate size of options, because
@@ -226,10 +227,7 @@ CKEDITOR.plugins.add( 'colorbutton', {
' role="option" aria-posinset="1" aria-setsize="', total, '">' +
'<table role="presentation" cellspacing=0 cellpadding=0 width="100%">' +
'<tr>' +
'<td>' +
'<span class="cke_colorbox" id="', colorBoxId, '"></span>' +
'</td>' +
'<td colspan=7 align=center>', lang.auto, '</td>' +
'<td colspan="' + colorsPerRow + '" align="center"><span class="cke_colorbox" id="', colorBoxId, '"></span>', lang.auto, '</td>' +
'</tr>' +
'</table>' +
'</a>' );
@@ -238,7 +236,7 @@ CKEDITOR.plugins.add( 'colorbutton', {

// Render the color boxes.
for ( var i = 0; i < colors.length; i++ ) {
if ( ( i % 8 ) === 0 )
if ( ( i % colorsPerRow ) === 0 )
output.push( '</tr><tr>' );

var parts = colors[ i ].split( '/' ),
@@ -267,7 +265,7 @@ CKEDITOR.plugins.add( 'colorbutton', {
if ( moreColorsEnabled ) {
output.push( '</tr>' +
'<tr>' +
'<td colspan=8 align=center>' +
'<td colspan="' + colorsPerRow + '" align="center">' +
'<a class="cke_colormore" _cke_focus=1 hidefocus=true' +
' title="', lang.more, '"' +
' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'?\',\'', type, '\');return false;"' +
@@ -306,6 +304,9 @@ CKEDITOR.plugins.add( 'colorbutton', {
* a name and the slash character. For example, `'FontColor1/FF9900'` will be
* displayed as the color `#FF9900` in the selector, but will be output as `'FontColor1'`.
*
* **Since 4.6.2:** The default color palette has change. It contains less colors and in more
* pastel shades than the previous one.
*
* Read more in the [documentation](#!/guide/dev_colorbutton)
* and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
*
@@ -317,11 +318,10 @@ CKEDITOR.plugins.add( 'colorbutton', {
* @cfg {String} [colorButton_colors=see source]
* @member CKEDITOR.config
*/
CKEDITOR.config.colorButton_colors = '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';
CKEDITOR.config.colorButton_colors = '1ABC9C,2ECC71,3498DB,9B59B6,4E5F70,F1C40F,' +
'16A085,27AE60,2980B9,8E44AD,2C3E50,F39C12,' +
'E67E22,E74C3C,ECF0F1,95A5A6,DDD,FFF,' +
'D35400,C0392B,BDC3C7,7F8C8D,999,000';

/**
* Stores the style definition that applies the text foreground color.
@@ -378,6 +378,19 @@ CKEDITOR.config.colorButton_backStyle = {
* @member CKEDITOR.config
*/

/**
* Defines how many colors will be shown per row in the color selectors.
*
* Read more in the [documentation](#!/guide/dev_colorbutton)
* and see the [SDK sample](http://sdk.ckeditor.com/samples/colorbutton.html).
*
* config.colorButton_colorsPerRow = 8;
*
* @since 4.6.2
* @cfg {Number} [colorButton_colorsPerRow=6]
* @member CKEDITOR.config
*/

/**
* Whether the plugin should convert `background` CSS properties with color only, to a `background-color` property,
* allowing the [Color Button](http://ckeditor.com/addon/colorbutton) plugin to edit these styles.
@@ -0,0 +1,16 @@
<p>Editor 1</p>
<textarea cols="80" id="editor1" name="editor1" rows="10">
<p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
</textarea>

<p>Editor 2</p>
<div contenteditable="true" id="editor2">
<p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans Neil Armstrong and Buzz Aldrin, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
</div>

<script>
CKEDITOR.replace( 'editor1', {
colorButton_colorsPerRow: 10
} );
CKEDITOR.inline( 'editor2' );
</script>
@@ -0,0 +1,17 @@
@bender-tags: 16733, tc, 4.6.2, config
@bender-ui: collapsed
@bender-ckeditor-plugins: wysiwygarea, toolbar, colorbutton, colordialog, floatingspace

### Scenario 1:

1. Click *Text Color* button in Editor 1.
* **Expected**: It has 10 colors in each row (except the last one which has 4).
1. Click *Background Color* button in Editor 1.
* **Expected**: It has 10 colors in each row (except the last one which has 4).

### Scenario 2:

1. Click *Text Color* button in Editor 2.
* **Expected**: It has 6 colors in each row.
1. Click *Background Color* button in Editor 2.
* **Expected**: It has 6 colors in each row.

0 comments on commit 43c4194

Please sign in to comment.
You can’t perform that action at this time.