Modern block styled editor
powered with React and ProseMirror
Easier to edit on touchscreen.

Get Started

Current Version : Ver.1.3.2

Output Result

Installation

Node.js package

Install the package via npm

$ npm install smartblock --save

Load JavaScript from CDN

<script src="https://unpkg.com/smartblock@1.3.1/dist/smartblock.js"></script>

Usage

As an React

In your JavaScript file:

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

As an Native JavaScript

<link rel="stylesheet" href="https://unpkg.com/smartblock@1.3.2/css/smartblock.css" />
<script src="https://unpkg.com/smartblock@1.3.2/dist/editor.js"></script>
<script src="https://unpkg.com/smartblock@1.3.2/dist/extensions.js"></script>
<!-- You can use smartblock without using JSX -->
<!-- bundle size is much smaller than the package build with react !-->
<script>
SmartBlock.Editor('#app', {
  html: '<h2>Hello World</h2><p>hello</p>',
  extensions: SmartBlock.Extensions,
  onChange: function(result) {
    console.log(result.json, result.html);
  }
});
</script>

https://codepen.io/

Compatibility

IE11, and Edge, iOS Safari, Firefox, Chrome, Safari

Document

Usage, introduction of other functions, component introduction etc.
are described in detail in the document.

Get Started

View on GitHub

SmartBlock was developed by @appleplecom and is open source (MIT license) on GitHub.
Please send us feedback, requests, bug reports and pull requests!

If you like it, please press Star ;)

GitHub page

If you like our project, we glad to have star! :)

GitHub