smartblock下載 - smartblock源代碼下載

smartblock

其他資源

1.0.0

下載

SmartBlock

SmartBlock.js是一個基於JavaScript塊的編輯器，即使使用智能手機，您也可以在網站上輕鬆編寫內容。

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都會存儲到本地存儲	布爾	錯誤的
geteDitorRef	獲取編輯器參考對象	功能