RichTextEditor Demo
Home Pricing

### Add custom dialog

Rich Text Editor allows you extend the functions of the editor. You can create new custom dialogs and add them to the editor's toolbar list.

This example demonstrates how to create a custom dialog.

### Demo Code:

    import { createRichTextEditor, type RichTextEditorOptions } from "ts-rich-text-editor";

    const svgIcon = '<svg viewBox="-2 -2 20 20" fill="#5F6368"><path d="M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z"></path></svg>';

    const config: RichTextEditorOptions = {
      svgCode_mydialog_a: svgIcon,
      toolbar: "mytoolbar",
      toolbar_mytoolbar: "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|mydialog_a"
        + "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}",
    };

    const editor = await createRichTextEditor("#div_editor1", config, {
      basePath: "/richtexteditor",
    });

    // Handle custom dialog command with typed parameters
    editor.instance.attachEvent("exec_command_mydialog_a", function (
      state: { returnValue: boolean },
      cmd: string,
      value: any
    ) {
      state.returnValue = true;
      const editorRef = this;
      const dialoginner = editorRef.createDialog("Insert Paragraph", "rte-dialog-insertcode");
      // ... build dialog UI and handle insert
    });

    <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 dialog.</p>
    </div>

    <script>
    	var editor1cfg = {}
    	editor1cfg.svgCode_mydialog_a = '<svg viewBox="-2 -2 20 20" fill="#5F6368" style="width: 100%; height: 100%;"><path fill-rule="evenodd" d="M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z" clip-rule="evenodd"></path></svg>';
    	editor1cfg.toolbar = "mytoolbar";
    	editor1cfg.toolbar_mytoolbar = "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|mydialog_a"
    		+ "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}";
    	var editor1 = new RichTextEditor("#div_editor1", editor1cfg);

    	editor1.attachEvent("exec_command_mydialog_a", function (state, cmd, value) {
    		state.returnValue = true;//set it has been handled
    		console.log("my button clicked");

    		var editor = this;

    		var dialoginner = editor.createDialog("Insert Paragraph", "rte-dialog-insertcode");

    		var div1 = __Append(dialoginner, "div", "position:relative;text-align:center;");
    		var textarea = __Append(div1, "textarea", "width:300px;height:200px")

    		var divfooter = __Append(dialoginner, "rte-dialog-footer", null, "rte-dialog-footer-center");

    		var btn = __Append(divfooter, "rte-dialog-button")
    		btn.innerText = "Insert";

    		setTimeout(function () {
    			textarea.focus();
    		}, 300);

    		btn.onclick = function () {
    			if (!textarea.value.trim())
    				return;

    			dialoginner.close();

    			editor.selectDoc(false);

    			var p = editor.insertRootParagraph()
    			var ctag = __Append(p, "p");
    			ctag.style.cssText = 'margin:12px;padding:12px;border:dashed 1px gray;';
    			ctag.innerText = textarea.value;
    			editor.focus();

    			editor.selectDoc(false);
    		}

    	});

    	function __Append(parent, tagname, csstext, cssclass) {
    		var tag = parent.ownerDocument.createElement(tagname);
    		if (csstext) tag.style.cssText = csstext;
    		if (cssclass) tag.className = cssclass;
    		parent.appendChild(tag);
    		return tag;
    	}
    </script>

### Relative Links

- Use JavaScript API
- attachEvent
- createDialog