Synap Editor Documentation
Page tree

Versions Compared

Old Version 1

changes.mady.by.user Kwon JongPyo

Saved on

compared with

New Version 2

changes.mady.by.user 번역가

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Table of Contents
maxLevel3


...

API

SynapEditor.addPlugin(pluginName, pluginGenerator)

사이냅에디터에 플러그인을 추가합니다Add plugin to SynapEditor.

Params:

Name

Type

Description

pluginNamestring플러그인의 이름입니다Name of plugin.

pluginGenerator

function플러그인 객체를 생성해주는 함수입니다Function to generate plugin object.

Example:

Code Block
languagejs
themeEmacs
var pluginName = "pluginName";
var pluginGenerator = function (editor) {
	//플러그인Returns 객체를plugin 반환합니다object.
	return {
		//...
	};
};
SynapEditor.addPlugin(pluginName, pluginGenerator);

플러그인 객체의 형태

...

Forms of Plugin Object


PreferenceTypeDescriptionPreference Definition
buttonDefArray | Object

툴바 영역 또는 메뉴 영역에 버튼을 추가하기 위한 buttonDef입니다buttonDef to add button to toolbar or menu.

Array 형태Form

Code Block
languagejs
themeEmacs
buttonDef: [{
	name: '버튼의 이름Name of the button', //버튼이 2개 이상인 경우 반드시 있어야 합니다. UI에 추가하기 위해 각 버튼의 이름을 사용하면 됩니다This is a requirement when there are 2 or more buttons. If you want to add them to UI, use names of each button.
	label: '버튼에 보여질 텍스트Text to be displayed on the button.',
	iconSVG: '버튼의 아이콘으로 사용될 SVG 태그SVG tag to be used as the icon of the button',
	onClickFunc: function () {
		//버튼이 클릭되었을 때 실행될 함수Function to be executed when the button is clicked.
	}
}, ...]

Object 형태Form

Code Block
languagejs
themeEmacs
buttonDef: {
	name: '버튼의 이름Name of the button', //버튼이 1개인 경우 없어도 됩니다. UI상 추가하기 위해 플러그인의 이름을 사용하면 됩니다It is not a requirement when there is only one button. Use the name of the plugin if you want to add it to UI.
	label: '버튼에 보여질 텍스트Text to be displayed on the button.',
	iconSVG: '버튼의 아이콘으로 사용될 SVG 태그SVG tag to be used as the icon of the button',
	onClickFunc: function () {
		//버튼이 클릭되었을 때 실행될 함수Function to be executed when the button is clicked.
	}
}


shortcutDefArray | Object

단축키를 추가하기 위한 shortcutDef입니다shortcutDef to add a shortcut.

  • 단축키 생성에 사용할 수 있는 KeyKey available for creating a shortcut.
    • Backspace
    • Tab
    • Enter
    • Esc
    • Space
    • PageUp
    • PageDown
    • End
    • Home
    • Left
    • Up
    • Right
    • Down
    • Insert
    • Delete
    • Cmd (맥용for mac)
    • 0~9
    • A~Z
    • F1~F12
    • ;
    • +
    • ,
    • -
    • .
    • /
    • `
    • [
    • \
    • ]
    • '
  • 단축키 생성 방법
  • +를 이용하면 연결하면 됩니다.
    • 예How to create a shortcut
    • You may connect multiple keys with +.
    • Ex)
      • 'Ctrl+A'
      • 'Cmd+Backspace'

Array 형태

Code Block
languagejs
themeEmacs
shortcutDef: [{
	key: {
		windows: '윈도우에서Shortcut 사용할for 단축키Windows',
		mac: '맥에서Shortcut 사용할for 단축키mac'
	},
	option: {
		action: '에디터Name of 액션Editor 이름action', 
		params: ['에디터Editor 액션action 파라미터parameter 1', ...],
		focusIme: true or false //단축키Focus onto 동작the 후Editor 에디터after 포커스executing 설정the 여부shortcut
	}
}, ...]

Object 형태

Code Block
languagejs
themeEmacs
shortcutDef: {
	key: {
		windows: '윈도우에서Shortcut 사용할for 단축키Windows',
		mac: '맥에서Shortcut 사용할for 단축키mac'
	},
	option: {
		action: '에디터Name of 액션Editor 이름action', 
		params: ['에디터Editor 액션action 파라미터parameter 1', ...],
		focusIme: true or false //단축키Focus onto 동작the 후Editor 에디터after 포커스executing 설정the 여부shortcut
	}
}

...


Exercise

Plugin to insert 'Hello World~'

...

PluginGenerator

...

Definition

Code Block
languagejs
themeEmacs
title./plugins/helloWorldInserter.js
var pluginName = "helloWorldInserter";
var pluginGenerator = function(editor) {
    return {
        buttonDef: {
            label: 'Hello World Inserter',
            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">HW</text>
                        </g>
                 </svg>`,
            onClickFunc: function () {
                editor.execCommand('insertText', 'Hello World~');
            }
        }
    };
};
 
SynapEditor.addPlugin(pluginName, pluginGenerator);

...

Loading Written Plugin

Code Block
languagexml
themeEmacs
titleindex.html
<!-- synapeditor plugin -->
<script type="text/javascript" src="./plugins/helloWorldInserter.js"></script>

...

Adding Plugin Button to Toolbar in the Editor

Code Block
languagejs
themeEmacs
title./synapeditor.config.js
"editor.toolbar": ["bold", "italic", "underline", "strike", "helloWorldInserter"] //Add helloWorldInserter 플러그인을plugin 툴바to 영역에the 설정합니다toolbar.

...

Result