Color Picker Plugin

This plugin adds an enhanced color selection to Jodit editor components. It replaces the standard color picker with a more functional one, offering palette selection, transparency adjustment, and the ability to save custom colors.

Features

• Extended color palette
• Transparency (alpha channel) adjustment
• Editable palette with custom color saving
• Integration with standard color selection components in Jodit

Installation

Add "color-picker" to your Jodit editor's plugin list:

const editor = Jodit.make('#editor', {
    extraPlugins: ['color-picker']
});
Copy

Usage

Automatic Integration

The plugin automatically integrates with standard color selection components in Jodit, such as the "forecolor" and "backcolor" buttons on the toolbar. You don't need to do anything additional to use the enhanced color picker.

const editor = Jodit.make('#editor', {
    buttons: ['forecolor', 'backcolor'],
    extraPlugins: ['color-picker']
});
Copy

Programmatic Usage of the ColorInput Component

You can use the ColorInput component in your own plugins or extensions:

import { ColorInput } from 'jodit-pro/plugins/color-picker/ui/input/color-input';

// Create a color picker component
const colorInput = new ColorInput(jodit, {
    name: 'myColor',
    value: '#ff0000', // Initial color value
    onChange: (newColor) => {
        console.log('Color selected:', newColor);
        // Your code to handle color change
    }
});

// Add the component to the DOM
someContainer.appendChild(colorInput.container);
Copy

"Slim" Mode

The ColorInput component supports a "slim" mode, where the input field becomes read-only, and the user can only select a color from the palette:

const colorInput = new ColorInput(jodit, {
    value: '#00ff00',
    onChange: (newColor) => {
        // Handle color change
    }
});

// Set "slim" mode
colorInput.setMod('slim', true);
Copy

Events

afterGenerateColorPicker

The plugin responds to the 'afterGenerateColorPicker' event, which is triggered when generating a color palette in the editor. You can use this event to customize the color selection behavior:

editor.events.on('afterGenerateColorPicker', (ignore, extra, callback, color) => {
    // ignore - element that can be ignored
    // extra - container for placing additional elements
    // callback - callback function that is called when a color is selected
    // color - current selected color
    
    // Your code to customize color selection
});
Copy

Examples

Basic Usage

const editor = Jodit.make('#editor', {
    buttons: ['forecolor', 'backcolor'],
    extraPlugins: ['color-picker']
});
Copy

Creating a Custom Color Selection Dialog

const editor = Jodit.make('#editor', {
    extraPlugins: ['color-picker']
});

// Create a button to open the dialog
const button = document.createElement('button');
button.innerText = 'Select Color';
document.body.appendChild(button);

button.addEventListener('click', () => {
    // Create a dialog
    const dialog = new editor.modules.Dialog();
    
    // Create a color picker component
    const colorInput = new ColorInput(editor, {
        value: '#3498db',
        onChange: (newColor) => {
            console.log('Color selected:', newColor);
            // Apply color to selected text
            editor.execCommand('foreColor', false, newColor);
            dialog.close();
        }
    });
    
    // Add the component to the dialog
    dialog.setContent(colorInput.container);
    
    // Open the dialog
    dialog.open();
});
Copy

Integration with Other Plugins

Example of integration with the button-generator plugin:

const editor = Jodit.make('#editor', {
    extraPlugins: ['color-picker', 'button-generator']
});

// The color-picker plugin automatically integrates with the button-generator plugin,
// providing enhanced color selection for button customization
Copy

Technical Details

The plugin uses the a-color-picker library to display the color palette. This library provides the following features:

• Color selection from preset palettes
• Transparency (alpha channel) adjustment
• Palette editing with custom color saving
• Various color formats (HEX, RGB, HSL)