...
...
API
SynapEditor.addPlugin(pluginName, pluginGenerator)
Add plugin to SynapEditor.
Params:
Name | Type | Description |
---|
pluginName | string | Name of plugin. |
pluginGenerator | function | Function to generate plugin object. |
Example:
Code Block |
---|
|
var pluginName = "pluginName";
var pluginGenerator = function (editor) {
//Returns plugin object.
return {
//...
};
};
SynapEditor.addPlugin(pluginName, pluginGenerator); |
...
Preference | Type | Description | Preference Definition |
---|
buttonDef | Array | Object | buttonDef to add button to toolbar or menu. | Array Form Code Block |
---|
| buttonDef: [{
name: 'Name of the button', //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 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 |
---|
| buttonDef: {
name: 'Name of the button', //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 tag to be used as the icon of the button',
onClickFunc: function () {
//Function to be executed when the button is clicked.
}
} |
|
shortcutDef | Array | Object | shortcutDef to add a shortcut. - Key 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)
| Array 형태 Code Block |
---|
| 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 |
---|
| 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 |
---|
language | js |
---|
theme | Emacs |
---|
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
...
Created Plugin
Code Block |
---|
language | xml |
---|
theme | Emacs |
---|
title | index.html |
---|
|
<!-- synapeditor plugin -->
<script type="text/javascript" src="./plugins/helloWorldInserter.js"></script> |
Code Block |
---|
language | js |
---|
theme | Emacs |
---|
title | ./synapeditor.config.js |
---|
|
"editor.toolbar": ["bold", "italic", "underline", "strike", "helloWorldInserter"] //Add helloWorldInserter plugin to the toolbar. |
Result