Jodit Editor

Color Picker widgets

Color picker widget is a simple widget that allows you to select a color from the palette.

const editor = Jodit.make('#editor');
const tabs = Jodit.modules.TabsWidget(editor, {
  Text: Jodit.modules.ColorPickerWidget(
    editor,
    color => {
      alert(color);
    },
    '#fff'
  ),
  Background: Jodit.modules.ColorPickerWidget(
    editor,
    color => {
      alert(color);
    },
    '#eee'
  )
});

ColorPickerWidget

ColorPickerWidget(editor, callback, coldColor): HTMLDivElement

Build color picker

Parameters

Name Type Description
editor IJodit -
callback (newColor: string) => void Callback 'function (color) {}'
coldColor string Color value ex. #fff or rgb(123, 123, 123) or rgba(123, 123, 123, 1)

Returns

HTMLDivElement

Example

const tabs = TabsWidget(editor, {
   'Text': ColorPickerWidget(editor, function (color) {
        box.style.color = color;
    }, box.style.color),
    'Background': ColorPickerWidget(editor, function (color) {
        box.style.backgroundColor = color;
    }, box.style.backgroundColor),
});

Defined in

jodit/src/modules/widget/color-picker/color-picker.ts:49