...

5 에디터 플러그인 

Anchor
plugins plugins

에디터에서 제공하는 플러그인을 사용하도록 설정하여 확장 기능을 사용할 수 있습니다.

플러그인을 작성하는 방법은 여기를 참고해주세요.

5.0 플러그인 적용하기

플러그인 파일 불러오기

html 파일에 플러그인 스크립트 파일을 불러오는 코드를 추가합니다.

<!-- 플러그인 파일을 불러오는 코드를 에디터 스크립트(synapeditor.min.js)보다 아래에 작성합니다 -->
<script src="../plugins/myPlugin/myPlugin.js"></script>

에디터에 설정하기

"editor.plugins" 설정에 플러그인의 이름을 추가하여 에디터에 플러그인을 사용하도록 설정합니다.

"editor.plugins": ["myPlugin"] // "myPlugin" 플러그인 사용 설정

플러그인 버튼 위치 설정하기

플러그인에서 기능에 대한 버튼을 제공하는 경우, 플러그인이 제공하는 버튼을 추가할 위치를 지정할 수 있습니다.

툴바의 맨 끝에 버튼 추가

"editor.plugins" 설정에 플러그인의 이름만 설정하면 툴바의 맨 끝에 버튼이 추가됩니다.

"editor.plugins": ["myPlugin"] // 툴바의 맨 끝에 추가

지정된 위치에 버튼 추가

"editor.plugins" 설정에 객체형식으로 name과 position을 설정하면 버튼을 추가할 위치를 지정할 수 있습니다.

"editor.plugins": [{
	name: "myPlugin", // 플러그인 이름
	position: {
		toolbar: 5  // 툴바의 5번째 위치(index)에 버튼 추가
	}
}]

position의 키로 올 수 있는 값은 다음과 같습니다.

• toolbar : 툴바
• textBalloon : 텍스트 선택시 나타나는 벌룬
• imageBalloon : 이미지 선택시 나타나는 벌룬
• videoBalloon : 비디오 선택시 나타나는 벌룬
• tableCellBalloon : 테이블 셀 선택시 나타나는 벌룬
• drawingObjectBalloon : DIV 선택시 나타나는 벌룬
• hyperlinkBalloon : 링크 선택시 나타나는 벌룬

position의 키에대한 값으로 올 수 있는 값은 정수로서 의미는 다음과 같습니다.

• -9999 : 맨 앞에 추가
• -1 : 뒤에서 첫번째 위치에 추가
• 0 : 맨 앞에 추가
• 1 : 앞에서 첫번째 위치에 추가
• 9999 : 맨 뒤에 추가

5.1 ToastUI 이미지 에디터 적용

...

// 플러그인 설정에 "tuiImageEditor" 추가
"editor.plugins": [{
    name: "tuiImageEditor",
    position: {
        imageBalloon: -1 // 이미지 벌룬의 -1 위치에 버튼 추가
    }
}],

6. 임포트 및 업로드 API 설정

환경설정 파일에 임포트 및 업로드 API 경로를 등록합니다.

...