Overview
Documentation
DevExtreme HTML5 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. In this demo, the editor’s content provides a list of supported features. You can edit it using the toolbar that consists entirely of built-in controls. In addition, you can resize images.
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!
We appreciate your feedback.
We appreciate your feedback.
@(Html.DevExtreme().HtmlEditor()
.Content(@<text>
<h2>
<img src="../../Content/images/widgets/HtmlEditor.svg" alt="HtmlEditor" />
Formatted Text Editor (HTML Editor)
</h2>
<br>
<p>
DevExtreme HTML5 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>underlined</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>Insert images as a link or base64 (drag-and-drop images to convert them to base64)</li>
<li>Copy-paste rich content (unsupported formats are removed)</li>
</ul>
</text>)
.Toolbar(toolbar => toolbar.Items(
items => {
items.Add().FormatName("undo");
items.Add().FormatName("redo");
items.Add().FormatName("separator");
items.Add()
.FormatName("size")
.FormatValues(new string[] { "8pt", "10pt", "12pt", "14pt", "18pt", "24pt", "36pt" });
items.Add()
.FormatName("font")
.FormatValues(new string[] { "Arial", "Courier New", "Georgia", "Impact", "Lucida Console", "Tahoma", "Times New Roman", "Verdana" });
items.Add().FormatName("separator");
items.Add().FormatName("bold");
items.Add().FormatName("italic");
items.Add().FormatName("strike");
items.Add().FormatName("underline");
items.Add().FormatName("separator");
items.Add().FormatName("alignLeft");
items.Add().FormatName("alignCenter");
items.Add().FormatName("alignRight");
items.Add().FormatName("alignJustify");
items.Add().FormatName("separator");
items.Add()
.FormatName("header")
.FormatValues(new JS("[false, 1, 2, 3, 4, 5]"));
items.Add().FormatName("separator");
items.Add().FormatName("orderedList");
items.Add().FormatName("bulletList");
items.Add().FormatName("separator");
items.Add().FormatName("color");
items.Add().FormatName("background");
items.Add().FormatName("separator");
items.Add().FormatName("link");
items.Add().FormatName("image");
items.Add().FormatName("separator");
items.Add().FormatName("clear");
items.Add().FormatName("codeBlock");
items.Add().FormatName("blockquote");
})
)
.MediaResizing(m => m.Enabled(true))
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.min.js"></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 Overview() {
return View();
}
}
}
.dx-htmleditor-content img {
vertical-align: middle;
padding-right: 10px;
}