텍스트 편집

editor.execCommand를 통해 실행되는 텍스트 관련 명령어 — 텍스트 입력/삭제, 텍스트 스타일(굵게/기울임/밑줄/취소선), 글꼴 종류/크기, 색상, 대소문자 변환, 텍스트 스타일 복사/붙여넣기 등.

명령어

• command - addRunProperties
• command - addRunStyle
• command - bold
• command - copyRunStyle
• command - decreaseFontSize
• command - deleteLeft
• command - deleteRight
• command - enter
• command - fill
• command - fontName
• command - fontSize
• command - increaseFontSize
• command - insertLineBreak
• command - insertText
• command - italic
• command - lowerCase
• command - pasteRunStyle
• command - removeTextStyle
• command - replaceText
• command - replaceTextByIndex
• command - setTextVertAlign
• command - strike
• command - tab
• command - textFill
• command - titleCase
• command - toggleCase
• command - underline
• command - untab
• command - upperCase

command - addRunProperties

3.2.2507 버전부터 지원합니다.

선택된 텍스트에 className 및 HTML 속성을 추가합니다. 속성은 기존 속성에 더해집니다. 속성 값이 null(또는 빈 문자열)인 경우 해당 속성이 제거됩니다.

editor.execCommand('addRunProperties', {
  className: 'Butterfly',
  attributes: {
    'title': 'Beautiful butterfly',
    'aria-label': 'Beautiful butterfly'
  }
});

editor.execCommand('addRunProperties', {
  className: 'Beautiful',
  attributes: { 'title': '' }   // empty string removes the attribute
});

command - addRunStyle

선택한 텍스트에 스타일을 추가합니다. 스타일은 기존 스타일에 더해집니다.

editor.execCommand('addRunStyle', { fontSize: { value: 20, unit: 'pt' } });           // add font size
editor.execCommand('addRunStyle', { color: { r: 255, g: 0, b: 0 } });                 // add text color
editor.execCommand('addRunStyle', { backgroundColor: { r: 0, g: 0, b: 255 } });       // add background color

command - bold

선택한 텍스트에 굵은 서식을 적용합니다. 캐럿만 있을 경우, 이후 입력에 굵은 서식이 적용됩니다.

editor.execCommand('bold');

command - copyRunStyle

캐럿 위치에서 텍스트 스타일을 복사합니다. 관련 항목: command - pasteRunStyle.

editor.execCommand('copyRunStyle');

command - decreaseFontSize

선택한 텍스트의 글꼴 크기를 한 단계 줄입니다. 캐럿만 있을 경우, 이후 입력에 적용됩니다.

editor.execCommand('decreaseFontSize');

command - deleteLeft

캐럿의 왼쪽에 있는 문자를 삭제합니다. 선택 영역이 있으면 선택 영역을 제거합니다.

editor.execCommand('deleteLeft');

command - deleteRight

캐럿 오른쪽에 있는 문자를 삭제합니다. 선택 영역이 있으면 선택 영역을 제거합니다.

editor.execCommand('deleteRight');

command - enter

캐럿 위치에서 문단을 분할합니다. 선택 영역이 있으면 먼저 선택 영역을 제거한 후 분할합니다.

editor.execCommand('enter');

command - fill

선택한 텍스트의 배경색을 설정합니다. 캐럿만 있을 경우, 이후 입력에 적용됩니다.

editor.execCommand('fill', '#000000');

command - fontName

선택한 텍스트의 글꼴 패밀리를 설정합니다. 캐럿만 있을 경우, 이후 입력에 적용됩니다.

editor.execCommand('fontName', 'Arial');

command - fontSize

선택한 텍스트의 글꼴 크기를 설정합니다. 캐럿만 있을 경우, 이후 입력에 적용됩니다.

editor.execCommand('fontSize', 12);

command - increaseFontSize

선택한 텍스트의 글꼴 크기를 한 단계 증가시킵니다. 캐럿만 있을 경우, 이후 입력에 적용됩니다.

editor.execCommand('increaseFontSize');

command - insertLineBreak

캐럿 위치에 <br>을 삽입합니다. 선택 영역이 있으면 먼저 선택 영역을 제거합니다.

editor.execCommand('insertLineBreak');

command - insertText

캐럿 위치에 텍스트를 삽입합니다. 선택 영역이 있으면 먼저 선택 영역을 제거합니다.

editor.execCommand('insertText', 'text');

command - italic

선택한 텍스트에 기울임 서식을 적용합니다. 캐럿만 있을 경우, 이후 입력에 기울임 서식이 적용됩니다.

editor.execCommand('italic');

command - lowerCase

선택한 텍스트의 문자를 소문자로 변환합니다.

editor.execCommand('lowerCase');

command - pasteRunStyle

이전에 복사한 텍스트 스타일을 선택한 텍스트에 적용합니다. 관련 항목: command - copyRunStyle.

editor.execCommand('pasteRunStyle');

command - removeTextStyle

선택한 텍스트에서 스타일을 제거합니다.

editor.execCommand('removeTextStyle');

command - replaceText

선택한 텍스트를 지정된 텍스트로 교체합니다.

editor.execCommand('replaceText', 'text');

command - replaceTextByIndex

targets로 지정한 범위의 텍스트를 주어진 텍스트로 교체합니다.

editor.execCommand('replaceTextByIndex', 'text', [
  { id: 'paragraphId1', startIndex: 0, endIndex: 3 },
  { id: 'paragraphId2', startIndex: 5, endIndex: 15 }
]);

command - setTextVertAlign

선택한 텍스트에 위 첨자 또는 아래 첨자를 설정합니다. 캐럿만 있을 경우, 이후 입력에 적용됩니다.

editor.execCommand('setTextVertAlign', 'superscript');  // superscript
editor.execCommand('setTextVertAlign', 'subscript');    // subscript

command - strike

선택한 텍스트에 취소선을 적용합니다. 캐럿만 있을 경우, 이후 입력에 취소선이 적용됩니다.

editor.execCommand('strike');

command - tab

캐럿 위치에 탭을 삽입합니다. 선택 영역이 있으면 먼저 선택 영역을 제거합니다. 표 셀 안에서는 다음 셀로 이동합니다. 문단의 시작 부분에서는 들여쓰기를 증가시킵니다.

editor.execCommand('tab');

command - textFill

선택된 텍스트의 텍스트 색상을 설정합니다. 캐럿만 있을 경우, 이후 입력에 적용됩니다.

editor.execCommand('textFill', '#000000');

command - titleCase

선택한 텍스트의 각 단어의 첫 글자를 대문자로 변환합니다.

editor.execCommand('titleCase');

command - toggleCase

선택한 텍스트의 문자 대소문자를 전환합니다 — 대문자는 소문자로, 소문자는 대문자로 변경됩니다.

editor.execCommand('toggleCase');

command - underline

선택한 텍스트에 밑줄을 적용합니다. 캐럿만 있을 경우, 이후 입력에 밑줄이 적용됩니다.

editor.execCommand('underline');

command - untab

표 셀 안에서 이전 셀로 이동합니다. 문단의 시작에서 들여쓰기를 줄입니다.

editor.execCommand('untab');

command - upperCase

선택한 텍스트의 문자를 대문자로 변환합니다.

editor.execCommand('upperCase');