demo.html

<!doctype html>
<head>
	<script src='htmlon.js'></script>
	<link type='text/css' href='htmlon.css' rel='stylesheet' />
	<style>
	body { margin: 2rem; }
	</style>
</head>
<body>
	<div></div>
	<script>
	document.addEventListener('DOMContentLoaded', function() {
		editor = new HTMLON({
			container: 'div',
			field: 'field',
			buttons: ['bold', 'italic', 'uList', 'oList', 'link', 'sup', 'quote', 'heading', 'codeB'],
			allow_html_edit: 1,
			css: [
				'blockquote { background: #f4f4f4; border: solid 1px #d5d5d5; padding: .75em; width: 80%; margin: 0 auto; border-left: solid 2px #E43137; }',
				'blockquote p { color: #777; }',
				'blockquote p:first-child { margin-top: 0; }',
				'blockquote p:last-child { margin-bottom: 0; }',
				'blockquote small { text-align: right; display: block; }'
			],
			extra_buttons: {
				foo: {
					text: 'FOO',
					hint: 'This is a hint',
					callback: function() {
						this.get_cntnt_doc().execCommand('insertHTML', 0, '<img src="https://guidecore.xyz/sub/wlpad/assets/imgs/graph-icon.png" />');
					}
				}
			}
		});
	}, false);
	</script>
</body>