Page History

Status

colour	Yellow
title	릴리즈 3.2.2509 이상

Status


colour	Yellow
title	릴리즈 2.20.2509 이상

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

기본 설정

Code Block

language	js
title	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
    }
}

Info

title	관련 설정

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

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

설정 방법

key

type

explain

text

string

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

name

string

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

tirgger

string

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

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

removeTriggerText

boolean

자동 액션 실행 시

...

트리거 텍스트를 제거할 것인지 유무입니다.

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

skipElements

Array

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

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

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

enable

boolean

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

true: 실행
false 실행하지 않음

...

title	참고사항

...

이벤트 등록 방법

Events - autoAction

예시

Code Block

language	js
title	이벤트 등록

...

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);

Code Block

language	js
title	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
    }
}

동작
'#' 입력 후 공백 입력	Image Modified
'##' 입력 후 공백 입력	Image Modified
'###' 입력 후 공백 입력	Image Modified
'-' 입력 후 '>' 입력	Image Modified
'@' 입력	Image Added

Space shortcuts

Page tree

Versions Compared

Old Version 2

New Version Current

Key

기본 설정

설정 방법

이벤트 등록 방법

예시