Smartblock NPM

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

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

$ npm install smartblock --save

Usage

import * 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"));

Try it on CodeSandbox

Customize

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"));

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