@section ExternalDependencies {
<script src="https://unpkg.com/devextreme-quill/dist/dx-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%;
}