Атрибут contenteditable тега <em>
Описание
Атрибут contenteditable позволяет сделать содержимое элемента <em> редактируемым непосредственно в браузере. Это полезно для создания интерактивных текстовых редакторов или элементов с возможностью правки.
Ограничение: Редактирование сохраняется только в текущей сессии - для постоянного сохранения нужен JavaScript.
Пример использования:
<p>
Это <em contenteditable="true">редактируемый акцент</em> в тексте.
Попробуйте изменить выделенный текст.
</p>
Допустимые значения:
| Значение | Описание |
|---|---|
true |
Разрешает редактирование содержимого |
false |
Запрещает редактирование (по умолчанию) |
plaintext-only |
Только текст (экспериментальное) |
Практическое применение:
<div id="editable-doc">
<p>
В этом документе можно редактировать
<em contenteditable="true" class="editable-em">акцентированные</em> части.
</p>
</div>
<button onclick="saveContent()">Сохранить изменения</button>
<script>
function saveContent() {
const doc = document.getElementById('editable-doc').innerHTML;
localStorage.setItem('savedDoc', doc);
alert('Изменения сохранены!');
}
</script>
Стилизация редактируемых элементов:
<style>
[contenteditable="true"] {
background-color: #f8f9fa;
padding: 2px 4px;
border-radius: 3px;
border: 1px dashed #adb5bd;
}
[contenteditable="true"]:focus {
outline: none;
border: 1px solid #4dabf7;
background-color: #fff;
box-shadow: 0 0 0 2px #d0ebff;
}
</style>
<p>
Редактируемый <em contenteditable="true">акцент</em> с визуальными подсказками
</p>
Рекомендации по использованию:
- Добавляйте визуальные подсказки для редактируемых областей
- Реализуйте механизм сохранения изменений
- Для сложных редакторов используйте специализированные библиотеки
- Учитывайте доступность (добавляйте ARIA-атрибуты)
- Ограничивайте форматирование при необходимости
Пример с ограничением форматирования:
<div id="editor">
<p>
Можно редактировать только
<em contenteditable="true" data-gramm="false">этот текст</em>,
но без грамматических подсказок.
</p>
</div>
<script>
document.querySelector('[contenteditable="true"]').addEventListener('paste', (e) => {
e.preventDefault();
const text = (e.clipboardData || window.clipboardData).getData('text/plain');
document.execCommand('insertText', false, text);
});
</script>
Ограничения и особенности:
- Разные браузеры могут поддерживать разное поведение
- Сложно контролировать вводимое содержимое
- Нет встроенной истории изменений (undo/redo ограничено текущей сессией)
- Требуется дополнительный код для сохранения изменений
Пример с подсветкой изменений:
<style>
.edited {
background-color: #fff3bf;
transition: background-color 1s;
}
</style>
<p>
<em contenteditable="true" id="tracked-em">Редактируемый текст</em>
</p>
<script>
const em = document.getElementById('tracked-em');
let originalText = em.textContent;
em.addEventListener('blur', () => {
if (em.textContent !== originalText) {
em.classList.add('edited');
originalText = em.textContent;
}
});
</script>
Примечание: Хотя contenteditable предоставляет базовые возможности редактирования, для production-решений часто лучше использовать специализированные библиотеки редакторов (TinyMCE, CKEditor, Slate.js), которые решают проблемы с кросс-браузерностью, сохранением и расширенным форматированием.