smartblock

Bloqueo inteligente

Smartblock.js es un editor basado en el bloque de JavaScript que le permite escribir contenidos fácilmente en sitios web incluso con teléfono inteligente .

IE11 / borde	Firefox	Cromo	Safari	iOS safari

Captura de pantalla

Características

• Fácil de usar con teléfono inteligente
• Totalmente personalizable
• Basado en bloque
• Mantenga HTML limpia y elimine las etiquetas innecesarias
• Obtenga el resultado como HTML o JSON
• Copiar y pegar contenido

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

Pruébalo en Codesandbox

Personalizar

Puede agregar un bloque personalizado como este

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

Puede agregar un elemento en línea 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" ) ) ; 

Opción

Accesorios	descripción	tipo	por defecto
extensiones	Variedad de extensiones que extienden la característica de SmartBlock	Extensión[]	variedad de extensiones
en el cambio	Función de devolución de llamada que se llama cuando se cambia el contenido del editor. Puedes obtener tanto html como json	Función
ininit	Función de devolución de llamada que se llama cuando se inicializa el editor	Función
json	El contenido del editor se inicializará con los datos JSON	Objeto	{}
Html	El contenido del editor se inicializará con el HTML	Cadena	''
exhibición	Se mostrará el título	Booleano	FALSO
showbackbtn	Se mostrará BTN para apoyar la historia de regreso	Booleano	FALSO
auto	El HTML se almacenará en el almacenamiento local cada vez que cambie el contenido.	Booleano	FALSO
getEditorRef	Obtenga el objeto de referencia del editor	Función

Descargar

Descargar zip

Github

https://github.com/appleple/smartblock

Contribuyente

@steelydylan

Licencia

Código y documentación Copyright 2020 por Appleple, Inc. Código publicado bajo la licencia MIT.