Атрибут contenteditable тега <code>
Описание
Атрибут contenteditable позволяет сделать содержимое тега <code> редактируемым прямо в браузере. Это особенно полезно для интерактивных примеров кода, песочниц и обучающих материалов.
<code contenteditable="true">
// Измените этот код
function example() {
return "Hello World!";
}
</code>
Значения атрибута:
| Значение | Поведение | Рекомендуется для |
|---|---|---|
true |
Разрешает редактирование | Интерактивных примеров кода |
false |
Запрещает редактирование | Статичных примеров (по умолчанию) |
plaintext-only |
Только текст без форматирования | Редакторов кода |
Рекомендации по использованию:
- Сочетайте с CSS для лучшего UX:
- Для сохранения изменений используйте JavaScript:
- Добавляйте подсказки для пользователей:
<style>
code[contenteditable] {
display: block;
padding: 1em;
background: #f5f5f5;
border: 1px solid #ddd;
min-height: 100px;
font-family: monospace;
}
code[contenteditable]:focus {
outline: 2px solid #3498db;
}
</style>
<code id="editable-code" contenteditable></code>
<button onclick="saveCode()">Сохранить</button>
<script>
function saveCode() {
const code = document.getElementById('editable-code').textContent;
localStorage.setItem('savedCode', code);
}
</script>
<code contenteditable placeholder="Введите ваш код здесь..."></code>
Ограничения и решения:
| Проблема | Решение |
|---|---|
| Нет подсветки синтаксиса | Используйте библиотеки (Prism.js, Highlight.js) |
| Сложно сохранить отступы | Добавьте обработку клавиши Tab |
| Автозакрытие тегов | Реализуйте через JavaScript |
Пример продвинутого использования:
<div class="code-editor">
<div class="toolbar">
<button onclick="runCode()">▶ Выполнить</button>
</div>
<code id="live-code" contenteditable="true">
// Попробуйте изменить код
alert('Hello World!');
</code>
<div class="output"></div>
</div>
<script>
function runCode() {
try {
const code = document.getElementById('live-code').textContent;
const output = document.querySelector('.output');
output.innerHTML = eval(code);
} catch(e) {
console.error(e);
}
}
</script>
Важные замечания:
- Всегда экранируйте пользовательский код перед выполнением
- Для production-решений лучше использовать специализированные редакторы (CodeMirror, Monaco)
- Тестируйте в разных браузерах (особенно мобильных)
- Сочетайте с атрибутом
spellcheck="false"для кода
Примечание: Хотя contenteditable предоставляет базовые возможности редактирования, для полноценных редакторов кода рекомендуется использовать специализированные JavaScript-библиотеки, которые предлагают подсветку синтаксиса, автодополнение и другие профессиональные функции.