Examples

Demo Code:

<div id="div_editor1">
	<p>This example demonstrates how to create a custom button.</p>
</div>

<script>
	var editor1cfg = {}
	editor1cfg.svgCode_mybutton = '<svg viewBox="-2 -2 20 20" fill="#5F6368" style="width: 100%; height: 100%;"><path fill-rule="evenodd" d="M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z" clip-rule="evenodd"></path></svg>';
	editor1cfg.toolbar = "mytoolbar";
	editor1cfg.toolbar_mytoolbar = "{bold,italic}|{forecolor,backcolor}|removeformat|mybutton"
		+ "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}";
	var editor1 = new RichTextEditor("#div_editor1", editor1cfg);
	editor1.attachEvent("exec_command_mybutton", function (state, cmd, value) {
		state.returnValue = true;//set it has been handled
		console.log("my button clicked");

		var p = editor1.insertRootParagraph("p");
		p.innerHTML = "You clicked mybutton";
		alert(p.innerHTML);
	});
</script>

Added the mybutton_b button - custom style

Demo Code:

<div id="div_editor2">
</div>

<script>
	var editor2cfg = {}
	//define toolbarfactory_btnname to create your self button
	editor2cfg.toolbarfactory_mybutton_b = function (cmd, suffix) {
		var btn = document.createElement("button");
		btn.innerHTML = "button_b"
		btn.className = "btn btn-primary";
		btn.style.cssText = "height:32px;margin:2px;padding:0px 5px";
		btn.onclick = function () {
			console.log("my button clicked");
			var p = editor2.insertRootParagraph("p");
			p.innerHTML = "You clicked mybutton_b";
			alert(p.innerHTML);
			return false;
		}
		return btn;
	}
	editor2cfg.toolbar = "mytoolbar";
	editor2cfg.toolbar_mytoolbar = "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|mybutton_b"
		+ "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}";
	var editor2 = new RichTextEditor("#div_editor2", editor2cfg);

</script>

Relative Links

• Use JavaScript API