사이냅 에디터 문서
Space shortcuts
Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

릴리즈 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
    }
}

관련 설정

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

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

설정 방법

keytypeexplain
textstring자동 액션을 실행시킬 텍스트입니다.





namestring자동 액션 시 실행될 이벤트 이름입니다.
tirggerstring

자동 액션을 트리거할 텍스트입니다.

단일 텍스트로 자동 액션을 실행하고자 할 때 trigger는 빈 문자열('')로 설정되어야 합니다.

removeTriggerTextboolean

자동 액션 실행 시 이전 텍스트를 제거할 것인지 유무입니다.

  • true: 제거
  • false: 제거하지 않음
skipElementsArray

자동 액션을 실행하지 않을 부모 엘리먼트를 설정합니다.

현재 문단이 해당 엘리먼트의 자식인 경우 자동 액션을 수행하지 않습니다.

  • 유효한 대상은 다음과 같습니다.
    [ 'Body', 'Div', 'Shape', 'ListItem', 'TableCell', 'Fieldset', 'Form' ]
enableboolean

자동 액션을 실행할지 여부입니다.

  • 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
    }
}


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

'##' 입력 후 공백 입력

'###' 입력 후 공백 입력

'-' 입력 후 '>' 입력

  • No labels