؛ MediumEditor - شريط أدوات تحرير النص المضمّن للويب

الجميع يعلم Medium.com ومنصة المدونات بشعبية كبيرة. هم إعادة تعريف الكثير من الأفكار في عالم التصميم ويمكنك العثور على الكثير من البرامج التعليمية التي تعلمك كيفية استنساخ تصميماتها.

أداة واحدة قد ترغب في ذلك البرنامج المساعد MediumEditor على أساس جافا سكريبت النقي. انها تتيح لك إضافة محرر نص مضمّن مخصص إلى أي صفحة في نفس التصميم مثل موقع المدونة المتوسطة. لذلك ، يمكنك السماح للقراء بالخط العريض ، ووضع خط مائل ، وإضافة روابط ، ورؤوس ، وأي شيء آخر إلى حد كبير, مع شريط أدوات بصري بسيط.

لاحظ أن هذا المشروع لا ينتمي لـ Medium بأي طريقة لذلك ليس البرنامج المساعد الرسمي.

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

المحرر يعمل في جميع المتصفحات الرئيسية, بما في ذلك الإصدار الحالي من Microsoft Edge و IE. حتى أنه يدعم الإصدارات القديمة من Internet Explorer ، والتي يرجع تاريخها إلى IE7. مجنون!

التثبيت هو نسيم حيث يمكنك سحب جميع الملفات مباشرة عبر npm أو Bower ، أو حتى استخدام CDN على الإنترنت مجانا مثل JSDelivr.

ثم عليك أد كلا ملفات CSS وجافا سكريبت إلى رأس موقع الويب الخاص بك. سهل جدا.

من هناك ، أنت اتصل بالمحرر مع سطر واحد من التعليمات البرمجية:

 var editor = newEmeditor ('. editable')؛ 

يمكنك تمرير قائمة عناصر الصفحة يجب أن تعمل فقط مع المحرر ، أو يمكنك دعها تعمل عبر الصفحة بأكملها.

ربما الاستخدام الأكثر عملية لهذا البرنامج المساعد هو إنشاء نوع من محرر WYSIWYG لتطبيق الويب.

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

إذا قمت بالتمرير إلى أسفل الصفحة التجريبية لـ MediumEditor ، فستجد أ قائمة الامتدادات يمكنك اختبار كذلك. وتشمل هذه تحرير تخفيض السعر الكامل, مع أزرار متوسطة الحجم و ميزات واجهة أخرى.

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