contenteditable ו-localStorage ב-HTML5

קחו את העכבר, תלחצו על הפסקה הזו ותנסו לשנות אותה. כן, כן – פשוט תעשו את זה!

התכונה המגניבה הזו נקראת contenteditable וניתן להשתמש בה בכל הדפדפנים (גם אינטרנט אקספלורר). משתמשים בה באופן פשוט ביותר, ממש ככה:

<p contenteditable="true">קחו את העכבר, תלחצו על הפסקה הזו ותנסו לשנות אותה. כן, כן - פשוט תעשו את זה!</p>

עם התכונה הזו מגיע API שלם בשם The command API שמאפשר לנו לעשות דברים מופלאים עם contenteditable. כמו למשל לאפשר שינוי פונטים, צבעים, דגשים וכו’. לשם דוגמא, נסו לבחור טקסט מהפסקה הזו וללחוץ על אחד הכפתורים.

Bold
Italic

זה נעשה באמצעות שימוש ב-API. הקוד מאחורי הכפתורים הוא פשוט מאד:

<button onclick="document.execCommand('bold',false,null);">Bold</button>
<button onclick="document.execCommand('italics',false,null);">Italic</button>

כל דפדפן עדיין מממש את ה-commands בדרך שונה במקצת. אפשר לייצר גם commands שמקפיצים שאלה למשתמש כמו למשל URL או צבע. דוגמאות מקיפות אפשר לראות כאן.

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

localStorage

אפשר לשלב את contenteditable עם פיצ’ר נוסף ומגניב של HTML5 בשם localStorage. localStorage מאפשר לנו לשמור ערכים ומידע על גבי הדפדפן בדומה לעוגיות. אפשר להשתמש בו בכל דפדפן כולל באינטרנט אקספלורר 8.

localStorage הוא מאד נוח, הוא בפורמט של key=>value וניתן לשלוף אותו, לשמור עליו ולמחוק אותו.

שמירה

השמירה או היצירה נעשית ב-JavaScript באופן הבא:

localStorage.setItem('KEY', 'VALUE');

ה-KEY הוא השם שאנו נותנים למחסן שלנו וה-VALUE הוא הערך שיכול להיות מערך, משתנה או אפילו innerHTML.

שליפה

שליפה היא מאד פשוטה ונעשית באופן הבא:

var value = localStorage.getItem('KEY');

כאן אנחנו רק צריכים את ה-KEY שעובר למשתנה פשוט בשם value.

מחיקה

מחיקה גם היא פשוטה ביותר:

localStorage.clear('KEY');

או (אם אנו רוצים למחוק הכל) :

localStorage.clear();

להדגמת ה-localStorage, אנו נשתמש בפסקה עם id=main שיש לה תכונת contenteditable. לאחר העריכה יהיה ניתן לשמור את הטקסט והשמירה תשאר גם אם נרפרש את הדף! אם נרצה, נוכל לעשות clear ואז הדף יתרפרש ולשינויים שלנו לא יהיו זכר.

איך זה נעשה? בקלות! ראשית יצרתי אלמנט ונתתי לו תכונת contenteditable שמאפשרת לנו לערוך אותו בקלות. שנית, יצרתי שני כפתורים. זה ששומר, פשוט יוצר localStorage ומעביר אליו את ה-innerHTML של האלמנט שלי. השני, זה שמבטל את השינויים, פשוט מנקה את ה-localStorage ומרפרש את הדף. ולבסוף הוספתי אירוע שב-window.onload הוא בודק אם יש לי localStorage ואם כן, הוא טוען מתוכו את מה שיש בו ויורה אותו ל-innerHTML של האלמנט שלי. הכל נראה כך:

<div id="main" contenteditable="true">
<p>Its my paragraph and I will rewrite it if I want to, rewrite it if I want to.</p>
<p>You would rewrite too if it happened to you</p>
</div>
<p>
    <input type="button" id="clear" value="Clear changes" />
    <input type="button" id="save" value="Save changes" />
</p>
<script type='text/javascript'>
/* IE addEventListener */
var addEvent = (function () {
  if (document.addEventListener) {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.addEventListener(type, fn, false);
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  } else {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  }
})();
var editable = document.getElementById('main');
addEvent(document.getElementById('save'), 'click', function () {
   localStorage.setItem('contenteditable', editable.innerHTML);
});
addEvent(document.getElementById('clear'), 'click', function () {
  localStorage.clear();
  window.location = window.location; // refresh
});
if (localStorage.getItem('contenteditable')) {
  editable.innerHTML = localStorage.getItem('contenteditable');
}
</script>

שימו לב שהשתמשתי ב-addEventListener על מנת להוסיף את האירועים ב-JavaScript. קל, מהיר ופשוט – לא?