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