Атрибут contenteditable тега <cite>

Описание

Атрибут contenteditable позволяет сделать содержимое тега <cite> редактируемым непосредственно в браузере. Это полезно для создания интерактивных элементов, где пользователи могут изменять цитаты или ссылки.

Пример использования:
<cite contenteditable="true"> Нажмите, чтобы отредактировать эту цитату </cite>

Значения атрибута:

Значение Поведение По умолчанию
true Разрешает редактирование содержимого Нет (наследуется)
false Запрещает редактирование содержимого
inherit Наследует поведение от родительского элемента -

Рекомендации по использованию:

  • Используйте для интерактивных систем цитирования
  • Комбинируйте с JavaScript для сохранения изменений
  • Добавляйте визуальные подсказки для редактируемых элементов
  • Учитывайте семантику - изменяемые цитаты могут требовать особой обработки

Пример с сохранением изменений:

<cite id="editable-cite" contenteditable="true"> Редактируемая цитата </cite> <button onclick="saveCitation()">Сохранить</button> <script> function saveCitation() { const editedContent = document.getElementById('editable-cite').innerHTML; console.log('Сохраненная цитата:', editedContent); // Отправка на сервер или сохранение в localStorage } </script>

Стилизация редактируемого элемента:

<style> cite[contenteditable="true"] { border-bottom: 1px dashed #666; padding: 2px; min-width: 200px; display: inline-block; } cite[contenteditable="true"]:focus { outline: none; background-color: #f5f5f5; } </style> <cite contenteditable="true">Стилизованная редактируемая цитата</cite>

Ограничения и особенности:

  • Поддерживается всеми современными браузерами
  • Форматирование сохраняется как HTML (не plain text)
  • Не сохраняет изменения автоматически - требуется JavaScript
  • Может конфликтовать с некоторыми CSS-свойствами

Пример с ограничением редактирования:

<div contenteditable="true"> Весь блок редактируется, кроме: <cite contenteditable="false">Этот элемент нельзя изменить</cite> </div>

Важные замечания:

  • Изменения видны только в браузере пользователя
  • Для сохранения нужна серверная часть или localStorage
  • Проверяйте ввод на валидность для цитат
  • Учитывайте доступность (ARIA-атрибуты)

Примечание: Хотя атрибут contenteditable работает с тегом <cite>, важно помнить, что изменяемые цитаты могут требовать дополнительной валидации для сохранения их смысловой точности.