...
Code Block |
---|
language | js |
---|
theme | Emacs |
---|
title | synapeditor.config.js |
---|
|
{
'editor.tooltip.position.key': window.location.href + '_se-tooltip-position'
} |
...
활용 예
툴팁 위치 변경하기 커스텀 플러그인
툴팁이 나타날 위치를 위 / 아래로 토글하는 커스텀 플러그인입니다.
단축키를 설정하면 단축키를 실행해 툴팁 위치를 토글 할 수 있습니다.
Code Block |
---|
|
var customPluginName = 'tooltipPositionToggle';
SynapEditor.addPlugin(customPluginName, function(editor) {
var UI_STATUS = SynapEditor.CONST.UI_STATUS;
var TOOLTIP_POSITION = SynapEditor.CONST.UI_LAYOUT_VALUE.TOOLTIP_POSITION;
var ACTION = SynapEditor.ACTION; // TOGGLE_TOOLTIP_POSITION_TOP
return {
buttonDef: {
name: customPluginName,
label: 'Tooltip Position toggle',
iconSVG: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
<!-- 버튼에 보여질 아이콘 -->
<g xmlns="http://www.w3.org/2000/svg">
<title>Layer 1</title>
<text stroke="#000000" transform="matrix(0.7835232019424438,0,0,1,0.2672135476022959,0)" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="13" y="12.580528" x="-1.056391" fill="#000000">TP</text>
</g>
</svg>`,
status: {
fn: function () {
const tooltopPosition = editor.getUIManager().getTooltipPosition();
let status;
if (tooltopPosition === TOOLTIP_POSITION.TOP) {
status = UI_STATUS.ACTIVE;
}
return {
status: status
};
}
},
onClickFunc: function() {
editor.execCommand(ACTION.TOGGLE_TOOLTIP_POSITION_TOP);
}
},
shortcutDef: [{
key: {
windows: 'Ctrl+Alt+T',
mac: 'Cmd+Alt+T'
},
option: {
action: ACTION.TOGGLE_TOOLTIP_POSITION_TOP
}
}]
};
}); |
에디터 툴바 영역에 플러그인 버튼 달기
Code Block |
---|
language | js |
---|
theme | Emacs |
---|
title | synapeditor.config.js |
---|
|
'editor.toolbar': [ ..., 'tooltipPositionToggle' ] // pluginName |
결과
버튼 클릭 시 | 단축키 실행 시 |
---|
Image Added | Image Added |