| Status | ||||||
|---|---|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
특정 문자를 입력하면 설정한 이벤트를 자동으로 실행시킵니다.
기본 설정
| Code Block | ||||
|---|---|---|---|---|
| ||||
/**
* 특정 텍스트 입력 후 실행할 자동 액션을 설정합니다.
* - 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 | ||
|---|---|---|
| ||
'editor.autoAction' 설정이 추가되며 기존 자동 리스트 삽입 기능이 포함되었습니다.
|
설정 방법
| key | type | explain | ||
|---|---|---|---|---|
| text | string | 자동 액션을 실행시킬 텍스트입니다. | ||
| name | string | 자동 액션 시 실행될 이벤트 이름입니다. | ||
| tirgger | string | 자동 액션을 트리거할 텍스트입니다.
| ||
| removeTriggerText | boolean | 자동 액션 실행 시 이전 텍스트를 제거할 것인지 유무입니다.
| ||
| skipElements | Array | 자동 액션을 실행하지 않을 부모 엘리먼트를 설정합니다. 현재 문단이 해당 엘리먼트의 자식인 경우 자동 액션을 수행하지 않습니다.
| ||
| enable | boolean | 자동 액션을 실행할지 여부입니다.
| ||
이벤트 등록 방법
예시
| Code Block | ||||
|---|---|---|---|---|
| ||||
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); |
| Code Block | ||||
|---|---|---|---|---|
| ||||
'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
}
} |
| 동작 | |
|---|---|
| '#' 입력 후 공백 입력 | |
| '##' 입력 후 공백 입력 | |
| '###' 입력 후 공백 입력 | |
| '-' 입력 후 '>' 입력 | |



