react native rich editor

رد فعل محرر النص الأصلي الغني

---

محرر نصية غني يعمل بكامل طاقته لكل من Android و iOS (MacOS و Windows)؟

إذا كنت ترغب في استخدام Flutter ، يمكنك التحقق هنا لإضافة flutter_rich_editor

 yarn add react-native-pell-rich-editor
or
npm i react-native-pell-rich-editor

أيضًا ، اتبع الإرشادات هنا لإضافة تبعية react-native-webview .

• المعاينة عبر الإنترنت （بعض الوظائف）
• مثال إعادة كتابة السنانير

---

مشكلة التمرير

### usecontainer = {true} يجب وضعها في scrolview وإضافة طريقة رد اتصال oncursorPosition للتعامل مع وضع شريط التمرير ، راجع إلى أمثلة this.scrollRef.current.scrollTo({y: scrollY - 30, animated: true});

---

RichEditor

مكون المحرر. ما عليك سوى وضع هذا المكون في عرضي التسلسل الهرمي لتلقي محرر نصية غني يعمل بكامل طاقته.

RichEditor يأخذ الدعائم الاختيارية التالية:

• html

  يقبل HTML المخصص ، مما يتيح لك إجراء تخصيصاتك الخاصة

• placeholder

  لف صاحب نائب محتوى المحرر

• initialContentHTML

  HTML التي سيتم تقديمها في قسم المحتوى على التحميل.

• initialFocus

• قيمة منطقية لتركيز طلب المحتوى الأولي. القيمة الافتراضية false .

• disabled

• قيمة منطقية لتعطيل المحرر. القيمة الافتراضية false .

• enterKeyHint

• قيمة السلسلة لتعيين نوع مفتاح الإرجاع - returnkeytepe

• editorInitializedCallback

  وظيفة سيتم استدعاؤها عند تهيئة المحرر.

• editorStyle

  تصميم للحاوية أو المحرر الغني المزيد من الإعدادات المظلمة أو الخفيفة. كائن يحتوي على الخيارات التالية:

  • backgroundColor : لون خلفية المحرر
  • color : لون محرر اللون
  • مؤشر caretColor /اختيار
  • placeholderColor : لون المحرر لون النص
  • contentCSSText : محتوى محتوى النص CSS （صحيح أولي）
  • cssText : نص محرر CSS Global （الصالح الأولي）
  • initialCSSText : حقن CSS في بداية ورقة الأنماط المضمنة. مفيد لدمج الخطوط المخصصة (انظر أدناه).

• رد اتصال onChange بعد تعديل بيانات المحرر

• رد الاتصال onHeightChange الاتصال بعد تغيير الارتفاع

• رد اتصال onMessage خارج معالجة النوع الداخلي postmessage

   < img src ="" onclick =" _.sendEvent('ImgClick') " contenteditable =" false " />

• command تنفيذ JS في المحرر

   // $ = document
   this . richText . current ?. commandDOM ( '$.execCommand(' insertHTML ', false, "<br/>")' ) ;

• commandDOM تلاعب DOM في المحرر

   // $ = document.querySelector
   this . richText . current ?. commandDOM ( `$('#title').style.color=' ${ color } '` ) ;

• useContainer قيمة منطقية تحدد ما إذا كانت حاوية العرض ملفوفة حول WebView. القيمة الافتراضية صحيحة. إذا كنت تستخدم عرضك الخاص لالتفاف هذه المكتبة حولها ، فقم بتعيين هذه القيمة على False.

• styleWithCSS عندما يتم تعديل سمة النمط من العلامات. خلاف ذلك يتم إنشاء العلامات المخصصة. القيمة الافتراضية خاطئة

• initialHeight Usecontainer خاطئ بعرض مضمّن للارتفاع الأولي

• pasteAsPlainText قيمة منطقية (خاطئة كإعداد افتراضي) تحدد ما إذا كان لصق الحافظة سيحتفظ بتنسيقه أو سيتم القيام به كنص عادي

• useCharacter يتيح لك خيار تعطيل الأحرف الصينية دعم الأحرف الإنجليزية دون أخطاء على Android. تعيين إلى true افتراضيًا للتوافق المتخلف.

• defaultHttps قيمة منطقية (صحيحة كما الافتراضي) التي تعزز https: // لبدء الروابط

• onPaste Callback Clipboard Paste Value

• onKeyUp callback onkeyup (Android 229 Bug)

• حدث onKeyDown Callback Keydown (Android 229 Bug)

• قيمة إدخال رد الاتصال onInput

• onLink callback link انقر فوق

• محرر رد الاتصال onFocus التركيز

• محرر رد الاتصال onBlur

• رد اتصال onCursorPosition أدخل موضع المؤشر this.scrollRef.current.scrollTo({y: scrollY - 30, duration: 100, animated: true});

لدى RichEditor أيضًا طرقًا يمكن استخدامها في ref لضبطها:

• setContentHTML(html: string)
• insertImage(url: string, style?: string)
• insertLink(title: string, url: string)
• insertText(text: string)
• insertHTML(html: string)
• insertVideo(url: string, style?: string)
• setContentFocusHandler(handler: Function)
• blurContentEditor()
• focusContentEditor()

تقوم هذه الطريقة بتسجيل وظيفة سيتم استدعاؤها عند تغيير موضع المؤشر أو يتم إجراء تغيير على تصميم المحرر في موضع المؤشر. ، سيتم استدعاء رد الاتصال بمجموعة من actions النشطة في موضع cusor ، مما يسمح لشريط الأدوات بالرد على التغييرات.

• registerToolbar(listener: Function)

مثال الاستخدام:

 < RichEditor
  ref = { ( r ) => this . richtext = r }
  initialContentHTML = { 'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>' }
  editorInitializedCallback = { ( ) => this . onEditorInitialized ( ) }
/>

باستخدام الخطوط المخصصة

من أجل استخدام الخطوط المخصصة ، تحتاج إلى استخدام initialCSSText من دعامة editorStyle .

1. قم بتحميل ملفات الخط إلى https://transfonter.org وتحقق من خيار "base64". عند تنزيل ملف zip ، سيكون هناك ملف stylesheet.css هناك.
2. خذ ملف stylesheet.css الخاص بك وإنشاء ملف stylesheet.js .
3. إنشاء تصدير ولصق محتويات ملف CSS هناك. على سبيل المثال:

 const FontFamilyStylesheet = `
@font-face {
    font-family: 'Your Font Family';
    src: url('data:font/ttf;charset=utf-8;base64,...............'); // You can also use a web url here
    font-weight: normal;
}
` ;

export default FontFamilyStylesheet ;

4. حيث قمت بدمج مكون RichEditor ، استيراد الملف واستخدمه.

 import FontFamilyStylesheet from 'stylesheet.js' ;

const fontFamily = 'Your_Font_Family' ;
const initialCSSText = { initialCSSText : ` ${ FontFamilyStylesheet } ` , contentCSSText : `font-family: ${ fontFamily } ` }
< RichEditor editorStyle = { initialCSSText } / >

5. إعادة تحميل التطبيق. يجب أن ترى الآن محتوى المحرر الغني في وجه الخط المخصص الخاص بك!

لمزيد من المعلومات حول كيفية عمل initialCSSText ، تحقق من العلاقات العامة هنا. أيضًا ، يعتمد هذا على التعليق على هذه المشكلة وشوكةه التي تصف كيفية استخدام ملف الخط المشفر BASE64.

RichToolbar

هذا مكون يوفر شريط أدوات للتحكم بسهولة في محرر. تم تصميمه ليتم استخدامه مع مكون RichEditor .

لدى RichToolbar عقار واحد مطلوب:

• getEditor()

والتي يجب أن توفر وظيفة تُرجع ref إلى مكون RichEditor .

وذلك لأن ref لا يتم إنشاؤه حتى بعد العرض الأول ، قبله شريط الأدوات. هذا يعني أن أي ref تم تمريره مباشرة سيتم تمريره حتما على أنه undefined .

الدعائم الأخرى التي يدعمها مكون RichToolbar هي:

• actions

  array من actions التي سيتم توفيرها بواسطة شريط الأدوات هذا. الإجراءات الافتراضية هي:

  • actions.insertImage
  • actions.setBold
  • actions.setItalic
  • actions.insertBulletsList
  • actions.insertOrderedList
  • actions.insertLink
  • actions.keyboard
  • actions.setStrikethrough
  • actions.setUnderline
  • actions.removeFormat
  • actions.insertVideo
  • actions.checkboxList
  • actions.undo
  • actions.redo

• وظائف onPressAddImage تسمى عندما يتم استغلال إجراءات addImage .

• منطق onInsertLink لما يحدث عند الضغط على زر إضافة إدراج ارتباط

• disabled

• قيمة منطقية لتعطيل المحرر. القيمة الافتراضية false .

• iconTint

• unselectedButtonStyle

• selectedIconTint

• selectedButtonStyle

• disabledIconTint

• disabledButtonStyle

  هذه توفر خيارات لتصميم أزرار عمل.

• iconSize

  يحدد حجم الرمز بالبكسل. الافتراضي هو 50.

• renderAction

  من الناحية ، يمكنك توفير وظيفة عرض سيتم استخدامها بدلاً من الافتراضي ، بحيث يمكنك التحكم بالكامل في تصميم Tollbar.

• iconMap

  يأتي RichTextToolbar مع أيقونات افتراضية للإجراءات الافتراضية التي يقدمها. لتجاوزها ، أو لإضافة أيقونات لإجراءات غير الافتراض ، تزويدهم في قاموس لهذا الدعامة.

مثال الاستخدام:

 const richText = React . createRef ( ) || useRef ( ) ;
< RichToolbar editor = { that . richText } /> 

مع إجراء مخصص:

لتحديد الإجراء المخصص الخاص بك:

• أرسل اسم الإجراء الخاص بك كسلسلة في مجموعة actions .
• قم بتضمين أيقونة لذلك مع iconMap
• أضف دعامة دالة مع نفس اسم الإجراء ليتم استدعاؤها في النقر فوق

 < RichToolbar
    editor = { that . richText }
	actions = { [
		actions . setBold ,
		actions . setItalic ,
		actions . insertBulletsList ,
		actions . insertOrderedList ,
		actions . insertImage ,
		'customAction' ,
	] }
	iconMap = { {
		customAction : customIcon ,
	} }
	customAction = { this . handleCustomAction }
/> 

مثال كامل باستخدام مكون وظيفي

 import React from "react" ;
import { Text , Platform , KeyboardAvoidingView , SafeAreaView , ScrollView } from "react-native" ;
import { actions , RichEditor , RichToolbar } from "react-native-pell-rich-editor" ;


const handleHead = ( { tintColor } ) => < Text style = { { color : tintColor } } > H1 </ Text >
const TempScreen = ( ) => {
	const richText = React . useRef ( ) ;
	return (
    < SafeAreaView >
      < ScrollView >
        < KeyboardAvoidingView behavior = { Platform . OS === "ios" ? "padding" : "height" }	style = { { flex : 1 } } >
          < Text > Description: </ Text >
          < RichEditor
              ref = { richText }
              onChange = { descriptionText => {
                  console . log ( "descriptionText:" , descriptionText ) ;
              } }
          />
        </ KeyboardAvoidingView >
      </ ScrollView >

      < RichToolbar
        editor = { richText }
        actions = { [ actions . setBold , actions . setItalic , actions . setUnderline , actions . heading1 ] }
        iconMap = { { [ actions . heading1 ] : handleHead } }
      />
    </ SafeAreaView >
  ) ;
} ;

export default TempScreen ;

---

شكرا جزيلا لدعم jetbrains