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

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

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

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

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

document.designMode = 'on'

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

document.body.contentEditable = true

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

designMode in action

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

document.designMode = 'off'

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

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


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