-
Notifications
You must be signed in to change notification settings - Fork 27
/
sample.ts
119 lines (96 loc) · 5.87 KB
/
sample.ts
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
export default `SmartBlock.js is a JavaScript block based editor which enables you to write contents easily on websites even with **SmartPhone**.
## Features
* Easy to use with SmartPhone
* Fully customizable
* Block based
* Keep clean HTML and wipe out unnecessary tags
* Get the result as **HTML** or **JSON**
* copy and paste contents
## Install
\`\`\`
$ npm install smartblock --save
\`\`\`
## Usage
\`\`\`
import * as React from 'react';
import { render } from 'react-dom';
import 'smartblock/css/smartblock.css';
import { SmartBlock } from 'smartblock';
render(<>
<SmartBlock
html={'<h2>Hello World</h2><p>hello</p>'}
onChange={({ json, html }) => { console.log(json, html);}}
/>
</>, document.getElementById("app"));
\`\`\`
## Extensions
### Blocks
- Pragraph
- Heading1
- Heading2
- Heading3
- Heading4
- Heading5
- Heading6
- OrderdList
- BulletList
- ListItem
- Blockquoe
- Table
- Code
- Image
### Marks
- Emphasis
- Strike
- Strong
- Underline
### Utils
- MoveDown
- MoveUp
- Trash
- DefaultKeys
- DefaultPlugins
## Customize
You can add custom block like this
\`\`\`
import { Extensions, CustomBlock, CustomMark } from 'smartblock';
import 'smartblock/css/smartblock.css';
Extensions.push(new CustomBlock({
tagName: 'div',
className: '.alert',
icon: <SomeIconComponent />
});
render(<>
<SmartBlock
extensions={Extensions}
html={'<h2>Hello World</h2><p>hello</p>'}
onChange={({ json, html }) => { console.log(json, html);}}
/>
</>, document.getElementById("app"));
\`\`\`
You can also add custom inline element like this
\`\`\`
import { Extension, CustomBlock, CustomMark } from 'smartblock';
import 'smartblock/css/smartblock.css';
Extension.push(new CustomMark({ tagName: 'span', className: '.small', icon: <SomeIconComponent />});
render(<>
<SmartBlock
extensions={Extensions}
html={'<h2>Hello World</h2><p><small>hello</small></p>'}
onChange={({ json, html }) => { console.log(json, html);}}
/>
</>, document.getElementById("app"));
\`\`\`
## Options
| Props | description | type | default |
| ------------ | ----------------------------------------------------------------------------------------------------------- | ------------------ | -------------------------- |
| extensions | Array of extensions which extend the feature of SmartBlock | Extension[] | array of extensions |
| onChange | Callback function which is called when the content of the editor is changed. You can get both html and json | Function | |
| onInit | Callback function which is called when the editor is initialized | Function | |
| json | The editor contents will be initialized with the json data | Object | {} |
| HTML | The editor contents will be initialized with the HTML | String | '' |
| showTitle | Title will be shown | Boolean | false |
| showBackBtn | Btn to support history back will be shown | Boolean | false |
| autoSave | The HTML will be stored to the localstorage every time the content is changed | Boolean | false |
| getEditorRef | Get the editor ref object | Function | |
`;