Page tree
Skip to end of metadata
Go to start of metadata

릴리즈 2.4.0 이상


기본 설정 (공통)

Key

Type

Description
nameString

버튼의 이름을 설정합니다.

설정한 버튼의 이름은 'editor.toolbar', 'editor.balloon' 등의 옵션에 버튼을 등록할 때 사용되기 때문에 버튼의 이름은 고유해야 합니다.

버튼의 이름을 설정하지 않은 경우 플러그인 이름이 버튼의 이름으로 자동으로 설정되기 때문에 

하나의 플러그인에 하나의 버튼만 정의하는 경우에는 꼭 설정하지 않아도 되지만, 

버튼을 여러개 정의하는 경우에는 각각의 버튼에 맞는 고유한 이름을 반드시 설정해주어야 합니다. 

{
	name: 'buttonName'
}
labelString

버튼의 레이블입니다. 툴팁으로 보여집니다.

{
	label: '버튼 레이블'
}

typeString

릴리즈 2.7.0 이상

버튼의 타입입니다.
'button' 또는 'dropdown' 을 설정해 버튼의 종류를 지정할 수 있습니다. (기본값: 'button')

{
	type: 'button'
}
// 또는
{
	type: 'dropdown'
}
iconSVGString

버튼에 보여질 아이콘의 SVG 태그 또는 IMG 태그 입니다. 

{
	iconSVG: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">....</svg>'
}
// 또는
{
	iconSVG: '<img src="data:image/png;base64,......">'
}
iconNameString

버튼에 보여질 아이콘의 이름입니다.
iconSVG 옵션이 설정되어있지 않으면 버튼의 아이콘이 에디터에 등록되어있는 아이콘들 중에서 iconName과 동일한 이름을 가진 아이콘으로 설정됩니다.

{
	iconName: 'bold'
}


버튼 정의하기

Key

Type

Description
onClickFuncFunction

버튼을 클릭했을 때 수행할 동작입니다.

{
	onClickFunc: function (event) {
		// 수행할 동작
	}
}



드롭다운 버튼 정의하기

릴리즈 2.7.0 이상

Key

Type

Description
onClickFuncFunction

드롭다운을 클릭했을 때 수행할 동작입니다. 드롭다운이 스플릿 버튼인 경우(isSingle: false) 첫번째 버튼을 클릭했을 때 동작합니다.

{
	onClickFunc: function (event) {
		// 수행할 동작
	}
}
isSingle: trueisSingle: false
isSingleBoolean

드롭다운을 싱글버튼으로 할 것인지 스플릿 버튼으로 할 것인지 여부를 설정합니다. (기본값: true)

{
	isSingle: true
}
isSingle: trueisSingle: false
useIconBoolean

드롭다운을 아이콘 버튼으로 할 것인지 텍스트 버튼으로 할 것인지 여부입니다. (기본값: false)

{
	useIcon: false
}
useIcon: trueuseIcon: false
dropdownItemsObject[]

드롭다운의 아이템 목록을 설정합니다.

{
	dropdownItems: [
		{ label: '아이템1' },
		{ label: '아이템2' },
		{ label: '아이템3' }
	]
}

드롭다운 아이템 (dropdownItems)

KeyTypeDescription
labelString

드롭다운 아이템 레이블입니다.

{
	dropdownItems: [
		{
			label: '아이템'
		}
	]
}

onClickFuncFunction

드롭다운 아이템을 클릭했을 때 수행할 동작입니다.

{
	dropdownItems: [
		{
			label: '아이템',
			onClickFunc: function () {
				// 수행할 동작
			}
		}
	]
}

cssTextString

드롭다운 아이템을 표현할 CSS 텍스트입니다.

{
	dropdownItems: [
		{
			label: '아이템1',
			cssText: 'font-size: 20px; color: orange;'
		},
		{
			label: '아이템2',
			cssText: 'font-size: 15px; color: red;'
		}
	]
}

  • No labels