Content editable в HTML5

22 Авг
2011

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
.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх