표 편집

editor.execCommand를 통해 실행되는 표 관련 명령어 — 표 삽입/제거, 행/열 작업, 셀 속성, 테두리, 수식.

명령어

• command - cellBackground
• command - cellSizeEqual
• command - cellVerticalAlign
• command - columnWidthEqual
• command - deleteCol
• command - deleteRow
• command - deleteTable
• command - fitTableWidth
• command - insertCol
• command - insertRow
• command - insertTable
• command - mergeCell
• command - resizeTable
• command - rowHeightEqual
• command - setBorderColor
• command - setBorderStyle
• command - setBorderWidth
• command - setCellProperties
• command - setFormula
• command - setTableProperties
• command - splitCell

command - cellBackground

선택한 셀의 배경색을 설정합니다.

editor.execCommand('cellBackground', '#ff0000');

command - cellSizeEqual

선택한 셀의 너비와 높이를 동일하게 만듭니다.

editor.execCommand('cellSizeEqual');

command - cellVerticalAlign

선택한 셀의 세로 정렬을 설정합니다.

editor.execCommand('cellVerticalAlign', 'top');     // top
editor.execCommand('cellVerticalAlign', 'middle');  // middle
editor.execCommand('cellVerticalAlign', 'bottom');  // bottom

command - columnWidthEqual

선택한 열의 너비를 동일하게 만듭니다.

editor.execCommand('columnWidthEqual');

command - deleteCol

선택한 열을 삭제합니다.

editor.execCommand('deleteCol');

command - deleteRow

선택한 행을 삭제합니다.

editor.execCommand('deleteRow');

command - deleteTable

선택한 표를 제거합니다.

editor.execCommand('deleteTable');

command - fitTableWidth

선택한 표의 너비를 100%로 설정합니다.

editor.execCommand('fitTableWidth');

command - insertCol

선택한 표에서 지정한 인덱스에 열을 추가합니다.

editor.execCommand('insertCol', 1);
editor.execCommand('insertCol', 5);

command - insertRow

선택한 표에서 지정된 인덱스에 행을 추가합니다.

editor.execCommand('insertRow', 1);
editor.execCommand('insertRow', 5);

command - insertTable

캐럿 위치에 표를 삽입합니다. 캐럿이 문단의 중간에 있으면 문단이 분할되고 두 부분 사이에 표가 삽입됩니다. 선택 영역이 있으면 표를 삽입하기 전에 선택 영역이 제거됩니다.

editor.execCommand('insertTable', { row: 2, col: 2 });  // insert a 2x2 table

command - mergeCell

선택한 셀을 병합합니다.

editor.execCommand('mergeCell');

command - resizeTable

선택한 표의 너비와 높이를 설정합니다.

editor.execCommand('resizeTable', 800, 400);

command - rowHeightEqual

선택한 행의 높이를 동일하게 만듭니다.

editor.execCommand('rowHeightEqual');

command - setBorderColor

선택한 셀의 테두리 색상을 설정합니다.

editor.execCommand('setBorderColor', '#ff0000');  // red border

command - setBorderStyle

선택한 셀의 테두리 스타일을 설정합니다.

editor.execCommand('setBorderStyle', 'none');   // no border
editor.execCommand('setBorderStyle', 'solid');  // solid line

command - setBorderWidth

선택한 셀의 테두리 두께를 설정합니다.

editor.execCommand('setBorderWidth', 5);  // 5px border

command - setCellProperties

선택한 셀에 속성을 설정합니다.

// Cell border
editor.execCommand('setCellProperties', {
  border: {
    style: 'dotted',                                  // 'solid', 'dotted', 'dashed', 'double'
    width: 5,                                         // px
    color: { r: 0, g: 0, b: 255 },
    select: [true, true, true, true, true, true]     // top, middle, bottom, left, center, right
  }
});

// Header cell
editor.execCommand('setCellProperties', {
  tableHead: {
    scope: 'none',  // 'none', 'row', 'col'
    tagName: 'th'   // 'th', 'td'
  }
});

// Cell background color
editor.execCommand('setCellProperties', {
  style: { backgroundColor: { r: 255, g: 0, b: 0 } }
});

// Vertical alignment
editor.execCommand('setCellProperties', {
  style: { verticalAlign: 'middle' }   // 'top', 'middle', 'bottom'
});

// Horizontal alignment
editor.execCommand('setCellProperties', {
  style: { align: 'right' }            // 'left', 'center', 'right', 'justify'
});

command - setFormula

선택한 셀에 수식을 설정합니다.

editor.execCommand('setFormula', 'SUM(A1:B3)');      // sum
editor.execCommand('setFormula', 'AVERAGE(A1:B3)');  // average

command - setTableProperties

선택한 표의 속성을 설정합니다.

// Table caption
editor.execCommand('setTableProperties', {
  caption: {
    position: 'top',        // 'none', 'top', 'bottom'
    text: 'Table caption'
  }
});

// Header cells
editor.execCommand('setTableProperties', {
  head: {
    scope: false,
    value: 'row'            // 'none', 'row', 'col', 'both'
  }
});

// Table border style
editor.execCommand('setTableProperties', {
  style: {
    border: {
      style: 'dotted',                       // 'solid', 'dotted', 'dashed', 'double'
      width: 10,                             // px
      color: { r: 255, g: 0, b: 0 }
    }
  }
});

// Table width / height
editor.execCommand('setTableProperties', {
  style: {
    width:  { value: 800, unit: 'px' },
    height: { value: 300, unit: 'px' }
  }
});

// Table alignment
editor.execCommand('setTableProperties', {
  style: { blockAlign: 'center' }            // 'left', 'center', 'right'
});

// Other table style
editor.execCommand('setTableProperties', {
  style: {
    tableLayout: 'auto',   // 'auto', 'fixed'
    display: 'table'       // 'table', 'inline-table'
  }
});

command - splitCell

캐럿이 있는 셀을 지정한 행 수와 열 수로 분할합니다.

editor.execCommand('splitCell', 2, 2);