أدوات المطورين · محرر HTML WYSIWYG
لماذا تم إهمال execCommand وما الذي يستخدمه محررو المتصفح بدلاً من ذلك
· كيف يعمل
أتش تي أم أل contenteditable سير عمل المطور
يغطي صعود وهبوط document.execCommand، ولماذا كان إنتاجه غير متناسق، وكيف يعتمد المحررون الحديثون على التحديد والنطاق وقبل الإدخال بدلاً من ذلك.
الزر الغامق المكون من سطر واحد والذي لم يعد آمنًا - يفتح باستخدام execCommand('bold') وتحذير الإهمال
يمكن أن يكون الزر الغامق عبارة عن استدعاء واحد: قم بالتركيز على سطح التحرير، ثم اطلب من `document.execCommand` تطبيق `bold` على التحديد الحالي. لا يزال ToolAcre يستخدم هذا المسار لأن المتصفح يمتلك علامة الإقحام والنطاق المحدد داخل عنصر المحتوى القابل للتحرير. يعتبر الاستدعاء المضغوط ملائمًا، لكن الملاءمة لا تجعل الشجرة الناتجة قابلة للتنبؤ بها.
يتعامل القانون مع الرفض باعتباره احتمالًا عاديًا. يلتقط برنامج تضمين الأوامر الخاص به استثناءً، ويعلن أن المتصفح رفض الإجراء، ويوجه الكاتب إلى الوضع المصدر. يعد هذا الإجراء الاحتياطي أكثر صدقًا من الوعد بأن نقرة واحدة على شريط الأدوات تنتج دائمًا عنصرًا معينًا أو تعمل بشكل مماثل في كل محرك.
ما فعله execCommand ومن أين جاء - يشرح أصله في أوائل Internet Explorer واعتماده من قبل كل متصفح
يقوم نفس المجمع بتشغيل القوائم العريضة والمائلة وغير المرتبة والمرتبة، وإزالة التنسيق، والتراجع، والإعادة، وحظر التنسيق، والروابط، وإلغاء الارتباط. هذه هي الأوامر الموجودة بالفعل في شريط الأدوات؛ لا تعمل هذه المقالة على توسيع القائمة بالمحاذاة أو الألوان أو الخطوط أو الجداول أو الصور أو ميزات النص المنسق المألوفة الأخرى التي لا يكشفها التطبيق أبدًا.
يتم تشغيل كل أمر مقابل الإصدار المباشر القابل للتحرير DOM. بعد ذلك، تقوم اللوحة بتحديث مصدرها ومعاينتها وعدد الكلمات وتقرير الإزالة من HTML الداخلي الحالي. وبالتالي فإن النتيجة المحفوظة ليست سجل أوامر. وهو عبارة عن تسلسل تمت تصفيته لأي بنية تركها المتصفح خلفه بعد إجراء العملية المطلوبة أو رفضها.
لماذا تم إهمال الأمر API: يمكن للمتصفحات إنتاج أشكال DOM مختلفة
الإهمال مهم لأن API لا يمنح مؤلف المحرر عقدًا هيكليًا دقيقًا لكل طفرة. تحذر قيود ToolAcre بوضوح من أن السلوك يختلف بين المحركات، خاصة حول القوائم المتداخلة. قد تكون القائمة المرئية مقبولة بينما تختلف خيارات التداخل أو التغليف الخاصة بها عن العلامات التي أنتجها متصفح آخر.
لا يوجد مصدر مستودع يدعم الادعاء بأن كل متصفح أو إصدار أو أمر له نتيجة توافق معينة. العبارة الآمنة أضيق: يستدعي هذا التنفيذ المهمل API، ويلتقط الرفض، ويقدم تحريرًا مباشرًا للمصدر كمنفذ للهروب. اختبر المتصفح والعملية التي تنوي استخدامها بدلاً من استقراء المصفوفة.
يعد التحديد والنطاق من البدائل ذات الصلة، ولكن هذه الأداة لا تنفذهما
يمكن أن يصف التحديد والنطاق حدود DOM المحددة ويدعمان المعالجة الصريحة للشجرة، ولكن ToolAcre لا يقوم بتنفيذ محرك تنسيق بديل باستخدامهما. إن تسمية واجهات برمجة التطبيقات هذه كما لو كانت مسار التعليمات البرمجية الحالي قد يؤدي إلى وصف المنتج بشكل خاطئ. هنا، يظل أمر المتصفح هو المحوّل ويظل المطهر هو حد الإخراج.
يمكن أن يمتلك النموذج المخصص علامات وكتل ومعاملات وخرائط اختيار، ولكن هذه بنية منتج مختلفة مع اختبارات مختلفة. يتجنب هذا المحرر خفيف الوزن عمدًا المطالبة بمثل هذه الآلات. وينص العقد القابل للمراجعة على أن الإجراءات المرئية قد تنشئ DOM تعتمد على المتصفح، بينما يكشف الوضع المصدر عن العلامات التي تمت تصفيتها والتي سيتم نسخها أو تنزيلها بالفعل.
beforeinput ليس جزءًا من مسار التنسيق لهذا المحرر
لا يعترض التنفيذ أيضًا `beforeinput` لترجمة نوايا التحرير إلى معاملات مخصصة. تقوم أحداث الإدخال فقط بتشغيل التحديث بعد أن يقوم المتصفح بتغيير السطح. يعد اللصق والإسقاط استثناءات: يتم منع تلك الأحداث، وتتم تصفية الحافظة الخاصة بها أو حمولة النقل، ويتم إدراج HTML أو النص العادي الناتج فقط.
هذا التمييز يمنع المطالبة المعمارية واسعة النطاق. ToolAcre يمتلك بوابة اللصق ولكن ليس كل طفرة ضغطة المفتاح. تظل الكتابة العادية والحذف وسلوك الإدخال وأوامر شريط الأدوات هي عمليات تحرير المتصفح. يقوم المطهر بمراجعة مخرجاتهم التسلسلية؛ فهو لا يحول المحرر إلى إطار عمل يحركه الإدخال المسبق أو يسوي كل طفرة DOM المتوسطة.
مثال عملي: فحص مخرجات الأمر القديم التي ينتجها هذا المحرر بالفعل
لإجراء فحص ملموس، اكتب جملتين قصيرتين، وحدد عبارة واحدة واضغط على Bold. قم بالتبديل إلى المصدر HTML وافحص العنصر المحيط بهذه العبارة. يقوم ToolAcre بتعيين التراث `b` إلى `strong` أثناء عملية التطهير، لذلك يمكن أن تكون النتيجة التي تمت تصفيتها ذات دلالة حتى عندما يختار أمر التحرير المباشر في البداية علامة قديمة.
كرر ذلك مع القائمة ثم قم بالتراجع. يرسل شريط الأدوات `insertUnorderedList` و`undo`؛ ولا يحتفظ بسجل تطبيق منفصل. إذا رفض المتصفح، فإن منطقة الحالة تقول ذلك. إذا كان التداخل يبدو غريبًا، فإن وضع المصدر هو مسار التصحيح المدعوم. إن المخرجات المرصودة، وليس تسمية الزر، هي الدليل.
ما لا يغطيه هذا: لا يتم تنفيذ بنية محرر بديلة هنا
لا تطالب هذه المقالة بدعم نظام أوامر بديل حديث أو معاملات تعاونية أو أشجار حتمية عبر المستعرضات أو مكدس تراجع مخصص. كما أنه لا يستنتج سلوك اختصارات لوحة المفاتيح لأن المصدر يحدد إجراءات شريط الأدوات، وليس تسجيل الاختصارات. تظل الميزات غير المدعومة عبارة عن إغفالات وليست قدرات ضمنية.
الأمن منفصل عن اختيار الأمر. تنبعث مرشحات القائمة المسموح بها من العلامات ويتم وضع الحماية للمعاينة بدون نصوص برمجية، لكن المطهر ينكر صراحةً استخدامه كفلتر عام للإدخال المعادي XSS. لا يزال الخادم الذي يقبل محتوى النشر غير الموثوق به يحتاج إلى أداة تحليل محلل HTML5 مناسبة من جانب الخادم وسياسة خاصة بالوجهة.
الوجبات الجاهزة: امتلك DOM، وليس الأمر - يلخص مسار الترحيل وكيف أن العلامات الناتجة هي ما تقوم بفحصه في أداة WYSIWYG-to-HTML
امتلك النتيجة التي يمكنك فحصها. في هذا المحرر، يطلب أمر من المتصفح تعديل شجرة محتوى قابلة للتحرير، ثم تعيد القائمة المسموح بها كتابة تسلسل تلك الشجرة في المجموعة الفرعية المدعومة. يكشف وضع المصدر عن عملية التسليم ويوفر سطحًا عمليًا للإصلاح عندما يكون سلوك تحرير المتصفح غير مناسب أو غير متسق.
استخدم عينة يمكن التخلص منها في نفس المتصفح الذي تستخدم فيه عملك الحقيقي. مارس فقط الأوامر التي تم شحنها، وافحص الروابط والتداخل، واختبر التراجع قبل الاعتماد عليها، وانسخ HTML الذي تمت تصفيته فقط بعد قراءته. يحترم سير العمل هذا الإهمال دون التظاهر بأن ToolAcre قد حل بالفعل محل التحرير الأساسي API.