# SmartBlock ![](https://github.com/appleple/smartblock/workflows/Node%20CI/badge.svg) [![npm version](https://badge.fury.io/js/smartblock.svg)](https://badge.fury.io/js/smartblock) [![npm download](http://img.shields.io/npm/dm/smartblock.svg)](https://www.npmjs.com/package/smartblock) [![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/appleple/smartblock/master/LICENSE) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Awesome%20block-based%20JavaScript%20%Editor&url=https://github.com/appleple/smartblock&via=appleplecom&hashtags=blocks,smartblock) SmartBlock.js is a JavaScript block based editor which enables you to write contents easily on websites even with **SmartPhone**. | [

](http://godban.github.io/browsers-support-badges/)
IE11 / Edge | [

](http://godban.github.io/browsers-support-badges/)
Firefox | [

](http://godban.github.io/browsers-support-badges/)
Chrome | [

](http://godban.github.io/browsers-support-badges/)
Safari | [

](http://godban.github.io/browsers-support-badges/)
iOS Safari | | --------- | --------- | --------- | --------- | --------- | ## ScreenShot

## 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 ```sh $ npm install smartblock --save ``` ## Usage ```js 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")); ``` ## Try it on CodeSandbox [![Edit hardcore-kalam-tghp9](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/hardcore-kalam-tghp9?fontsize=14&hidenavigation=1&theme=dark) ## Customize You can add custom block like this ```js 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 ```js 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")); ``` ## 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 | | ## Download [Download ZIP](https://github.com/appleple/smartblock/archive/master.zip) ## Github [https://github.com/appleple/smartblock](https://github.com/appleple/smartblock) ## Contributor [@steelydylan](https://github.com/steelydylan) ## License Code and documentation copyright 2020 by appleple, Inc. Code released under the [MIT License](https://github.com/appleple/smartblock/blob/master/LICENSE).

	Stars	Issues	Version	Updated	Created
ckeditor4-react	97	13	5.2.0	a month ago	6 years ago
react-codemirror	1,554	68	1.0.0	7 years ago	9 years ago
react-medium-editor	503	26	1.8.1	8 years ago	9 years ago
react-trumbowyg	146	18	1.1.0	8 years ago	8 years ago
smartblock	309	13	1.4.7	25 days ago	5 years ago

ckeditor4-react vs react-codemirror vs react-medium-editor vs react-trumbowyg vs smartblock

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past