문단 편집

editor.execCommand를 통해 실행되는 문단 관련 명령어 — 문단 속성, 정렬, 들여쓰기, 인용, 목록 관리.

명령어

• command - addParagraphProperties
• command - align
• command - decreaseIndent
• command - decreaseQuote
• command - increaseIndent
• command - increaseQuote
• command - insertHTML
• command - setBulletList
• command - setCustomList
• command - setLineHeight
• command - setListStartValue
• command - setMultiList
• command - setNumberedList
• command - setParaTagName
• command - toggleList

모든 명령어는 캐럿이 위치한 문단에 적용됩니다. 선택 영역이 여러 문단에 걸쳐 있을 경우, 명령어는 선택된 모든 문단에 적용됩니다.

command - addParagraphProperties

현재 문단에 속성(id, className, 인라인 스타일)을 설정합니다.

editor.execCommand('addParagraphProperties', { id: 'paragraph-id' });
editor.execCommand('addParagraphProperties', { className: 'custom-class-name' });
editor.execCommand('addParagraphProperties', { style: { margin: { top: 20, left: 20 } } });
editor.execCommand('addParagraphProperties', { style: { padding: { bottom: 30, right: 30 } } });

command - align

문단 정렬을 설정합니다.

editor.execCommand('align', 'left');
editor.execCommand('align', 'center');
editor.execCommand('align', 'right');
editor.execCommand('align', 'justify');

command - decreaseIndent

문단 들여쓰기를 줄입니다.

editor.execCommand('decreaseIndent');

command - decreaseQuote

현재 문단에서 인용문구를 제거합니다(있는 경우).

editor.execCommand('decreaseQuote');

command - increaseIndent

문단 들여쓰기를 증가시킵니다.

editor.execCommand('increaseIndent');

command - increaseQuote

현재 문단을 인용문구로 감쌉니다.

editor.execCommand('increaseQuote');                                                                  // plain blockquote
editor.execCommand('increaseQuote', { style: { backgroundColor: { r: 255, g: 0, b: 0 } } });          // with background color
editor.execCommand('increaseQuote', { className: 'custom-class-name' });                              // with class

command - insertHTML

2.17.0 버전부터 지원합니다.

캐럿에 HTML을 삽입합니다. 선택 영역이 있으면 insertType으로 HTML을 넣을 위치를 지정합니다.

editor.execCommand('insertHTML', '<span>Editor</span>');
editor.execCommand('insertHTML', '<span>Editor</span>', 'overwrite');
editor.execCommand('insertHTML', '<span>Editor</span>', 'before');
editor.execCommand('insertHTML', '<span>Editor</span>', 'after');

command - setBulletList

문단에 글머리 기호 목록을 설정합니다.

editor.execCommand('setBulletList', '-');
editor.execCommand('setBulletList', '●');

command - setCustomList

3.2.2509, 2.20.2509 버전부터 지원합니다.

사용자 정의 목록 스타일을 적용합니다. customListInfo가 생략되면, 설정 수준의 editor.list.customList 설정이 사용됩니다.

editor.execCommand('setCustomList', [
    {
        format: 'bullet',
        levelText: 'A',
        runStyle: {
            color: 'red',
            fontSize: { value: 16, unit: 'pt' },
            italic: true,
            fontWeight: 700,
        }
    },
    {
        format: 'bullet',
        levelText: 'B',
        runStyle: {
            color: 'blue',
            fontSize: { value: 16, unit: 'pt' },
            italic: true,
            fontWeight: 700,
        }
    },
    {
        format: 'bullet',
        levelText: 'C',
        runStyle: {
            color: 'green',
            fontSize: { value: 16, unit: 'pt' },
            italic: true,
            fontWeight: 700,
        }
    },
    {
        format: 'bullet',
        levelText: 'D',
        runStyle: {
            color: 'orange',
            fontSize: { value: 16, unit: 'pt' },
            italic: true,
            fontWeight: 700,
        }
    },
    {
        format: 'bullet',
        levelText: 'E',
        runStyle: {
            color: 'purple',
            fontSize: { value: 16, unit: 'pt' },
            italic: true,
            fontWeight: 700,
        }
    },
    {
        format: 'bullet',
        levelText: 'F',
        runStyle: {
            color: 'brown',
            fontSize: { value: 16, unit: 'pt' },
            italic: true,
            fontWeight: 700,
        }
    },
    {
        format: 'bullet',
        levelText: 'G',
        runStyle: {
            color: 'magenta',
            fontSize: { value: 16, unit: 'pt' },
            italic: true,
            fontWeight: 700,
        }
    },
    {
        format: 'bullet',
        levelText: 'H',
        runStyle: {
            color: 'teal',
            fontSize: { value: 16, unit: 'pt' },
            italic: true,
            fontWeight: 700,
        }
    },
    {
        format: 'bullet',
        levelText: 'I',
        runStyle: {
            color: 'navy',
            fontSize: { value: 16, unit: 'pt' },
            italic: true,
            fontWeight: 700,
        }
    }
]);

command - setLineHeight

문단의 줄 높이를 설정합니다.

editor.execCommand('setLineHeight', { value: 1.6, unit: '' });   // line height 1.6
editor.execCommand('setLineHeight', { value: 150, unit: '%' });  // line height 150%
editor.execCommand('setLineHeight', { value: 20,  unit: 'px' }); // line height 20px

command - setListStartValue

현재 문단에서 글머리 번호 목록의 시작 번호를 설정합니다.

editor.execCommand('setListStartValue', 10);
editor.execCommand('setListStartValue', 999);

command - setMultiList

캐럿이 위치한 문단에 다단계 글머리 스타일을 설정합니다. 문단이 선택된 경우, 선택된 모든 문단에 스타일이 적용됩니다.

다단계 글머리 스타일:

editor.execCommand('setMultiList', 'none');
editor.execCommand('setMultiList', 'multi_1');
editor.execCommand('setMultiList', 'multi_3');

command - setNumberedList

문단에 글머리 번호 형식을 설정합니다.

editor.execCommand('setNumberedList', 'decimal');
editor.execCommand('setNumberedList', 'decimalEnclosedCircle');
editor.execCommand('setNumberedList', 'ganada');

command - setParaTagName

현재 문단의 태그 이름을 설정합니다.

// Release 3.2.2509+, Release 2.20.2509+
editor.execCommand('setParaTagName', 'P');
editor.execCommand('setParaTagName', 'H1');
editor.execCommand('setParaTagName', 'H2');

// Earlier releases used `setTagName`
editor.execCommand('setTagName', 'P');
editor.execCommand('setTagName', 'H1');

command - toggleList

현재 문단에서 글머리 기호 목록 또는 글머리 번호 목록을 전환합니다.

editor.execCommand('toggleList', 'bullet');
editor.execCommand('toggleList', 'number');