Need help with smartblock?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

appleple
160 Stars 12 Forks MIT License 519 Commits 8 Opened issues

Description

intuitive block based wysiwyg editor built with React and ProseMirror

Services available

!
?

Need anything else?

Contributors list

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 / EdgeIE11 / Edge | FirefoxFirefox | ChromeChrome | SafariSafari | iOS SafariiOS 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(<> Hello World

hello

'} 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: 
});

render(<> Hello World

hello

'} 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: 
});

render(<> Hello World

hello

'} 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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.