Html Editor - Toolbar Customization

This demo shows how to add a custom control to the toolbar. The Show markup button opens a popup that displays the HtmlEditor’s output markup.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

@section ExternalDependencies { <script src="https://unpkg.com/devextreme-quill@1.7.1/dist/dx-quill.min.js"></script> } @functions { object GetInputAttr(string key, string value) { return new { inputAttr = new Dictionary<string, string>() { { key, value } } }; } } @(Html.DevExtreme().HtmlEditor() .ID("html_editor") .Value(new JS("markup")) .Toolbar(toolbar => toolbar.Items( items => { items.Add().Name(HtmlEditorToolbarItem.Undo); items.Add().Name(HtmlEditorToolbarItem.Redo); items.Add().Name(HtmlEditorToolbarItem.Separator); items.Add() .Name("header") .AcceptedValues(new JS("[false, 1, 2, 3, 4, 5]")) .Option("options", GetInputAttr("aria-label", "Header")); items.Add().Name(HtmlEditorToolbarItem.Separator); items.Add().Name(HtmlEditorToolbarItem.Bold); items.Add().Name(HtmlEditorToolbarItem.Italic); items.Add().Name(HtmlEditorToolbarItem.Strike); items.Add().Name(HtmlEditorToolbarItem.Underline); items.Add().Name(HtmlEditorToolbarItem.Separator); items.Add().Name(HtmlEditorToolbarItem.AlignLeft); items.Add().Name(HtmlEditorToolbarItem.AlignCenter); items.Add().Name(HtmlEditorToolbarItem.AlignRight); items.Add().Name(HtmlEditorToolbarItem.AlignJustify); items.Add().Name(HtmlEditorToolbarItem.Separator); items.Add() .Widget(widget => widget.Button() .Text("Show markup") .StylingMode(ButtonStylingMode.Text) .OnClick("showMarkup") ); }) ) ) @(Html.DevExtreme().Popup() .ID("popup") .ShowTitle(true) .Title("Markup") .ShowCloseButton(true) .OnShowing("popupShowing") .Content(@<text> <div class="value-content"></div> </text>) ) <script> function showMarkup() { var popupInstance = $("#popup").dxPopup("instance"); popupInstance.toggle(!popupInstance.option("visible")); } function popupShowing() { var editorInstance = $("#html_editor").dxHtmlEditor("instance"); $(".value-content").text(editorInstance.option("value")); } var markup = ` <h2> <img src="../../Content/images/widgets/HtmlEditor.svg" alt="HtmlEditor" /> Formatted Text Editor (HTML Editor) </h2> <br> <p> DevExtreme JavaScript HTML Editor is a client-side WYSIWYG text editor that allows its users to format textual and visual content and store it as HTML or Markdown. </p> <p>Supported features:</p> <ul> <li> Inline formats: <ul> <li><strong>Bold</strong>, <em>italic</em>, <s>strikethrough</s> text formatting</li> <li>Font, size, color changes (HTML only)</li> </ul> </li> <li> Block formats: <ul> <li>Headers</li> <li>Text alignment</li> <li>Lists (ordered and unordered)</li> <li>Code blocks</li> <li>Quotes</li> </ul> </li> <li>Custom formats</li> <li>HTML and Markdown support</li> <li>Mail-merge placeholders (for example, %username%)</li> <li>Adaptive toolbar for working images, links, and color formats</li> <li>Image upload: drag-and-drop images onto the form, select files from the file system, or specify a URL.</li> <li>Copy-paste rich content (unsupported formats are removed)</li> <li>Tables support</li> </ul> `; </script>

using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using System.Web.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; namespace DevExtreme.MVC.Demos.Controllers { public class HtmlEditorController : Controller { public ActionResult ToolbarCustomization() { return View(); } } }

.dx-htmleditor-content img { vertical-align: middle; padding-right: 10px; }