أدوات المطورين · محرر HTML WYSIWYG
Enter vs Shift+Enter: كيف يختار المحررون بين <p> و<div> و<br>
· كيف يعمل
أتش تي أم أل contenteditable تحرير النص
يشرح نموذج الفقرة خلف برامج تحرير المتصفح: لماذا قد يقوم Enter بإنشاء <p> أو <div>، ولماذا يقوم Shift+Enter بإدراج <br>، وكيف يحدد ذلك التباعد.
لماذا يكون التباعد خاطئًا في CMS ولكنه جيد في المحرر - يفتح مع مشكلة الفجوة المزدوجة الكلاسيكية أو عدم وجود فجوة
يمكن أن يتغير التباعد الذي يبدو مريحًا في المحرر عندما يدخل الجزء إلى CMS لأن الكتل تتلقى هوامش من ورقة الأنماط الوجهة. تختلف الفقرتان والسطران المفصولان بـ br من الناحية الهيكلية حتى لو حدثت معاينة واحدة لمنحهما مسافة رأسية مماثلة.
ToolAcre يكشف هذا الاختلاف في المصدر. ولا يحمل هوامش منسوخة أو أنماطًا مضمنة، لذا فإن تباعد الفقرات يأتي من غلاف المعاينة أو الوجهة اللاحقة CSS. يجب على الكتاب اختيار البنية حسب المعنى والتحقق من العناصر المتسلسلة بدلاً من إضافة ضغطات مفاتيح فارغة حتى يظهر عرض مؤقت واحد بشكل صحيح.
الكتلة مقابل الفواصل المضمنة - يوضح أن <p> و <div> عبارة عن كتل لها هوامشها الخاصة، في حين أن <br> عبارة عن فاصل أسطر داخل الكتلة
الفقرة وdiv عبارة عن حاويات كتلية؛ br هو عنصر فاصل سطر فارغ داخل تدفق آخر. يسمح هذا المحرر بـ p وbr ولكن لا يسمح بـ div. يتم فك غلاف div الملصق، مع الحفاظ على كلماته والسماح بأحفاده أثناء التخلص من الغلاف. ينبعث br المعقم كـ `<br />`.
يمكن أن يتكون العنوان البريدي من فقرة واحدة مع فواصل أسطر متعمدة لأن أسطرها تشكل وحدة واحدة. من الأفضل تمثيل فكرتين مستقلتين في فقرتين. يمكن للوجهة تصميم هوامش p بشكل متسق، بينما تقوم عناصر br المتكررة المستخدمة كفواصل عمودية بتشفير المظهر مباشرة في المحتوى.
ما يفعله Enter هنا يعتمد على المتصفح ولم تتم تهيئته بواسطة ToolAcre
لا يقوم ToolAcre بتعيين أمر فاصل الفقرة الافتراضي أو اعتراض الإدخال. يتعامل المستعرض القابل للتحرير مع المفتاح، ويقوم مستمع الإدخال بتحديث الإخراج بعد ذلك. تحذر قيود المستودع من اختلاف سلوك المحرك، لذا فإن التأكيد على أن Enter ينشئ دائمًا p، أو ينشئ div دائمًا، أو يتبع قاعدة واحدة خاصة بالإصدار، سيكون بمثابة إرشادات توافق مخترعة.
تقوم خطوة التعقيم بعد ذلك بتضييق نطاق التسلسل الذي يصل. لا يمكن لقسم div الذي تم إنشاؤه بواسطة المتصفح البقاء على قيد الحياة كـ div، على الرغم من إمكانية بقاء النص الخاص به. وهذا قد يجعل المصدر النهائي يختلف مرة أخرى عن الشجرة الوسيطة الحية. وبالتالي فإن وضع المصدر هو المكان المناسب لإنشاء عناصر p واضحة عندما يكون معنى الفقرة المستقر مهمًا.
يمكن كتابة الفواصل الأولية في المصدر، ولكن لا يتم تنفيذ عقد Shift+Enter
لا يحتوي شريط الأدوات على زر "فاصل ناعم" ولا يسجل الكود Shift+Enter. قد ينفذ المتصفح هذه الإيماءة، لكن هذه المقالة لا تعد بمخرجاتها. يمكن أن يحتفظ وضع المصدر بـ br المسموح به، مما يوفر طريقة حتمية للتعبير عن الفاصل داخل الفقرة بعد فحص النتيجة المرئية.
يعتمد سلوك لوحة المفاتيح أيضًا على حالة التحديد والتحرير التي لا تختبرها الوحدة. استخدم المتصفح المحدد الذي تستخدمه في عملك، ثم اقرأ المصدر. إذا أنتجت الإيماءة كتلة غير مرغوب فيها، فأعد كتابة الجزء بشكل صريح بدلاً من الاعتماد على وصف الاختصار المنسوخ من إطار عمل محرر آخر.
مثال عملي: قم ببناء عنوان وملاحظة، ثم قم بالفحص بدلاً من التنبؤ
للحصول على عنوان، استخدم وضع المصدر لإنشاء نقطة واحدة مع br بين المستلم والشارع والمنطقة المحلية. للحصول على ملاحظة قصيرة، قم بعمل عنصرين p. ارجع إلى الوضع المرئي، حيث يتم تنظيف المصدر قبل الإدراج، وقارن المعاينة دون افتراض أن هوامشها تتطابق مع موقع الويب النهائي.
ثم انسخ HTML وافحص الجزء بشكل منفصل عن التنزيل HTML. تحتوي النتيجة المنسوخة على علامات الجسم المعقمة؛ يحتوي التنزيل على مستند كامل مع معاينة ToolAcre CSS. يمكن أن يفسر هذا التمييز لماذا يبدو فتح الملف الذي تم تنزيله أكثر اكتمالاً من لصق الجزء المنسوخ في نظام ذي أنماط مختلفة.
يتم الاحتفاظ بالفقرات الفارغة والمسافات غير المنفصلة فقط عندما يتم دعمها بواسطة معيد الكتابة
يمكن أن تظل الفقرة المسموح بها فارغة بسبب قبول p ولا توجد قاعدة تحذف الكتل الفارغة. قد يصبح كيان معروف غير قابل للكسر هو طابعه الذي تم فك تشفيره ثم يتم الهروب منه لاحقًا وفقًا لتطبيق الكيان المحلي؛ لا توفر التعليمات البرمجية قاعدة تنظيف تستهدف الفقرات الفاصلة بشكل خاص.
ولذلك، فإن "التعقيم الآن" ليس منظفًا للتخطيط. فهو يزيل العلامات والسمات غير المدعومة، ويوازن العلامات وتنسيقات المصدر، ولكن يمكنه الاحتفاظ بالفراغ المسموح به هيكليًا. احذف عناصر التباعد عمدًا في الوضع المصدر أو الوضع المرئي، ودع الوجهة CSS توفر هوامش عادية بدلاً من تجميع الكتل الفارغة.
ما لا يغطيه هذا — CSS قواعد طي الهامش أو تكوين إطار عمل المحرر
لا تتناول هذه المقالة انهيار الهامش، أو تكوين فاصل إطار العمل، أو مصفوفات لوحة المفاتيح لكل متصفح، أو المراوغات المتعلقة بتباعد البريد الإلكتروني. كما أنه لا يدعي أن المعاينة تعيد إنتاج CMS. يستخدم صندوق الرمل الخفيف سلوك الخط الأساسي وارتفاع الخط والحشو والفاصل الخاص به.
كما أنها لا تعامل المخرجات التي تمت تصفيتها على أنها منشور آمن عالميًا. يحتاج الإرسال الضار إلى إجراء تطهير من جانب الخادم بما يتناسب مع الوجهة، حتى لو ظلت المعاينة المحلية التي يمكن التخلص منها خاملة. تعد دلالات الفقرة وسلوك تحرير المتصفح وسياسة الأمان ثلاثة اهتمامات منفصلة لا ينبغي تجميعها في اختبار واحد "يبدو صحيحًا".
الوجبات الجاهزة: اختر الفاصل الذي يطابق المعنى - يلخص النموذج وكيف يتيح لك محرر ToolAcre HTML WYSIWYG التحقق من العنصر الذي ينتجه كل مفتاح
اختر الفاصل الذي يطابق المحتوى، ولكن تحقق من الضغطة بدلاً من توقعها. ToolAcre يمنح الوصول المباشر إلى المصدر، ويقبل p وbr، ويزيل div ويعرض عرضًا في وضع الحماية. تدعم هذه الحقائق سير عمل قابل للتكرار دون اختراع وعد بشأن Enter أو Shift+Enter.
أنشئ عنوانًا صغيرًا وملاحظة، وقم بتبديل الأوضاع مرتين، وتأكد من بقاء الهيكل المقصود بعد عملية التعقيم. إذا كانت الوجهة تطبق فجوات مفاجئة، فافحص CSS بدلاً من إدراج المزيد من HTML الفارغة. ينتقل المعنى المستقر بشكل أفضل من التباعد المضبوط لمعاينة واحدة معزولة.