ביצוע תוכן דף אינטרנט לעריכה על ידי המבקרים באתר

הפיכת הטקסט באתר שניתן לעריכה על ידי משתמשים קל יותר מכפי שניתן לצפות. HTML מספק תכונה למטרה זו: contenteditable.

ה contenteditable תכונה הוצגה לראשונה בשנת 2014 עם שחרורו של HTML5. הוא מציין אם התוכן שבו הוא שולט יכול להשתנות על ידי מבקר באתר מתוך הדפדפן.

תמיכה עבור התכונה Contentedable

רוב הדפדפנים השולחניים המודרניים תומכים בתכונה. אלו כוללים:

• Chrome 4.0 ומעלה
• Internet Explorer 6 ומעלה
• 3.5 ומעלה
• ספארי 3.1 ומעלה
• אופרה 10.1 ומעלה
• מיקרוסופט אדג

כנ"ל לגבי רוב הדפדפנים לנייד, גם.

כיצד להשתמש

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

יצירת רשימת ל - DoD לעריכה עם תוכן

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

1. פתח את הדף שלך בעורך HTML.
2. צור רשימה עם תבליטים ללא סדר המשימות שלי:
   2. איזו משימה
   4. משימה נוספת
5. תוסיף את הcontenteditable רכוש post
   באל you
   כעת יש לך רשימת מטלות הניתנת לעריכה - אך אם תסגור את הדפדפן או תעזוב את הדף, הרשימה תיעלם. הפתרון: הוסף סקריפט פשוט לשמירת המשימות ל- LocalStorage.
8. הוסף קישור ל jQuery ב של המסמך שלך. דוגמה זו משתמשת ב- CDN של Google, אך תוכל לארח אותה בעצמך או להשתמש ב- CDN אחר אם אתה מעדיף.
11. בתחתית הדף, ממש מעל , הוסף את הסקריפט שלך: זוהי ההתחלה של jQuery document.ready פונקציה ואומרת לדפדפן לטעון את הסקריפט לאחר שהמסמך נטען במלואו.

בתוך ה document.ready פונקציה, להוסיף את הסקריפט כדי לטעון את המשימות לתוך localStorage ולקבל כל המשימות שנשמרו שם בעבר: $ (document.ready (function () {

1. $ ("# myTasks") טשטוש (פונקציה () {/ כאשר הסמן עוזב את האלמנט #myTasks
4. localStorage.setItem ('myTasksData', this.innerHTML); // שמור ל - LocalStorage
7. });
10. אם (localStorage.getItem ('myTasksData')) {/ אם יש תוכן ב- LocalStorage
13. $ ("# myTasks") html (localStorage.getItem ('myTasksData')); // לשים תוכן בדף
16. }
17. });

HTML עבור כל הדף נראה כך:

המשימות שלי

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

• איזו משימה
• משימה נוספת