@steelydylan/smartblock

intuitive block based wysiwyg editor

Stats

StarsIssuesVersionUpdatedCreatedSize
@steelydylan/smartblock
20581.3.65 months agoa year agoMinified + gzip package size for @steelydylan/smartblock in KB

Readme

SmartBlock

npm version npm download GitHub license Tweet

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

IE / Edge
IE11 / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS 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

Edit hardcore-kalam-tghp9

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

Download

Download ZIP

Github

https://github.com/appleple/smartblock

Contributor

@steelydylan

License

Code and documentation copyright 2020 by appleple, Inc. Code released under the MIT License.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.