Basic Example
This example contains the buttons needed for the most common use cases.
Hello world!
Demo Code:
import { createRichTextEditor } from "ts-rich-text-editor";
const editor = await createRichTextEditor("#div_editor1", {
toolbar: "basic",
}, {
basePath: "/richtexteditor",
});
<!--Include the JS & CSS-->
<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>Hello world!</p>
<p><img src='/images/editor-image.png' /></p>
</div>
<script>
var editor1cfg = {}
editor1cfg.toolbar = "basic";
var editor1 = new RichTextEditor("#div_editor1", editor1cfg);
</script>
Customize Editor
In this example, we use the following code to load editor instance.
var editor1cfg = {}
editor1cfg.toolbar = "basic";
var editor1 = new RichTextEditor("#div_editor1", editor1cfg);
Basic toolbar definition(RTE_DefaultConfig.toolbar_small) can be found in rte.js.
If you want to reorder toolbar buttons or remove some of them, check the following link.