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

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_editor1" class="mb-5">
    <p>Rounded Corner Theme</p>
</div>

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

<div id="div_editor2" class="mb-5">
    <p>Gray Theme</p>
</div>

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

<div id="div_editor3" class="mb-5">
    <p>Blue Theme</p>
</div>

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

<style>
    .purple_editor {
        background-color: #b19cd9 !important;
        border-color: #8470a8 !important;
    }
</style>
<div id="div_editor4" class="richtexteditor purple_editor mb-5">
    <p>Create a purple theme using css</p>
</div>
<script>
    var editor4 = new RichTextEditor(document.getElementById("div_editor4"), { toolbar: "basic" });
</script>