Skip to content

Commit 702d69e

Browse files
AlisherAmonulloevAlisherAmonulloev
committed
Update projects
1 parent cd6a48e commit 702d69e

34 files changed

+674
-653
lines changed

‎Angular/src/app/app.component.html‎

Lines changed: 114 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,115 @@
1-
<div class="default-style">
2-
<dx-button [text]="buttonText" (onClick)="onClick($event)"></dx-button>
1+
<div id="app-container">
2+
<dx-html-editor valueType="html">
3+
<dxo-toolbar [multiline]="multilineToolbar">
4+
<dxi-item name="undo"></dxi-item>
5+
<dxi-item name="redo"></dxi-item>
6+
<dxi-item name="separator"></dxi-item>
7+
<dxi-item name="size" [acceptedValues]="sizeValues"></dxi-item>
8+
<dxi-item name="font" [acceptedValues]="fontValues"></dxi-item>
9+
<dxi-item name="separator"></dxi-item>
10+
<dxi-item name="bold"></dxi-item>
11+
<dxi-item name="italic"></dxi-item>
12+
<dxi-item name="strike"></dxi-item>
13+
<dxi-item name="underline"></dxi-item>
14+
<dxi-item name="separator"></dxi-item>
15+
<dxi-item name="alignLeft"></dxi-item>
16+
<dxi-item name="alignCenter"></dxi-item>
17+
<dxi-item name="alignRight"></dxi-item>
18+
<dxi-item name="alignJustify"></dxi-item>
19+
<dxi-item name="separator"></dxi-item>
20+
<dxi-item name="orderedList"></dxi-item>
21+
<dxi-item name="bulletList"></dxi-item>
22+
<dxi-item name="separator"></dxi-item>
23+
<dxi-item name="header" [acceptedValues]="headerValues"></dxi-item>
24+
<dxi-item name="separator"></dxi-item>
25+
<dxi-item name="color"></dxi-item>
26+
<dxi-item name="background"></dxi-item>
27+
<dxi-item name="separator"></dxi-item>
28+
<dxi-item name="link"></dxi-item>
29+
<dxi-item name="image"></dxi-item>
30+
<dxi-item name="separator"></dxi-item>
31+
<dxi-item name="clear"></dxi-item>
32+
<dxi-item name="codeBlock"></dxi-item>
33+
<dxi-item name="blockquote"></dxi-item>
34+
<dxi-item name="separator"></dxi-item>
35+
<dxi-item name="insertTable"></dxi-item>
36+
<dxi-item name="deleteTable"></dxi-item>
37+
<dxi-item name="insertRowAbove"></dxi-item>
38+
<dxi-item name="insertRowBelow"></dxi-item>
39+
<dxi-item name="deleteRow"></dxi-item>
40+
<dxi-item name="insertColumnLeft"></dxi-item>
41+
<dxi-item name="insertColumnRight"></dxi-item>
42+
<dxi-item name="deleteColumn"></dxi-item>
43+
<dxi-item name="cellProperties"></dxi-item>
44+
<dxi-item name="tableProperties"></dxi-item>
45+
</dxo-toolbar>
46+
<dxo-media-resizing
47+
[enabled]="mediaResizingOptions.enabled"
48+
></dxo-media-resizing>
49+
<dxo-table-context-menu
50+
[enabled]="tableContextMenuOptions.enabled"
51+
></dxo-table-context-menu>
52+
<h2>Rich Text Editor (HTML Editor)</h2>
53+
<br />
54+
<p
55+
>DevExtreme JavaScript HTML Editor is a client-side WYSIWYG editor that
56+
allows its users to format textual and visual content and output it as
57+
HTML or Markdown.</p
58+
>
59+
<p>Supported features:</p>
60+
<ul>
61+
<li
62+
>Inline formats:
63+
<ul>
64+
<li
65+
><strong>Bold</strong>, <em>italic</em>, <s>strikethrough</s> text
66+
formatting</li
67+
>
68+
<li>Typeface, font size, text color changes (HTML only)</li>
69+
</ul>
70+
</li>
71+
<li
72+
>Block formats:
73+
<ul>
74+
<li>Headers</li>
75+
<li>Lists (ordered and unordered)</li>
76+
<li>Code blocks</li>
77+
<li>Quotes</li>
78+
</ul>
79+
</li>
80+
<li>Built-in format customization</li>
81+
<li>HTML and Markdown support</li>
82+
<li>Mail Merge</li>
83+
<li
84+
>Adaptive toolbar for working with images, links, and color formats</li
85+
>
86+
<li>Copy-paste rich content (the control strips unsupported formats)</li>
87+
<li
88+
>Embedded images specified as a link to an image file or as
89+
base64-encoded binary data</li
90+
>
91+
<li>Mention (for example, &#64;person)</li>
92+
<li>Tables</li>
93+
</ul>
94+
<br />
95+
<p>The editor supports the following frameworks and libraries:</p>
96+
<table>
97+
<tr>
98+
<td><strong>jQuery</strong></td>
99+
<td>v3.x</td>
100+
</tr>
101+
<tr>
102+
<td><strong>Angular</strong></td>
103+
<td>v7.0.x - v11.0.x</td>
104+
</tr>
105+
<tr>
106+
<td><strong>React</strong></td>
107+
<td>v16.2+</td>
108+
</tr>
109+
<tr>
110+
<td><strong>Vue</strong></td>
111+
<td>v2.6.3+</td>
112+
</tr>
113+
</table>
114+
</dx-html-editor>
3115
</div>

‎Angular/src/app/app.component.scss‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,19 @@
1-
.default-style {
1+
#app-container {
2+
width: 900px;
3+
position: relative;
24
margin: 50px;
3-
width: 90vw;
5+
padding: 20px;
6+
border: 1px solid #ddd;
7+
}
8+
9+
::ng-deep .dx-htmleditor-content img {
10+
vertical-align: middle;
11+
}
12+
13+
::ng-deep .dx-htmleditor-content table {
14+
width: 50%;
15+
}
16+
17+
::ng-deep .dx-htmleditor-content table td:last-child {
18+
text-align: right;
419
}

‎Angular/src/app/app.component.ts‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
11
import { Component } from '@angular/core';
2-
import { ClickEvent } from 'devextreme/ui/button';
2+
import { DxHtmlEditorTypes } from 'devextreme-angular/ui/html-editor';
3+
import { MediaResizingOptions, TableContextMenuOptions } from './app.types';
34

45
@Component({
56
selector: 'app-root',
67
templateUrl: './app.component.html',
78
styleUrls: ['./app.component.scss'],
89
})
910
export class AppComponent {
10-
title = 'Angular';
11+
sizeValues: string[] = ['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt'];
1112

12-
counter = 0;
13+
fontValues: string[] = ['Arial', 'Georgia', 'Tahoma', 'Times New Roman', 'Verdana'];
1314

14-
buttonText = 'Click count: 0';
15+
headerValues: (boolean | number)[] = [false, 1, 2, 3, 4, 5];
1516

16-
onClick(e: ClickEvent): void {
17-
this.counter++;
18-
this.buttonText = `Click count: ${this.counter}`;
19-
}
17+
multilineToolbar = true;
18+
19+
mediaResizingOptions: MediaResizingOptions = {
20+
enabled: true,
21+
};
22+
23+
tableContextMenuOptions: TableContextMenuOptions = {
24+
enabled: true,
25+
};
2026
}

‎Angular/src/app/app.module.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
3-
import { DxButtonModule } from 'devextreme-angular/ui/button';
3+
import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';
44
import { AppRoutingModule } from './app-routing.module';
55
import { AppComponent } from './app.component';
66

@@ -11,7 +11,7 @@ import { AppComponent } from './app.component';
1111
imports: [
1212
BrowserModule,
1313
AppRoutingModule,
14-
DxButtonModule,
14+
DxHtmlEditorModule,
1515
],
1616
providers: [],
1717
bootstrap: [AppComponent],

‎Angular/src/app/app.types.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export interface HtmlEditorToolbarItem {
2+
name: string;
3+
acceptedValues?: (string | number | boolean)[];
4+
}
5+
6+
export interface MediaResizingOptions {
7+
enabled: boolean;
8+
}
9+
10+
export interface TableContextMenuOptions {
11+
enabled: boolean;
12+
}

‎Angular/src/app/orig_app.component.css‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎Angular/src/app/orig_app.component.html‎

Lines changed: 0 additions & 102 deletions
This file was deleted.

‎Angular/src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<title>Angular</title>
5+
<title>Getting Started with DevExtreme Angular HtmlEditor</title>
66
<base href="/" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<link rel="icon" type="image/x-icon" href="favicon.ico" />

‎README.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,13 @@ This repository stores the code examples of the HtmlEditor component for the [Ge
1616
- [app.component.html](Angular/src/app/app.component.html)
1717
- [app.component.ts](Angular/src/app/app.component.ts)
1818
- **jQuery**
19-
- [index.js](jQuery/index.js)
19+
- [index.html](jQuery/src/index.html)
20+
- [index.js](jQuery/src/index.js)
2021
- **React**
21-
- [App.js](React/src/App.js)
22+
- [App.tsx](React/src/App.tsx)
2223
- **Vue**
2324
- [App.vue](Vue/src/App.vue)
25+
- [HtmlEditorContent.vue](Vue/src/components/HtmlEditorContent.vue)
2426

2527
## Documentation
2628

‎React/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React + TS</title>
7+
<title>Getting Started with DevExtreme React HtmlEditor</title>
88
</head>
99
<body>
1010
<div id="root"></div>

0 commit comments

Comments
 (0)