الكشف عن تفاصيل KuroEditor الجزء الثاني: الهدف والوظائف وآلية العمل

سياسة التطوير

نظراً لأن هذا محرر مخصص لنظام KuroCMS، فإنني أهدف إلى توفير أكبر قدر ممكن من التنوع مع الحفاظ على الجوهر الأساسي. ويعد محرر WYSIWYG أمراً لا بد منه، وقد تم بناؤه باستخدام Vanilla JS النقي. ويجب أن يكون سريعاً بشكل استثنائي، دون استخدام أي أطر عمل. وتجنبت أن يكون محرراً رأسياً (headless) بحتاً للحفاظ على الارتباط غير المباشر. وطالما لم يحدد المستدعي طبقة @layer، فيمكنه الحفاظ على شعور بالاتحاد من خلال اتباع تخطيط أزرار المستدعي — على الرغم من أنني لن أستخدم ذلك في KuroCMS! لول.

وتستخدم أوراق الأنماط CSS إطار العمل Tailwind بالإضافة إلى الأنماط الداخلية لـ KuroEditor. ويشبه سلوك الجداول سلوك جداول Dropbox Paper. وفي الوقت الحالي، حتى لو لم يكن مصقولاً تماماً، فطالما لم تتأثر سهولة الاستخدام بشكل كبير، فسأعطي الأولوية للإنجاز على التعديلات الدقيقة. ففي النهاية، لا يبدأ العمل حتى ينتهي. وسأصدره طالما أنه قابل للاستخدام بشكل معقول.

المواصفات التفصيلية

قد يكون شرح المواصفات التفصيلية في مدونة مملاً، لذا سأعرضها لك بالصور.

كما هو موضح، يحتوي KuroEditor على نوعين من طرق العرض في القائمة العلوية: المعاينة و HTML. ومع ذلك، أتوقع أن معظم المستخدمين لن يستخدموا عرض HTML. فهو مخصص لأولئك الذين يريدون كتابة ميزات ليست موجودة بعد في KuroEditor باستخدام HTML، أو لأولئك الذين يريدون التحقق من السلوك الداخلي عبر HTML.

بعد ذلك تأتي رموز الرموز التعبيرية، وإنشاء الجداول، والوسائط، والتعليمات البرمجية، والخطوط الأفقية، والحفظ التلقائي، والحفظ، وجدول المحتويات. ويمكن لصق الوسائط الأساسية بحرية عند موضع المؤشر باستخدام السحب والإفلات، لذلك نادراً ما يُستخدم هذا الزر.

تزيين النصوص الأساسي

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

من اليسار: عريض، مائل، تسطير، يتوسطه خط. وتأتي بعد ذلك إعدادات العناوين H1 و H2 وغيرها. وتليها شريط الاقتباس وكتلة الملاحظات. ويتبع ذلك لون النص، وحجم الخط، وارتفاع السطر، ومحاذاة النص (يسار، وسط، يمين، ضبط)، والقوائم النقطية، والقوائم الرقمية. (بالمناسبة، يؤدي الضغط على مفتاح Tab تلقائياً إلى إنشاء فقرة جديدة). *ويمكن أيضاً تحديد أنواع الخطوط في الإصدارات الأحدث.

الجداول هي الأولوية القصوى

تعد ميزة الجداول هي النقطة البارزة في KuroEditor. وإدراج الصفوف أو الأعمدة يشبه Dropbox Paper: عندما يكون مؤشر الماوس قريباً من الحدود، يظهر زر "+" بجواره. ويؤدي النقر فوق ذلك إلى إدراج صف أو عمود. ويتم الحذف باستخدام زر "-" الأحمر الموجود على يمين الصف أو أسفل العمود. ومن السهل بشكل لا يصدق التلاعب بالجداول. ودمج الخلايا وتقسيمها لا يبعد سوى زر واحد. ويمكنك حتى اختيار سمك الحدود. ويؤدي تحريك الماوس بالقرب من الحدود أيضاً إلى إظهار أزرار الحدود على اليمين أو الأسفل، والتي تعرض قائمة لضبط السمك واللون بدقة.

وضع الوسائط المرن

يعد لصق الوسائط مرناً تماماً. فهو لا يقتصر فقط على الصور المخزنة بواسطة المستدعي؛ بل يمكنك بسهولة إنشاء تصنيفات الأغاني باستخدام روابط YouTube أو قوائم مقاطع الفيديو المثيرة للاهتمام. وإذا كنت تريد إدخال عنوان URL من لوحة المفاتيح، فإن كتابة url ستؤدي على الفور إلى التوسيع التلقائي.

استخدام جدول المحتويات

تعد إدارة الفقرات لأشياء مثل الروايات أو العقود أمراً سهلاً باستخدام h1 و h2 وغيرها. ومن خلال استخدام جدول المحتويات في القائمة العلوية، يمكنك أن ترى بلمحة واحدة إلى أي مدى كتبت، حتى في المستندات الطويلة.

نظرة عامة على التكامل

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

الخاتمة

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

[المصادر]

1. مستودع كود KuroEditor على GitHub
2. الصفحة التعريفية لـ KuroEditor
3. صفحة اختبار KuroEditor التجريبية