HTML5 سمة قابلة للتحرير تحرير محتوى الويب على الواجهة الأمامية

واحدة من الميزات الجديدة في HTML5 الذي جذبني هو محرر الواجهة الأمامية الأصلي. يتم تطبيق هذه الميزة بشكل شائع في أنظمة إدارة المحتوى لتحرير المحتوى مباشرة من المتصفح وعادة ما يتم بناؤه بالكامل باستخدام JavaScript و AJAX. HTML5 يأتي لجعل العملية أسهل قليلا باستخدام contenteditable صفة، عزا.

ماذا يفعل

عند تطبيقها على أي عنصر ، ستسمح لنا هذه الخاصية تصحيح المحتوى الموجود فيه ، دعنا نرى المثال أدناه:

 
كوكي الكعك كرواسون. Faworki الدنماركية البسكويت. Jujubes مسحوق الكعكة الكعكة البسكويت الحلاوة الطحينية. بسكويت غميس جيلي بسكويت.
 
لفة حلوة تيراميسو الشوكولاته شريط السكر البرقوق كراميل tootsie لفة caramels. كعكة الشوكولاتة wypas حلوى القطن. تطبيق السمسم يستقر عرق السوس المعجنات الكرواسان الكرمل بسكويت الزنجبيل. دونات حلوى حلوى قصب.
 
 

في هذا المثال ، أضفنا contenteditable السمة وتعيينها صحيح وبالتالي يصبح المحتوى قابلاً للتحرير. هناك قيمتان أخريان يمكن إضافتهما لهذه السمة ؛

• خاطئة الذي يفعل العكس: المحتوى لن يكون للتحرير
• يرث. سوف تتحول المحتوى للتحرير عندما الوالد المباشر هو للتحرير كذلك.

• عرض تجريبي

إذا قمت بسحب العرض التوضيحي أعلاه ، يمكنك أن ترى أنه يمكن تحرير المحتوى مباشرة من المتصفحات. ومع ذلك ، تجدر الإشارة إلى أن هذا العنصر لا يغطي تخزين التغييرات التي أجريناها ، لذلك عند تحديث الصفحة بعد إجراء التغيير ، سيعود المحتوى.

كيفية حفظ التغييرات

يعتمد حفظ التغييرات على المكان الذي سنخزن فيه البيانات ؛ عادة ، سيتم حفظه في قاعدة بيانات. ولكن نظرًا لعدم توفر إمكانية الوصول إلى قاعدة البيانات الخاصة بنا ، في هذا البرنامج التعليمي ، سنعرض لك كيفية حفظ التغييرات في التخزين المحلي. للقيام بذلك ، سنستخدم أيضًا جزءًا من jQuery لجعل الكود أكثر بساطة. أوصيت أن نلقي نظرة على الماضي والحاضر والمستقبل للتخزين المحلي لتطبيقات الويب كمرجع إضافي.

بادئ ذي بدء ، دعونا نضيف زر بجانب المحتوى الخاص بنا.

 
 
لفة حلوة تيراميسو الشوكولاته شريط السكر البرقوق كراميل tootsie لفة caramels. كعكة الشوكولاتة wypas حلوى القطن. تطبيق السمسم يستقر عرق السوس المعجنات الكرواسان الكرمل بسكويت الزنجبيل. دونات حلوى حلوى قصب.
 
 حفظ التغييرات 

الفكرة هنا هي أننا سنخزن التغييرات بمجرد النقر فوق الزر. لذلك ، دعونا نضع هذا الحدث في البرنامج النصي ؛

 var theContent = $ ('# content2') ؛ $ ('# save'). on ('click'، function () var editedContent = theContent.html ()؛ localStorage.newContent = editedContent؛)؛ 

سيؤدي هذا الرمز إلى إنشاء مفتاح جديد في localStorage يحتوي على آخر تغيير تم إجراؤه في المحتوى. يمكننا استخدام Firebug أو أدوات المطور لتوضيح ما إذا كان قد تم تخزين البيانات بنجاح أم لا ، ولكن تأكد من النقر فوق الزر. لمستخدمي Firefox ، انتقل إلى DOM لوحة والبحث عن localStorage. في Chrome وكذلك Safari ، يمكننا رؤيته ضمن علامة التبويب "الموارد".

يمكننا بعد ذلك استرداد هذه البيانات لتحديث المحتوى ، على النحو التالي ؛

 if (localStorage.getItem ('newContent')) theContent.html (localStorage.getItem ('newContent')) ؛  

سيحدد الرمز أعلاه العنصر محتوى جديد من localStorage وإذا كان موجودًا ، فسوف يقوم بتمرير القيمة إلى العنصر المحدد ، في هذه الحالة # content2. في هذه المرحلة ، عندما نقوم بتحديث الصفحة ، يجب أن نرى التغيير الذي أجريناه.

• عرض تجريبي
• تحميل المصدر

الفكر النهائي

في الأيام الخوالي ، قد تستغرق إضافة ميزة محرر الواجهة الأمامية كما أوضحنا ساعات أو ربما حتى أسابيع. اليوم ، يستغرق سوى ثانية واحدة مع هذه السمة, contenteditable.

ووفقًا لموقع caniuse.com ، فإن هذه السمة مدعومة بالفعل ، (بشكل مدهش) في IE7 + و (بشكل غير مفاجئ) في المتصفحات الأخرى على النحو التالي: Firefox 12 و Chrome 20 و Safari 5.1 و Opera 12. وهذا يعني أنه يمكننا استخدام هذا العنصر بسلام العقل دون الحاجة إلى إعداد fallbacsk للمتصفحات القديمة.