RichTextEditor Demo
Home Pricing

## Code Snippets

This example shows you how to create a custom code snippets dropdown that allows you add predefined code snippets into the current selection.

Hello world!

### Demo Code:

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

    const editor = await createRichTextEditor("#div_editor2", {
      toolbar: "mytoolbar",
      toolbar_mytoolbar:
        "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|mydropdown" +
        "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}",
      subtoolbar_mymenu: "inserttable,insertimage,insertcode",
      toolbarfactory_mydropdown(cmd: string, suffix: string) {
        const editorRef = this;
        const option: any = {};
        let inp: HTMLElement;
        option.fillinput = (input: HTMLElement) => {
          inp = input;
          inp.innerText = "Code Snippets";
          inp.style.overflowX = "hidden";
        };
        option.fillpanel = (panel: HTMLElement) => {
          panel.style.padding = "8px";
          function createItem(name: string, code: string) {
            const div = panel.appendChild(document.createElement("div"));
            div.className = "code-snippet-item";
            div.innerText = name;
            div.onclick = () => editorRef.insertHTML(code);
          }
          createItem("Welcome", "<b>Welcome to our website.</b>");
          createItem("Copyright", "<b>Copyright (c) MyCompany. All right reversed.</b>");
        };
        return editorRef.createToolbarDropDown(option, cmd, suffix);
      },
    }, {
      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_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;//Use this, maybe editor2 variable is not ready yet.
    		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>