SmartBlock
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 | | --------- | --------- | --------- | --------- | --------- |
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, GlobalStyle } from 'smartblock';
render(<>
<GlobalStyle />
<SmartBlock
html={'<h2>Hello World</h2><p>hello</p>'}
onChange={({ json, html }) => { console.log(json, html);}}
/>
</>, document.getElementById("app"));
Extensions
Customize
You can add custom block like thisimport { Extensions, CustomBlock, CustomMark } from 'smartblock';
Extensions.push(new CustomBlock({ tagName: 'div', className: '.alert', icon: <SomeIconComponent />});
render(<>
<GlobalStyle />
<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';
Extension.push(new CustomMark({ tagName: 'span', className: '.small', icon: <SomeIconComponent />});
render(<>
<GlobalStyle />
<SmartBlock
extensions={Extensions}
html={'<h2>Hello World</h2><p><small>hello</small></p>'}
onChange={({ json, html }) => { console.log(json, html);}}
/>
</>, document.getElementById("app"));