Topic: TinyMCE4 Color Picker

Have installed TinyMCE4 and was wondering if anyone has been successful with editing the color picker plugin to incorporate an advanced selection? (ie: ability to add the hex value rather than just using the preset colors available)

Any help would be appreciated.


Last edited by davidd (2013-06-07 08:53:12)


Re: TinyMCE4 Color Picker

If you are referring to the color palette used in textcolor plugin for forecolor and backcolor buttons, this has already been incorporated into the nightly builds.

You can download the latest nightly build here.

See GitHub pull request for instructions on use.


Re: TinyMCE4 Color Picker

Thanks toxalot, however it seems that the user cannot define their own custom color hex value. Such as using a color picker that allows them to enter the hex value.

Am I right in saying this or am I still missing something?
thanks again.


Re: TinyMCE4 Color Picker

Oh sorry, I misunderstood. You are correct. This won't allow the end user to use custom colors. Not sure if there is any way to do that in v4.


Re: TinyMCE4 Color Picker

Okay thanks for your help anyway.


Re: TinyMCE4 Color Picker

I'm also wondering to have a "advanced" forecolor & backcolor like in tinymce 3.3.6 with a button "more colors" who show a color picker. Is there any in Tinymce 4?

Kind regards


Re: TinyMCE4 Color Picker

I spent all night searching the web for a solution to this, and in the end I found enough information to make something work myself.  It does exactly what you specified, ie a true-color picker with the ability to enter a hex value by the user.
It's not the most elegant solution in the world, but it works and it looks ok, so I'm going to be using this unless something better comes out.
I used a toolbar button to fire a simple plugin that simply runs a short script which displays a hidden div with an input using Jan Odvárko's excellent jscolor script and an 'OK' button.
On clicking the button, the selected text in the editor is wrapped in a <span style="color:#______"> tag.
Room for improvement there, I know, but hey it works and I've been up about 28 hours now... yikes)
Will post full details if anyone wants it.


Re: TinyMCE4 Color Picker

I have made some changes to the basic textcolor plugin that comes with TinyMCE 4, and added to it the ability to manually type in HEX color. I wrote this addition in jQuery, but it could easily be written in basic javascript (this was just easier for me). Here is the code:

 * plugin.js
 * Copyright, Moxiecode Systems AB
 * Released under LGPL License.
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing

/*global tinymce:true */

tinymce.PluginManager.add('textcolor', function(editor) {
    function mapColors() {
        var i, colors = [], colorMap;

        colorMap = editor.settings.textcolor_map || [
            "000000", "Black",
            "993300", "Burnt orange",
            "333300", "Dark olive",
            "003300", "Dark green",
            "003366", "Dark azure",
            "000080", "Navy Blue",
            "333399", "Indigo",
            "333333", "Very dark gray",
            "800000", "Maroon",
            "FF6600", "Orange",
            "808000", "Olive",
            "008000", "Green",
            "008080", "Teal",
            "0000FF", "Blue",
            "666699", "Grayish blue",
            "808080", "Gray",
            "FF0000", "Red",
            "FF9900", "Amber",
            "99CC00", "Yellow green",
            "339966", "Sea green",
            "33CCCC", "Turquoise",
            "3366FF", "Royal blue",
            "800080", "Purple",
            "999999", "Medium gray",
            "FF00FF", "Magenta",
            "FFCC00", "Gold",
            "FFFF00", "Yellow",
            "00FF00", "Lime",
            "00FFFF", "Aqua",
            "00CCFF", "Sky blue",
            "993366", "Brown",
            "C0C0C0", "Silver",
            "FF99CC", "Pink",
            "FFCC99", "Peach",
            "FFFF99", "Light yellow",
            "CCFFCC", "Pale green",
            "CCFFFF", "Pale cyan",
            "99CCFF", "Light sky blue",
            "CC99FF", "Plum",
            "FFFFFF", "White"

        for (i = 0; i < colorMap.length; i += 2) {
                text: colorMap[i + 1],
                color: colorMap[i]

        return colors;

    function renderColorPicker() {
        var ctrl = this, colors, color, html, last, rows, cols, x, y, i;

        colors = mapColors();
        html = '<table class="mce-grid mce-grid-border mce-colorbutton-grid" role="presentation" cellspacing="0"><tbody>';
        last = colors.length - 1;
        rows = editor.settings.textcolor_rows || 5;
        cols = editor.settings.textcolor_cols || 8;

        for (y = 0; y < rows; y++) {
            html += '<tr>';

            for (x = 0; x < cols; x++) {
                i = y * cols + x;

                if (i > last) {
                    html += '<td></td>';
                } else {
                    color = colors[i];
                    html += (
                        '<td>' +
                            '<div id="' + ctrl._id + '-' + i + '"' +
                                ' data-mce-color="' + color.color + '"' +
                                ' role="option"' +
                                ' tabIndex="-1"' +
                                ' style="' + (color ? 'background-color: #' + color.color : '') + '"' +
                                ' title="' + color.text + '">' +
                            '</div>' +

            html += '</tr>';

        html += '<tr><td colspan="'+cols+'"><input class="mce-textbox" name="hex" placeholder="HEX Color"></td></tr>';
        html += '</tbody></table>';

        return html;

    function onPanelClick(e) {
        var buttonCtrl = this.parent(), value;
        if ((value = e.target.getAttribute('data-mce-color'))) {
            value = '#' + value;
            editor.execCommand(buttonCtrl.settings.selectcmd, false, value);
        var self = this;
            value = $(this).val().replace("#","");
            value = '#' + value;
            editor.execCommand(buttonCtrl.settings.selectcmd, false, value);
        }).keydown(function( event ) {
            if ( event.which == 13 ) {

    function onButtonClick() {
        var self = this;

        if (self._color) {
            editor.execCommand(self.settings.selectcmd, false, self._color);

    editor.addButton('forecolor', {
        type: 'colorbutton',
        tooltip: 'Text color',
        selectcmd: 'ForeColor',
        panel: {
            html: renderColorPicker,
            onclick: onPanelClick
        onclick: onButtonClick

    editor.addButton('backcolor', {
        type: 'colorbutton',
        tooltip: 'Background color',
        selectcmd: 'HiliteColor',
        panel: {
            html: renderColorPicker,
            onclick: onPanelClick
        onclick: onButtonClick

Hope this helps somebody - and I do think this should be built in to TinyMCE, it seems like a basic thing...

Last edited by eytanchen (2013-10-22 13:19:46)


Re: TinyMCE4 Color Picker

thanks guys for helping