WYSIWYG Editor ▸ Toolbar Customization

@section ExternalDependencies {
    <script src="https://cdn.jsdelivr.net/npm/devextreme-quill@1.7.3/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.
        </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>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;
}