Examples

Example code

<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_editor2">
    <p>Hello world!</p>
    <p><img src='/images/editor-image.png' /></p>
</div>

<style>
    .code-snippet-item { padding: 5px; }
    .code-snippet-item:hover { background-color: #b6ff00; }
</style>
<script>
    var editor2cfg = {}

    editor2cfg.toolbarfactory_mydropdown = function (cmd, suffix) {
        var editor = this;
        var option = {};
        var inp;
        option.fillinput = function (input) {
            inp = input;
            inp.innerText = "Code Snippets";
            inp.style.overflowX = "hidden"
        }
        option.fillpanel = function (panel) {
            panel.style.padding = '8px'

            function CreateItem(name, code) {
                var div = panel.appendChild(document.createElement("div"));
                div.className = "code-snippet-item";
                div.innerText = name;
                div.onclick = function () {
                    editor.insertHTML(code);
                }
            }

            CreateItem("Welcome", "<b>Welcome to our website.</b>");
            CreateItem("Copyright", "<b>Copyright (c) MyCompany. All right reversed.</b>");
        }

        var btn = editor.createToolbarDropDown(option, cmd, suffix)
        return btn;
    }
    editor2cfg.toolbar = "mytoolbar";
    editor2cfg.toolbar_mytoolbar = "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|mydropdown"
        + "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}";
    editor2cfg.subtoolbar_mymenu = 'inserttable,insertimage,insertcode';

    var editor2 = new RichTextEditor("#div_editor2", editor2cfg);
</script>