intuitive block based wysiwyg editor built with React and ProseMirror
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 |
| --------- | --------- | --------- | --------- | --------- |
$ npm install smartblock --save
import * as React from 'react'; import { render } from 'react-dom'; import 'smartblock/css/smartblock.css'; import { SmartBlock, Extensions } from 'smartblock';render(<> Hello World
hello
'} 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: });render(<> Hello World
hello
'} 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: });render(<> Hello World
hello
'} 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.