Your search did not match any results.
HtmlEditor

Overview

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.

@(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> <br /> <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("[1, 2, 3, 4, 5, false]")); 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"); }) ) ) <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; namespace DevExtreme.MVC.Demos.Controllers { public class HtmlEditorController : Controller { public ActionResult Overview() { return View(); } } }
.dx-htmleditor-content img { vertical-align: middle; padding-right: 10px; }