intuitive block based wysiwyg editor


Keywords
editor, javascript, npm, prosemirror, react, smartphone, typescript, ui, ui-components
License
MIT
Install
npm install smartblock@1.2.4

Documentation

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.