Colors plugin | Trumbowyg

Basic usage

This plugin allow you to add a foreground and/or background color picker.

You can color me!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident optio nam reiciendis eius beatae quibusdam!

The text is derived from Cicero's De Finibus Bonorum et Malorum (On the Ends of Goods and Evils, or alternatively [About] The Purposes of Good and Evil). The original passage began: Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit (Translation: "Neither is there anyone who loves grief itself since it is grief and thus wants to obtain it").

The code


$('#editor')
.trumbowyg({
    btns: [
        ['foreColor', 'backColor']
    ],
});

Custom color list

You can customize the color list used by both dropdowns.

You can color me with custom color list!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident optio nam reiciendis eius beatae quibusdam!


$('#editor-custom-color-list').trumbowyg({
    btns: [
        ['foreColor', 'backColor']
    ],
    plugins: {
        colors: {
            colorList: [
                '000', '111', '222', 'ffea00'
            ]
        }
    }
});

Custom color list for each button

You can customize the color list used by each dropdown independently.

You can color me with custom color list!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident optio nam reiciendis eius beatae quibusdam!


$('#editor-custom-color-list-for-each').trumbowyg({
    btns: [
        ['foreColor', 'backColor']
    ],
    plugins: {
        colors: {
            foreColorList: [
                'ff0000', '00ff00', '0000ff'
            ],
            backColorList: [
                '000', '333', '555'
            ]
        }
    }
});

Display colors as a list like other dropdowns

The displayAsList option allows you to change the layout of the color dropdown from squares to list.

Check the dropdown is not like other examples!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aliquam, minima fugiat placeat provident optio nam reiciendis eius beatae quibusdam!


// Human labels for each hex color
var colorLabels = {
    '#000': 'Black',
    '#555': 'Dark grey',
    '#ff0000': 'Red',
    '#00ff00': 'Green',
    '#0000ff': 'Blue',
    '#ff1493': 'Pink',
};

$.each(colorLabels, function(colorHexCode, colorLabel) {
    $.trumbowyg.langs.en[colorHexCode] = colorLabel;
})

$('#editor-display-as-list').trumbowyg({
    btns: [
        ['foreColor', 'backColor']
    ],
    plugins: {
        colors: {
            foreColorList: [
                'ff0000', '00ff00', '0000ff', 'ff1493'
            ],
            backColorList: [
                '000', '555', 'ff0000'
            ],
            displayAsList: true
        }
    }
});

Loading

In head tag

At the end of body


<!-- Import jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>