사이냅 에디터 문서
Space shortcuts
Page tree
Skip to end of metadata
Go to start of metadata

릴리즈 2.6.0 이상

에디터에 아이콘 리소스를 추가합니다.

동일한 키의 아이콘이 있는 경우 덮어씁니다. 이를 활용하여 기존에 설정된 아이콘을 변경할 수 있습니다.


Parameters:

NameTypeDescription
iconResourcesObjectkey: 아이콘 이름, value: SVG 태그 또는 IMG 태그 형식의 string


Example:

var iconResources = {
	// IMG 태그 형식
	'image': '<img src="data:image/png;base64,iVBORw0KGgoAA.......BJRU5ErkJggg==">',

    // SVG 태그 형식 (SVG 태그의 Attribute로 width, height이 없어야 합니다)
	'bold': '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16"><rect y="6.062" width="16" height="4"/></svg>',
	......
};
 
SynapEditor.addIcons(iconResources);



체험하기

릴리즈 2.6.0 이상

사이냅 에디터에 커스텀 아이콘을 설정할 수 있습니다.


관련 API


커스텀 아이콘 설정하기

  • SynapEditor.addIcons(Object) API를 사용하여 커스텀한 아이콘을 추가합니다.
  • 기능의 이름을 키로 하는 객체에  <img> 또는 <svg> 태그 형태로 아이콘을 설정합니다.
    • 사용할 수 있는 기능 이름 목록은 툴바 설정에서 자세히 보실 수 있습니다.
  • (사이냅 에디터를 new 로 생성하기 이전에 설정되어야 합니다.)


<script>
		var customIcons = {
			'bold': '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAHdElNRQfjCgsALRGLLyYxAAAA+klEQVQoz23QsUpCARTG8d+VUKi5VSiiJbU3aRaxbHWpl8gKREvJcHPzKSICH6GrQ21RU0um1HKlhpua1n855/Cdw3f4mJLT0Dc2FrqUtUBK20SooqSkom+iJTWX77zJC2YHgYKhW8l4bHuTsUzOUCtuJvL+oyiSoSEUoKwzkzrKCAxc0HcC1m3PFratg1PhirRH8Op1tvDwUx+lE/z6fpnAV8KTLXCsahWsqToCW5641Bdgz6dnXV0vPuwhYaBOVqQANtX09NRsgAORHbg2lPvjv+tdcxr1raHiQtT73t1MoybpSmTgzKFD5wYizbkck3EhNDJyrx57wzdY0kmPqLwnIgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOS0xMC0xMVQwMDo0NToxNyswMDowMMdG+k0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTktMTAtMTFUMDA6NDU6MTcrMDA6MDC2G0LxAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg=="/>',
			'italic': '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 315 315"><polygon style="fill:#005ECE;" points="280,40 280,0 140,0 140,40 180.955,40 91.228,275 35,275 35,315 175,315 175,275   134.045,275 223.772,40 "/></svg>'
		};
		SynapEditor.addIcons(customIcons);  // 커스텀 아이콘 설정
 
		window.editor = new SynapEditor('synapEditor', synapEditorConfig);  // 설정 이후 사이냅에디터를 생성
</script>


  • No labels