RichTextEditor Demo
Home Pricing

## Skinning Editor

RichTextEditor skinning is done via CSS (rte_theme_default.css). Rich Text Editor provides several built-in skins that are ready to use. You can choose from several predefined skins or create your own.

​​​​​​​Rounded Corner Theme

​​​​​​​Gray Theme

​​​​​​​Blue Theme

Create a purple theme using css

### Demo Code:

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

    const opts = { basePath: "/richtexteditor" };

    const editor1 = await createRichTextEditor("#div_editor1", {
      skin: "rounded-corner",
      toolbar: "basic",
    }, opts);

    const editor2 = await createRichTextEditor("#div_editor2", {
      skin: "gray",
      toolbar: "basic",
    }, opts);

    const editor3 = await createRichTextEditor("#div_editor3", {
      skin: "blue",
      toolbar: "basic",
    }, opts);

    const editor4 = await createRichTextEditor("#div_editor4", {
      toolbar: "basic",
    }, opts);

    <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>​​​​​​​Rounded Corner Theme</p>
    </div>

    <script>
    	var editor1 = new RichTextEditor("#div_editor1", { skin: "rounded-corner", toolbar: "basic" });
    </script>
    <br />
    <br />

    <div id="div_editor2">
    	<p>​​​​​​​Gray Theme</p>
    </div>

    <script>
    	var editor2 = new RichTextEditor("#div_editor2", { skin: "gray", toolbar: "basic" });
    </script>
    <br />
    <br />

    <div id="div_editor3">
    	<p>​​​​​​​Blue Theme</p>
    </div>

    <script>
    	var editor3 = new RichTextEditor(document.getElementById("div_editor3"), { skin: "blue", toolbar: "basic" });
    </script>
    <br />
    <br />

    <style>
    	.purple_editor {
    		background-color: #b19cd9 !important;
    		border-color: #8470a8 !important;
    	}

    		.purple_editor rte-toolbar {
    			background-color: #b19cd9 !important;
    		}

    		.purple_editor rte-bottom {
    			background-color: #b19cd9 !important;
    		}

    		.purple_editor rte-dialog-inner {
    			background-color: #b19cd9 !important;
    		}

    		.purple_editor rte-line-spliter {
    			background-color: #b19cd9 !important;
    		}

    		.purple_editor rte-dialog-header {
    		}
    </style>
    <div id="div_editor4" class="richtexteditor purple_editor">
    	<p>Create a purple theme using css</p>
    </div>
    <script>
    	var editor4 = new RichTextEditor(document.getElementById("div_editor4"), { toolbar: "basic" });
    </script>