HTML5 Contenteditable תכונה עריכת תוכן אינטרנט בחזית

אחת התכונות החדשות ב HTML5 שמושך אותי הוא העורך הראשי. תכונה זו מיושמת בדרך כלל במערכות ניהול תוכן כדי לערוך תוכן ישירות מהדפדפן, והוא בנוי בדרך כלל באופן מלא עם JavaScript ו- AJAX. HTML5 מגיע כדי להפוך את התהליך קצת יותר קל באמצעות contenteditable תכונה.

מה שזה עושה

כאשר מוחלים על כל רכיב, תכונה זו תאפשר לנו לעשות זאת ערוך את התוכן בו, בואו לראות את הדוגמה הבאה:

 
עוגיות קרואס. פאוורקי דנית ביסקוויט. עוגיות עוגיות ביסקוויט חלבה חלבה. עוגיות ביסקוויטים.
 
רול מתוק tiramisu שוקולד בר סוכר שזיפים caramels tootsie רול קרמל. עוגת שוקולד wypas צמר גפן מתוק. שמן, שומשום, ליקוריץ, קרואסאנט, caramels, fruitcake, זנגוויל, ביסקוויט. סוכריות טופי סוכריות סופגניות.
 
 

בדוגמה זו, הוספנו contenteditable תכונה ולהגדירה נכון כך התוכן הופך לעריכה. ישנם שני ערכים נוספים שניתן להוסיף לתכונה זו;

• שקר אשר עושה את ההפך: התוכן לא יהיה לעריכה
• לרשת; זה יהפוך את התוכן לעריכה כאשר הורה ישיר הוא לעריכה גם כן.

• הצג הדגמה

אם בדקת את ההדגמה לעיל, אתה יכול לראות את התוכן ניתן לערוך ישירות מן הדפדפנים. עם זאת, יש לציין כי אלמנט זה אינו מכסה את האחסון של השינויים שביצענו, לכן כאשר אתה מרענן את הדף לאחר ביצוע השינוי, התוכן יחזור.

כיצד לשמור את השינויים

שמירת השינויים תלויה במיקום שבו נשמור את הנתונים; בדרך כלל, הוא יישמר במסד נתונים. אבל מאז אין לנו גישה למסד הנתונים, במדריך זה, אנחנו הולכים להראות לך איך לשמור את השינויים אחסון מקומי. כדי לעשות זאת, אנו גם משתמשים קצת jQuery כדי להפוך את הקוד פשוט. המלצתי לך להעיף מבט לעבר העבר, ההווה & העתיד של אחסון מקומי עבור יישומי אינטרנט כהפניה נוספת.

קודם כל, בואו להוסיף כפתור לצד התוכן שלנו.

 
 
רול מתוק tiramisu שוקולד בר סוכר שזיפים caramels tootsie רול קרמל. עוגת שוקולד wypas צמר גפן מתוק. שמן, שומשום, ליקוריץ, קרואסאנט, caramels, fruitcake, זנגוויל, ביסקוויט. סוכריות טופי סוכריות סופגניות.
 
 שמור שינויים 

הרעיון כאן הוא שאנחנו נשמור את השינויים לאחר לחיצה על הכפתור. אז, בואו להגדיר את האירוע באמצעות התסריט;

 var theContent = $ ('# content2'); $ ('# save') ב- ('click', function () var editedContent = theContent.html (); localStorage.newContent = editedContent;); 

קוד זה ייצור מפתח חדש ב- LocalStorage המכיל את השינוי האחרון שבוצע בתוכן. אנו יכולים להשתמש בכלי Firebug או Developer כדי לברר אם הנתונים נשמרו בהצלחה או לא, אך הקפד ללחוץ על הלחצן. עבור משתמשי Firefox, עבור אל DOM פאנל ולחפש localStorage. ב- Chrome וגם ב- Safari, אנו יכולים לראות זאת בכרטיסייה 'משאבים'.

לאחר מכן אנו יכולים לאחזר נתונים אלה כדי לעדכן את התוכן, כדלקמן;

 אם (localStorage.getItem ('newContent')) theContent.html (localStorage.getItem ('newContent'));  

הקוד לעיל יזהה את הפריט חדש מה- LocalStorage ואם הוא קיים, הוא יעביר את הערך לאלמנט שנבחר, במקרה זה # תוכן 2. בשלב זה, כאשר אנו מרעננים את הדף, עדיין נראה את השינוי שביצענו.

• הצג הדגמה
• הורד מקור

מחשבה סופית

בימים ההם, הוספת תכונה העורך הקדמי כפי שהראנו, יכול לקחת שעות או אולי אפילו שבועות. היום, זה לוקח רק שנייה עם תכונה זו, contenteditable.

ו, על פי caniuse.com, תכונה זו נתמכת כבר (באופן מפתיע) ב- IE7 + ו (באופן לא מפתיע) בדפדפנים אחרים כדלקמן: Firefox 12, Chrome 20, Safari 5.1 ו Opera 12. זה אומר שאנחנו יכולים להשתמש באלמנט הזה עם שלום של המוח מבלי להגדיר fallbacsk עבור דפדפנים ישנים.