أدوات المطورين · محرر HTML WYSIWYG
كيف يقوم محرر WYSIWYG بتحويل التنسيق إلى HTML: شرح المحتوى القابل للتحرير
· كيف يعمل
أتش تي أم أل contenteditable سير عمل المطور
يشرح السمة contenteditable التي تجعل أي عنصر قابلاً للتحرير، وكيف يقوم المتصفح بتغيير DOM أثناء الكتابة والتنسيق، وكيف يصبح DOM هو HTML الذي تنسخه.
لقد ضغطت على الخط العريض؛ من أين أتى <strong>؟ - يفتح مع الفجوة بين النقر على الزر ورؤية العلامات
يبدو زر شريط الأدوات المسمى غامق وكأنه فرشاة رسم، ولكن يجب أن يمثل المتصفح النتيجة في شجرة المستندات. يمكن أن تصبح العبارة المحددة عنصر <b> أو <strong> اعتمادًا على أمر التحرير والمحرك. تتمثل مهمة المطور في تحويل تلك الطفرات الخاصة بالمتصفح إلى HTML يمكن لصفحة أخرى قراءتها دون قبول كل علامة أو سمة خطيرة. ما تراه على الشاشة هو ملف DOM قابل للتحرير، وليس ملف معالجة كلمات بطبقة تنسيق مستقلة.
contenteditable: السمة التي تجعل الصفحة قابلة للتحرير - تشرح مضيف التحرير وموضع علامة الإقحام وكيف يمتلك المتصفح سلوك التحرير
contenteditable="true" يجعل العنصر مضيفًا للتحرير. يدير المتصفح حركة علامة الإقحام والاختيار والإدراج والحذف بداخله، مع وجود شجرة DOM أسفلها. يستخدم سطح التحرير الخاص بـ ToolAcre ميزة المتصفح هذه ويكشف عن كل من الوضع المرئي ووضع المصدر؛ يبقى المحتوى في الصفحة بدلاً من إرساله إلى خادم النص المنسق. يحظى حدث اللصق باهتمام منفصل لأن HTML الذي تم لصقه يمكن أن يتضمن عناصر وسمات لا يجب أن تدخل مستندًا موثوقًا به دون تحديده.
كل ضغطة مفتاح هي طفرة DOM - تصف نمو العقد النصية، والتفاف العناصر وتقسيمها، ولماذا تتغير الشجرة حتى عندما يبدو النص دون تغيير
تقوم الكتابة بإنشاء أو توسيع العقد النصية؛ قد يؤدي الضغط على Enter إلى تقسيم الكتلة؛ بالخط العريض تحديد يلتف نطاقا. لا يمكن ضمان مطابقة DOM الدقيقة بعد نقرتين لسلسلة <strong> التي يتخيلها المطور: تختار المتصفحات عناصر وتداخلات مختلفة. ToolAcre يستخدم حاليًا document.execCommand للتنسيق. لقد تم إهمال API، ولكن لا يوجد بديل منسدل يتم تنفيذه بشكل موحد لكل عملية تحرير هنا، لذلك يعامل المحرر مخرجاته كمدخلات غير موثوق بها ليتم تطبيعها بدلاً من ترميز أساسي.
من السلسلة المباشرة DOM إلى HTML - يشرح تسلسل الشجرة المحررة في العلامات التي يمكنك نسخها
لنسخ HTML، يقرأ المحرر HTML الداخلي لسطح التحرير ويمرر السلسلة الناتجة من خلال القائمة المسموح بها لعنصر /attribute. يتم تطبيع العلامات مثل b إلى دلالات قوية؛ يتم فحص الروابط المسموح بها بحثًا عن أنظمة URL المقبولة، بينما تتم إزالة معالجات الأحداث والسمات غير ذات الصلة. يقوم وضع المصدر أيضًا بتمرير النص الخاص به من خلال نفس المرشح قبل إعادته إلى السطح المرئي. هذا مسار تنظيف خاص بالمحرر، وليس مطهرًا للأغراض العامة من جانب الخادم HTML للمحتوى العدائي من المستخدمين العشوائيين.
مثال عملي: ملاحظة من فقرتين تحتوي على عبارة غامقة — تتبع DOM خلال الكتابة والتحديد والخط الغامق، ثم تظهر العلامة الناتجة
اكتب فقرتين - "تحديث المشروع" و"مسودة جاهزة" - ثم حدد "مسودة" في الثانية واضغط على غامق. قد يقوم المتصفح بإدراج <b>مسودة</b> في البث المباشر DOM. يؤدي التبديل إلى الوضع المصدر إلى تمريره عبر معقم ToolAcre، والذي يمكن أن ينبعث <strong>Draft</strong> داخل فقرته بعد التسوية. حاول لصق حمولة <img onerror="..."> في مستند يمكن التخلص منه: لا تتضمن القائمة المسموح بها للمخرجات صورًا أو سمات معالج الأحداث. يوضح المثال سبب قيامك بفحص العلامات الناتجة بدلاً من افتراض أن النقرة لها تمثيل عالمي واحد HTML.
لماذا تعطي نفس الإجراءات علامات مختلفة في متصفحات مختلفة - يغطي سلوك التحرير الخاص بالمتصفح ولماذا يقوم المحررون بتطبيع مخرجاتهم
تنفذ المتصفحات المختلفة أوامر التحرير وفواصل الأسطر وحدود التحديد بشكل مختلف. حتى الفقرات المرئية المتطابقة يمكن إجراء تسلسل لها مع امتدادات متداخلة مختلفة أو عناصر كتلة. تعمل خطوة التسوية على تقليل بعض الاختلافات ولكنها لا تجعل السطح WYSIWYG مُسلسلًا مضمون المعايير. يعرض ToolAcre المصدر إلى جانب النتيجة المرئية، حتى تتمكن من تصحيح التداخل الفردي. يتم تشغيل معاينته في إطار iframe مع سمة وضع الحماية التي لا تمنح أي تنفيذ للبرنامج النصي، مما يحد من تأثير وصول جزء غير آمن إلى تلك المعاينة.
ما لا يغطيه هذا - التحرير التعاوني، ومجموعات التراجع، وأطر التحرير الكاملة هي خارج النطاق
لا تعد هذه الصفحة بالتحرير التعاوني أو سجل التراجع الكامل أو عميل البريد الإلكتروني المصقول أو إطار عمل التحرير الكامل. لا يمكن لـ Contenteditable أن يقرر بنفسه الترميز الذي يقبله طرف ثالث CMS، ولا تعد القائمة المسموح بها المستندة إلى سلسلة بديلاً عن مُطهر المحلل اللغوي HTML5 من جانب الخادم حيث يمكن للمستخدمين غير الموثوق بهم إرسال المحتوى. تعتبر المعاينة في وضع الحماية بمثابة دفاع منفصل عن مخرجات التنظيف؛ ولا يجعل JavaScript عناوين URL التعسفية أو المعادية آمنة في كل وجهة.
الوجبات الجاهزة: المحرر هو DOM يمكنك رؤيته - يلخص الآلية وكيف يقوم محرر ToolAcre's HTML WYSIWYG بكشف العلامات التي ينتجها التنسيق الخاص بك، دون مغادرة المتصفح
المحرر هو DOM الذي يمكنك رؤيته وفحصه. يمنحك محرر ToolAcre HTML WYSIWYG طريقة مباشرة لمقارنة إجراء التنسيق المرئي مع HTML الذي تمت تصفيته، محليًا في متصفحك. اكتب ملاحظة سريعة بخط غامق، وانتقل إلى الوضع المصدر واحتفظ فقط بالعناصر التي تدعمها وجهتك فعليًا.