Live Text Editor делает каждый текстовый элемент на веб-странице редактируемым одним кликом. Изменяйте заголовки, абзацы, надписи кнопок, пункты навигации или любой текстовый контент прямо на живой странице — отредактированный текст отображается в реальном времени с сохранением оригинальных шрифтов, цветов и макета. Идеально для тестирования вариантов текста, создания макетов и скриншотов с пользовательским контентом.
Сколько раз вы думали «интересно, как бы выглядел этот заголовок с другой формулировкой» или «мне нужен скриншот этой страницы с именем нашего клиента вместо текста-заполнителя»? Обычно это означает редактирование кода, пересборку или использование графического редактора для наложения текста. Live Text Editor устраняет всё это — просто нажмите на любой текст на странице и начните печатать. Текст становится редактируемым прямо на месте с использованием contentEditable, а значит, всё исходное CSS-оформление элемента сохраняется: семейство шрифтов, размер, насыщенность, цвет, межбуквенный интервал, межстрочный интервал, text-transform и все остальные свойства текста. Макет обновляется в реальном времени по мере ввода — если новый текст длиннее, элемент расширяется естественным образом. Редактируйте сколько угодно текстовых элементов за одну сессию. Счётчик правок отслеживает количество изменённых элементов, а «Отменить все» мгновенно восстанавливает всё. Все изменения только визуальные и сбрасываются при перезагрузке страницы.
Нажмите на любой текстовый элемент на странице — заголовки, абзацы, span, надписи кнопок, текст ссылок, элементы списков, ячейки таблиц — и он сразу станет редактируемым. Появляется мигающий курсор, и можно начинать печатать. Никаких режимов выделения или дополнительных кликов.
Отредактированный текст сохраняет все исходные CSS-свойства: font-family, font-size, font-weight, color, line-height, letter-spacing, text-transform и свойства макета. Текст выглядит так, будто он изначально принадлежит странице — а не как грубое наложение.
По мере ввода более длинного или короткого текста элемент изменяет размер естественным образом, а окружающий макет перестраивается так же, как с реальным контентом. Посмотрите, как разные длины текста влияют на макет.
Редактируйте сколько угодно текстовых элементов за одну сессию. Измените заголовок, затем подзаголовок, затем надпись кнопки, затем текст в подвале — каждое изменение сохраняется до перезагрузки страницы.
Небольшой счётчик показывает, сколько элементов вы отредактировали. «Отменить все» восстанавливает каждый отредактированный элемент к исходному текстовому содержимому одним кликом. Отдельные изменения отслеживаются с подсказками «было: оригинальный текст».
Все правки существуют только в DOM браузера и никогда не сохраняются на сервере. Перезагрузите страницу — и каждый текстовый элемент вернётся к исходному содержимому. Безопасно использовать на любом сайте, включая продакшен.
Попробуйте разные варианты заголовков на живой странице, чтобы увидеть, какая формулировка звучит убедительнее. «Начать бесплатно» против «Запустить бесплатный пробный период» против «Создать аккаунт» — смотрите каждый вариант в реальном дизайне страницы.
Замените текст-заполнитель («Lorem ipsum») реальным содержимым клиента во время презентации. Покажите им название компании, описание продукта и текст CTA в настоящем дизайне — гораздо убедительнее, чем статичный макет.
Нужен скриншот с конкретным текстом для документации, публикации в блоге или презентационного слайда? Отредактируйте текст напрямую, затем используйте инструмент Screenshot для захвата чистого изображения с вашим контентом.
Что произойдёт, если название продукта содержит 40 символов вместо 15? Или описание занимает 3 строки вместо 1? Введите более длинный текст, чтобы увидеть, как макет справляется с этим — находите ошибки переполнения до того, как их вызовет реальный контент.
Вставьте переведённый текст в элементы, чтобы увидеть, как дизайн справляется с разными языками. Немецкий текст зачастую на 30% длиннее английского — работает ли при этом макет? Помещается ли текст кнопки?
Откройте плавающую панель DevSuite Pro и нажмите иконку Live Text Editor. Инструмент активируется, и каждый текстовый элемент на странице становится кликабельным для редактирования.
Нажмите на заголовок, абзац, надпись кнопки или любой текстовый контент. В тексте появляется курсор, а над элементом отображается значок «редактирование».
Начните печатать, чтобы заменить или изменить текст. Новый контент отображается в реальном времени с сохранением исходного оформления. Макет естественно подстраивается под новую длину текста.
Нажмите за пределами текущего элемента, чтобы завершить его редактирование, затем нажмите на другой текстовый элемент для его редактирования. Счётчик правок отслеживает все изменения.
Нажмите «Отменить все», чтобы восстановить каждый отредактированный элемент, или перезагрузите страницу для полного сброса всех изменений.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.
