RichTextEditor Demo
Home Pricing

### Custom Toolbar

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.

### Demo Code:

    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>

### Relative Links

- Use JavaScript API