Synap Editor Documentation
Page tree
Skip to end of metadata
Go to start of metadata

RELEASE 2.6.0 OR ABOVE

It adds an icon resource to be used in the editor.
If there is an icon with the same name, it is overwritten.


Parameters:

NameTypeDescription
iconResourcesObjectkey: Icon name (function name), value: Object in the svg tag or img tag format


Example:

var iconResources = {
	'image': '<img src="data:image/png;base64,iVBORw0KGgoAA.......BJRU5ErkJggg==">',
	'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);


Experiencing

RELEASE 2.6.0 OR ABOVE

You can set customized icons for Synap Editor.


Related API


Setting customized icons

  • Add customized icons using the SynapEditor.addIcons(Object) API.
  • Set the icons in the form of an <img> or <svg> tag on an object whose function name is a key.
    • You can check for a detailed list of names of the available functions in the toolbar settings.
  • (It should be set before creating Synap Editor as 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);  // Setting customized icons
 
		window.editor = new SynapEditor('synapEditor', synapEditorConfig);  // Create Synap Editor after setting.
</script>


  • No labels