풍선팝업 설정

풍선팝업에 표시되는 버튼을 자유롭게 구성할 수 있습니다.

editor.balloon을 사용하여 텍스트, 이미지, 동영상, 레이어, 하이퍼링크, 표 편집에 필요한 버튼을 구성합니다.

사용 방법

// synapeditor.config.js (default)
{
  'editor.balloon': {
    'popupName1': ['buttonName1', 'buttonName2', '-', 'buttonName3', 'buttonName4'],
    'popupName2': ['buttonName5', 'buttonName6', '-', 'buttonName7', 'buttonName8']
  }
}

사용 가능한 팝업 이름

사용 가능한 버튼 이름은 툴바 설정을 참고합니다.

풍선팝업 구성 예제

기본

// synapeditor.config.js
{
  'editor.balloon': {
    'text': ['fontFamilyWithText', 'fontSizeWithText', '-', 'bold', 'italic', 'underline', 'strike', 'fontColor', 'fontBackgroundColor'],
    'image': ['objVertAlignBottom', 'link', 'unlink', 'openLink', 'alt', 'caption', '-', 'imageProperties', 'rotateDrawingObjectLeft', 'rotateDrawingObjectRight', 'imageOriginSize', 'tuiImageEditor', 'deleteImage'],
    'video': ['objVertAlignBottom', 'videoProperties', 'deleteVideo'],
    'div': ['drawingObjectBorderColor', 'drawingObjectLineThickness', 'drawingObjectLineStyle', '-', 'drawingObjectFill', 'divProperties', 'deleteDiv'],
    'hyperlink': ['link', 'unlink', 'openLink'],
    'tableCell': ['formulaInput', '-', 'fill', 'selectBorder', 'borderColor', 'lineThickness', 'lineStyle', 'cellSize', 'mergeCell', 'splitCell', 'fitTableWidth', '-', 'contentsAlign', 'verticalAlign', 'deleteRow', 'deleteCol', 'cellProperties', 'tableProperties', 'deleteTable']
  }
}

표 편집 풍선팝업 예제

// synapeditor.config.js
{
  'editor.balloon': {
    'tableCell': [
      'formulaInput', '-', 'fill', 'selectBorder', 'borderColor',
      'lineThickness', 'lineStyle', 'fitTableWidth', '-',
      'insertRowBefore', 'insertRowAfter', 'insertColBefore', 'insertColAfter',
      'deleteRow', 'deleteCol', 'deleteTable', '-',
      'contentsAlign', 'verticalAlign', 'cellSize', 'mergeCell', 'splitCell',
      'cellProperties', 'tableProperties'
    ]
  }
}

표 편집 풍선팝업 결과