re editor
v0.5.8
رئيس تحرير نص رايف ريتش خارج الصندوق
للتكيف مع احتياجات التنمية المختلفة ، يوفر المحرر طريقتي الاستخدام التالية.
إعادة التحرير هو مكون مغلف يمكن استخدامه بعد التثبيت. أنه يحتوي على @refitor/core و @refitor/شريط الأدوات antd. يستخدم شريط الأدوات نمط ANTD افتراضيًا. إذا كنت ترغب في استخدام أشرطة أدوات أخرى ، يرجى الرجوع إلى المستند المخصص التالي
$ npm install re-editorتم تقديمه في JS
import 're-editor/lib/styles/index.css'يمكن أيضًا تقديمه في CSS (يتطلب دعم المعالجة المسبقة CSS)
@import 're-editor/lib/styles/index.css'| ملكية | يوضح | يكتب |
|---|---|---|
| قيمة | قيمة المحرر | هدف |
| onchange | يغير رد الاتصال للمحرر المحتوى | (القيمة: القيمة) => باطلة |
| عنصر نائب | نص النائب | خيط |
| قراءة | وضع القراءة فقط | منطقية |
| onimageupload | سرير صورة مخصص | (ملف: ملف) => الوعد <url: string> |
| أدوات | اضبط محتوى عرض شريط الأدوات | صفيف <صفيف |
نموذج صفيف tools props ، إذا كان صفيف ثنائي الأبعاد ، فسيتم عرضه في مجموعات
tools = { [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] }
// 或者
tools = { [
[ 'bold' , 'italic' , 'underline' , 'strikethrough' ] ,
[ 'orderedlist' , 'unorderedlist' ]
] }| اسم | وظيفة |
|---|---|
| عريض | عريض |
| مائل | مائل |
| تسطير | تسطير |
| strikethrough | حذف الخط |
| منسد | قائمة مرتبة |
| unorderedList | قائمة غير مرتبة |
| عنوان | عنوان |
| محاذاة | تنسيق |
| صورة | صورة |
| طاولة | ملزمة |
| شفرة | شفرة |
| تراجع | إلغاء |
| إعادة | إعادة صياغة |
| ملء الشاشة | ملء الشاشة |
يتم تقسيم المحرر إلى جزأين ، منطقة تحرير المحتوى وشريط الأدوات. يصف ما يلي كيفية تخصيص شريط الأدوات
$ npm install @re-editor/coreيمكنك إنشاء شريط أدوات محرر بأي شكل من الأشكال. تحتاج إلى تمرير مثيل المحرر إلى شريط الأدوات. يمكنك الرجوع إلى تنفيذ إعادة التحرير و @refitor/شريط الأدوات لعرض وثائق API للحصول على التفاصيل (لم يتم كتابة هذا الجزء من المستند بعد ، هل سيتم إكماله في المستقبل القريب؟)
على سبيل المثال ، تنفيذ وظيفة جريئة:
import { command } from '@re-editor/core' ;
const Demo = ( props ) => {
function handleClick ( ) {
command ( props . editor ) ( 'bold' )
}
return < div onClick = { handleClick } > bold </ div >
} Slate أو Draft ليس محررًا خالصًا ، فهي أشبه إطار عمل المحررين. تم تطوير إعادة التحرير على أساس Slate ، لذلك لا يتعين عليك الانتباه إلى عملية构建编辑器.
ينقسم النمط إلى جزأين ، عقدة (Bold ، H1 ، H2 ، إلخ) وشريط الأدوات. يمكنهم جميعًا إعادة كتابة النمط الأساسي من خلال CSS ، ويمكن أيضًا إعادة كتابة شريط الأدوات تمامًا من خلال CSS.
باستخدام التحديث الإضافي ، تكون قيمة رد اتصال OnChange بتنسيق غير قابل للتغيير. يمكنك استخدام Immutable-JS-DIFF وطرق أخرى للحصول على محتوى DIFF للتحديث الإضافي
يتم حفظ الصورة كـ BASE64 افتراضيًا. إذا كنت بحاجة إلى تحميل الصورة على الخادم المحدد ، فيمكنك استخدام وظيفة onImageUpload ، (ملف: ملف) => الوعد <url: string> رمز نموذج
下划线粗体斜体删除线下标العلوية
有序列表无序列表
محاذاة右对齐居中对齐两端对齐左对齐واليسر
h1 h2 h3 h4 h5 h6
图片表格代码高亮markdown#>-1.وظائف أخرى تستمر في زيادة ...
