Content editable в HTML5 / Хабр

Одним из нововведений HTML5 стала возможность редактировать часть страницы прямо в браузере. Эта фича получила название content editable. Она работает во всех современных браузерах. Чтобы сделать часть страницы редактируемой, нужно поставить тегу атрибут contenteditable="true". Под тегом может стоять практически всё: текст с форматированием, картинки, списки и даже flash-ролики. Но пользователь может добавлять толко текст, остольное он может только удалять. В этом посте я покажу пример использования content editable на веб-сайте.

HTML-код

<!DOCTYPE HTML>
<html>
  <head>
    <title>Редактируемый список в HTML5</title>

    <script type="text/javascript">

В функции buttonClick() обрабатывается нажатие на кнопку «Сохранить» («Редактировать»): меняется атрибут contentEditable, надпись на кнопке и содержимое cписка копируется в текстовое поле.

      function buttonClick ()
      {
        var div = document.getElementById ("myDiv");
        var button = document.getElementById ("myButton");
        var content_div = document.getElementById ("ListContent");
        var textarea = document.getElementById ("myTextarea");

        if (div.contentEditable == "true")
        {
          div.contentEditable = "false";
          content_div.style.display = "inline";
          textarea.innerHTML = div.innerHTML;
          button.value = "Редактировать";
        }

        else
        {
          div.contentEditable = "true";
          content_div.style.display = "none";
          button.value = "Сохранить";
        }

      }
    </script>
  </head>

  <body>
    <b>Что нужно сделать?</b> (список можно редактировать)

Редактируемый div. Обратите в нимание на contenteditable="true".

    <div id="myDiv" contenteditable="true">
      <ul id="todolist">  
        <li>Купить молоко</li>  
        <li>Купить яйца</li>
        <li>Починить дверь</li>
        <li>Отредактировать список!</li>
      </ul>
    </div>

Кнопка «Сохранить» («Редактировать»). По нажатию вызывается функция buttonClick().

    <input type="button" id="myButton" onclick="buttonClick();" value="Сохранить">

    <br><br>

Текстовое поле, в котором по нажатию кнопки «Сохранить» отображается содержимое списка.

    <div id="ListContent" style="display: none;">
      Что в списке:<br>
      <textarea rows="10" cols="70" id="myTextarea">
      </textarea>
    </div>

  </body>
</html>

Посмотреть живой пример можно здесь.

Cкачать архив с кодом тут.

P.S. скоро напишу, как сделать полностью редактируемым из браузера сайт с помощью contenteditable.