Атрибут contenteditable тега <pre>
Описание
Атрибут contenteditable для тега <pre> позволяет сделать блок предварительно форматированного текста редактируемым непосредственно в браузере. Это глобальный атрибут HTML, который может принимать значения true или false.
<pre contenteditable="true">
Этот текст можно редактировать прямо на странице.
Сохраняется исходное форматирование и пробелы.
</pre>
Значения атрибута:
| Значение | Поведение |
|---|---|
true или пустая строка |
Элемент становится редактируемым |
false |
Элемент не редактируемый (по умолчанию) |
Практическое применение:
- Создание простых редакторов кода в браузере
- Интерактивные блоки с примером текста
- Прототипирование интерфейсов
- Образовательные демонстрации
Пример с редактором кода:
<style>
.code-editor {
padding: 16px;
background: #f5f5f5;
border: 1px solid #ddd;
font-family: monospace;
min-height: 100px;
}
</style>
<pre contenteditable="true" class="code-editor">
// Введите ваш код здесь
function example() {
return "Hello World!";
}
</pre>
Дополнительные возможности:
- Сохранение форматирования (пробелы, табуляция, переносы строк)
- Возможность программного управления через JavaScript
- Поддержка стандартных горячих клавиш (Ctrl+B, Ctrl+I и т.д.)
Ограничения:
- Не поддерживает сложное форматирование как в полноценных редакторах
- Разные браузеры могут обрабатывать редактирование по-разному
- Требуется дополнительный JavaScript для расширенной функциональности
Примечание: Хотя contenteditable предоставляет базовые возможности редактирования, для создания полноценных редакторов рекомендуется использовать специализированные библиотеки (CodeMirror, Monaco Editor, Ace Editor).