Атрибут contenteditable тега <del>
Описание
Атрибут contenteditable позволяет сделать содержимое элемента <del> редактируемым прямо в браузере. Это полезно для интерактивных редакторов, где нужно отмечать удаленный текст, но сохранять возможность его изменения.
<div class="text-editor">
<p>
Этот текст можно редактировать.
<del contenteditable="true">Удаленный фрагмент</del>
можно изменить прямо здесь.
</p>
</div>
<style>
.text-editor {
border: 1px solid #ddd;
padding: 10px;
min-height: 100px;
}
[contenteditable="true"] {
outline: 1px dashed #ccc;
}
</style>
Значения атрибута:
| Значение | Описание |
|---|---|
true |
Разрешает редактирование содержимого |
false |
Запрещает редактирование (по умолчанию) |
inherit |
Наследует значение от родительского элемента |
Практическое применение:
<div class="document-editor">
<h3>Редактор изменений</h3>
<p contenteditable="true">
Исходный текст документа. Выделите часть текста и используйте
кнопки ниже для пометки изменений.
</p>
<button onclick="markAsDeleted()">Пометить как удаленное</button>
<button onclick="saveChanges()">Сохранить изменения</button>
</div>
<script>
function markAsDeleted() {
const selection = window.getSelection();
if (selection.rangeCount) {
const range = selection.getRangeAt(0);
const del = document.createElement('del');
del.contentEditable = 'true';
range.surroundContents(del);
}
}
function saveChanges() {
const html = document.querySelector('.document-editor').innerHTML;
console.log('Сохранено:', html);
// Отправка на сервер...
}
</script>
Особенности работы:
- Сохраняет семантику удаленного текста при редактировании
- Можно комбинировать с атрибутами
datetimeиcite - Редактирование не удаляет тег
<del> - Работает во всех современных браузерах
Советы по реализации:
- Добавляйте визуальные подсказки для редактируемых областей
- Сохраняйте семантику при программном создании элементов
- Обеспечьте способ сохранения изменений (кнопка, автосохранение)
- Для сложных редакторов используйте специализированные библиотеки
Пример с сохранением истории:
<div id="editor" contenteditable="true">
<p>Редактируйте этот текст. Выделите фрагмент и пометьте как удаленный.</p>
</div>
<button onclick="markDeleted()">Пометить удаление</button>
<button onclick="showHistory()">История изменений</button>
<script>
const history = [];
function markDeleted() {
const sel = window.getSelection();
if (!sel.isCollapsed) {
const range = sel.getRangeAt(0);
const del = document.createElement('del');
del.contentEditable = 'true';
del.setAttribute('datetime', new Date().toISOString());
range.surroundContents(del);
saveToHistory();
}
}
function saveToHistory() {
history.push({
timestamp: new Date(),
content: document.getElementById('editor').innerHTML
});
}
function showHistory() {
console.log('История изменений:', history);
}
</script>
Доступность (a11y):
- Добавьте инструкции для пользователей скринридеров
- Обеспечьте клавиатурную навигацию
- Используйте ARIA-атрибуты для описания функционала
- Тестируйте с различными вспомогательными технологиями
Примечание: Реализация полноценного редактора с поддержкой отслеживания изменений требует значительных усилий. Для production-решений рассмотрите использование готовых библиотек, таких как ProseMirror или Quill, которые предоставляют встроенную поддержку подобного функционала.