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

Описание

Атрибут contenteditable в теге <figcaption> позволяет пользователям редактировать текст подписи непосредственно в браузере. Это полезно для CMS и интерфейсов, где требуется быстрая правка контента.

Пример использования:
<figure> <img src="chart.png" alt="График продаж"> <figcaption contenteditable="true"> Рисунок 1. Динамика продаж за квартал </figcaption> </figure>

Допустимые значения:

Значение Поведение Применение
true Разрешает редактирование Для интерактивных подписей
false Запрещает редактирование По умолчанию
inherit Наследует от родителя Для вложенных структур

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

<figure id="editable-figure"> <img src="diagram.jpg" alt="Диаграмма"> <figcaption contenteditable="true" class="editable-caption"> Рисунок 2. Архитектура системы </figcaption> </figure> <button onclick="saveCaption()">Сохранить изменения</button> <script> function saveCaption() { const caption = document.querySelector('.editable-caption'); alert('Новый текст: ' + caption.innerText); // Отправка на сервер... } </script>

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

<style> [contenteditable="true"] { padding: 8px; border: 1px dashed #ccc; background: #f9f9f9; } [contenteditable="true"]:focus { outline: 2px solid #4CAF50; background: #fff; } </style> <figure> <img src="photo.jpg" alt="Фото"> <figcaption contenteditable="true"> Нажмите, чтобы изменить подпись </figcaption> </figure>

Особенности работы:

  • Поддерживается всеми современными браузерами
  • Не изменяет исходный HTML-код страницы
  • Для сохранения изменений требуется JavaScript
  • Можно комбинировать с execCommand для форматирования

Ограничения:

  • Изменения не сохраняются автоматически
  • Ограниченные возможности форматирования
  • Может конфликтовать с некоторыми CSS-стилями
  • Требует дополнительной обработки для сохранения

Примечание: Хотя contenteditable предоставляет простой способ сделать подписи редактируемыми, для сложных CMS лучше использовать специализированные редакторы (TinyMCE, CKEditor). Для сохранения изменений обязательно реализуйте серверную часть.