function initUI(editor, preset) {
  const name = 'colorSyntax';
  const className = 'tui-color';
  const i18n = editor.i18n;
  const toolbar = editor.getUI().getToolbar();
  const {usageStatistics} = editor.options;

  editor.eventManager.addEventType('colorButtonClicked');

  toolbar.insertItem(3, {
    type: 'button',
    options: {
      name,
      className,
      event: 'colorButtonClicked',
      tooltip: i18n.get('Text color')
    }
  });
  const colorSyntaxButtonIndex = toolbar.indexOfItem(name);
  const {$el: $button} = toolbar.getItem(colorSyntaxButtonIndex);

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

  const $buttonBar = $(`<button type="button" class="te-apply-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'
    }
  });

  editor.eventManager.listen('focus', () => {
    popup.hide();
  });

  editor.eventManager.listen('colorButtonClicked', () => {
    if (popup.isShow()) {
      popup.hide();

      return;
    }

    const {
      offsetTop,
      offsetLeft
    } = $button.get(0);
    popup.$el.css({
      top: offsetTop + $button.outerHeight(),
      left: offsetLeft
    });
    colorPicker.slider.toggle(true);

    editor.eventManager.emit('closeAllPopup');
    popup.show();
  });

  editor.eventManager.listen('closeAllPopup', () => {
    popup.hide();
  });

  editor.eventManager.listen('removeEditor', () => {
    colorPicker.off('selectColor');
    popup.$el.find('.te-apply-button').off('click');
    popup.remove();
  });

  colorPicker.on('selectColor', e => {
    selectedColor = e.color;

    if (e.origin === 'palette') {
      editor.exec('color', selectedColor);
      popup.hide();
    }
  });

  popup.$el.find('.te-apply-button').on('click', () => {
    editor.exec('color', selectedColor);
  });
}
function initUI(editor, preset) {
  const name = 'colorSyntax';
  const className = 'tui-color';
  const i18n = editor.i18n;
  const toolbar = editor.getUI().getToolbar();
  const {usageStatistics} = editor.options;

  editor.eventManager.addEventType('colorButtonClicked');

  toolbar.insertItem(3, {
    type: 'button',
    options: {
      name,
      className,
      event: 'colorButtonClicked',
      tooltip: i18n.get('Text color')
    }
  });
  const colorSyntaxButtonIndex = toolbar.indexOfItem(name);
  const {$el: $button} = toolbar.getItem(colorSyntaxButtonIndex);

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

  const $buttonBar = $(`<button type="button" class="te-apply-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'
    }
  });

  editor.eventManager.listen('focus', () => {
    popup.hide();
  });

  editor.eventManager.listen('colorButtonClicked', () => {
    if (popup.isShow()) {
      popup.hide();

      return;
    }

    const {
      offsetTop,
      offsetLeft
    } = $button.get(0);
    popup.$el.css({
      top: offsetTop + $button.outerHeight(),
      left: offsetLeft
    });
    colorPicker.slider.toggle(true);

    editor.eventManager.emit('closeAllPopup');
    popup.show();
  });

  editor.eventManager.listen('closeAllPopup', () => {
    popup.hide();
  });

  editor.eventManager.listen('removeEditor', () => {
    colorPicker.off('selectColor');
    popup.$el.find('.te-apply-button').off('click');
    popup.remove();
  });

  colorPicker.on('selectColor', e => {
    selectedColor = e.color;

    if (e.origin === 'palette') {
      editor.exec('color', selectedColor);
      popup.hide();
    }
  });

  popup.$el.find('.te-apply-button').on('click', () => {
    editor.exec('color', selectedColor);
  });
}
function initUI ( editor , preset ) { const name = 'colorSyntax' ; const className = 'tui-color' ; const i18n = editor . i18n ; const toolbar = editor . getUI ( ) . getToolbar ( ) ; const { usageStatistics } = editor . options ; editor . eventManager . addEventType ( 'colorButtonClicked' ) ; toolbar . insertItem ( 3 , { type : 'button' , options : { name , className , event : 'colorButtonClicked' , tooltip : i18n . get ( 'Text color' ) } } ) ; const colorSyntaxButtonIndex = toolbar . indexOfItem ( name ) ; const { $el : $button } = toolbar . getItem ( colorSyntaxButtonIndex ) ; const $colorPickerContainer = $ ( '<div />' ) ; const $buttonBar = $ ( ` ${ i18n . get ( 'OK' ) } ` ) ; 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' } } ) ; editor . eventManager . listen ( 'focus' , ( ) => { popup . hide ( ) ; } ) ; editor . eventManager . listen ( 'colorButtonClicked' , ( ) => { if ( popup . isShow ( ) ) { popup . hide ( ) ; return ; } const { offsetTop , offsetLeft } = $button . get ( 0 ) ; popup . $el . css ( { top : offsetTop + $button . outerHeight ( ) , left : offsetLeft } ) ; colorPicker . slider . toggle ( true ) ; editor . eventManager . emit ( 'closeAllPopup' ) ; popup . show ( ) ; } ) ; editor . eventManager . listen ( 'closeAllPopup' , ( ) => { popup . hide ( ) ; } ) ; editor . eventManager . listen ( 'removeEditor' , ( ) => { colorPicker . off ( 'selectColor' ) ; popup . $el . find ( '.te-apply-button' ) . off ( 'click' ) ; popup . remove ( ) ; } ) ; colorPicker . on ( 'selectColor' , e => { selectedColor = e . color ; if ( e . origin === 'palette' ) { editor . exec ( 'color' , selectedColor ) ; popup . hide ( ) ; } } ) ; popup . $el . find ( '.te-apply-button' ) . on ( 'click' , ( ) => { editor . exec ( 'color' , selectedColor ) ; } ) ; }
Initialize UI
@param {object} editor - Editor instance
@param {Array.<string>} preset - Preset for color palette
@ignore
Initialize UI
Initialize the UI