Html Editor - Overview

@section ExternalDependencies { <script src="https://cdn.jsdelivr.net/npm/devextreme-quill@1.7.3/dist/dx-quill.min.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(725) .ImageUpload(imageUpload => imageUpload.Tabs( tabs => { tabs.Add().Name(HtmlEditorImageUploadTab.File); tabs.Add().Name(HtmlEditorImageUploadTab.Url); }) ) .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("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.OrderedList); items.Add().Name(HtmlEditorToolbarItem.BulletList); items.Add().Name(HtmlEditorToolbarItem.Separator); items.Add() .Name("header") .AcceptedValues(new JS("[false, 1, 2, 3, 4, 5]")) .Option("options", GetInputAttr("aria-label", "Header")); items.Add().Name(HtmlEditorToolbarItem.Separator); items.Add().Name(HtmlEditorToolbarItem.Color); items.Add().Name(HtmlEditorToolbarItem.Background); items.Add().Name(HtmlEditorToolbarItem.Separator); items.Add().Name(HtmlEditorToolbarItem.Link); items.Add().Name(HtmlEditorToolbarItem.Image); items.Add().Name(HtmlEditorToolbarItem.Separator); items.Add().Name(HtmlEditorToolbarItem.Clear); items.Add().Name(HtmlEditorToolbarItem.CodeBlock); items.Add().Name(HtmlEditorToolbarItem.Blockquote); items.Add().Name(HtmlEditorToolbarItem.Separator); items.Add().Name(HtmlEditorToolbarItem.InsertTable); items.Add().Name(HtmlEditorToolbarItem.DeleteTable); items.Add().Name(HtmlEditorToolbarItem.InsertRowAbove); items.Add().Name(HtmlEditorToolbarItem.InsertRowBelow); items.Add().Name(HtmlEditorToolbarItem.DeleteRow); items.Add().Name(HtmlEditorToolbarItem.InsertColumnLeft); items.Add().Name(HtmlEditorToolbarItem.InsertColumnRight); items.Add().Name(HtmlEditorToolbarItem.DeleteColumn); }) ) .MediaResizing(m => m.Enabled(true)) ) <div class="options"> <div class="caption">Options</div> <div class="option"> @(Html.DevExtreme().CheckBox() .Value(true) .Text("Multiline toolbar") .OnValueChanged("change_multiline") ) </div> <div class="option"> <div class="label">Image upload tabs:</div> @(Html.DevExtreme().SelectBox() .ID("html-editor-sb") .InputAttr("aria-label", "Tab") .DataSource(new JS("tabs")) .Value(new JS("tabs[2].Value")) .OnValueChanged("change_tabs") .ValueExpr("Value") .DisplayExpr("Name") ) </div> </div> <script> function change_multiline(e) { $("#html-editor") .dxHtmlEditor("instance") .option("toolbar.multiline", e.value.Value); } function change_tabs(e) { $("#html-editor") .dxHtmlEditor("instance") .option("imageUpload.tabs", e.value); } var tabs = [ { Name: 'From This Device', Value: ['file'] }, { Name: 'From the Web', Value: ['url'] }, { Name: 'Both', Value: ['file', 'url'] }, ]; var markup = ` <h2> <img src="../../Content/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. </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>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> <br> <p>Supported frameworks and libraries</p> <table> <tr> <td><strong>jQuery</strong></td> <td style="text-align: right;">v2.1 - v2.2 and v3.x</td> </tr> <tr> <td><strong>Angular</strong></td> <td style="text-align: right;">v7.0+</td> </tr> <tr> <td><strong>React</strong></td> <td style="text-align: right;">v16.2+</td> </tr> <tr> <td><strong>Vue</strong></td> <td style="text-align: right;">v2.6.3+</td> </tr> </table> `; </script>