How can I help you?
Custom Toolbar Items in the ASP.NET CORE Rich Text Editor Control
29 Apr 202516 minutes to read
To quickly get started with the ASP.NET Core Rich Text Editor with a custom toolbar, watch this video:
The Rich Text Editor allows you to configure your own commands to its toolbar using the toolbarSettings property. The command can be plain text, icon, or HTML template. The order and the group can also be defined where the command should be included. Bind the action to the command by getting its instance.
This sample shows how to add your own commands to the toolbar of the Rich Text Editor. The “Ω” command is added to insert special characters in the editor. By clicking the “Ω” command, it will show the special characters list, and then choose the character to be inserted in the editor.
The following code snippet illustrates custom tool with tooltip text which will be included in items field of the toolbarSettings property.
var tools = new {
tooltipText = "Insert Symbol",
template = "<button class='e-tbar-btn e-btn' tabindex='-1' id='custom_tbar' style='width:100%'><div class='e-tbar-btn-text rtecustomtool' style='font-weight: 500;'> Ω</div></button>"
};
ViewBag.items = new object[] { "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList",
"UnorderedList", "|", "CreateLink", "Image", "|", "SourceCode", tools
, "|", "Undo", "Redo"
};The Rich Text Editor provides options to customize tool functionalities. Use the undo property to enable or disable the undo function for specific tools. Additionally, the click property lets you configure and bind the onclick event of a tool to a specific method.
This sample demonstrates how to add a custom “Ω” icon to the toolbar. Clicking on this icon opens a dialog where you can insert special characters into the editor. It also shows how to enable undo and redo functionalities.
<div id="rteSection">
<ejs-richtexteditor id="customtool" created="created" value="@ViewBag.value">
<e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
</ejs-richtexteditor>
</div>
<ejs-dialog id="customTbarDialog" visible="false" header='Special Characters' created="onDialogCreate" zIndex="1000" showCloseIcon="false" isModal="true" cssClass='e-rte-elements' overlayClick="dialogOverlay">
<e-dialog-buttons>
<e-dialog-dialogbutton buttonModel="ViewBag.button" click="onInsert"></e-dialog-dialogbutton>
<e-dialog-dialogbutton buttonModel="ViewBag.button1" click="dialogOverlay"></e-dialog-dialogbutton>
</e-dialog-buttons>
<e-content-template>
<div id="rteSpecial_char">
<div class="char_block" title="^">^</div>
<div class="char_block" title="_">_</div>
<div class="char_block" title="`">`</div>
<div class="char_block" title="{">{</div>
<div class="char_block" title="|">|</div>
<div class="char_block" title="}">}</div>
<div class="char_block" title="~">~</div>
<div class="char_block" title=" "> </div>
<div class="char_block" title="¡">¡</div>
<div class="char_block" title="¢">¢</div>
<div class="char_block" title="£">£</div>
<div class="char_block" title="¤">¤</div>
<div class="char_block" title="¥">¥</div>
<div class="char_block" title="₹">₹</div>
<div class="char_block" title="¦">¦</div>
<div class="char_block" title="§">§</div>
<div class="char_block" title="¨">¨</div>
<div class="char_block" title="©">©</div>
<div class="char_block" title="ª">ª</div>
<div class="char_block" title="«">«</div>
<div class="char_block" title="¬">¬</div>
<div class="char_block" title="-">-</div>
<div class="char_block" title="®">®</div>
<div class="char_block" title="¯">¯</div>
<div class="char_block" title="°">°</div>
<div class="char_block" title="±">±</div>
<div class="char_block" title="²">²</div>
<div class="char_block" title="³">³</div>
<div class="char_block" title="´">´</div>
<div class="char_block" title="µ">µ</div>
<div class="char_block" title="¶">¶</div>
<div class="char_block" title="·">·</div>
<div class="char_block" title="¸">¸</div>
<div class="char_block" title="¹">¹</div>
<div class="char_block" title="º">º</div>
<div class="char_block" title="»">»</div>
<div class="char_block" title="¼">¼</div>
<div class="char_block" title="½">½</div>
<div class="char_block" title="¾">¾</div>
<div class="char_block" title="¿">¿</div>
<div class="char_block" title="À">À</div>
<div class="char_block" title="Á">Á</div>
<div class="char_block" title="Â">Â</div>
<div class="char_block" title="Ã">Ã</div>
</div>
</e-content-template>
</ejs-dialog>
<script>
var defaultRTE, selection, ranges, dialog;
function onDialogCreate() {
dialog = this;
dialog.element.style.maxHeight = '300px';
}
function onInsert() {
var activeEle = dialog.element.querySelector('.char_block.e-active');
if (defaultRTE.formatter.getUndoRedoStack().length === 0) {
defaultRTE.formatter.saveData();
}
defaultRTE.executeCommand('insertText', activeEle.textContent);
defaultRTE.formatter.saveData();
defaultRTE.formatter.enableUndo(defaultRTE);
dialogOverlay();
}
function dialogOverlay() {
var activeEle = dialog.element.querySelector('.char_block.e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
dialog.hide();
}
function created() {
defaultRTE = this;
selection = new ej.richtexteditor.NodeSelection();
var customBtn = defaultRTE.element.querySelector('#custom_tbar');
customBtn.onclick = function (e) {
dialog.element.style.display = '';
ranges = selection.getRange(document);
dialog.width = defaultRTE.element.offsetWidth * 0.5;
dialog.dataBind();
dialog.show();
var dialogCtn = document.getElementById('rteSpecial_char');
dialogCtn.onclick = function (e) {
var target = e.target;
var activeEle = dialog.element.querySelector('.char_block.e-active');
if (target.classList.contains('char_block')) {
target.classList.add('e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
}
};
customBtn.onclick = function (e) {
defaultRTE.focusIn();
dialog.element.style.display = '';
ranges = selection.getRange(document);
dialog.width = defaultRTE.element.offsetWidth * 0.5;
dialog.dataBind();
dialog.show();
};
};
}
</script>
<style>
#customTbarDialog #special_char,
#customTbarDialog .char_block {
display: inline-block;
}
#custom_tbar,
#custom_tbar div {
cursor: pointer;
}
#rteSpecial_char {
padding: 15px 0 15px 0;
}
#customTbarDialog .char_block.e-active {
outline: 1px solid #e3165b;
border-color: #e3165b;
}
#customTbarDialog .char_block {
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 5px 5px 0;
text-align: center;
vertical-align: middle;
border: 1px solid #DDDDDD;
font-size: 20px;
cursor: pointer;
user-select: none;
}
#custom_tbar .rtecustomtool {
font-size: 18px;
}
</style>public class HomeController : Controller
{
public ActionResult Index()
{
var tools = new
{
tooltipText = "Insert Symbol",
template = "<button class='e-tbar-btn e-btn' tabindex='-1' id='custom_tbar' style='width:100%'><div class='e-tbar-btn-text rtecustomtool' style='font-weight: 500;'> Ω</div></button>"
};
ViewBag.items = new object[] { "Bold", "Italic", "Underline", "|", "Formats", "Alignments", "OrderedList",
"UnorderedList", "|", "CreateLink", "Image", "CreateTable", "|", "SourceCode", tools
, "|", "Undo", "Redo"
};
ViewBag.button = new
{
content = "Insert",
isPrimary = true
};
ViewBag.button1 = new
{
content = "Cancel"
};
ViewBag.value= @"<p>
The custom command 'insert special character' is configured as the last item of the toolbar.
Click on the command and choose the special character you want to include from the popup.
</p>";
return View();
}
}When rendering any control for the custom toolbar, like a dropdown, the focus may be lost, causing it to render outside the Rich Text Editor and triggering a blur event. This can interfere with proper functionalities like cursor focus. To prevent this issue, it is recommended to assign the
e-rte-elementsclass to the control rendered in the custom toolbar.
Enabling and disabling toolbar items
You can use the enableToolbarItem and disableToolbarItem methods to control the state of toolbar items. This methods takes a single item or an array of items as parameter.
You can add the command name
Customto disable the custom toolbar items on source code view and other quick toolbar operations.