사용자 정의 입력 액션

릴리즈 3.2.2509 이상

특정 문자를 입력하면 설정한 이벤트를 자동으로 실행시킵니다.

기본 설정

synapeditor.config.js

/**
 * 특정 텍스트 입력 후 실행할 자동 액션을 설정합니다.
 * - 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
    }
}

설정 방법

key		type	explain
text		string	자동 액션을 실행시킬 텍스트입니다.
	name	string	자동 액션 시 실행될 이벤트 이름입니다.
	tirgger	string	자동 액션을 트리거할 텍스트입니다. 단일 텍스트로 자동 액션을 실행하고자 할 때 trigger는 빈 문자열('')로 설정되어야 합니다.
	removeTriggerText	boolean	자동 액션 실행 시 이전 텍스트를 제거할 것인지 유무입니다. true: 제거 false: 제거하지 않음
	skipElements	Array	자동 액션을 실행하지 않을 부모 엘리먼트를 설정합니다. 현재 문단이 해당 엘리먼트의 자식인 경우 자동 액션을 수행하지 않습니다. 유효한 대상은 다음과 같습니다. [ 'Body', 'Div', 'Shape', 'ListItem', 'TableCell', 'Fieldset', 'Form' ]
	enable	boolean	자동 액션을 실행할지 여부입니다. true: 실행 false 실행하지 않음

이벤트 등록 방법

Events - autoAction

예시

이벤트 등록

const customEvent = (event) => {
    switch (event.name) {
        case 'setH1':
            event.editor.execCommand('setTagName', 'H1');
            break;
        case 'setH2':
            event.editor.execCommand('setTagName', 'H2');
            break;
        case 'setH3':
            event.editor.execCommand('setTagName', 'H3');
            break;
        case 'replaceArrow':
            event.editor.execCommand('insertText', '→');
            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
    }
}

동작
'#' 입력 후 공백 입력
'##' 입력 후 공백 입력
'###' 입력 후 공백 입력
'-' 입력 후 '>' 입력

Space shortcuts

Page tree

기본 설정

설정 방법

이벤트 등록 방법

예시