How to use tui-color-picker - 2 common examples

const {$el: $button} = toolbar.getItem(colorSyntaxButtonIndex);

  const $colorPickerContainer = $('<div>');

  const $buttonBar = $(`<button class="te-apply-button" type="button">${i18n.get('OK')}</button>`);

  const cpOptions = {
    container: $colorPickerContainer[0],
    usageStatistics
  };

  if (preset) {
    cpOptions.preset = preset;
  }

  const colorPicker = ColorPicker.create(cpOptions);

  let selectedColor = colorPicker.getColor();

  $colorPickerContainer.append($buttonBar);

  const popup = editor.getUI().createPopup({
    header: false,
    title: false,
    content: $colorPickerContainer,
    className: 'tui-popup-color',
    $target: editor.getUI().getToolbar().$el,
    css: {
      'width': 'auto',
      'position': 'absolute'
    }
  });</div>

constructor(colorpickerElement, defaultColor = '#7e7e7e', toggleDirection = 'up') {
        const title = colorpickerElement.getAttribute('title');

        this._show = false;

        this._colorpickerElement = colorpickerElement;
        this._toggleDirection = toggleDirection;
        this._makePickerButtonElement(colorpickerElement, defaultColor);
        this._makePickerLayerElement(colorpickerElement, title);
        this._color = defaultColor;
        this.picker = tuiColorPicker.create({
            container: this.pickerElement,
            preset: PICKER_COLOR,
            color: defaultColor
        });

        this._addEvent(colorpickerElement);
    }