Атрибут contenteditable тега <b>
Описание
Атрибут contenteditable позволяет сделать содержимое тега <b> редактируемым прямо в браузере. Это глобальный атрибут, который может превратить любой элемент в редактируемую область.
<p>
Нажмите, чтобы редактировать:
<b contenteditable="true">этот жирный текст</b>
</p>
Значения атрибута:
| Значение | Поведение | Особенности |
|---|---|---|
true |
Разрешает редактирование | Наследуется дочерними элементами |
false |
Запрещает редактирование | Отменяет наследование |
plaintext-only |
Только текст (без форматирования) | Экспериментальная функция |
Практические примеры:
1. Редактируемый жирный текст:<div class="editable-container">
<p>Отзыв: <b contenteditable="true" class="editable-text">ваше мнение</b></p>
<button onclick="saveContent()">Сохранить</button>
</div>
<script>
function saveContent() {
const editedText = document.querySelector('.editable-text').innerHTML;
console.log('Сохраненный текст:', editedText);
}
</script>
document.querySelector('[contenteditable]').addEventListener('paste', function(e) {
e.preventDefault();
const text = (e.clipboardData || window.clipboardData).getData('text/plain');
document.execCommand('insertText', false, text);
});
Особенности работы:
- Сохранение HTML-форматирования при редактировании
- Доступ к API document.execCommand (устаревшему)
- Поддержка стандартных горячих клавиш (Ctrl+B, Ctrl+I)
- Возможность кастомизации через CSS
Лучшие практики:
- Всегда предусматривайте интерфейс сохранения изменений
- Ограничивайте вставку HTML для безопасности
- Используйте CSS для визуальной обратной связи
- Для сложных редакторов рассмотрите специализированные библиотеки
Ограничения: Реализация различается между браузерами. Для профессиональных решений лучше использовать ContentEditable-библиотеки или специализированные редакторы.
Стилизация редактируемой области:
[contenteditable="true"] {
min-width: 200px;
padding: 5px;
border: 1px dashed #aaa;
background-color: #f9f9f9;
}
[contenteditable="true"]:focus {
outline: none;
border-color: #4CAF50;
background-color: #fff;
}
Современная альтернатива (использование execCommand):
// Устаревший API (не рекомендуется для новых проектов)
function makeBold() {
document.execCommand('bold', false, null);
}
// Современная альтернатива
function toggleBoldModern() {
const selection = window.getSelection();
if (selection.rangeCount) {
const range = selection.getRangeAt(0);
const span = document.createElement('span');
span.style.fontWeight = 'bold';
range.surroundContents(span);
}
}
Совет: Для богатых текстовых редакторов используйте специализированные решения (Quill, TinyMCE, CKEditor) вместо нативного contenteditable.
Примечание: Хотя атрибут contenteditable поддерживается всеми современными браузерами, его реализация имеет значительные различия и нестандартное поведение.