react web highlight

React Web Highlighter ؟ ️

نص نصي غني مميزًا في المكتبة الأمامية التي تدعم التخزين المستمر واستعادة النص المميز

---

0. الحالات عبر الإنترنت

انقر فوق لي انقر

1. الإلهام

شكرًا جزيلاً على الأفكار المقدمة في المادتين التاليتين:

"تسليط الضوء على الخبز" و "إدراج الملاحظات" - أكثر من مجرد نقاط معرفة في الواجهة الأمامية

كيفية استخدام JS لتنفيذ وظيفة Notes عبر الإنترنت من "تسليط الضوء على الكلمات"؟ ؟ ️

2. التثبيت

npm i react-web-highlighter

yarn add react-web-highlighter

3. كيفية الاستخدام

 import React , { useCallback , useMemo , useState } from "react" ;
import TextHighlight from 'react-web-highlighter' ;

/** Tip: 如果划线木有效果，看看样式是否有添加 */

const template = "<p>我就是一段文本，想记录点什么，然而却又不知道从何时记录起，那就只能默默的埋藏在心底，生根发芽...</p>" ;

const App = ( ) => {
  const [ data , setState ] = useState < any > ( [ ] ) ;

  const modes = useMemo ( ( ) => {
    return [
      {
        className : "huaxian" ,
        mode : "huaxian" ,
        name : "划线" ,
      } ,
    ] ;
  } , [ ] ) ;

  const onAdd = useCallback (
    ( selectText ) => {
      const d = {
        ... selectText ,
        mode : 'huaxian' ,
        id : Math . random ( ) . toString ( ) . slice ( 2 )
      } ;
      data . push ( d ) ;
      setState ( [ ... data ] ) ;
    } ,
    [ data ]
  ) ;

  const onUpdate = useCallback (
    ( list = [ ] ) => {
      setState ( ( d : any ) => d ) ;
    } ,
    [ setState ]
  ) ;

  return (
    < TextHighlight
      value = { data }
      template = { template }
      modes = { modes }
      onAdd = { onAdd }
      onUpdate = { onUpdate }
    />
  ) ;
} ;

export default App ; 

4. مثال

مثال على الاستخدام الأكثر تعقيدًا ، تحقق من المثال التجريبي للمستودع (في مجلد example )

التثبيت التجريبي والتشغيل (حاليًا باستخدام TSDX):

1. دليل جذر المشروع:

 yarn

2. دليل مثال:

 yarn

3. دليل جذر المشروع:

 yarn start

4. دليل مثال:

 yarn start

5. زيارة: http: // localhost: 1234

---

5. وصف معلمة مكون TextHighlight

• خصائص مكون TextHighlight

  اسم المعلمة	يكتب	يصف	هل هو ضروري	القيمة الافتراضية
  نموذج	string	سلسلة HTML النص الغنية	نعم	--
  قيمة	INoteTextHighlightInfo[]	أبرز بيانات الاختيار	لا	--
  tagname	string	اسم علامة HTML للتغليف النص المميز	لا	span
  أوناد	(data:INoteTextHighlightInfo)=>any	تم تشغيل رد الاتصال عند إضافة اختيار جديد	لا	--
  Onupdate	(data:INoteTextHighlightInfo[])=>any	يتم تشغيل رد الاتصال عند تحديد تحديد موجود (لأن التحديد سيتداخل	لا	--
  Rowkey	string	قيمة فريدة لكل بيانات	لا	id
  أوضاع	IModeProps[]	تستخدم للتمييز بين الأنواع والأنواع المختلفة لضبط الأنماط	لا	--

• سمة نوع INoteTextHighlightInfo :

  اسم المعلمة	يكتب	يصف	هل هو ضروري
  قائمة	INoteTextHighlightInfoItem[]	بيانات الاختيار	نعم
  نص	string	بيانات نصية محددة في التحديد	نعم
  وضع	string	نوع البيانات الحالي (على سبيل المثال: ملاحظات ، خطوط الرسم ، إلخ)	لا

• سمة نوع INoteTextHighlightInfoItem :

  اسم المعلمة	يكتب	يصف	هل هو ضروري
  مستوى	number[]	بيانات مستوى التحديد ، انتقل لأسفل إلى طبقة عقدة النص المحددة حسب الطبقة وفقًا للعقدة العليا	نعم
  يبدأ	number	إزاحة عقدة نص البدء المحددة حاليًا	نعم
  نهاية	string	إزاحة عقدة نص النهاية المحددة حاليًا	نعم
  نص	string	النص المحدد بواسطة عقدة النص الحالية	نعم

• خصائص نوع IModeProps :

  اسم المعلمة	يكتب	يصف	هل هو ضروري
  وضع	string	يكتب	نعم
  اسم الفصل	string	تستخدم لتعيين اسم الفصل للنوع الحالي	نعم

5.1 وصف مكون شريط الأدوات

يجب أن يكون شريط الأدوات موجودًا كعنصر طفل في Texthighlight

اسم المعلمة	يكتب	يصف	هل هو ضروري	القيمة الافتراضية
قناع	boolean	ما إذا كنت تعرض طبقة القناع	لا	حقيقي
مرئي	boolean	تستخدم للتحكم في الشاشة المخفية للنوافذ المنبثقة	لا	خطأ شنيع
Autolosable	boolean	انقر لتحفيز الأنبوب تلقائيًا	لا	حقيقي
WrapClassName	string	تعيين النمط	لا	-
Oncancel	function	أوقف رد الاتصال	لا	-
أطفال	ReactNode	العناصر الفرعية داخل النافذة المنبثقة	لا	-

6. الطريقة

طريقة setSelectRange :

اسم المعلمة	يكتب	يصف	هل هو ضروري
العقدة	INoteTextHighlightInfo	طرق لتحديد النص الأصلي	نعم

7. تودو

1. اكتب حالات الاختبار
2. تحسين المنطق التفاعلي