사용자 정의 플러그인 작성

2.4.0 버전부터 지원합니다.

API

SynapEditor.addPlugin(pluginName, pluginGenerator)

Synap Editor에 플러그인을 추가합니다.

매개변수

이름타입설명
pluginNamestring플러그인의 이름입니다.
pluginGenerator함수플러그인 객체를 생성하는 함수입니다.

예시

var pluginName = "pluginName";
var pluginGenerator = function (editor) {
    // Returns the plugin object.
    return {
        // ...
    };
};
SynapEditor.addPlugin(pluginName, pluginGenerator); // Add the plugin. Must be added before creating the SynapEditor.

// ...
new SynapEditor(editorId, synapEditorconfig, ...); // Create the editor

플러그인 객체 Shape

속성타입설명속성 정의
buttonDefArray | Object툴바 영역 또는 메뉴 영역에 버튼을 추가하기 위한 버튼 정의를 설정합니다. 자세한 내용은 다음 문서를 참고합니다: buttonDef아래 buttonDef 참고.
shortcutDefArray | Object단축키를 추가하기 위한 정의를 설정합니다. 자세한 내용은 다음 문서를 참고합니다: shortcutDef아래 shortcutDef 참고.
dialogsCustomDialog[]2.9.0 버전부터 지원합니다.플러그인 다이얼로그를 등록합니다. 자세한 내용은 다음 문서를 참고합니다: dialogs—

buttonDef

Array form

buttonDef: [{
    name: 'button name',         // Required when there are 2 or more buttons. Used as the key when adding to the UI.
    label: 'button text',
    iconSVG: 'SVG tag to use as the button icon',
    onClickFunc: function () {
        // Function executed when the button is clicked
    }
}, ...]

Object form

buttonDef: {
    name: 'button name',         // Optional when there is only 1 button. If not set, the plugin name is used automatically. When set, the button is added to the UI using the configured button name.
    label: 'button text',
    iconSVG: 'SVG tag to use as the button icon',
    onClickFunc: function () {
        // Function executed when the button is clicked
    }
}

shortcutDef

Array form

shortcutDef: [{
    key: {
        windows: 'Windows shortcut',
        mac: 'Mac shortcut'
    },
    option: {
        action: 'editor action name',
        params: ['editor action parameter 1', ...],
        focusIme: true or false   // Whether to set editor focus after the shortcut action
    }
}, ...]

Object form

shortcutDef: {
    key: {
        windows: 'Windows shortcut',
        mac: 'Mac shortcut'
    },
    option: {
        action: 'editor action name',
        params: ['editor action parameter 1', ...],
        focusIme: true or false   // Whether to set editor focus after the shortcut action
    }
}

예시

에디터에 'Hello World~'를 삽입하는 플러그인

PluginGenerator 정의

./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); // Add before creating the editor

// ...
new SynapEditor(editorId, synapEditorconfig, ...); // Create the editor

작성한 플러그인 불러오기

./index.html

<!-- synapeditor plugin -->
<script type="text/javascript" src="./plugins/helloWorldInserter.js"></script>

플러그인 버튼을 에디터 툴바 영역에 추가하기

./synapeditor.config.js

"editor.toolbar": ["bold", "italic", "underline", "strike", "helloWorldInserter"] // Add the helloWorldInserter plugin to the toolbar area.

결과

1.00

하위 문서