사용자 정의 입력 Action

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

특정 문자가 입력되면, 설정된 이벤트가 자동으로 실행됩니다.

기본 설정

// synapeditor.config.js
/**
 * Configures auto actions to execute after specific text is entered.
 * - name : event name to execute,
 * - trigger : text that triggers the auto action,
 * - removeTriggerText : whether to remove the existing text (true: remove, false: do not remove),
 * - replacementText : the trigger text is converted to the specified text,
 * - skipElements : list of parent Elements where auto action will NOT be executed
 * - matchAnywhere : the action runs whenever the trigger text matches, regardless of its position,
 * - enable : whether to execute the auto action (true: execute, false: do not execute),
 * ex) {
 *      '*': {
 *          name: 'setCircleList',
 *          trigger: ' ',
 *          removeTriggerText: true,
 *          skipElements: ['ListItem'],
 *          enable: true
 *      },
 *      '@': {
 *          name: 'mention',
 *          trigger: '', // set to empty string when using a single character as trigger
 *          removeTriggerText: true,
 *          skipElements: [],
 *          enable: true
 *      },
 *      '->': {
 *          name: 'setArrow',
 *          trigger: ' ',
 *          removeTriggerText: true,
 *          replacementText: '→',
 *          skipElements: [],
 *          matchAnywhere: true,
 *          enable: true
 *      },
 *      '...': {
 *          name: 'setEllipsis',
 *          trigger: ' ',
 *          removeTriggerText: true,
 *          replacementText: '…',
 *          skipElements: [],
 *          matchAnywhere: true,
 *          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
    },
    '->': {
        name: 'setArrow',
        trigger: ' ',
        removeTriggerText: true,
        replacementText: '→',
        skipElements: [],
        matchAnywhere: true,
        enable: true
    },
    '...': {
        name: 'setEllipsis',
        trigger: ' ',
        removeTriggerText: true,
        replacementText: '…',
        skipElements: [],
        matchAnywhere: true,
        enable: true
    }
}

자동 목록 삽입(사용 중단됨) 함수가 포함되어 있습니다.

editor.autoAction 설정은 자동 목록 삽입 기능을 제공하며, 이벤트는 editor.autoList 설정 값에 따라 등록됩니다.

• true: 자동 목록 삽입 이벤트가 등록됩니다
• false: 자동 목록 삽입 이벤트가 등록되지 않습니다

(false일 때, 해당 action이 실행되지 않도록 editor.autoAction의 각 리스트 삽입 관련 설정에서 enable을 false로 설정해야 합니다.)

설정 방법

이벤트 등록 방법

Events - autoAction

예시

이벤트 등록

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('setParaTagName', 'H1');
            break;
        case 'setH2':
            event.editor.execCommand('setParaTagName', 'H2');
            break;
        case 'setH3':
            event.editor.execCommand('setParaTagName', 'H3');
            break;
        case 'replaceArrow':
            event.editor.execCommand('insertText', '→');
            break;
        case 'insertMention':
            event.editor.execCommand('insertHTML', mentionHTML);
            break;
    }
};

editor.setEventListener('autoAction', customEvent);

// synapeditor.config.js
'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
    },
    '->': {
        'name': 'setArrow',
        'trigger': ' ',
        'removeTriggerText': true,
        'replacementText': '→',
        'skipElements': [],
        'matchAnywhere': true,
        'enable': true
    },
    '...': {
        'name': 'setEllipsis',
        'trigger': ' ',
        'removeTriggerText': true,
        'replacementText': '…',
        'skipElements': [],
        'matchAnywhere': true,
        'enable': true
    }
}

동작

입력	동작
'#' 입력 후 스페이스
'##' 입력 후 스페이스
'###' 입력 후 스페이스
'-' 입력 후 '>'
'@' 입력
문단 중간에 '->' 입력
문단 중간에 '...' 입력

관련 정보

• 자동 목록 삽입 (사용 중단됨)
• autoAction (이벤트)