محرر HTML المرئي

ماذا يفعل محرر WYSIWYG

WYSIWYG تعني ما تراه هو ما تحصل عليه. بدلاً من كتابة وسوم HTML الخام، تعدّل مستندًا بصريًا — عريض ومائل وعناوين وقوائم وروابط وما إلى ذلك — ويترجم المحرر أفعالك إلى ترميز نيابة عنك. تستخدم الصفحة التي تنظر إليها خاصية contenteditable المدمجة في المتصفح بالإضافة إلى واجهة document.execCommand، التي كانت جزءًا من كل متصفح رئيسي لأكثر من عقد. لا توجد مكتبة خارجية: التنسيق يُطبق أصليًا بواسطة المتصفح، لذا يطابق HTML المولّد بالضبط ما ينتجه متصفحك لأي منطقة قابلة للتحرير أخرى على الويب.

ماذا يمكنك أن تفعل بشريط الأدوات

يغطي شريط الأدوات العمليات التي يحتاجها معظم الناس: تراجع/إعادة، عريض، مائل، تسطير، شطب، عناوين H1-H3، فقرات، كتل كود، قوائم نقطية ورقمية، اقتباسات، روابط، وإزالة كل التنسيق. يغير منتقيا الخط والحجم نوع الخط وحجم خط التحديد الحالي. يبدّل مفتاح المصدر بين العرض المقدَّم وحقل نصي بسيط يحتوي على HTML الخام، ويمكنك تحريره مباشرة. يعرض سطر الإحصائيات أسفل المحرر عدد أحرف وكلمات المحتوى الحالي.

كيف يُنظم مخرج HTML

ينتج المحرر ترميزًا دلاليًا بدلاً من حساء عرضي كلما أمكن: تصبح العناوين <h1>/<h2>/<h3>، وتصبح القوائم <ul>/<ol>/<li>، والاقتباسات <blockquote>، والكود <pre>. يُطبق التنسيق على مستوى النص بـ<strong> و<em> و<u> و<del>. لأن محرك execCommand في المتصفح هو المحرك، قد يختلف الترميز الدقيق قليلاً بين المتصفحات — قد تنتج نقرة العريض <strong> في متصفح و<b> في آخر. لتحقيق أقصى توافق، يكون HTML المُصدَّر بسيطًا عمدًا ويمكن لصقه في رسائل البريد أو محررات CMS أو أنظمة التوثيق دون تنظيف إضافي.

نصائح عملية

انسخ HTML المُصدَّر من حقل المخرجات بعد التبديل إلى عرض المصدر، أو استخدم زر نسخ HTML. عند اللصق في عميل بريد، أبقِ الترميز بسيطًا — تجرد كثير من العملاء <style> والتداخل المعقد. إذا كنت بحاجة إلى تضمين هذا المحتوى في صفحة لها أنماطها الخاصة، فضّل الوسوم الدلالية وتجنب الأنماط المضمنة؛ لا يستخدم الترميز المُصدَّر أي تنسيق مضمن، لذا يرث CSS صفحتك طبيعيًا. كل شيء في هذه الصفحة يعمل محليًا في متصفحك؛ لا يغادر المحتوى الصفحة أبدًا.