@section ExternalDependencies {
<script src="https://unpkg.com/devextreme-quill@21_2/dist/dx-quill.min.js"></script>
}
@(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" });
items.Add()
.Name("font")
.AcceptedValues(new[] { "Arial", "Courier New", "Georgia", "Impact", "Lucida Console", "Tahoma", "Times New Roman", "Verdana" });
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]"));
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")
.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);
}
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="../../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 or Markdown.
</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>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>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.x - v10.0.x</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>
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 Overview() {
return View();
}
}
}
.dx-htmleditor-content img {
vertical-align: middle;
padding-right: 10px;
}
.dx-htmleditor-content table {
width: 50%;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
display: inline-block;
margin-right: 40px;
}
.option > .dx-selectbox,
.option > .label {
display: inline-block;
vertical-align: middle;
}
.option > .label {
margin-right: 10px;
}