Атрибут contenteditable тега <mark>
Описание
Атрибут contenteditable для тега <mark> позволяет пользователям редактировать выделенный текст прямо в браузере. Это полезно для интерактивных приложений, где нужно отмечать и изменять важные фрагменты текста.
<div contenteditable="true">
<p>
Вы можете редактировать этот текст и выделять
<mark contenteditable="true"> важные части</mark> прямо в браузере.
</p>
</div>
<style>
mark[contenteditable] {
background-color: #fff59d;
padding: 0.2em;
border-radius: 3px;
}
mark[contenteditable]:focus {
outline: 2px solid #ff9800;
}
</style>
Значения атрибута:
| Значение | Поведение |
|---|---|
contenteditable="true" |
Элемент можно редактировать |
contenteditable="false" |
Элемент нельзя редактировать (по умолчанию) |
contenteditable="inherit" |
Наследует поведение от родителя |
Рекомендации по использованию:
- Используйте с
designModeдля создания полноценных редакторов - Сохраняйте изменения через JavaScript (localStorage или сервер)
- Добавляйте визуальные подсказки для редактируемых областей
- Проверяйте ввод данных на валидность
Пример с сохранением изменений:
<div class="editor" contenteditable="true">
<p>Отредактируйте и выделите <mark contenteditable="true">ключевые моменты</mark> в этом тексте.</p>
</div>
<button onclick="saveContent()">Сохранить</button>
<script>
function saveContent() {
const content = document.querySelector('.editor').innerHTML;
localStorage.setItem('savedContent', content);
alert('Изменения сохранены!');
}
// Восстановление при загрузке
window.addEventListener('DOMContentLoaded', () => {
const saved = localStorage.getItem('savedContent');
if (saved) document.querySelector('.editor').innerHTML = saved;
});
</script>
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- Разные браузеры могут по-разному обрабатывать форматирование
- Для сложного редактирования используйте специализированные библиотеки
- Всегда очищайте HTML перед сохранением на сервер
Примечание: Хотя contenteditable предоставляет базовые возможности редактирования, для продвинутых текстовых редакторов рассмотрите использование специализированных решений вроде Quill, TinyMCE или CKEditor, которые предлагают больше контроля над процессом редактирования.