Richtext Editor
How to customize the HTML editor toolbar.
Source code
<html> <script src="https://jsuites.net/v4/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" /> <div id="editor1"></div> <p><input type='button' value='Get data' onclick='alert(editor.getData())'></p> <script> jSuites.editor(document.getElementById('editor'), { allowToolbar: true, value: '<b>This is a basic example...</b>', toolbar: [{ content: 'undo', onclick: function() { document.execCommand('undo'); } }, { content: 'redo', onclick: function() { document.execCommand('redo'); } }, { type:'divisor' },{ type:'select', width: '160px', options: [ 'Verdana', 'Arial', 'Courier New' ], render: function(e) { return '<span style="font-family:' + e + '">' + e + '</span>'; }, onchange: function(a,b,c,d) { document.execCommand('fontName', false, d); } }, { type: 'select', width: '48px', content: 'format_size', options: ['X-small','Small','Medium','Large','X-large'], render: function(e) { return '<span style="font-size:' + e + '">' + e + '</span>'; }, onchange: function(a,b,c,d,e) { document.execCommand('fontSize', false, e+1); } }, { type: 'select', width: '50px', options: ['format_align_left','format_align_center','format_align_right','format_align_justify'], render: function(e) { return '<i class="material-icons">' + e + '</i>'; }, onchange: function(a,b,c,d) { if (d == 'format_align_left') { document.execCommand('justifyLeft'); } else if (d == 'format_align_center') { document.execCommand('justifyCenter'); } else if (d == 'format_align_right') { document.execCommand('justifyRight'); } else if (d == 'format_align_justify') { document.execCommand('justifyFull'); } } } ] }); </script> </html>