smartblock

SmartBlock

SmartBlock.jsはJavaScriptブロックベースのエディターであり、スマートフォンを使用してもWebサイトにコンテンツを簡単に書き込むことができます。

IE11 / EDGE	Firefox	クロム	サファリ	iOSサファリ

スクリーンショット

特徴

• スマートフォンで使いやすい
• 完全にカスタマイズ可能
• ブロックベース
• クリーンなHTMLを保持し、不要なタグを一掃します
• 結果をHTMLまたはJSONとして取得します
• コンテンツをコピーして貼り付けます

インストール

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

CodeSandBoxで試してください

カスタマイズ

このようなカスタムブロックを追加できます

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

このようなカスタムインライン要素を追加できます

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

オプション

小道具	説明	タイプ	デフォルト
拡張機能	SmartBlockの機能を拡張する拡張機能の配列	拡大[]	拡張機能の配列
onchange	エディターのコンテンツが変更されたときに呼び出されるコールバック関数。 HTMLとJSONの両方を入手できます	関数
oninit	エディターが初期化されたときに呼び出されるコールバック関数	関数
JSON	エディターの内容はJSONデータで初期化されます	物体	{}
HTML	エディターの内容は、HTMLで初期化されます	弦	''
showtitle	タイトルが表示されます	ブール	間違い
showbackbtn	履歴をサポートするBTNが表示されます	ブール	間違い
AutoSave	HTMLは、コンテンツが変更されるたびにLocalStorageに保存されます	ブール	間違い
geteditorref	エディターRefオブジェクトを取得します	関数

ダウンロード

zipをダウンロードしてください

github

https://github.com/appleple/smartblock

貢献者

@SteelyDylan

ライセンス

MITライセンスの下でリリースされたAppleple、Inc。コードによるコードとドキュメント著作権2020。