Add custom dropDown
RichTextEditor lets you extend the editor with custom dropdown controls. This example shows how to add a new dropdown to the toolbar.
Menu drop down
This example shows how to add a custom dropdown to the toolbar.
Example code
<div id="div_editor1">
<p>This example shows how to add a custom dropdown to the toolbar.</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>Panel drop down
This example also shows how to create a panel-based dropdown.
Example code
<div id="div_editor2">
<p>This example also shows how to create a panel-based 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 = "ls-cta";
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>Select drop down
Example code
<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>