Plugins | Font Color

Select some text and click the 'Text color' button on the toolbar.

<h1>Exploring the mysteries of space</h1>
<p>Space, the final frontier, stretches infinitely beyond the confines of Earth, a vast expanse of darkness speckled with stars, planets, and <b>galaxies</b>. It is a place of profound mystery and beauty, where the laws of physics manifest in ways that challenge our understanding. The cosmos is <a href="https://example/com">a cosmic dance</a> of celestial bodies moving in the silent echo of the universe, from the fiery birth of stars in nebulae to the enigmatic pull of black holes.</p>
<figure>
  <img src="/assets/redactor4/photo.jpg" alt="Blue and purple galaxy">
  <figcaption>Jeremy Thomas <a href="https://unsplash.com/photos/blue-and-purple-galaxy-digital-wallpaper-E0AHdsENmDg">unsplash.com</a></figcaption>
</figure>
<h2>Humanity's Journey Beyond Earth</h2>
<p>Exploring space has pushed humanity to its limits, revealing not just the universe's grandeur, but also the fragility of our own planet. Satellites orbiting Earth provide crucial data for communication, weather forecasting, and global positioning, while telescopes peer deep into the cosmos, uncovering the universe's age and composition. Each discovery in space leads us to new questions about our place in the universe, driving our insatiable curiosity to explore the unknown.</p>

Code

<!DOCTYPE html>
<html>
    <head>
        <title>Redactor</title>
        <meta charset="utf-8">

        <!-- css -->
        <link rel="stylesheet" href="/your-folder/redactor.css" />
    </head>
    <body>
        <!-- element -->
        <textarea id="entry">...</textarea>

        <!-- js -->
        <script src="/your-folder/redactor.js"></script>
        <script src="/your-folder/plugins/fontcolor/fontcolor.js"></script>

        <!-- call -->
        <script>
        Redactor('#entry', {
            plugins: ['fontcolor']
        });
        </script>
    </body>
</html>

Usage

By default, the editor has a preset set of colors:


colors: {
    base:   ['#000000', '#ffffff'],
    gray:   ['#212529', '#343a40', '#495057', '#868e96', '#adb5bd', '#ced4da', '#dee2e6', '#e9ecef', '#f1f3f5', '#f8f9fa'],
    red:    ["#c92a2a", "#e03131", "#f03e3e", "#fa5252", "#ff6b6b", "#ff8787", "#ffa8a8", "#ffc9c9", "#ffe3e3", "#fff5f5"],
    pink:   ["#a61e4d", "#c2255c", "#d6336c", "#e64980", "#f06595", "#f783ac", "#faa2c1", "#fcc2d7", "#ffdeeb", "#fff0f6"],
    grape:  ["#862e9c", "#9c36b5", "#ae3ec9", "#be4bdb", "#cc5de8", "#da77f2", "#e599f7", "#eebefa", "#f3d9fa", "#f8f0fc"],
    violet: ["#5f3dc4", "#6741d9", "#7048e8", "#7950f2", "#845ef7", "#9775fa", "#b197fc", "#d0bfff", "#e5dbff", "#f3f0ff"],
    indigo: ["#364fc7", "#3b5bdb", "#4263eb", "#4c6ef5", "#5c7cfa", "#748ffc", "#91a7ff", "#bac8ff", "#dbe4ff", "#edf2ff"],
    blue:   ["#1864ab", "#1971c2", "#1c7ed6", "#228be6", "#339af0", "#4dabf7", "#74c0fc", "#a5d8ff", "#d0ebff", "#e7f5ff"],
    cyan:   ["#0b7285", "#0c8599", "#1098ad", "#15aabf", "#22b8cf", "#3bc9db", "#66d9e8", "#99e9f2", "#c5f6fa", "#e3fafc"],
    teal:   ["#087f5b", "#099268", "#0ca678", "#12b886", "#20c997", "#38d9a9", "#63e6be", "#96f2d7", "#c3fae8", "#e6fcf5"],
    green:  ["#2b8a3e", "#2f9e44", "#37b24d", "#40c057", "#51cf66", "#69db7c", "#8ce99a", "#b2f2bb", "#d3f9d8", "#ebfbee"],
    lime:   ["#5c940d", "#66a80f", "#74b816", "#82c91e", "#94d82d", "#a9e34b", "#c0eb75", "#d8f5a2", "#e9fac8", "#f4fce3"],
    yellow: ["#e67700", "#f08c00", "#f59f00", "#fab005", "#fcc419", "#ffd43b", "#ffe066", "#ffec99", "#fff3bf", "#fff9db"],
    orange: ["#d9480f", "#e8590c", "#f76707", "#fd7e14", "#ff922b", "#ffa94d", "#ffc078", "#ffd8a8", "#ffe8cc", "#fff4e6"]
}

You can add or replace with your own colors:


Redactor('#entry', {
    plugins: ['fontcolor'],
    colors: {
        gray: ['#333333', '#555555', '#777777', '#999999', '#aaaaaa', '#bbbbbb', '#cccccc', '#dddddd', '#eeeeee', '#f4f4f4']
    }
});

If you want to completely replace the preset colors, then add a set flag to the setting:


Redactor('#entry', {
    plugins: ['fontcolor'],
    colors: {
        set: true,
        gray: ['#333333', '#555555', '#777777', '#999999', '#aaaaaa', '#bbbbbb', '#cccccc', '#dddddd', '#eeeeee', '#f4f4f4']
    }
});

By default, color groups are shown as columns. You can change this by adjusting the colorpicker settings. This includes increasing the color swatch size. See Colorpicker settings for more details.


Redactor('#entry', {
    plugins: ['fontcolor'],
    colorpicker: {
        row: true,
        wrap: true,
        width: '320px',
        size: 'large'
    },
    colors: {
        set: true,
        gray: ['#333333', '#555555', '#777777', '#999999', '#aaaaaa', '#bbbbbb', '#cccccc', '#dddddd', '#eeeeee', '#f4f4f4']
    }
});

By default, the color selection dropdown shows an input for entering a custom color value, it can be disabled:


Redactor('#entry', {
    plugins: ['fontcolor'],
    fontcolor: {
        input: false
    }
});

Work with classes

The plugin can work with color classes. In this case color is set as the class, not as a style.


Redactor('#entry', {
    plugins: ['fontcolor'],
    fontcolor: {
        classes: ['fg-red', 'fg-blue', 'fg-green']
    }
});

To display color in the editor content, you will need to add a color style statement to the page where the editor is running, for example, like this:


.rx-content .fg-red {
    color: red;
}
.rx-content .fg-blue {
    color: blue;
}
.rx-content .fg-green {
    color: green;
}