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

تحذير التغيير القادم

في 18.10. سنصدر إصدارًا رئيسيًا جديدًا (V8) من محرر النصوص الغنية ، وهو إعادة كتابة قاعدة قاعدة الشفرة القديمة. هذا التحذير ليس ضروريًا لمستخدمي حزم NPM باستخدام الإصدار ، ولكن مستخدمي حزمة UNPKG (http://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js) سوف يلاحظون أن أحدث حزمة من الكود لن تعمل كما هو متوقع بعد الآن. لتجنب تغيير كسر في نظامك ، يمكنك تعيين إصدار حزمة UNPKG بشكل صريح إلى آخر إصدار مستقر من V7 على النحو التالي: http://unpkg.com/[email protected]/dist/rich-text-editor-bundle.js

سيمنحك هذا الوقت لتطوير أنظمتك لاستيعاب الإصدار الجديد بمجرد إصداره.

abitti.net

استخدام سياسة العلامات التجارية Abitti

محرر نصية ريتش مع دعم الرياضيات لمجلس فحص المصفوفة الفنلندية. يمكن العثور على العرض التوضيحي المباشر على https://math-demo.abitti.fi/

منذ v4.0.0 ، يتم توفير رمز ES2017 فقط مع وحدات ES (في dist Directory). إذا كنت ترغب في استخدام هذه المكتبة ، فمن المحتمل أن تكون هناك حاجة إلى مجموعة مثل WebPack أو Rollup.

الاستخدام

الاستخدام مع NPM

قم بتثبيت الحزمة باستخدام npm install rich-text-editor . يمكن استخدام محرر النص الغني إما

  • مكون رد فعل import RichTextEditor from 'rich-text-editor'
  • أو كدالة في التطبيقات التي لا تستخدم React import { makeRichText } from 'rich-text-editor/dist/rich-text-editor'

تم وصف معظم الخصائص التي تم تمريرها إلى المكون أو وظيفة التهيئة أدناه. يمكن العثور على مزيد من المعلومات في الأنواع و/أو التعليمات البرمجية المصدر.

الاستخدام كحزمة CDN

أضف علامة نصية إلى صفحة html الخاصة بك هو مصدرها https://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js ، eg <script type="module" src="https://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js"></script>

سيؤدي ذلك إلى إضافة نص makeRichText ، والذي يمكن استخدامه لتهيئة المحرر.

تأخذ الوظيفة المعلمات التالية ككائن:

مفتاح تقصير
حاوية document.getElementByid ('Rich-text-editor-root')
لغة 'fi'
baseurl '' '
المسموح بها ["Image/PNG" ، "Image/JPEG"]
onvaluechange () => {}
Textareaprops {}

مثال: 

 {
  container: document.getElementById('rich-text-editor-root')!,
  language: 'FI',
  baseUrl: '',
  allowedFileTypes: ['image/png', 'image/jpeg'],
  onValueChange: () => {},
  textAreaProps: {},
}

يتم تمرير TextAreaProps إلى عنصر DIV الأساسي الذي هو عنصر المحرر المرئي ، وهنا تلك ذات الصلة بتكوين مستخدمي CDN:

مفتاح يكتب غاية
ariainvalid منطقية أضف ARIA-Invalid
arialabelledby خيط أضف أريا
محرر React.cssproperties خصائص CSS المباشرة لعنصر المحرر
اسم الفصل خيط اسم (أسماء) فئة إضافية لعنصر المحرر
بطاقة تعريف خيط ميدان المعرف لعنصر المحرر
لانغ خيط لانج فيلد إلى عنصر المحرر لإمكانية الوصول

الهدف (اقرأ هذا قبل تقديمه)

تم تطوير محرر النصوص الغنية للسماح للمرشحين بامتحان شهادة الثانوية العامة الفنلندية بربط لقطات الشاشة وكتابة المعادلات كجزء من عروضهم. هدفنا ليس إنشاء بديل للانخفاض للأغراض العامة للنص ولكن المحرر الذي يعمل في Abitti ومتصفحه المدمج.

بينما نحتفل بكل تقرير الأخطاء ، فإن طلب الميزات وسحب الطلب ، نطلب منك أن تتذكر المتابعة:

  • معظم القضايا المتعلقة بدخول الصيغ وتقديم اللاتكس ناتجة عن مكتبات Mathjax و Mathquill. ليس لدينا موارد لكتابة طلبات السحب بناءً على المشكلات المقدمة إلينا. لأسباب مماثلة ، لن نمر بقضايا المنبع المبلغ عنها.
  • نحن لا نولي اهتمامًا للقضايا أو طلبات السحب التي تقع خارج مهمتنا - Abitti.

نأمل أن تفهم رغبتنا في التركيز على هدفنا المحدد بموجب القانون.

التبعيات

  • Mathquill (https://github.com/digabi/Mathquill)
  • Mathjax-Doed
  • jQuery
  • تطهير HTML

ابدء

  1. تثبيت node.js
  2. تشغيل npm install .
  3. تشغيل npm run dev .
  4. اختبارات المتصفح: http: // localhost: 5111/test/tests.html
  5. الاختبار اليدوي: http: // localhost: 5111/test/tests.html؟ grep = manual

اختبار الحزمة محليا

  1. تشغيل npm run build
  2. تشغيل npm run dev-server
  3. قم بتشغيل خادم HTTP بسيط في جذر المشروع ، على سبيل المثال python3 -m http.server 8080
  4. تحرير dev/index.html علامة نصية للإشارة إلى الحزمة: <script type="module" src="/dist/rich-text-editor-bundle.js"></script> (لا ترتكب هذا).
  5. انتقل إلى http: // localhost: 8080/dev/index.html

مثال على الاستخدام المباشر

العرض التوضيحي: http://digabi.github.io/rich-text-editor/

المصدر: https://github.com/digabi/rich-text-editor/blob/master/index.html

رخصة

https://opensource.org/licenses/mit

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