-
Notifications
You must be signed in to change notification settings - Fork 2
/
App.js
123 lines (119 loc) · 4.48 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import React from "react";
import "devextreme/dist/css/dx.light.css";
import "./App.css";
import HtmlEditor, {
Toolbar,
MediaResizing,
Item,
TableContextMenu
} from "devextreme-react/html-editor";
const sizeValues = [ "8pt", "10pt", "12pt", "14pt", "18pt", "24pt", "36pt" ];
const fontValues = [ "Arial", "Georgia", "Tahoma", "Times New Roman", "Verdana" ];
const headerValues = [ false, 1, 2, 3, 4, 5 ];
const markup = `
<div>
<h2>
<img src="HtmlEditor.svg" alt="HtmlEditor"/>
Rich 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>Typeface, font size, text color changes (HTML only)</li>
</ul>
</li>
<li>Block formats:
<ul>
<li>Headers</li>
<li>Lists (ordered and unordered)</li>
<li>Code blocks</li>
<li>Quotes</li>
</ul>
</li>
<li>Built-in format customization</li>
<li>HTML and Markdown support</li>
<li>Mail Merge</li>
<li>Adaptive toolbar for working with images, links, and color formats</li>
<li>Copy-paste rich content (the control strips unsupported formats)</li>
<li>Embedded images specified as a link to an image file or as base64-encoded binary data</li>
<li>Mention (for example, @person)</li>
<li>Tables</li>
</ul>
<br>
<p>The editor supports the following frameworks and libraries:</p>
<table>
<tr>
<td><strong>jQuery</strong></td>
<td>v3.x</td>
</tr>
<tr>
<td><strong>Angular</strong></td>
<td>v7.0.x - v11.0.x</td>
</tr>
<tr>
<td><strong>React</strong></td>
<td>v16.2+</td>
</tr>
<tr>
<td><strong>Vue</strong></td>
<td>v2.6.3+</td>
</tr>
</table>
</div>
`;
const App = () => {
return (
<HtmlEditor defaultValue={markup} valueType="html">
<Toolbar multiline={true}>
<Item name="undo" />
<Item name="redo" />
<Item name="separator" />
<Item name="size" acceptedValues={sizeValues} />
<Item name="font" acceptedValues={fontValues} />
<Item name="separator" />
<Item name="bold" />
<Item name="italic" />
<Item name="strike" />
<Item name="underline" />
<Item name="separator" />
<Item name="alignLeft" />
<Item name="alignCenter" />
<Item name="alignRight" />
<Item name="alignJustify" />
<Item name="separator" />
<Item name="orderedList" />
<Item name="bulletList" />
<Item name="separator" />
<Item name="header" acceptedValues={headerValues} />
<Item name="separator" />
<Item name="color" />
<Item name="background" />
<Item name="separator" />
<Item name="link" />
<Item name="image" />
<Item name="separator" />
<Item name="clear" />
<Item name="codeBlock" />
<Item name="blockquote" />
<Item name="separator" />
<Item name="insertTable" />
<Item name="deleteTable" />
<Item name="insertRowAbove" />
<Item name="insertRowBelow" />
<Item name="deleteRow" />
<Item name="insertColumnLeft" />
<Item name="insertColumnRight" />
<Item name="deleteColumn" />
<Item name="cellProperties" />
<Item name="tableProperties" />
</Toolbar>
<MediaResizing enabled={true} />
<TableContextMenu enabled={true} />
</HtmlEditor>
);
};
export default App;