Nightingale Posing Mischievously

    smartblock
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.8 • Public • Published

    SmartBlock

    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

    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, GlobalStyle } from 'smartblock';
     
    render(<>
      <GlobalStyle />
      <SmartBlock 
        html={'<h2>Hello World</h2><p>hello</p>'}
        onChange={({ json, html }) => { console.log(json, html);}}  
      />
    </>, document.getElementById("app"));

    Extensions

    Customize

    You can add custom block like this

    import { Extensions, CustomBlock, CustomMark } from 'smartblock';
    Extensions.push(new CustomBlock({  tagName: 'div',  className: '.alert',  icon: <SomeIconComponent />});
     
    render(<>
      <GlobalStyle />
      <SmartBlock 
        extensions={Extensions}
        html={'<h2>Hello World</h2><p>hello</p>'}
        onChange={({ json, html }) => { console.log(json, html);}}  
      />
    </>, document.getElementById("app"));

    You can also add custom inline element like this

    import { Extension, CustomBlock, CustomMark } from 'smartblock';
    Extension.push(new CustomMark({  tagName: 'span',  className: '.small',  icon: <SomeIconComponent />});
     
    render(<>
      <GlobalStyle />
      <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

    Keywords

    none

    Install

    npm i smartblock

    DownloadsWeekly Downloads

    201

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    2.1 MB

    Total Files

    406

    Last publish

    Collaborators

    • appleple