tinymce.PluginManager.add('textcolor', function(editor) {
var cols, rows;
- rows = editor.settings.textcolor_rows || 5;
- cols = editor.settings.textcolor_cols || 8;
+ rows = {
+ forecolor: editor.settings.forecolor_rows || editor.settings.textcolor_rows || 5,
+ backcolor: editor.settings.backcolor_rows || editor.settings.textcolor_rows || 5
+ };
+ cols = {
+ forecolor: editor.settings.forecolor_cols || editor.settings.textcolor_cols || 8,
+ backcolor: editor.settings.backcolor_cols || editor.settings.textcolor_cols || 8
+ };
function getCurrentColor(format) {
var color;
return color;
}
- function mapColors() {
+ function mapColors(type) {
var i, colors = [], colorMap;
- colorMap = editor.settings.textcolor_map || [
+ colorMap = [
"000000", "Black",
"993300", "Burnt orange",
"333300", "Dark olive",
"CC99FF", "Plum"
];
+ colorMap = editor.settings.textcolor_map || colorMap;
+ colorMap = editor.settings[type + '_map'] || colorMap;
+
for (i = 0; i < colorMap.length; i += 2) {
colors.push({
text: colorMap[i + 1],
}
function renderColorPicker() {
- var ctrl = this, colors, color, html, last, x, y, i, id = ctrl._id, count = 0;
+ var ctrl = this, colors, color, html, last, x, y, i, id = ctrl._id, count = 0, type;
+
+ type = ctrl.settings.origin;
function getColorCellHtml(color, title) {
var isNoColor = color == 'transparent';
);
}
- colors = mapColors();
+ colors = mapColors(type);
colors.push({
text: tinymce.translate("No color"),
color: "transparent"
html = '<table class="mce-grid mce-grid-border mce-colorbutton-grid" role="list" cellspacing="0"><tbody>';
last = colors.length - 1;
- for (y = 0; y < rows; y++) {
+ for (y = 0; y < rows[type]; y++) {
html += '<tr>';
- for (x = 0; x < cols; x++) {
- i = y * cols + x;
+ for (x = 0; x < cols[type]; x++) {
+ i = y * cols[type] + x;
if (i > last) {
html += '<td></td>';
if (editor.settings.color_picker_callback) {
html += (
'<tr>' +
- '<td colspan="' + cols + '" class="mce-custom-color-btn">' +
+ '<td colspan="' + cols[type] + '" class="mce-custom-color-btn">' +
'<div id="' + id + '-c" class="mce-widget mce-btn mce-btn-small mce-btn-flat" ' +
'role="button" tabindex="-1" aria-labelledby="' + id + '-c" style="width: 100%">' +
'<button type="button" role="presentation" tabindex="-1">' + tinymce.translate('Custom...') + '</button>' +
html += '<tr>';
- for (x = 0; x < cols; x++) {
+ for (x = 0; x < cols[type]; x++) {
html += getColorCellHtml('', 'Custom color');
}
}
function onPanelClick(e) {
- var buttonCtrl = this.parent(), value;
+ var buttonCtrl = this.parent(), value, type;
+
+ type = buttonCtrl.settings.origin;
function selectColor(value) {
buttonCtrl.hidePanel();
// Shift colors to the right
// TODO: Might need to be the left on RTL
- if (i == cols) {
- for (i = 0; i < cols - 1; i++) {
+ if (i == cols[type]) {
+ for (i = 0; i < cols[type] - 1; i++) {
setDivColor(customColorCells[i], customColorCells[i + 1].getAttribute('data-mce-color'));
}
}
tooltip: 'Text color',
format: 'forecolor',
panel: {
+ origin: 'forecolor',
role: 'application',
ariaRemember: true,
html: renderColorPicker,
tooltip: 'Background color',
format: 'hilitecolor',
panel: {
+ origin: 'backcolor',
role: 'application',
ariaRemember: true,
html: renderColorPicker,