Атрибут contenteditable тега <blockquote>
Описание
Атрибут contenteditable для тега <blockquote> позволяет сделать цитату редактируемой пользователем напрямую в браузере. Однако это не рекомендуется по нескольким причинам:
- Цитаты по определению должны сохранять оригинальный текст
- Может привести к искажению авторского содержания
- Усложняет поддержку и валидацию контента
Пример (не рекомендуется):
<blockquote contenteditable="true">
<p>Текст цитаты, который можно изменить</p>
</blockquote>
Проблемы такого подхода:
| Проблема | Решение |
|---|---|
| Нарушение семантики цитаты | Использовать отдельные редактируемые блоки |
| Потеря оригинального текста | Хранить исходник в data-атрибутах |
| Ограниченный контроль редактирования | Применять специализированные редакторы |
Правильная альтернатива:
<div class="editable-quote">
<blockquote cite="https://example.com">
<p>Оригинальный текст цитаты</p>
</blockquote>
<div class="quote-edit" contenteditable="true">
Ваш вариант цитаты
</div>
</div>
<style>
.quote-edit {
margin-top: 1em;
padding: 0.8em;
border: 1px dashed #ccc;
}
</style>
Рекомендации по реализации:
- Разделяйте оригинальную цитату и редактор
- Для сложного редактирования используйте библиотеки (Quill, TinyMCE)
- Сохраняйте исходный текст в
data-original - Добавляйте четкие визуальные границы для редактируемых областей
Важно: Если вам действительно нужно редактировать цитаты, реализуйте механизм версионирования, чтобы сохранять оригинальный текст.
Пример с сохранением оригинала:
<div class="quote-container"
data-original="Оригинальный текст цитаты">
<blockquote>
<p contenteditable="true">Оригинальный текст цитаты</p>
</blockquote>
<button onclick="resetQuote(this.parentElement)">
Восстановить оригинал
</button>
</div>
<script>
function resetQuote(container) {
const original = container.dataset.original;
container.querySelector('p').textContent = original;
}
</script>
Лучшие практики:
- Избегайте редактирования цитат без крайней необходимости
- Если редактирование обязательно - сохраняйте источник
- Используйте визуальные маркеры измененных цитат
- Обеспечьте возможность восстановления оригинала