Your search did not match any results.

Output Formats

Documentation

In this demo, you can switch between the HTML and Markdown output formats and view the result below the HtmlEditor.

@section ExternalDependencies { <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js"></script> <script src="https://unpkg.com/turndown/dist/turndown.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.8.7/showdown.min.js"></script> } @(Html.DevExtreme().HtmlEditor() .ID("html_editor") .Height(300) .Content(@<text> <h2> <img src="../../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> </text>) .OnValueChanged("valueChanged") .Toolbar(toolbar => toolbar.Items( items => { items.Add().FormatName(HtmlEditorToolbarItem.Undo); items.Add().FormatName(HtmlEditorToolbarItem.Redo); items.Add().FormatName(HtmlEditorToolbarItem.Separator); items.Add() .FormatName("size") .FormatValues(new[] { "8pt", "10pt", "12pt", "14pt", "18pt", "24pt", "36pt" }); items.Add() .FormatName("font") .FormatValues(new[] { "Arial", "Courier New", "Georgia", "Impact", "Lucida Console", "Tahoma", "Times New Roman", "Verdana" }); items.Add().FormatName(HtmlEditorToolbarItem.Separator); items.Add().FormatName(HtmlEditorToolbarItem.Bold); items.Add().FormatName(HtmlEditorToolbarItem.Italic); items.Add().FormatName(HtmlEditorToolbarItem.Strike); items.Add().FormatName(HtmlEditorToolbarItem.Underline); items.Add().FormatName(HtmlEditorToolbarItem.Separator); items.Add().FormatName(HtmlEditorToolbarItem.AlignLeft); items.Add().FormatName(HtmlEditorToolbarItem.AlignCenter); items.Add().FormatName(HtmlEditorToolbarItem.AlignRight); items.Add().FormatName(HtmlEditorToolbarItem.AlignJustify); items.Add().FormatName(HtmlEditorToolbarItem.Separator); items.Add().FormatName(HtmlEditorToolbarItem.Color); items.Add().FormatName(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"></div> </div> <script> function valueChanged(e) { $(".value-content").text(e.component.option("value")); } function selectionChanged(e) { var editorInstance = $("#html_editor").dxHtmlEditor("instance"); editorInstance.option("valueType", e.addedItems[0].text.toLowerCase()); $(".value-content").text(editorInstance.option("value")); } </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 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%; }