Как сделать страницу редактируемой в браузере

В браузерах есть специальный и довольно секретный режим, который называетсярежим проектирования.

Когда вы устанавливаете страницу в режим дизайна, вы можете редактировать содержимое страницы прямо внутри страницы браузера, что очень удобно, например, для тестирования прототипа или проверки того, как будет выглядеть новый заголовок.

Как его включить? ОткройКонсоль DevToolsи введите:

document.designMode = 'on'

Тот же результат можно получить, включивcontentEditableнаbodyэлемент, например:

document.body.contentEditable = true

Вы можете редактировать текст, удалять его, а также перетаскивать изображения, чтобы переместить их.

Вы можете выключить режим, используя

document.designMode = 'off'

Эта функция поддерживается почти всеми браузерами, включая IE. Он довольно старый, но совершенно неизвестный.

Больше руководств по браузеру:

• Некоторые полезные приемы, доступные в HTML5
• Как я заставил веб-сайт на CMS работать в автономном режиме
• Полное руководство по прогрессивным веб-приложениям
• API-интерфейс Fetch
• Руководство по Push API
• API обмена сообщениями канала
• Учебник для сервис-воркеров
• Руководство по Cache API
• Руководство по API уведомлений
• Погрузитесь в IndexedDB
• API селекторов: querySelector и querySelectorAll
• Эффективно загружайте JavaScript с помощью defer и async
• Объектная модель документа (DOM)
• API веб-хранилища: локальное хранилище и хранилище сеансов
• Узнайте, как работают HTTP-файлы cookie
• API истории
• Формат изображения WebP
• XMLHttpRequest (XHR)
• Подробное руководство по SVG
• Что такое URL-адреса данных
• Дорожная карта для изучения веб-платформы
• CORS, совместное использование ресурсов между источниками
• Веб-воркеры
• Руководство по requestAnimationFrame ()
• Что такое Doctype
• Работа с консолью DevTools и консольным API
• API синтеза речи
• Как дождаться события готовности DOM в простом JavaScript
• Как добавить класс к элементу DOM
• Как перебрать элементы DOM из querySelectorAll
• Как удалить класс из элемента DOM
• Как проверить, есть ли у элемента DOM класс
• Как изменить значение узла DOM
• Как добавить событие щелчка в список элементов DOM, возвращаемых из querySelectorAll
• WebRTC, веб-API реального времени
• Как получить позицию прокрутки элемента в JavaScript
• Как заменить элемент DOM
• Как принимать только изображения в поле входного файла
• Зачем использовать предварительную версию браузера?
• Объект Blob
• Файловый объект
• Объект FileReader
• Объект FileList
• ArrayBuffer
• ArrayBufferView
• Объект URL
• Типизированные массивы
• Объект DataView
• API BroadcastChannel
• API Streams
• Объект FormData
• Объект навигатора
• Как использовать API геолокации
• Как использовать getUserMedia ()
• Как использовать API перетаскивания
• Как работать с прокруткой на веб-страницах
• Обработка форм в JavaScript
• События клавиатуры
• События мыши
• Сенсорные события
• Как удалить всех дочерних элементов из элемента DOM
• Как создать атрибут HTML с помощью ванильного Javascript
• Как проверить, установлен ли флажок, используя JavaScript?
• Как скопировать в буфер обмена с помощью JavaScript
• Как отключить кнопку с помощью JavaScript
• Как сделать страницу редактируемой в браузере
• Как получить значения строки запроса в JavaScript с помощью URLSearchParams
• Как сразу удалить весь CSS со страницы
• Как использовать insertAdjacentHTML
• Safari, предупредить перед выходом
• Как добавить изображение в DOM с помощью JavaScript
• Как сбросить форму
• Как использовать Google Fonts