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

محرر صغير

محرر نصي HTML Rich Tiny مكتوب في الفانيليا JavaScript

هدف

قم بإنشاء مكتبة أقل من 5 كيلو بايت (مضغوطة) تتيح استخدام عنصر HTML كمحرر نصي غني في الفانيليا القديم العادي.

يدعم

إذا كنت تستخدم ومثل هذه المكتبة ، فلا تتردد في دعم مشاريع المصدر المفتوح.

كيفية التثبيت 

 npm install tiny-editor

أو قم بتحميل ملف الحزمة مباشرة في نهاية مستند HTML الخاص بك. 

 <script src="https://unpkg.com/tiny-editor/dist/bundle.js"></script>

كيفية استخدام

  1. الرجوع إلى مكتبة المحرر في مستند HTML الخاص بك
  2. أضف data-tiny-editor إلى عنصر HTML الذي تريد تحويله إلى محرر

كيفية إنشاء محرر ديناميكي

استخدم window.__tinyEditor.transformToEditor() التي تأخذ كوسيطة أول عنصر DOM (عادةً <div> ) الذي تريد تحويله إلى محرر. الرجوع إلى /public/index.html للحصول على مثال.

كيفية استخراج النص المنسق

استمع إلى حدث input على عنصر المحرر HTML. 

 document
  .querySelectorAll('[data-tiny-editor]')
  .forEach(editor =>
    editor.addEventListener('input', e => console.log(e.target.innerHTML)
  )
);

كيفية التخصيص

هناك العديد من الخيارات التي يمكن استخدامها لتخصيص كيفية تقديم المحرر الصغير. بشكل افتراضي ، يتم تمكين كل الخيارات. يمكنك تعطيل خيار باستخدام سمات البيانات.

على سبيل المثال ، يمكنك إزالة زر التنسيق الغامق باستخدام السمة التالية: 

 <div data-tiny-editor data-bold="no"></div>

خيارات

  • data-formatblock="no" : قم بإزالة القائمة المنسدلة للأنماط
  • data-bold="no" : قم بإزالة الزر Bold
  • data-italic="no" :: قم بإزالة الزر المائل
  • data-underline="no" : قم بإزالة الزر "تسطير
  • data-fontname="no" : قم بإزالة القائمة المنسدلة للخط
  • data-forecolor="no" :: قم بإزالة زر لون النص
  • data-justifyleft="no" : قم بإزالة زر المحاذاة الأيسر
  • data-justifycenter="no" : قم بإزالة زر محاذاة المركز
  • data-justifyright="no" : قم بإزالة زر المحاذاة اليمنى
  • data-insertorderedlist="no" : قم بإزالة زر القائمة المرقمة
  • data-insertunorderedlist="no" : قم بإزالة زر القائمة المصحى
  • data-outdent="no" : قم بإزالة زر التقليل من المسافة البادئة
  • data-indent="no" : قم بإزالة زر زيادة المسافة البادئة
  • data-remove-format="no" : قم بإزالة زر التنسيق المتميز
  • data-autofocus="no" : قم بإزالة التركيز التلقائي من المحرر

المتصفحات المدعومة

يتم دعم المتصفح الحديث (Chrome ، Firefox ، Edge ، ...). المحرر الصغير لا يعمل على Internet Explorer.

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