تنزيل smartblock - تنزيل رمز المصدر smartblock

smartblock

موارد أخرى

1.0.0

تنزيل

SmartBlock

SmartBlock.js هو محرر قائم على كتلة JavaScript والذي يمكّنك من كتابة المحتويات بسهولة على مواقع الويب حتى مع الهاتف الذكي .

IE11 / الحافة	Firefox	الكروم	سفاري	IOS Safari

لقطة شاشة

سمات

سهل الاستخدام مع الهاتف الذكي
قابلة للتخصيص بالكامل
كتلة على أساس
حافظ على نظافة 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	هدف	{}
HTML	سيتم تهيئة محتويات المحرر باستخدام HTML	خيط	'' '
Showtitle	سيتم عرض العنوان	منطقية	خطأ شنيع
showbackbtn	سيتم عرض BTN لدعم التاريخ الخلفي	منطقية	خطأ شنيع
Autosave	سيتم تخزين HTML إلى LocalStorage في كل مرة يتم فيها تغيير المحتوى	منطقية	خطأ شنيع
GetEditorRef	احصل على كائن المرجع المحرر	وظيفة