Skip to content

Commit 7e21d15

Browse files
Raiper34Raiper34
committed
docs(website): new documentation website
1 parent 7f7854f commit 7e21d15

22 files changed

+2609
-280
lines changed

‎LICENSE ‎LICENSE.md

File renamed without changes.

‎README.md

+5-83
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,19 @@
99
[![GitHub Repo stars](https://img.shields.io/github/stars/raiper34/ngx-simple-text-editor)](https://github.com/Raiper34/ngx-simple-text-editor)
1010

1111

12-
![ngc simple text editor logo](logo.svg)
12+
![ngc simple text editor logo](assets/logo.svg)
1313
# Ngx Simple Text editor
1414
Ngx Simple Text editor or ST editor is a simple native text editor component for Angular 9+.
1515
The key features of this editor are simplicity, cross-browser compatibility, and extensibility.
1616

17-
![demo](demo.gif)
17+
![demo](assets/demo.gif)
1818

1919

2020
### Content
2121
- [🔗 Compatibility](#-compatibility)
2222
- [🚀 Instalation](#-instalation)
2323
- [💻 Usage](#-usage)
24-
- [Custom buttons](#custom-buttons)
25-
- [✨ Demo](#-demo)
24+
- [📚 Documentation and demos](#-documentation-and-demos)
2625
- [📖 License](#-license)
2726

2827

@@ -88,86 +87,9 @@ export class AppComponent {
8887
};
8988
}
9089
```
91-
You can pass all predefined buttons with predefined order, or you can use only buttons you want with order as you want.
92-
```typescript
93-
import {EditorConfig, UNDO_BUTTON, SEPARATOR, BOLD_BUTTON, ITALIC_BUTTON} from 'ngx-simple-text-editor';
94-
...
95-
config: EditorConfig = {
96-
buttons: [UNDO_BUTTON, SEPARATOR, BOLD_BUTTON, ITALIC_BUTTON],
97-
};
98-
...
99-
```
100-
101-
### Custom buttons
102-
Defining custom buttons is really simple, you just need to create a new constant and pass it into the `buttons` property of the editor config.
103-
The constant needs to consist of at least `type`, which is basically a type of button that will be rendered on the UI and `command`, which is an action, that will be performed.
104-
You can use a predefined ExecCommand enum for command definition.
105-
If you want to read more about exec commands, you can read [here](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand).
106-
Other required properties are derived from the given type and interfaces for all button types can be found [here](https://github.com/Raiper34/ngx-simple-text-editor/blob/main/projects/ngx-simple-text-editor/src/lib/models/button.ts).
107-
108-
109-
For example, we can create our own custom button that adds preformatted and predefined strings into the editor.
110-
We need to define a new button type of `EditorDropdown` because we want to pick one string from many and add it to the editor config
111-
```typescript
112-
import {EditorConfig, ExecCommand, Separator, ST_BUTTONS} from 'ngx-simple-text-editor';
113-
114-
export const CUSTOM: EditorDropdown = {
115-
type: ToolbarItemType.Dropdown, label: 'Custom', title: 'test custom', items: [
116-
{command: ExecCommand.insertHTML, value: '<b>This is bold<b>', label: 'Custom bold text'},
117-
{command: ExecCommand.italic, value: null, label: 'Make Italic'},
118-
]
119-
};
120-
121-
...
122-
config: EditorConfig = {
123-
buttons: [...ST_BUTTONS, Separator, CUSTOM],
124-
};
125-
...
126-
```
127-
Or we can create a button that prompts the user to write something and that string can be transformed and added into html.
128-
Let's say, we want to input a button, where the user writes some string and we want to put it into the editor always bold
129-
```ts
130-
export const CUSTOM_INPUT: EditorInput =
131-
{
132-
type: ToolbarItemType.Input,
133-
command: ExecCommand.insertHTML,
134-
icon: 'fas fa-font',
135-
text: 'Create bold text',
136-
title: 'create bold text',
137-
transform: (val: string) => `<b>${val}</b>`
138-
};
139-
```
140-
141-
The example of various default button types that have already been created in the editor and are the part of default config (full list [here](https://github.com/Raiper34/ngx-simple-text-editor/blob/main/projects/ngx-simple-text-editor/src/lib/constants/editor-buttons.ts)):
142-
```ts
143-
export const UNDO_BUTTON: EditorButton = {type: ToolbarItemType.Button, command: ExecCommand.undo, icon: 'fas fa-undo', title: 'undo'};
144-
export const FORE_COLOR: EditorColor =
145-
{type: ToolbarItemType.Color, command: ExecCommand.foreColor, icon: 'fas fa-palette', title: 'font color'};
146-
export const CUSTOM: EditorDropdown = {
147-
type: ToolbarItemType.Dropdown, label: 'Custom', title: 'test custom', items: [
148-
{command: ExecCommand.insertHTML, value: '<b>This is bold<b>', label: 'Custom bold text'},
149-
{command: ExecCommand.italic, value: null, label: 'Make Italic'},
150-
]
151-
};
152-
export const LINK_INPUT: EditorInput =
153-
{type: ToolbarItemType.Input, command: ExecCommand.createLink, icon: 'fas fa-link', text: 'Create link', title: 'create link', label: 'Create link'};
154-
export const UNLINK_BUTTON: EditorButton = {type: ToolbarItemType.Button, command: ExecCommand.unlink, icon: 'fas fa-unlink', title: 'unlink'};
155-
export const FONT_SIZE_SELECT: EditorSelect = {
156-
type: ToolbarItemType.Select, command: ExecCommand.fontSize, title: 'font size', items: [
157-
{value: 1, label: '1'},
158-
{value: 2, label: '2'},
159-
{value: 3, label: '3'},
160-
{value: 4, label: '4'},
161-
{value: 5, label: '5'},
162-
{value: 6, label: '6'},
163-
{value: 7, label: '7'},
164-
]
165-
};
166-
```
16790

168-
## ✨ Demo
169-
[Online demo](https://ngx-simple-text-editor.netlify.app/)
170-
or Stackblitz coming soon.
91+
## 📚 Documentation and demos
92+
[Online documentation and demos](https://ngx-simple-text-editor.netlify.app/)
17193

17294
## 📖 License
17395
MIT

‎demo.gif ‎assets/demo.gif

File renamed without changes.

‎logo.svg ‎assets/logo.svg

File renamed without changes.

‎docs/.nojekyll

Whitespace-only changes.

‎docs/_coverpage.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
![logo](../assets/logo.svg)
2+
3+
# Ngx Simple Text Editor
4+
5+
> Simple native text editor component for Angular 9+
6+
7+
8+
[GitHub](https://github.com/Raiper34/ngx-simple-text-editor)
9+
[Get Started](instalation.md)

‎docs/_navbar.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Content

‎docs/_sidebar.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
- Getting started
2+
- [Compatibility](compatibility.md)
3+
- [Instalation](instalation.md)
4+
- [Usage](usage.md)
5+
- Customization
6+
- [Custom button](custom-buttons.md)
7+
- [Demo](demo.md)
8+
- [Changelog](CHANGELOG.md)
9+
- [License](LICENSE.md)

‎docs/compatibility.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# 🔗 Compatibility
2+
| Angular version | Ngx simple text editor version | Font awesome version |
3+
|-----------------|--------------------------------|----------------------|
4+
| 9 - 13 | 0.0.0 - 1.x.x | 5.0.0-6.x.x |
5+
| 14 | 2.x.x | 5.0.0-6.x.x |
6+
| 15 | 3.x.x | 5.0.0-6.x.x |
7+
| 16 | 4.x.x | 5.0.0-6.x.x |
8+
| 17 | 5.x.x | 5.0.0-6.x.x |

‎docs/copy-files-from-to.json

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"copyFilesSettings": {
3+
"whenFileExists": "overwrite"
4+
},
5+
"copyFiles": [
6+
{
7+
"from": "*",
8+
"to": "../dist/docs"
9+
},
10+
{
11+
"from": "../dist/ngx-simple-text-editor-app/*",
12+
"to": "../dist/docs/demo"
13+
},
14+
{
15+
"from": "../assets",
16+
"to": "../dist/docs"
17+
},
18+
{
19+
"from": "../README.md",
20+
"to": "../dist/docs/README.md"
21+
},
22+
{
23+
"from": "../LICENSE.md",
24+
"to": "../dist/docs/LICENSE.md"
25+
},
26+
{
27+
"from": "../CHANGELOG.md",
28+
"to": "../dist/docs/CHANGELOG.md"
29+
}
30+
]
31+
}

‎docs/custom-buttons.md

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# Custom buttons
2+
Defining custom buttons is really simple, you just need to create a new constant and pass it into the `buttons` property of the editor config.
3+
The constant needs to consist of at least `type`, which is basically a type of button that will be rendered on the UI and `command`, which is an action, that will be performed.
4+
You can use a predefined ExecCommand enum for command definition.
5+
If you want to read more about exec commands, you can read [here](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand).
6+
Other required properties are derived from the given type and interfaces for all button types can be found [here](https://github.com/Raiper34/ngx-simple-text-editor/blob/main/projects/ngx-simple-text-editor/src/lib/models/button.ts).
7+
8+
9+
For example, we can create our own custom button that adds preformatted and predefined strings into the editor.
10+
We need to define a new button type of `EditorDropdown` because we want to pick one string from many and add it to the editor config
11+
```typescript
12+
import {EditorConfig, ExecCommand, Separator, ST_BUTTONS} from 'ngx-simple-text-editor';
13+
14+
export const CUSTOM: EditorDropdown = {
15+
type: ToolbarItemType.Dropdown, label: 'Custom', title: 'test custom', items: [
16+
{command: ExecCommand.insertHTML, value: '<b>This is bold<b>', label: 'Custom bold text'},
17+
{command: ExecCommand.italic, value: null, label: 'Make Italic'},
18+
]
19+
};
20+
21+
...
22+
config: EditorConfig = {
23+
buttons: [...ST_BUTTONS, Separator, CUSTOM],
24+
};
25+
...
26+
```
27+
Or we can create a button that prompts the user to write something and that string can be transformed and added into html.
28+
Let's say, we want to input a button, where the user writes some string and we want to put it into the editor always bold
29+
```ts
30+
export const CUSTOM_INPUT: EditorInput =
31+
{
32+
type: ToolbarItemType.Input,
33+
command: ExecCommand.insertHTML,
34+
icon: 'fas fa-font',
35+
text: 'Create bold text',
36+
title: 'create bold text',
37+
transform: (val: string) => `<b>${val}</b>`
38+
};
39+
```
40+
41+
The example of various default button types that have already been created in the editor and are the part of default config (full list [here](https://github.com/Raiper34/ngx-simple-text-editor/blob/main/projects/ngx-simple-text-editor/src/lib/constants/editor-buttons.ts)):
42+
```ts
43+
export const UNDO_BUTTON: EditorButton = {type: ToolbarItemType.Button, command: ExecCommand.undo, icon: 'fas fa-undo', title: 'undo'};
44+
export const FORE_COLOR: EditorColor =
45+
{type: ToolbarItemType.Color, command: ExecCommand.foreColor, icon: 'fas fa-palette', title: 'font color'};
46+
export const CUSTOM: EditorDropdown = {
47+
type: ToolbarItemType.Dropdown, label: 'Custom', title: 'test custom', items: [
48+
{command: ExecCommand.insertHTML, value: '<b>This is bold<b>', label: 'Custom bold text'},
49+
{command: ExecCommand.italic, value: null, label: 'Make Italic'},
50+
]
51+
};
52+
export const LINK_INPUT: EditorInput =
53+
{type: ToolbarItemType.Input, command: ExecCommand.createLink, icon: 'fas fa-link', text: 'Create link', title: 'create link', label: 'Create link'};
54+
export const UNLINK_BUTTON: EditorButton = {type: ToolbarItemType.Button, command: ExecCommand.unlink, icon: 'fas fa-unlink', title: 'unlink'};
55+
export const FONT_SIZE_SELECT: EditorSelect = {
56+
type: ToolbarItemType.Select, command: ExecCommand.fontSize, title: 'font size', items: [
57+
{value: 1, label: '1'},
58+
{value: 2, label: '2'},
59+
{value: 3, label: '3'},
60+
{value: 4, label: '4'},
61+
{value: 5, label: '5'},
62+
{value: 6, label: '6'},
63+
{value: 7, label: '7'},
64+
]
65+
};
66+
```

‎docs/demo.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Demo
2+
3+
[demo](demo ':include :type=iframe width=100% height=700vh')

‎docs/index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7+
<meta name="description" content="Description">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
9+
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
10+
</head>
11+
<body>
12+
<div id="app"></div>
13+
<script>
14+
window.$docsify = {
15+
name: 'Ngx Simple Text Editor',
16+
repo: 'https://github.com/Raiper34/ngx-simple-text-editor',
17+
coverpage: true,
18+
loadSidebar: true,
19+
loadNavbar: false,
20+
search: 'auto',
21+
}
22+
</script>
23+
<!-- Docsify v4 -->
24+
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
25+
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
26+
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-typescript.min.js"></script>
27+
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-json.min.js"></script>
28+
</body>
29+
</html>

‎docs/instalation.md

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# 🚀 Instalation
2+
3+
`npm install ngx-simple-text-editor --save`
4+
5+
then add `NgxSimpleTextEditorModule` into module imports
6+
```typescript
7+
import {NgxSimpleTextEditorModule} from 'ngx-simple-text-editor';
8+
9+
@NgModule({
10+
// ...
11+
imports: [
12+
// ...
13+
NgxSimpleTextEditorModule,
14+
// ...
15+
],
16+
// ...
17+
})
18+
```
19+
If you want to use default button icons, you must install Font awesome.
20+
`npm install @fortawesome/fontawesome-free` and declare in styles in angular.json
21+
```json
22+
...
23+
"styles": [
24+
"src/styles.scss",
25+
"node_modules/@fortawesome/fontawesome-free/css/all.css"
26+
]
27+
...
28+
```

‎docs/usage.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# 💻 Usage
2+
You can use Ngx simple text editor as classic template-driven form input or as reactive form input.
3+
```angular2html
4+
<st-editor [(ngModel)]="content" [config]="config"></st-editor>
5+
```
6+
The editor has got only one @Input with config object, which is optional.
7+
The config object is defined by placeholder and buttons, both are optional and can be omitted.
8+
```typescript
9+
import { Component } from '@angular/core';
10+
import {EditorConfig, ST_BUTTONS} from 'ngx-simple-text-editor';
11+
12+
@Component({
13+
selector: 'app-root',
14+
templateUrl: './app.component.html',
15+
styleUrls: ['./app.component.scss']
16+
})
17+
export class AppComponent {
18+
content = '';
19+
config: EditorConfig = {
20+
placeholder: 'Type something...',
21+
buttons: ST_BUTTONS,
22+
};
23+
}
24+
```
25+
You can pass all predefined buttons with predefined order, or you can use only buttons you want with order as you want.
26+
```typescript
27+
import {EditorConfig, UNDO_BUTTON, SEPARATOR, BOLD_BUTTON, ITALIC_BUTTON} from 'ngx-simple-text-editor';
28+
...
29+
config: EditorConfig = {
30+
buttons: [UNDO_BUTTON, SEPARATOR, BOLD_BUTTON, ITALIC_BUTTON],
31+
};
32+
...
33+
```

‎netlify.toml

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
[[redirects]]
2+
from = "/demo/*"
3+
to = "/demo/index.html"
4+
status = 200
5+
6+
[[redirects]]
7+
from = "/*"
8+
to = "/index.html"
9+
status = 200

0 commit comments

Comments
 (0)