SmartBlock.js is a JavaScript block based editor which enables you to write contents easily on websites even with SmartPhone.
 IE11 / Edge |
 Firefox |
 Chrome |
 Safari |
 iOS Safari |
|---|
- 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
$ npm install smartblock --saveimport * as React from 'react';
import { render } from 'react-dom';
import 'smartblock/css/smartblock.css';
import { SmartBlock, Extensions } from 'smartblock';
render(<>
<SmartBlock
extensions={Extensions}
html={'<h2>Hello World</h2><p>hello</p>'}
onChange={({ json, html }) => { console.log(json, html);}}
/>
</>, document.getElementById("app"));
You can add custom block like this
import * as React from 'react';
import { Extensions, CustomBlock, CustomMark } from 'smartblock';
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 add custom inline element like this
import * as React from 'react';
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"));| 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 |
https://github.com/appleple/smartblock
Code and documentation copyright 2020 by appleple, Inc. Code released under the MIT License.
