This example shows how to add a button on the toolbar. Just click on any block to see the button. See more about Button API.
<!DOCTYPE html>
<html>
<head>
<title>Redactor X</title>
<meta charset="utf-8">
<!-- css -->
<link rel="stylesheet" href="/your-dist-path/redactorx.min.css" />
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
</head>
<body>
<!-- element -->
<textarea id="entry">
<p>Content</p>
</textarea>
<!-- js -->
<script src="/your-dist-path/redactorx.min.js"></script>
<!-- call -->
<script>
// Create a plugin
RedactorX.add('plugin', 'myplugin', {
start: function() {
this.app.toolbar.add('mybutton', {
title: 'My Button',
icon: '<i class="fa fa-superpowers"></i>',
command: 'myplugin.toggle'
});
},
toggle: function(params, button) {
alert('Button Toggle');
}
});
// Call with plugin
RedactorX('#entry', {
plugins: ['myplugin']
});
</script>
</body>
</html>In the example, the button is added as HTML, you can also add it as svg:
this.app.toolbar.add('mybutton', {
title: 'My Button',
icon: '<svg>...</svg>',
command: 'myplugin.toggle'
});