1.0.8 • Published 4 years ago

smartblock v1.0.8

Weekly downloads
50
License
MIT
Repository
-
Last release
4 years ago

SmartBlock

SmartBlock.js is a JavaScript block based editor which enables you to write contents easily on websites even with SmartPhone.

IE11 / EdgeFirefoxChromeSafariiOS 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 this

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

Options

Propsdescriptiontypedefault
extensionsArray of extensions which extend the feature of SmartBlockExtension[]array of extensions
onChangeCallback function which is called when the content of the editor is changed. You can get both html and jsonFunction
onInitCallback function which is called when the editor is initializedFunction
jsonThe editor contents will be initialized with the json dataObject{}
HTMLThe editor contents will be initialized with the HTMLString''
showTitleTitle will be shownBooleanfalse
showBackBtnBtn to support history back will be shownBooleanfalse
autoSaveThe HTML will be stored to the localstorage every time the content is changedBooleanfalse
getEditorRefGet the editor ref objectFunction