Page History

/**
 * 특정 텍스트 입력 후 실행할 자동 액션을 설정합니다.
 * - name : 실행할 이벤트 이름,
 * - trigger : 자동 액션을 실행할 텍스트,
 * - removeTriggerText : 기존 텍스트를 제거할지 여부 (true: 제거, false: 제거하지 않음),
 * - skipElements : 자동 액션을 실행하지 않을 부모 Element 목록
 * - enable : 자동 액션을 실행할지 여부 (true: 실행, false: 실행하지 않음),
 * ex) {
 *      '*': {
 *          name: 'setCircleList',
 *          trigger: ' ',
 *          removeTriggerText: true,
 *          skipElements: ['ListItem'],
 *          enable: true
 *      },
 *      '@': {
 *          name: 'mention',
 *          trigger: '', // 단일 문자를 트리거로 사용할 경우 빈 문자열로 설정
 *          removeTriggerText: true,
 *          skipElements: [],
 *          enable: true
 *      },
 */
'editor.autoAction': {
    '*': {
        name: 'setCircleList',
        trigger: ' ',
        removeTriggerText: true,
        skipElements: ['ListItem'],
        enable: true
    },
    '-': {
        name: 'setSquareList',
        trigger: ' ',
        removeTriggerText: true,
        skipElements: ['ListItem'],
        enable: true
    },
    '#': {
        name: 'setBasicNumberedList',
        trigger: ' ',
        removeTriggerText: true,
        skipElements: ['ListItem'],
        enable: true
    },
    '1.': {
        name: 'setBasicNumberedList',
        trigger: ' ',
        removeTriggerText: true,
        skipElements: ['ListItem'],
        enable: true
    }
}

'editor.autoAction' 설정이 추가되며 기존 자동 리스트 삽입 (Deprecated) 기능이 포함되었습니다.
'editor.autoAction' 설정에서 자동 리스트 삽입 기능을 제공하고 있으며 'editor.autoList' 설정 값에 따라 이벤트가 등록됩니다.

• true: 자동 리스트 삽입 이벤트가 등록됨
• false: 자동 리스트 삽입 이벤트가 등록되지 않음
  (false 인 경우 'editor.autoAction'에서 각 리스트 삽입 관련 설정의 'enable'을 false로 설정해야 해당 동작이 실행되지 않습니다.

const customEvent = var mentionHTML = `<mention style="color: #1976d2; background-color: #e3f2fd; padding: 3px 8px; border-radius: 12px; border: 1px solid #bbdefb; text-decoration: none; display: inline-block;">@mention</mention>`;

function customEvent(event) => {
    switch (event.name) {
        case 'setH1':
            event.editor.execCommand('setTagNamesetParaTagName', 'H1');
            break;
        case 'setH2':
            event.editor.execCommand('setTagNamesetParaTagName', 'H2');
            break;
        case 'setH3':
            event.editor.execCommand('setTagNamesetParaTagName', 'H3');
            break;
        case 'replaceArrow':
            event.editor.execCommand('insertText', '→');
            break;
        case 'insertMention':
            event.editor.execCommand('insertHTML', mentionHTML);
            break;
    }
};

editor.setEventListener('autoAction', customEvent);

'editor.autoAction': {
    '#': {
        'name': 'setH1',
        'trigger': ' ',
        'removeTriggerText': true,
        'skipElements': [],
        'enable': true
    },
    '##': {
        'name': 'setH2',
        'trigger': ' ',
        'removeTriggerText': true,
        'skipElements': [],
        'enable': true
    },
    '###': {
        'name': 'setH3',
        'trigger': ' ',
        'removeTriggerText': true,
        'skipElements': [],
        'enable': true
    },
    '-': {
        'name': 'replaceArrow',
        'trigger': '>',
        'removeTriggerText': true,
        'skipElements': [],
        'enable': true
    },
    '@': {
        'name': 'insertMention',
        'trigger': '',
        'removeTriggerText': true,
        'skipElements': [],
        'enable': true
    }
}