Атрибут contenteditable тега <h1>
Описание
Атрибут contenteditable позволяет сделать содержимое заголовков <h1>-<h6> редактируемым прямо на странице. Это полезно для CMS, интерактивных приложений или быстрого прототипирования.
<h1 contenteditable="true">Редактируемый заголовок</h1>
<h2 contenteditable="plaintext-only">Только текст (без форматирования)</h2>
<h3 contenteditable="false">Не редактируемый подзаголовок</h3>
Допустимые значения:
| Значение | Описание |
|---|---|
true |
Разрешает редактирование с сохранением форматирования |
false |
Запрещает редактирование (по умолчанию) |
plaintext-only |
Разрешает только текстовое редактирование (без HTML) |
Практическое применение:
<article>
<h1 contenteditable="true">Редактируемое название статьи</h1>
<div contenteditable="true">
<h2>Редактируемый подзаголовок</h2>
<p>Редактируемое содержимое</p>
</div>
</article>
<script>
// Сохранение изменений
document.querySelector('h1').addEventListener('blur', function() {
console.log('Новый заголовок:', this.textContent);
});
</script>
Стилизация редактируемого состояния:
<style>
[contenteditable="true"] {
padding: 0.5em;
border: 1px dashed transparent;
transition: all 0.3s;
}
[contenteditable="true"]:focus {
border-color: #3498db;
background: #f8f9fa;
outline: none;
}
[contenteditable="plaintext-only"]:focus {
white-space: nowrap;
overflow: hidden;
}
</style>
<h2 contenteditable="true">Наведите и кликните для редактирования</h2>
Рекомендации по использованию:
- Используйте для интерактивных учебных материалов или CMS
- Добавляйте визуальные подсказки для редактируемых областей
- Сохраняйте изменения при потере фокуса (событие
blur) - Для сложных редакторов используйте специализированные библиотеки
- Сочетайте с
spellcheckдля проверки орфографии
Ограничения:
- Разное поведение в браузерах
- Ограниченное форматирование в
plaintext-only - Нужно самостоятельно реализовывать сохранение изменений
- Не заменяет полноценные редакторы для сложных задач
Примечание: Хотя contenteditable предоставляет базовые возможности редактирования, для профессиональных решений лучше использовать специализированные WYSIWYG-редакторы (TinyMCE, CKEditor и др.), которые предлагают больше функций и кросс-браузерную стабильность.