External toolbar

This example shows how to make the toolbar separate from the editor in the specified element. By the way, this works for multiple editors as well.


<!-- toolbar -->
<div id="external-toolbar"></div>

<!-- element -->
<textarea id="entry">...</textarea>

<!-- call -->
let app = Redactor('#entry', {
    toolbar: {
        target: '#external-toolbar'



Use the sharedTarget setting to make all external toolbars running on the page are placed in a single target. In this case, the toolbar in the editor of which the focus is located will be shown.