الصفحة الرئيسية>موارد بناء الموقع>موارد أخرى
تنزيل

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

محرر نصية غني يعمل بكامل طاقته لكل من Android و iOS ، استنادًا إلى مشروع Zssrichtexteditor.

تثبيت 

 npm i --save react-native-zss-rich-text-editor

على Android ، أضف ما يلي إلى نهاية android/app/build.gradle 

project . afterEvaluate {
    apply from : ' ../../node_modules/react-native-zss-rich-text-editor/htmlCopy.gradle ' ;
    copyEditorHtmlToAppAssets(file( ' ../../node_modules/react-native-zss-rich-text-editor ' ))
}

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

الاستخدام

react-native-zss-rich-text-editor عنصرين وقاموس واحد:

RichTextEditor

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

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

  • initialTitleHTML

    HTML التي سيتم تقديمها في قسم العنوان بمجرد تحميل المكون.

  • initialContentHTML

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

  • titlePlaceholder

    النص الذي سيتم استخدامه كعنصر نائب عند عدم وجود نص في قسم العنوان.

  • contentPlaceholder

    النص الذي سيتم استخدامه كعنصر نائب عند عدم وجود نص في قسم المحتوى.

  • customCSS

    أي أنماط CSS مخصصة تريد حقنها للمحرر.

  • editorInitializedCallback

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

لدى RichTextEditor أيضًا طرقًا يمكن استخدامها في ref لضبط التصميم في موضع الاختيار الحالي أو المؤشر:

  • setBold()
  • setItalic()
  • setUnderline()
  • heading1()
  • heading2()
  • heading3()
  • heading4()
  • heading5()
  • heading6()
  • setParagraph()
  • removeFormat()
  • alignLeft()
  • alignCenter()
  • alignRight()
  • alignFull()
  • insertBulletsList()
  • insertOrderedList()
  • insertLink(url, title)
  • updateLink(url, title)
  • insertImage(attributes)
  • setSubscript()
  • setSuperscript()
  • setStrikethrough()
  • setHR()
  • setIndent()
  • setOutdent()
  • setBackgroundColor(color)
  • setTextColor(color)

تعرض هذه الطريقة مربع حوار لتحديد عنوان الارتباط وعنوان URL ، سيتم إدخاله في موقع المؤشر الحالي.

  • showLinkDialog(optionalTitle = '', optionalUrl = '')

لضبط المحتوى أو العناصر النائبة أو CSS ، استخدم هذه الطرق

  • setTitlePlaceholder(placeholder)
  • setContentPlaceholder(placeholder)
  • setCustomCSS(css)
  • setTitleHTML(html)
  • setContentHTML(html)

يتم استخدام هذه الطرق عند إضافة محتوى مثل الصور أو الروابط التي ستتعرف على موضع المؤشر. يحفظ prepareInsert الاختيار الحالي ، وسوف يحل restoreSelection محله بعد الانتهاء من الإدراج. يطلق عليه ضمنيًا بواسطة insertImage و insertLink ، لذا ربما لا ينبغي أن يتم استدعاؤهم مباشرة.

  • prepareInsert()
  • restoreSelection()

للحصول على المحتوى أو العنوان HTML ، استخدم هذه الأساليب غير المتزامنة .

  • async getTitleHtml()
  • async getTitleText()
  • async getContentHtml()
  • async getSelectedText()

للتركيز أو طمس الأقسام ، استخدم هذه الطرق

  • focusTitle()
  • focusContent()
  • blurTitleEditor()
  • blurContentEditor()

لمعرفة متى يكون العنوان أو المحتوى قيد التركيز ، استخدم الطرق التالية.

  • setTitleFocusHandler(callbackHandler)
  • setContentFocusHandler(callbackHandler)

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

  • registerToolbar(listener)

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

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

Richtexteditor

RichTextToolbar

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

يحتوي RichTextToolbar على خاصية مطلوبة واحدة:

  • getEditor()

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

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

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

  • actions

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

    • actions.insertImage
    • actions.setBold
    • actions.setItalic
    • actions.insertBulletsList
    • actions.insertOrderedList
    • actions.insertLink

  • onPressAddLink

  • onPressAddImage

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

  • selectedButtonStyle

  • iconTint

  • selectedIconTint

  • unselectedButtonStyle

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

  • renderAction

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

  • iconMap

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

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

 < RichTextToolbar
	getEditor = { ( ) => this . richtext }
/>

Richtexteditor

Richtexteditor

actions

هذه مجموعة من consts من جميع الإجراءات المدعومة. سيتم تمرير هذه في صفائف إلى جميع عمليات الاسترجاعات المسجلة لدى المحرر باستخدام طريقة registerToolbar() . 

 {
	setTitleHtml: 'SET_TITLE_HTML',
  	setContentHtml: 'SET_CONTENT_HTML',
  	getTitleHtml: 'GET_TITLE_HTML',
  	getTitleText: 'GET_TITLE_TEXT',
 	getContentHtml: 'GET_CONTENT_HTML',
  	getSelectedText: 'GET_SELECTED_TEXT',
  	blurTitleEditor: 'BLUR_TITLE_EDITOR',
  	blurContentEditor: 'BLUR_CONTENT_EDITOR',
  	focusTitle: 'FOCUS_TITLE',
  	focusContent: 'FOCUS_CONTENT',
	
  	setBold: 'bold',
  	setItalic: 'italic',
  	setUnderline: 'underline',
  	heading1: 'h1',
  	heading2: 'h2',
  	heading3: 'h3',
  	heading4: 'h4',
  	heading5: 'h5',
  	heading6: 'h6',
  	setParagraph: 'SET_PARAGRAPH',
  	removeFormat: 'REMOVE_FORMAT',
  	alignLeft: 'justifyLeft',
  	alignCenter: 'justifyCenter',
  	alignRight: 'justifyRight',
  	alignFull: 'justifyFull',
  	insertBulletsList: 'unorderedList',
  	insertOrderedList: 'orderedList',
  	insertLink: 'INST_LINK',
  	updateLink: 'UPDATE_LINK',
  	insertImage: 'INST_IMAGE',
  	setSubscript: 'subscript',
  	setSuperscript: 'superscript',
  	setStrikethrough: 'strikeThrough',
  	setHR: 'horizontalRule',
  	setIndent: 'indent',
  	setOutdent: 'outdent',
  	setTitlePlaceholder: 'SET_TITLE_PLACEHOLDER',
  	setContentPlaceholder: 'SET_CONTENT_PLACEHOLDER',
  	setTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',
  	setContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER',
  	prepareInsert: 'PREPARE_INSERT',
  	restoreSelection: 'RESTORE_SELECTION',
  	setCustomCSS: 'SET_CUSTOM_CSS',
  	setTextColor: 'SET_TEXT_COLOR',
  	setBackgroundColor: 'SET_BACKGROUND_COLOR',
}

الإسناد

react-native-zss-rich-text-editor هو غلاف حول مشروع Zssrichtexteditor المذهل. يتواصل أيضًا مع المحرر باستخدام (شوكة صغيرة) لمشروع Webview-Webview-Bridge الرائع.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل