Атрибут contenteditable тега <details>
Описание
Атрибут contenteditable позволяет сделать содержимое элемента <details> редактируемым прямо в браузере. Это полезно для создания интерактивных редакторов контента с раскрывающимися блоками.
Примечание: Атрибут не делает редактируемым сам тег
Пример использования:
<summary>, только его содержимое и контент внутри <details>.
<details contenteditable="true">
<summary>Редактируемый заголовок</summary>
<p>Этот текст можно редактировать прямо на странице.</p>
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
</ul>
</details>
Особенности работы:
| Аспект | Поведение |
|---|---|
| Редактирование summary | Только текст внутри, не сам элемент |
| Сохранение состояния | Раскрытие/сворачивание сохраняется |
| Форматирование | Зависит от браузера (можно вставлять HTML) |
| Доступность | Требует дополнительной ARIA-разметки |
Практический пример редактора:
<div class="content-editor">
<details contenteditable="true" class="editable-section">
<summary>Раздел 1</summary>
<p>Редактируемое содержимое раздела.</p>
</details>
<button onclick="addNewSection()">Добавить раздел</button>
<button onclick="saveContent()">Сохранить</button>
</div>
<script>
function addNewSection() {
const newSection = document.createElement('details');
newSection.contentEditable = true;
newSection.className = 'editable-section';
newSection.innerHTML = `
<summary>Новый раздел</summary>
<p>Добавьте свой текст здесь</p>
`;
document.querySelector('.content-editor').prepend(newSection);
}
function saveContent() {
const html = document.querySelector('.content-editor').innerHTML;
console.log('Сохранённый контент:', html);
// Отправка на сервер...
}
</script>
<style>
.editable-section {
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
}
.editable-section[open] {
background-color: #f8f9fa;
}
</style>
Рекомендации по улучшению:
- Добавьте визуальные подсказки для редактируемых областей
- Реализуйте панель инструментов форматирования
- Сохраняйте состояние (открыто/закрыто) при сохранении
- Обеспечьте валидацию вводимого контента
- Добавьте поддержку отмены действий (Ctrl+Z)
Пример с ограниченным редактированием:
<details class="restricted-editable">
<summary contenteditable="plaintext-only">Только текст</summary>
<div contenteditable="true" data-allowed-tags="p,ul,li">
<p>Можно редактировать и добавлять абзацы, списки.</p>
</div>
</details>
<script>
// Ограничение допустимых тегов
document.querySelector('[data-allowed-tags]').addEventListener('paste', function(e) {
const allowed = this.dataset.allowedTags.split(',');
e.preventDefault();
const text = (e.clipboardData || window.clipboardData).getData('text/plain');
document.execCommand('insertText', false, text);
});
</script>
Ограничения и решения:
| Проблема | Решение |
|---|---|
| Разное поведение в браузерах | Использовать полифиллы или библиотеки |
| Потеря форматирования | Реализовать свою систему сохранения |
| Доступность | Добавить ARIA-атрибуты и инструкции |
Примечание: Для production-решений с богатым редактированием рекомендуется использовать специализированные библиотеки (TinyMCE, CKEditor, ProseMirror), которые предоставляют более надежный контроль над редактируемым контентом и решают кросс-браузерные проблемы.