Одним из нововведений 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.