Your search did not match any results.

Html Editor - Output Formats

Our HtmlEditor can output the markup in HTML and Markdown formats. To specify the format, use the valueType property. If you use Markdown, import the Markdown converter as described in the valueType article.

The HtmlEditor stores the markup in the value property. In this demo, the value is displayed under the HtmlEditor. You can click the Html and Markdown buttons to switch between output formats.

Backend API
@section ExternalDependencies { <script src="https://unpkg.com/devextreme-quill@1.7.1/dist/dx-quill.min.js"></script> <script src="https://unpkg.com/turndown@7.0.0/dist/turndown.js"></script> <script src="https://unpkg.com/showdown@2.1.0/dist/showdown.min.js"></script> <script src="https://www.unpkg.com/prettier@2.7.1/standalone.js"></script> <script src="https://www.unpkg.com/prettier@2.7.1/parser-html.js"></script> } @functions { object GetInputAttr(string key, string value) { return new { inputAttr = new Dictionary<string, string>() { { key, value } } }; } } @(Html.DevExtreme().HtmlEditor() .ID("html_editor") .Height(300) .Value(new JS("markup")) .OnValueChanged("valueChanged") .Toolbar(toolbar => toolbar.Items( items => { items.Add().Name(HtmlEditorToolbarItem.Undo); items.Add().Name(HtmlEditorToolbarItem.Redo); items.Add().Name(HtmlEditorToolbarItem.Separator); items.Add() .Name("size") .AcceptedValues(new[] { "8pt", "10pt", "12pt", "14pt", "18pt", "24pt", "36pt" }) .Option("options", GetInputAttr("aria-label", "Font size")); items.Add() .Name("font") .AcceptedValues(new[] { "Arial", "Courier New", "Georgia", "Impact", "Lucida Console", "Tahoma", "Times New Roman", "Verdana" }) .Option("options", GetInputAttr("aria-label", "Font family")); 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().Name(HtmlEditorToolbarItem.Color); items.Add().Name(HtmlEditorToolbarItem.Background); }) ) ) <div class="options"> @(Html.DevExtreme().ButtonGroup() .Items(items => { items.Add().Text("Html"); items.Add().Text("Markdown"); }) .OnSelectionChanged("selectionChanged") .SelectedItemKeys(new[] { "Html" }) ) <div class="value-content" tabindex="0"></div> </div> <script> function formatOutput(value, valueType) { const formattedValue = valueType === 'html' ? prettierFormat(value) : value; $('.value-content').text(formattedValue); } function valueChanged({ component, value }) { formatOutput(value, component.option('valueType')); } function selectionChanged(e) { var editorInstance = $("#html_editor").dxHtmlEditor("instance"); var valueType = e.addedItems[0].text.toLowerCase(); editorInstance.option({ valueType }); var value = editorInstance.option("value"); formatOutput(value, valueType); } function prettierFormat(markup) { return prettier.format(markup, { parser: "html", plugins: prettierPlugins }) } var markup = '<h2><img src="../../Content/images/widgets/HtmlEditor.svg" alt="HtmlEditor"> Formatted Text Editor (HTML Editor)</h2><p><br></p><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>'; formatOutput(markup, 'html'); </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 OutputFormats() { return View(); } } }
.dx-htmleditor-content img { vertical-align: middle; padding-right: 10px; } .value-content { margin-top: 20px; overflow: auto; height: 110px; width: 100%; white-space: pre-wrap; } .options { margin-top: 20px; padding: 20px; background-color: rgba(191, 191, 191, 0.15); box-sizing: border-box; width: 100%; }