Content editable в HTML5

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.
Share post

Similar posts

Comments 28

    +10
    Тут у ребят уже есть реализация редактора c исходниками
      –2
      Применение этой реалезации на практике крайне затруднительно. Имелось в виду редактирование, допустим, своего поста в реальном времени. Для этого нужны права доступа и т.д.

      А еще aloha не умеет вставлять/удалять изображения.
        +2
        новая версия умеет, причем, перетаскиванием картинки с десктопа в браузер ) но она еще не стабильна.
      +31
      По-моему такая штука была еще в IE5 (contentEditable).
        +17
        тссссс, все самое классное есть только в хтмл5
          +6
          Точно подмечено. Заменить HTML на IE в заголовке будет в самый раз)
            +7
            70% HTML5 было в IE5 в том или ином виде
              0
              новое — хорошо забытое старое)
            0
            Хм, надо будет попробовать использовать для редактирования комментариев, там как раз картинки редко встречаются.
              +4
              Конечно, более всего радует кроссбраузерность.
              htmlbook.ru/html/attr/contenteditable
              Вообще, атрибуту уже много лет. И, насколько я помню, на нём работают визивиги. Как минимум в реализации для ИЕ.
              Увы, не помню что было альтернативой для каких-нибудь мозилл и вэбкитов.
                +2
                designMode.
                  +1
                  не, designMode это на весь документ. был вообще везде и всегда.
                  в Fx, Opera, Webkit поддержка contentEditable есть уже довольно давно. По-моему только в Fx 2, Opera 9 не было contentEditable.
                  +1
                  А как с мобильными браузерами? На Андроиде у меня он явно параметр воспринимает, но редактировать не дает.
                  +1
                  Хорошая вещь для заполнения шаблонизированных веб-документов.
                    +2
                    Замечательная возможность для системы уведомления об опечатках на сайте. Посетитель может исправить их прямо на странице, правки можно класть в базу и потом представлять на суд хозяина сайта. Я даже начал писать прототип такой системы, да с временем беда.
                      0
                      Очень хорошая идея!
                      +2
                      Firefox 5, курсор в конец строчки, enter, backspace, enter ломают систему редактирования (ничего не вводится, хотя курсор есть)
                      0
                      Надо добавить визуальных эффектов для редактируемой области, сейчас не понятно сходу редактируемый там контент или нет, даже если просто ткнуть мышкой и появится курсор (а в FF при нажатии на F7 курсор появляется в любом случае), то неясно что можно редактировать пока не начнёшь набирать текст.
                        +1
                        можно на страницу добавить
                        <style type="text/css">#myDiv[contenteditable=true]{border-width:3px;border-style:inset;}</style>

                        ну или чем там выделить захочется
                        +1
                        Согласно caniuse.com, этот атрибут не работает ни в одном мобильном браузере. Так что жаждущие выйти за пределы десктопов (и нетбуков с ноутбуками) должны поберечься.
                          0
                          В новой iOS должна появится поддержка.
                            0
                            скоро он появится в opera mobile
                            +13
                            1999 год. MS ввел content editable в IE5.5
                            2011 год. W3C обратило на это внимание
                              0
                              Честно говоря, я не понял, каким образом при нажатии Enter появляются новые элементы в списке. Это делает браузер, похоже? Весьма интересно.
                                0
                                Да, браузер. Собственно про это весь пост. Но, очевидно, вы не читали.
                                  0
                                  Не надо дерзить. То, что браузер автоматически подставляет элемент списка (а не тупо перенос строки, что можно было бы ожидать при редактировании текста) — совсем не очевидно.
                                  0
                                  аналогичным вопросом задался…
                                  нашелся ответ?

                                Only users with full accounts can post comments. Log in, please.