포토 에디터

2.4.0 버전부터 지원합니다.

TOAST UI에서 제공하는 Image Editor를 사용하여 Synap Editor에서 이미지 편집을 가능하게 하는 플러그인입니다.

사용 방법

플러그인 파일 불러오기

<!-- The SynapEditor object must exist for this to take effect,
     so include after the editor script files. -->
<script src="url of tuiImageEditor.min.js"></script>
<link rel="stylesheet" href="url of tuiImageEditor.min.css">

UI

플러그인 이름 'tuiImageEditor'를 사용하여 툴바 영역이나 메뉴 영역에 버튼을 추가할 수 있습니다.

툴바에 추가

// Editor configuration
//...
'editor.toolbar': [
    //...,
    'tuiImageEditor',
    //...
],
// ...

이미지 풍선팝업에 추가

// Editor configuration
//...
'editor.balloon': {
    //...
    'image': [
        //...
        'tuiImageEditor',
        //...
    ],
    //...
}
//...

메뉴에 추가

// Editor configuration
//...
'editor.menu.definition': {
    //...,
    'tools': [
        //...,
        'tuiImageEditor',
        //...
    ],
    //...
},
//...

플러그인 구성

메뉴 위치 설정

2.18.2409 버전부터 지원, 3.0.2409 버전부터 지원합니다.

이미지 에디터의 메뉴가 나타날 위치를 설정합니다.

// synapeditor.config.js
//...
'tuiImageEditor.config': {
    'menuBarPosition': 'bottom'  // 'left', 'right', default value: 'bottom'
}
// ...

menuBarPosition: 'bottom' (기본값)	menuBarPosition: 'left'	menuBarPosition: 'right'