jQuery HtmlEditor - Overview
HtmlEditor is a WYSIWYG editor that allows you to format textual and visual content and to output it in HTML or Markdown. HtmlEditor is built on top of and requires the DevExtreme Quill.
NOTE
DevExtreme HtmlEditor is available as a community technology preview (CTP). Should you have any questions or suggestions prior to its official release, please create a new ticket in the DevExpress Support Center.
Follow the steps below to add the HtmlEditor to a page.
- Reference or import the DevExtreme Quill as shown in the code samples below.
- Set the output markup language (HTML or Markdown) in the valueType property.
- If you choose Markdown as the output format, link the turndown and showdown scripts before the DevExtreme scripts. When you use JavaScript modules, import the Markdown converter instead.
- Optionally, specify the initial content in the UI component's value property. The content's language should correspond to the valueType. HTML content can also be declared directly inside the UI component's container, in which case the language (HTML) and the valueType can differ.
jQuery
JavaScript
HTML
$(function() {
$("#htmlEditorContainer").dxHtmlEditor({
valueType: "html" // or "markdown"
})
})
<head>
<!-- ... -->
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.2.12/css/dx.common.css">
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.2.12/css/dx.light.css">
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.2.12/js/dx-quill.min.js"></script>
<!-- Required if valueType is "markdown" -->
<!-- <script type="text/javascript" src="https://unpkg.com/turndown/dist/turndown.js"></script> -->
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.8.7/showdown.min.js"></script> -->
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.2.12/js/dx.all.js"></script>
</head>
<body>
<div id="htmlEditorContainer">
<p>
DevExtreme HtmlEditor is a WYSIWYG text editor that allows its users to format
textual and visual content and store it as HTML or Markdown.
</p>
</div>
</body>Angular
HTML
TypeScript
<dx-html-editor
valueType="html"> <!-- or "markdown" -->
<p>
DevExtreme HtmlEditor is a WYSIWYG text editor that allows its users to format
textual and visual content and store it as HTML or Markdown.
</p>
</dx-html-editor>
import { DxHtmlEditorModule } from "devextreme-angular";
// Required if valueType is "markdown"
// import "devextreme/ui/html_editor/converters/markdown";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxHtmlEditorModule
],
// ...
})Vue
<template>
<DxHtmlEditor
value-type="html"> <!-- or "markdown" -->
<p>
DevExtreme HtmlEditor is a WYSIWYG text editor that allows its users to format
textual and visual content and store it as HTML or Markdown.
</p>
</DxHtmlEditor>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import { DxHtmlEditor } from 'devextreme-vue/html-editor';
// Required if valueType is "markdown"
// import "devextreme/ui/html_editor/converters/markdown";
// ...
export default {
components: {
DxHtmlEditor
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import { HtmlEditor } from 'devextreme-react/html-editor';
// Required if valueType is "markdown"
// import "devextreme/ui/html_editor/converters/markdown";
// ...
class App extends React.Component {
render() {
return (
<HtmlEditor
valueType="html"> {/* or "markdown" */}
<p>
DevExtreme HtmlEditor is a WYSIWYG text editor that allows its users to format
textual and visual content and store it as HTML or Markdown.
</p>
</HtmlEditor>
);
}
}
export default App;ASP.NET MVC Controls
Razor C#
<script src="https://cdn3.devexpress.com/jslib/minor_21_1/js/dx-quill.min.js"></script>
// Required if valueType is "markdown"
// <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>
// Reference the DevExtreme sources here
@(Html.DevExtreme().HtmlEditor()
.ValueType(HtmlEditorValueType.Html) // or HtmlEditorValueType.Markdown
.Content(@<text>
<p>
DevExtreme HtmlEditor is a WYSIWYG text editor that allows its users to format
textual and visual content and store it as HTML or Markdown.
</p>
</text>)
)The HtmlEditor supports the following features:
- Inline, block, and embedded formats
- Adaptive toolbar
- Built-in formats' and modules' extension
- Custom formats and modules
- Mail-merge placeholders (for example, %username%)
- Drag and drop images
- Copy-paste rich content (unsupported formats are removed)
The HtmlEditor has the following limitations:
- Users cannot edit the layout. The HtmlEditor is designed to format textual content only.
- Users cannot save full HTML markup. The HtmlEditor supports only a subset (built-in or custom) of formats. Everything else is discarded.
Feedback