تطور KuroEditor! كواليس الميزات الجديدة vol.3
متابعة لمحرر KuroEditor مع استعراض الميزات الجديدة! نوضح بالتفصيل أسباب إضافة هذه الميزات وفلسفة التصميم التي تهدف لتسهيل الكتابة وزيادة مرونة التنسيق.
يستمر محرّر WYSIWYG "KuroEditor"، الذي يمثل الآن جوهر منتجات Kuro-Boo (بما في ذلك البرامج مفتوحة المصدر)، في تقديم أداء فائق السرعة باستخدام لغة جافا سكريبت البسيطة (Vanilla JS) دون الاعتماد على أطر العمل، إلى جانب سهولة الاستخدام. في الجزء الثاني السابق "vol.2"، استعرضنا أساسيات تنسيق النصوص ومواقع الوسائط وإجراءات الجداول المستوحاة من Dropbox Paper. ولكن تطور KuroEditor لا يتوقف عند هذا الحد. هذه المرة، نسلط الضوء على الميزات المضافة حديثًا، مع شرح أهداف التطوير والسياق لنقدم لكم قصة لا يمكن العثور عليها في أدلة التشغيل العادية. دعونا نستكشف الصورة الكاملة لـ "KuroEditor vol.3"، المصمّم للتعبير عن أفكاركم بشكل غني وخالٍ من الإجهاد.
التحكم المطلق بالجداول: دعم اللصق من Excel والتنسيق الدقيق
أحد الأجزاء التي حظيت بأكبر قدر من الاهتمام في تطوير KuroEditor هي ميزة الجداول. يتفق كل من استخدم محررات النصوص الغنية الكلاسيكية على أن تلك المحررات تتعامل مع الجداول بطريقة بدائية للغاية. حيث يصعب أو يستحيل تعديل لون خلفية الخلية أو دمج الخلايا وتقسيمها.
تنظيم المعلومات في جداول منسقة بعناية أمر لا غنى عنه لتوضيح المقارنات أو قوائم الأسعار أو ملخصات البيانات. لذلك، يوفر KuroEditor أدوات متقدمة لإدارة الجداول بدقة متناهية.
تكمن الميزة الأساسية في التوليد التلقائي للجداول عن طريق النسخ واللصق البسيط من Excel أو Google Sheets أو ملف CSV. ما عليك سوى لصق الخلايا المنسوخة مباشرة في المحرر: يقوم KuroEditor بتحليل التنسيقات في الخلفية وإعادة بناء جدول HTML نظيف على الفور. هذا يغنيك عن إنشاء كل خلية يدويًا. قم بإنشاء جدولك في Excel والصقه مباشرة بكل سهولة.
يتيح المحرر أيضًا إمكانية ضبط سمك ولون الحدود الخارجية والداخلية، أو حتى خط محدد. يتم التحكم في خيارات الدمج (يمينًا أو لأسفل)، والتقسيم، والمحاذاة الرأسية، ولون خلفية الخلية بشكل حدسي باستخدام الماوس. هذا الاهتمام بالتفاصيل هو ما يميز KuroEditor عن الحلول الأخرى.
الفرق بين "Enter" و "Shift+Enter": بنية الفقرات
جانب أساسي من دليل KuroEditor يتعلق بالفرق بين فاصل الأسطر والفقرة. اعتمادًا على ما إذا كنت تضغط على "Enter" أو "Shift + Enter" للانتقال إلى السطر التالي، فإن بنية HTML الناتجة تختلف تمامًا. فهم هذا الاختلاف ضروري للتحكم في التخطيط.
يؤدي الضغط على "Enter" إلى إنشاء فقرة جديدة (وسم <p>)، والتي يتم التعامل معها ككتلة مستقلة. نظرًا لأن وظائف المحاذاة أو المسافة البادئة تنطبق على الفقرة، يمكنك بسهولة محاذاة سطر واحد إلى اليمين إذا كان معزولاً في كتلته الخاصة. وعلى العكس من ذلك، يقوم "Shift + Enter" بإدراج فاصل أسطر بسيط (وسم <br>) داخل نفس الفقرة. يُنظر إلى المجموعة ككتلة واحدة، وأي تغيير في المسافة البادئة سيؤثر على جميع الأسطر المرتبطة.
تم تصميم هذا السلوك لتجنب المسافات الزائدة غير المقصودة بين الأسطر مع الحفاظ على تحكم دلالي دقيق. استخدم "Shift + Enter" لتجميع الأسطر القصيرة مثل العناوين أو القصائد، و "Enter" للانتقالات المنطقية. هذا مفيد لهيكلة القوائم المعقدة دون التقيد بتنسيقات صارمة.
تظهر هذه الميزة فائدتها بشكل خاص في عرض القوائم. في العديد من الأدوات مثل Microsoft Word أو Dropbox Paper، تعد القوائم الرقمية ممكنة، ولكن غالبًا ما يكون من المحبط ألا تتسلسل الأرقام كما تريد أو لا يمكنك إدخال كتلة نصية عادية بين عناصر القائمة. يبسط KuroEditor كل هذا ويسمح بإنشاء قوائم معقدة دون عناء.
"الكتلة الدائرية" لإعطاء حيوية للتخطيط والتفاف النص
غالبًا ما تقتصر المقالات عبر الإنترنت على عمود رأسي واحد حيث تتبادل النصوص والصور بشكل رتيب. على الرغم من أن القراءة الرأسية هي المعيار على الهواتف المحمولة، إلا أن هذا التصميم قد يكون مملاً على الشاشات الكبيرة. ولحل هذه المشكلة، تم إنشاء وظيفة "الكتلة الدائرية (kuro-roundbox)".
يتم إدراج هذه الكتلة بنقرة واحدة من القائمة السفلية. ويمكن أن تحتوي على نصوص أو صور أو جداول. تتيح لك قائمة سياقية مخصصة ضبط عرضها (من 30% إلى 100%) ومحاذاتها (يسار، وسط، يمين).
تكمن الميزة الأساسية في التفاف النص. عند محاذاة كتلة إلى اليمين بعرض 45%، يتم وضع النص التالي بشكل طبيعي على يسارها. وهي مثالية لإضافة مربعات جانبية أو ملاحظات. لإيقاف هذا الالتفاف، يكفي إدراج خط أفقي (hr) يرسل المحتوى اللاحق أسفل الكتلة. هذا يضفي ديناميكية ويحسن راحة القراءة.
"بطاقات URL" واختصارات الرموز التعبيرية لتسريع الكتابة
الروابط لا غنى عنها على الويب، لكن الروابط النصية الزرقاء البسيطة قد لا تبرز أحيانًا عندما تريد إبراز مرجع مهم. يحل KuroEditor هذه المشكلة باستخدام "بطاقات URL (kuro-url-card)".
عند إنشاء رابط، يؤدي تحديد خيار البطاقة إلى استرداد البيانات التعريفية للموقع المستهدف تلقائيًا (الأيقونة، العنوان، رابط URL) لإنشاء كتلة مرئية أنيقة. يتعرف القارئ على الفور على وجهة الرابط. إذا كان الموقع غير متاح، يقوم المحرر بإخفاء العناصر المفقودة بشكل نظيف. على عكس الأدوات الأخرى مثل Dropbox Paper التي تحول كل رابط تلقائيًا إلى بطاقة، يتيح لك KuroEditor الاختيار بين رابط كلاسيكي، أو بطاقة بسيطة، أو بطاقة غنية بالصور.
حتى لا يتم قطع إيقاع الكتابة، يدمج المحرر أيضًا رموزًا قصيرة للرموز التعبيرية. لا داعي للبحث في القوائم باستخدام الماوس: اكتب ببساطة :smile: أو :fire: أو :+1: ليتحول الرمز على الفور إلى الرمز التعبيري المقابل. توفير كبير للوقت للكتاب المنتظمين.
قوائم المهام و "بطاقات الوصفات" الدلالية
دمج KuroEditor أيضًا وظائف عملية للاستخدام الشخصي، مثل قوائم المهام (Todo)، المفيدة في تطبيقات الملاحظات.
- التحقق من البريد الإلكتروني
- تحضير القهوة
كتابة [] في بداية السطر تولد خانة اختيار. يتم حفظ الحالة مباشرة في كود HTML الخاص بالمقال. على الصفحة العامة، تعمل هذه الخانات كعنصر مرئي ثابت ولا يمكن للمشاهدين تحديدها، ولكنها تظل مفيدة جدًا لهيكلة الأدلة أو قوائم المراجعة.
لمدونات الطبخ، يقدم المحرر "بطاقة وصفة (kuro-recipe)" مهيكلة. تلخص عدد الحصص، وأوقات التحضير، والمكونات، وخطوات التحضير. تولد هذه البطاقة بيانات مهيكلة متوافقة مع إرشادات Google SEO للوصفات. لمزيد من الوضوح، تقتصر البطاقة على نسخة واحدة لكل مقال (يصبح الزر غير نشط إذا كانت هناك بطاقة بالفعل). لمعرفة المزيد، راجع المقال حول الوصفات في KuroCMS.
كتل برمجية محسنة: إعادة التنظيم عن طريق السحب والإفلات وزر النسخ
بالنسبة للمقالات التقنية، يعد عرض الكود أمرًا بالغ الأهمية. يسهل KuroEditor الحياة على المطورين من خلال كتل برمجية تفاعلية مصممة لتبسيط الكتابة والقراءة.
يمكن نقل كتلة برمجية رأسيًا عن طريق سحبها من منطقة أرقام الأسطر. هذا أكثر أمانًا وعملية بكثير من قص النص ولصقه، وهي عملية غالبًا ما تفسد المسافة البادئة أو تتلف بنية HTML.
بالإضافة إلى ذلك، لتحسين تجربة القراء، يضيف نص برمجى مساعد تلقائيًا زر نسخ سريع (📋) في الجزء العلوي الأيمن من الكتل البرمجية على الصفحات العامة. لمسة خاصة تسهل استخدام المقتطفات البرمجية.
الخلاصة: الدقة المطلقة لـ WYSIWYG
لا يهدف KuroEditor إلى محاذاة النص فحسب، بل يهدف إلى تقديم تجربة WYSIWYG كاملة حيث يطابق التصميم أثناء التحرير الصفحة المنشورة تمامًا. كان تحقيق ذلك في لغة جافا سكريبت البسيطة، بدون أطر عمل أو تأثير على سرعة التحميل، تحديًا كبيرًا. بفضل تصميمه المعياري، يندمج KuroEditor في بضعة أسطر من الكود في أي نظام إدارة محتوى (CMS). وسنواصل العمل بلا كلل لتحسين التجربة للعديد من الكتاب.