Examples

Example code

<div id="div_editor1">
    <p>This example shows how to add a custom dialog to the toolbar.</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>

Related links

• Use JavaScript API
• attachEvent
• createDialog