Download do smartblock - Download do código -fonte smartblock

smartblock

Outros recursos

1.0.0

Baixar

SmartBlock

SmartBlock.js é um editor baseado em blocos JavaScript que permite escrever conteúdo facilmente em sites, mesmo com smartphone .

IE11 / Edge	Firefox	Cromo	Safári	iOS Safari

Captura de tela

Características

Fácil de usar com smartphone
Totalmente personalizável
Baseado em bloco
Mantenha o HTML limpo e limpe tags desnecessárias
Obtenha o resultado como html ou json
copiar e colar conteúdo

Instalar

$ npm install smartblock --save

Uso

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

Experimente no código e caixa

Personalizar

Você pode adicionar bloco personalizado assim

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

Você pode adicionar elemento embutido personalizado como este

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

Opções

Adereços	descrição	tipo	padrão
extensões	Matriz de extensões que estendem o recurso de SmartBlock	Extensão[]	Matriz de extensões
OnChange	Função de retorno de chamada que é chamado quando o conteúdo do editor é alterado. Você pode obter HTML e JSON	Função
oninit	Função de retorno de chamada que é chamado quando o editor é inicializado	Função
JSON	O conteúdo do editor será inicializado com os dados JSON	Objeto	{}
Html	O conteúdo do editor será inicializado com o HTML	Corda	''
ShowTitle	O título será mostrado	Booleano	falso
showbackbtn	BTN para apoiar o histórico de volta será mostrado	Booleano	falso
AutoSave	O HTML será armazenado no localStorage sempre que o conteúdo for alterado	Booleano	falso
GeteditorRef	Obtenha o objeto de referência do editor	Função