Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
x
Send Feedback
Thank you! We appreciate your feedback.
Backend API
@section ExternalDependencies {
<script src="https://unpkg.com/devextreme-quill@21_2/dist/dx-quill.min.js"></script>
}
@(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]"));
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")
.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="../../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 Microsoft.AspNetCore.Mvc;
using DevExtreme.NETCore.Demos.Models.SampleData;
namespace DevExtreme.NETCore.Demos.Controllers {
public class HtmlEditorController : Controller {
public IActionResult ToolbarCustomization() {
return View();
}
}
}