«
»

HTML5: Редактирование контента прямо на странице

2010-11-22

Чтобы сделать html-элемент редактируемым, нужно всего лишь добавить ему атрибут «contentEditable».

Пример:

<div contentEditable="true">
Текст, который может быть <strong>отредактирован прямо на странице</strong>
</div>

Протестируйте:

Текст, который может быть отредактирован прямо на странице

После этого, внесенные изменения могут быть переданы с помощью AJAX-технологии на сервер и сохранены.

Преимущества перед обычным <textarea/> очевидны:

  • редактируемый текст не теряет стилей, и может быть добавлена возможность менять стили с помощью дополнительной javascript-функционала;
  • любой элемент на веб-странице можно превратить в редактируемый без особого труда (это очень удобно для CMS-систем).

Очень радует то, что данный механизм поддерживается всеми известными веб-браузерами.



7 комментариев на «HTML5: Редактирование контента прямо на странице»

  1. master_xss:
    2010-12-07 в 22:36

    Потери стиля я вроде и в textarea не замечал…

  2. admin:
    2010-12-08 в 11:09

    Ну как же?

    Что будет если внутри <textarea/> использовать теги?
    Они просто отобразятся как текст. Декорировать и форматировать текст с помощью CSS не получится.

    Пример:
    <textarea>
    обычный текст <strong>жирный текст</strong> <span style=»color:#FF0000″>красный текст</span>
    </textarea>

  3. master_xss:
    2010-12-08 в 19:26

    ….

    #txt {
    color:red;
    }

    и вот вам красный текст в textarea.

  4. master_xss:
    2010-12-08 в 19:29

    почему я написал тэг textarea а его обрезало?

  5. admin:
    2010-12-09 в 11:53

    А получится ли у Вас каким либо образом сделать так, чтобы в текст textarea первое слово было красным, а второе — синим? ;)
    Вы можете стилизировать только весь textarea целиком, но не более того…
    Просто поэкспериментируйте…

  6. Дмитрий:
    2012-09-26 в 08:24

    Подскажите, плиз, новичку ссылку, где описывается как сохранять изменения на сервере.

  7. plutov:
    2013-12-01 в 15:05

    Всё бы супер, но contenteditable еще сырой, вот один фикс в моем блоге — http://plutov.by/post/contenteditable_remove_styles

Добавить комментарий