It is very easy to customize the layout of the toolbars in RichTextEditor. You can add or remove buttons, and change their placement. Beyond this, you may also add your own tools to the toolbar, create your own toolbars, or create custom icons for your toolbar!
This example demonstrates how to create a custom toolbar.
import { createRichTextEditor, type RichTextEditorOptions } from "ts-rich-text-editor";
const config: RichTextEditorOptions = {
toolbar: "mytoolbar",
toolbar_mytoolbar: "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat"
+ "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}",
};
const editor = await createRichTextEditor("#div_editor1", config, {
basePath: "/richtexteditor",
});
<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script type="text/javascript" src="/richtexteditor/rte.js"></script>
<script type="text/javascript" src='/richtexteditor/plugins/all_plugins.js'></script>
<div id="div_editor1">
<p>This example demonstrates how to create a custom toolbar.</p>
</div>
<script>
var editor1cfg = {}
editor1cfg.toolbar = "mytoolbar";
editor1cfg.toolbar_mytoolbar = "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat"
+ "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}";
var editor1 = new RichTextEditor("#div_editor1", editor1cfg);
</script>