Rich Text Editor allows you extend the functions of the editor. You can create new custom dropDowns and add them to the editor's toolbar list.
This example demonstrates how to create a custom dropDown.
import { createRichTextEditor, type RichTextEditorOptions } from "ts-rich-text-editor";
const svgIcon = '<svg viewBox="-2 -2 20 20" fill="#5F6368"><path d="M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z"></path></svg>';
const config: RichTextEditorOptions = {
svgCode_menu_mymenu: svgIcon,
toolbar: "mytoolbar",
toolbar_mytoolbar: "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|menu_mymenu"
+ "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}",
subtoolbar_mymenu: "inserttable,insertimage,insertcode",
};
const editor = await createRichTextEditor("#div_editor1", config, {
basePath: "/richtexteditor",
});
<div id="div_editor1">
<p>This example demonstrates how to create a custom dropDown.</p>
</div>
<script>
var editor1cfg = {}
editor1cfg.svgCode_menu_mymenu = '<svg viewBox="-2 -2 20 20" fill="#5F6368" style="width: 100%; height: 100%;"><path fill-rule="evenodd" d="M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z" clip-rule="evenodd"></path></svg>';
editor1cfg.toolbar = "mytoolbar";
editor1cfg.toolbar_mytoolbar = "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|menu_mymenu"
+ "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}";
editor1cfg.subtoolbar_mymenu = 'inserttable,insertimage,insertcode';
var editor1 = new RichTextEditor("#div_editor1", editor1cfg);
</script>
This example demonstrates how to create a panel dropDown.
import { createRichTextEditor, type RichTextEditorOptions } from "ts-rich-text-editor";
const config: RichTextEditorOptions = {
toolbarfactory_mydropdown: function (cmd: string, suffix: string) {
const editor = this;
const option: any = {};
let inp: HTMLElement;
option.fillinput = (input: HTMLElement) => {
inp = input;
inp.innerText = "MyDropDown";
inp.style.overflowX = "hidden";
};
option.fillpanel = (panel: HTMLElement) => {
panel.style.padding = "8px";
panel.innerHTML = "Hello<br/>World<br/>Gogo<br/>";
const btn = document.createElement("button");
btn.innerHTML = "button_b";
btn.className = "btn btn-primary";
btn.onclick = () => {
editor.closeCurrentPopup();
return false;
};
panel.appendChild(btn);
};
return editor.createToolbarDropDown(option, cmd, suffix);
},
toolbar: "mytoolbar",
toolbar_mytoolbar: "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|mydropdown"
+ "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}",
};
const editor = await createRichTextEditor("#div_editor2", config, {
basePath: "/richtexteditor",
});
<div id="div_editor2">
<p>This example demonstrates how to create a panel dropDown.</p>
</div>
<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 = "MyDropDown";
inp.style.overflowX = "hidden"
}
option.fillpanel = function (panel) {
panel.style.padding = '8px'
panel.innerHTML = "Hello<br/>World<br/>Gogo<br/>";
var btn = document.createElement("button");
btn.innerHTML = "button_b"
btn.className = "btn btn-primary";
btn.style.cssText = "height:32px;margin:2px;padding:0px 5px";
btn.onclick = function () {
editor.closeCurrentPopup();
console.log("my button clicked");
var p = editor2.insertRootParagraph("p");
p.innerHTML = "You clicked mybutton_b";
alert(p.innerHTML);
return false;
}
panel.appendChild(btn)
}
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>
import { createRichTextEditor, type RichTextEditorOptions } from "ts-rich-text-editor";
const config: RichTextEditorOptions = {
toolbarfactory_myselect: function (cmd: string, suffix: string) {
const sel = document.createElement("select");
sel.style.cssText = "height:32px;margin:2px;padding:0px 5px";
function addOption(text: string, value?: string) {
const option = document.createElement("option");
option.innerText = text;
if (value) option.setAttribute("value", value);
(option as any).rawValue = value;
sel.appendChild(option);
}
addOption("Select an item...");
addOption("Red title", "red");
addOption("Blue content", "blue");
sel.onclick = (e: MouseEvent) => e.stopPropagation();
sel.onchange = () => {
const option = sel.options[sel.selectedIndex] as any;
const val = option.rawValue;
sel.selectedIndex = 0;
editor.instance.insertHTML(
"<span style='color:" + val + "'>You selected " + val + "</span>"
);
};
return sel;
},
toolbar: "mytoolbar",
toolbar_mytoolbar: "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|myselect"
+ "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}",
};
const editor = await createRichTextEditor("#div_editor3", config, {
basePath: "/richtexteditor",
});
<h3>Select drop down </h3>
<div id="div_editor3"></div>
<script>
var editor3cfg = {}
editor3cfg.toolbarfactory_myselect = function (cmd, suffix) {
var sel = document.createElement("select");
sel.style.cssText = "height:32px;margin:2px;padding:0px 5px";
function addOption(text, value) {
var option = document.createElement("option");
option.innerText = text;
option.setAttribute("value", value);
option.rawValue = value;
sel.appendChild(option);
}
addOption("Select an item...")
addOption("Red title", "red");
addOption("Blue content", "blue");
sel.onclick = function (e) {
//the select will get focus , editor will lost focus
e.stopPropagation();//prevent editor get focus automatically
}
sel.onchange = function () {
var option = sel.options[sel.selectedIndex];
var val = option.rawValue;
sel.selectedIndex = 0;
editor3.insertHTML("<span style='color:" + val + "'>You selected " + val + "</span>")
}
return sel;
}
editor3cfg.toolbar = "mytoolbar";
editor3cfg.toolbar_mytoolbar = "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|myselect"
+ "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}";
var editor3 = new RichTextEditor("#div_editor3", editor3cfg);
</script>