Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/appleple/smartblock
intuitive block based wysiwyg editor built with React and ProseMirror
https://github.com/appleple/smartblock
editor javascript npm prosemirror react smartphone typescript ui ui-components
Last synced: about 24 hours ago
JSON representation
intuitive block based wysiwyg editor built with React and ProseMirror
- Host: GitHub
- URL: https://github.com/appleple/smartblock
- Owner: appleple
- License: mit
- Created: 2019-12-20T02:32:43.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-12-15T22:47:30.000Z (28 days ago)
- Last Synced: 2025-01-04T11:35:01.964Z (8 days ago)
- Topics: editor, javascript, npm, prosemirror, react, smartphone, typescript, ui, ui-components
- Language: TypeScript
- Homepage: https://appleple.github.io/smartblock/
- Size: 44.8 MB
- Stars: 315
- Watchers: 11
- Forks: 27
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components - smartblock - [demo](https://appleple.github.io/smartblock/) - [docs](https://appleple.github.io/smartblock/get-started) - Block based WYSIWYG editor based on ProseMirror. (UI Components / Form Components)
- awesome-react - smartblock - Block based WYSIWYG editor based on ProseMirror.  (UI Components / Form Components)
- awesome-react-components - smartblock - [demo](https://appleple.github.io/smartblock/) - [docs](https://appleple.github.io/smartblock/get-started) - Block based WYSIWYG editor based on ProseMirror. (UI Components / Form Components)
- best-of-react - GitHub - 83% open · ⏱️ 20.06.2023): (Editor Components)
- fucking-awesome-react-components - smartblock - 🌎 [demo](appleple.github.io/smartblock/) - 🌎 [docs](appleple.github.io/smartblock/get-started) - Block based WYSIWYG editor based on ProseMirror. (UI Components / Form Components)
- awesome-react-components - smartblock - [demo](https://appleple.github.io/smartblock/) - [docs](https://appleple.github.io/smartblock/get-started) - Block based WYSIWYG editor based on ProseMirror. (UI Components / Form Components)
- awesome-react-components - smartblock - [demo](https://appleple.github.io/smartblock/) - [docs](https://appleple.github.io/smartblock/get-started) - Block based WYSIWYG editor based on ProseMirror. (UI Components / Form Components)
README
# SmartBlock
[](https://badge.fury.io/js/smartblock)
[](https://www.npmjs.com/package/smartblock)
[](https://raw.githubusercontent.com/appleple/smartblock/master/LICENSE)
[](https://twitter.com/intent/tweet?text=Awesome%20block-based%20JavaScript%20%Editor&url=https://github.com/appleple/smartblock&via=appleplecom&hashtags=blocks,smartblock)
SmartBlock.js is a JavaScript block based editor which enables you to write contents easily on websites even with **SmartPhone**.
| [
](http://godban.github.io/browsers-support-badges/)IE11 / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)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
```sh
$ npm install smartblock --save
```
## Usage
```js
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
[](https://codesandbox.io/s/hardcore-kalam-tghp9?fontsize=14&hidenavigation=1&theme=dark)
## Customize
You can add custom block like this
```js
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
```js
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](https://github.com/appleple/smartblock/archive/master.zip)
## Github
[https://github.com/appleple/smartblock](https://github.com/appleple/smartblock)
## Contributor
[@steelydylan](https://github.com/steelydylan)
## License
Code and documentation copyright 2020 by appleple, Inc. Code released under the [MIT License](https://github.com/appleple/smartblock/blob/master/LICENSE).