RELEASE 2.4.0 OR ABOVE
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:
var pluginName = "pluginName";
var pluginGenerator = function (editor) {
//Returns plugin object.
return {
//...
};
};
SynapEditor.addPlugin(pluginName, pluginGenerator);
Forms of Plugin Object
| Preference | Type | Description | Preference Definition |
|---|---|---|---|
| buttonDef | Array | Object | buttonDef to add button to toolbar or menu. | Array Form 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 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.
| Array Form 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 Form 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
./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
index.html
<!-- synapeditor plugin --> <script type="text/javascript" src="./plugins/helloWorldInserter.js"></script>
Adding Plugin Button to Toolbar in the Editor
./synapeditor.config.js
"editor.toolbar": ["bold", "italic", "underline", "strike", "helloWorldInserter"] //Add helloWorldInserter plugin to the toolbar.
Result
