A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/appleple/smartblock below:

appleple/smartblock: intuitive block based wysiwyg editor built with React and ProseMirror

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

$ npm install smartblock --save
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"));

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

https://github.com/appleple/smartblock

@steelydylan

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4