smartblock

SmartBlock

SmartBlock.js adalah editor berbasis blok JavaScript yang memungkinkan Anda untuk menulis konten dengan mudah di situs web bahkan dengan smartphone .

IE11 / Edge	Firefox	Chrome	Safari	ios safari

Tangkapan layar

Fitur

• Mudah digunakan dengan smartphone
• Sepenuhnya dapat disesuaikan
• Berbasis blok
• Tetap bersihkan html dan singkirkan tag yang tidak perlu
• Dapatkan hasilnya sebagai HTML atau JSON
• Salin dan Tempel Isi

Memasang

$ npm install smartblock --save

Penggunaan

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

Cobalah di CodesandBox

Menyesuaikan

Anda dapat menambahkan blok kustom seperti ini

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

Anda dapat menambahkan elemen inline khusus seperti ini

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

Opsi

Alat peraga	keterangan	jenis	bawaan
ekstensi	Array ekstensi yang memperluas fitur SmartBlock	Perpanjangan[]	array ekstensi
Onchange	Fungsi panggilan balik yang dipanggil saat konten editor diubah. Anda bisa mendapatkan html dan json	Fungsi
oninit	Fungsi panggilan balik yang dipanggil saat editor diinisialisasi	Fungsi
json	Isi Editor akan diinisialisasi dengan data JSON	Obyek	{}
Html	Isi editor akan diinisialisasi dengan HTML	Rangkaian	''
showtitle	Judul akan ditampilkan	Boolean	PALSU
showbackbtn	BTN untuk mendukung sejarah akan ditampilkan	Boolean	PALSU
Autosave	HTML akan disimpan ke LocalStorage setiap kali konten diubah	Boolean	PALSU
geteditorref	Dapatkan Objek Ref Editor	Fungsi

Unduh

Unduh zip

GitHub

https://github.com/appleple/smartblock

Penyumbang

@steelydylan

Lisensi

Kode dan Dokumentasi Hak Cipta 2020 Oleh Appleple, Inc. Kode yang dirilis di bawah lisensi MIT.