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

slatejsx

موارد أخرى

1.0.0

تنزيل

مقدمة

تم تطوير محرر النصوص الغني بأكمله استنادًا إلى SLATEJs ويدعم بشكل كامل الوظائف الشائعة مثل النص الغني والصور والجداول (يدعم خلايا دمج وتقسيم) ، ومقاطع الفيديو ، والخطوط الأفقية ، إلخ.
يدعم مكونات التمديد المخصصة ، يرجى الرجوع إلى وثائق SLATEJS الرسمية للحصول على التفاصيل
خارج الصندوق ، من السهل العمل. JSON يخزن النص الغني. مرحبا بكم في استخدام الفروع ، مثل ، وتقديم الفروع

ثَبَّتَ

npm install slatejsx

مثال تجريبي عبر الإنترنت

http://seditor.open.heyphp.com

الاستخدام

 import SEditor from 'slatejsx' ;
import 'slatejsx/dist/index.css' ;
import { useState } from 'react' ;

const config = [
  {
   "type" : "paragraph" ,
   "title" : "h1" ,
   "children" : [
    {
     "text" : ""
    }
   ]
  }
]

const [ value , setValue ] = useState ( config )

// 上传图片的回调，示例中将图片转为base64写入json，如果需要存到云存储可以改写此方法
const onUploadImage = ( file , callback ) => {
  const reader = new FileReader ( ) ;
  reader . addEventListener ( 'load' , ( ) => {
      const url = reader . result ;
      callback ( url )
  } ) ;

  reader . readAsDataURL ( file ) ;
}

function App ( ) {
  return (
    < SEditor
      value = { value }
      plugins = { [ ] }
      readOnly = { false }
      param = { { onUploadImage } }
      onChange = { v => setValue ( v ) }
    />
  ) ;
}

export default App ;

وصف المعلمة الدعائم

المعلمة	يكتب	يوضح
قيمة	صفيف	ارجع إلى وثائق SLATEJS الرسمية ، يمكنك تهيئة الهيكل في المثال.
onchange	وظيفة	عوائد عروض عمليات الاسترداد عندما تتغير البيانات ، يرجى الرجوع إلى المثال أعلاه
الإضافات	صفيف	مكون إضافي ، إذا كنت بحاجة إلى إضافة وظائف محرر جديدة ، فيمكنك تمريرها من خلال هذه المعلمة.
قراءة	منطقية	للقراءة فقط ، إذا كان ذلك صحيحًا ، لا يوجد شريط أدوات ولا يمكن تحريره
بارام	{}	معلمات إضافية ، سيتم كتابة المعلمات إلى كيان uselate ()