что значит визуальный редактор
Визуальный редактор
Обычно этот термин используется в отношении текстовых процессоров, но может применяться и к другим типам прикладных программ.
Содержание
Список WYSIWYG-редакторов HTML-кода
Основанные на JavaScript (встраиваемые в веб-страницу)
Список WYSIWYG-редакторов текста
См. также
Полезное
Смотреть что такое «Визуальный редактор» в других словарях:
Редактор XML — Редактор XML это редактор для языка разметки, функциональность которого позволяет упростить работу с документами в формате XML. Редактировать XML можно и с помощью текстовых редакторов, в которых видно код, однако редакторы XML предлагают… … Википедия
Разработка приложений для мобильных устройств — Разработка приложений для мобильных устройств это процесс при котором приложения разрабатываются для небольших портативных устройств таких как КПК, смартфоны или сотовые телефоны. Эти приложения могут быть предустановлены на устройство в… … Википедия
Microsoft Expression Studio — Microsoft Expression Studio пакет программ компании Майкрософт, предназначенных для разработчиков и дизайнеров. В состав Microsoft Expression Studio входят продукты: Microsoft Expression Web визуальный редактор HTML. Microsoft… … Википедия
Война в небе — 1917 — Разработчик neoqb Издатель Новый Диск (Россия, СНГ) … Википедия
Война в небе — 1917 Разработчик 777 Studios Издатель … Википедия
Quanta Plus — 3.3.0 Тип Редактор HTML Разработчик … Википедия
LyX — Скриншот LyX 1.6 … Википедия
Что такое: Визуальный редактор
Визуальный редактор является редактором WYSIWG. WYSIWIG означает “то, что вы видите, то вы и получите”, что означает, что, содержание отображается на дисплее именно так, как это будет, когда он будет опубликован. Редакторы, такие как Microsoft Word и Pages попадают в эту категорию. WordPress поставляется с модифицированной версией TinyMCE, которая является открытым исходным кодом редактора WYSIWYG HTML. Он имитирует поведение настольных издательских инструментов, таких как Microsoft Word и даже имеет многие из их функций, таких как панель инструментов вдоль верха, позволяя вам отформатировать содержимое. Таким образом, вместо написания HTML, пользователи могут писать посты и отформатировать их с помощью кнопок на панели инструментов.Так как это визуальный текстовый редактор, когда пользователь добавляет изображения TinyMCE, он может показать их прямо в редакторе. Пользователи могут затем легко выравнивать изображения с текстом, используя кнопки выравнивание редактора текста.
Вы можете увидеть панель инструментов в изображении ниже со всеми параметрами форматирования, мы только что упомянули включая создание шрифта, жирный шрифт и курсив, выравнивание абзаца, добавление кавычек, и проверка орфографии. В левом верхнем углу вы можете увидеть кнопку “Добавить медиафайл”, который позволяет включать изображения и другие файлы в вашем посте, а в правом верхнем углу вы можете увидеть кнопку, которая позволит вам переключаться между визуальным и текстовым режимами редактора.
TinyMCE является расширяемым, так разработчики плагинов в WordPress могут также добавлять свои собственные кнопки панели инструментов визуального редактора. Темы могут также добавлять свои собственные стили к редактору, чтобы использовать одни и те же правила стиля как живой сайт.
Дополнительная литература
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Что значит визуальный редактор
Современные сайты наполняются содержанием с помощью специального программного обеспечения: CMS.
Для кого этот курс?
Курс Контент-менеджер адресован тем, кто работает с содержанием сайта: наполнение, изменение текста, загрузка и размещение картинок и так далее.
У нас часто спрашивают, сколько нужно заплатить
Ещё у нас есть Академия 1С-Битрикс, где можно обучиться на платной основе на курсах нашей компании либо наших партнёров.
Баллы опыта
уроке.
Практика и тесты
При изучении курса рекомендуется повторять описываемые действия на демонстрационной версии сайта, установленной локально или в Виртуальной лаборатории.
После изучения курса пройдите тесты на сертификацию. При успешной сдаче последовательности тестов со страницы Моё обучение скачайте сертификат об успешном прохождении курса в формате PDF.
Для преподавания оффлайн
Если данный курс берётся в качестве основы для оффлайного преподавания, то рекомендуемая продолжительность: 2 дня (16 академических часов).
Если нет интернета
Скачать материалы курса в формате EPUB. Файлы формата EPUB Чем открыть файл на
Android:
EPUB Reader
CoolReader
FBReader
Moon+ Reader
eBoox
iPhone:
FBReader
CoolReader
iBook
Bookmate
Windows:
Calibre
FBReader
Icecream Ebook Reader
Плагины для браузеров:
EpuBReader – для Firefox
Readium – для Google Chrome
Как проходить учебный курс?
Визуальные редакторы для быстрого создания сайтов
Существует множество способов создания собственного сайта – от использования готовых шаблонов на Narod.ru до обращения по объявлению типа «создание сайтов за два дня от 300 рублей». Создать свой собственный блог или простенькую домашнюю страницу может даже ребенок. Именно поэтому похвастаться наличием своего сайта в Сети может почти каждый. Различные сервисы предоставляют в распоряжение любого желающего сайты-конструкторы, которые за считанные секунды создают простенькую личную страницу пользователя. Таких страниц в Интернете сотни и сотни тысяч. Как правило, они похожи друг на друга и не запоминаются. Для тех, кто использует бесплатные онлайновые инструменты для создания личной интернет-страницы, собственный сайт – чаще всего забава, люди создают страничку и забывают про нее. Содержание на ней в большинстве случаев сводится к публикации фотографий своей собаки и нескольких сведений «о себе».
Другое дело, если собственный сайт воспринимается человеком как способ коммуникации, такой, как телефон или почта. Иметь свой сайт полезно для любого предпринимателя, желающего представить свой бизнес, практикующего врача, юриста, открывающего свою консультацию, учебного центра и т.д. В этом случае страница должна быть оригинальной и содержательной, нести полезную информацию для посетителей. Чтобы получить сайт, соответствующий этим требованиям, одними бесплатными генераторами домашних страничек не обойтись. Однако на освоение азов web-программирования может уйти много времени. Можно, конечно, нанять профессионала, который сделает любую страницу согласно вашим желаниям, однако этот вариант имеет вполне очевидный недостаток, поэтому для многих он неприемлем.
Визуальные web-редакторы – хороший способ сэкономить время на изучении web-программирования и быстро сделать сайт, наполнив его всей необходимой информацией. С одной стороны, для создания web-проекта с помощью подобной программы не нужно иметь специальных знаний и быть программистом. С другой стороны, приложения такого типа дают простор для творчества и гарантируют, что сайт не будет выглядеть точно так же, как тысячи других. В основе работы визуальных web-редакторов лежит свойство WYSIWYG – What You See Is What You Get (что видишь, то и получишь). Иными словами, в процессе редактирования web-страницы выглядят примерно так же, как будут отображаться в браузере.
⇡#WYSIWYG Web Builder 7.1.0
Web-страницы, создаваемые при помощи WYSIWYG Web Builder и других визуальных редакторов, состоят из отдельных блоков. Это может быть текст, графика, флеш-ролики и т.д. Все, что нужно сделать пользователю, – выбрать нужные блоки и разместить их в подходящих местах страницы, при этом код будет сгенерирован программой автоматически.
Если у вас нет опыта в web-дизайне, создание своего первого проекта в программе стоит начать с готового шаблона. По умолчанию в WYSIWYG Web Builder имеется около десяти шаблонов разной направленности, а еще несколько десятков можно бесплатно скачать с официального сайта программы. После загрузки шаблона вы получите возможность редактировать любой его элемент.
Для этого можно использовать многочисленные инструменты, размещенные на вертикальной панели. Для удобства они разбиты по категориям: навигация (дерево сайта, меню навигации), рисование (линия, кривая, многоугольник), мультимедийные инструменты (Flash-плеер, плеер YouTube, Java, OLE-объект), средства для работы с web-формами (поле для вставки кода CAPTCHA, флажок, кнопка для загрузки файла, поле для ввода текста), Paypal (различные кнопки для работы с этой системой электронных платежей) и пр. Если какая-либо категория средств вам не нужна в работе, ее можно свернуть, чтобы освободить место на экране для более востребованных инструментов.
Стоит обратить внимание и на категорию Extra. Тут собраны средства для создания фотогалереи, добавления подписки на новости в формате RSS, слайд-шоу, поиска по сайту. Тут же можно обнаружить целую коллекцию готовых элементов кода Javascript. Это и разнообразные визуальные эффекты, и такие полезные средства, как определение текущей версии браузера, вывод информации о времени последнего изменения веб-страницы, размещение ссылки на занесение страницы в закладки.
Несмотря на то, что работая в WYSIWYG Web Builder пользователь видит готовые элементы страницы, в браузере сайт все же может выглядеть немного не так, как в рабочем окне редактора. Для быстрого просмотра внешнего вида страницы в браузере достаточно нажать клавишу F5. WYSIWYG Web Builder откроет проект в обозревателе, который используется в системе по умолчанию. Если нужно просматривать страницы сразу в нескольких браузерах, их можно добавить в список.
Как правило, шаблон сайта состоит из нескольких страниц. Для удобного управления проектом в окне программы имеется специальная панель Site Manager, где отображается дерево страниц сайта. Используя инструменты этой панели, можно создавать новые страницы на основе шаблонов, добавлять страницы, сохраненные ранее на жестком диске, копировать уже имеющиеся страницы, просматривать их свойства и т.д.
В процессе работы над ресурсом, состоящим из большого числа страниц, могут также пригодиться такие средства программы, как проверка ссылок на работоспособность, оценка размера страниц, генератор карты сайта в виде XML-файла, который будет размещен в корневой директории сайта. Кроме этого, WYSIWYG Web Builder может помочь собрать все изображения и прочие файлы мультимедиа, которые используются на web-страницах, в одном месте.
Несмотря на то, что WYSIWYG Web Builder сам по себе является достаточно функциональным редактором, какого-нибудь инструмента вы можете в нем не обнаружить. В этом случае стоит заглянуть в галерею расширений – быть может, нужное средство доступно в виде плагина. Для программы существует более 250 расширений, и их число постоянно увеличивается. Расширения пишутся активными пользователями редактора и выкладываются на официальном форуме. Стоит иметь в виду, что подключить расширения на триал-версии WYSIWYG Web Builder нельзя, для этого программу нужно зарегистрировать.
⇡#Web Page Maker 3.21
Web Page Maker – достаточно простой визуальный редактор, который подойдет для создания небольшого сайта, включающего несколько страниц. С его помощью можно добавлять на страницу текст, векторные элементы, графические файлы, видео в разных форматах, таблицы, web-формы и прочие привычные элементы страниц.
В программе также есть готовые варианты такого важного элемента любого сайта, как меню навигации. Web Page Maker содержит различные варианты меню. Выбрав подходящий, можно сразу же отредактировать его, указав ориентацию (горизонтальное или вертикальное), расстояние между элементами, параметры текста и ссылок.
Некоторые элементы (например, то же меню навигации), должны располагаться на всех страницах сайта. При редактировании любого блока можно быстро разместить его на всех страницах текущего проекта или же указать те страницы, где он должен присутствовать.
Основную часть окна программы занимает рабочая область, а справа находится панель Site Contents. При помощи этой панели удобно управлять страницами сайта, а также отдельными элементами страниц. На вкладке Elements отображаются все блоки страницы, и щелкая по каждому из них, можно сразу же видеть, где он находится. Кроме этого, тут же можно вызвать окно свойств каждого элемента или удалить ненужные блоки. Что касается набора инструментов для создания структуры сайта, то тут стоит отметить возможность создания новой страницы на основе уже существующего в Интернете ресурса. Стоит указать его адрес, и Web Page Maker загрузит страницу, разобьет ее на блоки и сделает их доступными для редактирования.
Чтобы сделать сайт более живым, можно использовать анимационные эффекты. Примеры готового кода Javascript можно найти в библиотеке Web Page Maker. Используя их, можно изменить цвет прокрутки окна, разместить в углу экрана часы, показывающие текущее время, добавить слайд-шоу и т.д.
⇡#CoffeeCup Visual Site Designer 6.06
Стандартная версия программы дает возможность работать с текстом, векторными элементами, графикой. После выбора инструмента на вертикальной панели появляется плавающая палитра с его настройками. Она остается на экране до тех пор, пока пользователь не меняет инструмент. Благодаря такому подходу, на рабочую область отводится максимально много места.
Такие часто встречаемые элементы web-страниц, как счетчики и web-формы, в программе можно создавать только при помощи инструмента для вставки пользовательского HTML-кода.
Работая с векторными элементами (стрелками, многоугольниками, звездочками, выносками и т.д.), можно использовать многочисленные средства для изменения их внешнего вида. Например, есть возможность изменить прозрачность, добавить тень, сделать объект объемным, заставить его светиться или изменять формы при наведении курсора мыши. Кроме этого, можно настроить заливку каждого объекта, добавить текстуру.
CoffeeCup Visual Site Designer имеет встроенный FTP-клиент, при помощи которого можно загружать сайт на удаленный сервер. Если, загрузив сайт, вы решите внести в некоторые его страницы изменения, можно будет воспользоваться функцией синхронизации данных. В этом случае программа загрузит те страницы, которые были изменены. При необходимости, не покидая CoffeeCup Visual Site Designer, можно даже полностью удалить сайт с сервера.
⇡#WebSite X5 Evolution 8
Большинство визуальных редакторов похожи друг на друга. В этом есть свои плюсы, ведь разобравшись с одной из таких программ, вы уже будете чувствовать себя уверенно, если позже решите попробовать другую. Однако если вы никогда раньше не занимались созданием сайтов, даже самый простой визуальный редактор поначалу может вызвать множество вопросов, таких как: «что нужно сделать в первую очередь?», «какие инструменты программы являются основными, а какие – вспомогательными?» и т.д.
В программе WebSite X5 Evolution реализован немного иной подход к созданию сайта, благодаря чему многие вопросы отпадают сами собой. Работа приложения построена по принципу пошагового мастера, благодаря чему начинающий пользователь может быть уверен в том, что он не пропустил ничего важного.
Несмотря на то, что мастер проводит через все этапы создания проекта, пользователь может при желании «перескакивать» через некоторые этапы, выбирая в боковом меню те действия, которые он хочет выполнить в настоящий момент. Всего этапов пять.
На первом указываются общие настройки. Так, тут вводится название сайта, автор и язык, подбираются ключевые слова, загружается Favicon, выбирается тип меню (горизонтальное или вертикальное), подбирается подходящий шаблон (в библиотеке программы более сотни вариантов оформления), задается внешний вид верхней и нижней части страниц сайта.
На втором этапе предлагается создать карту сайта, то есть продумать его структуру. Используя кнопки «копировать» и «вставить» на панели инструментов, можно создавать новые страницы на основе уже имеющихся. Тут можно определить, какие страницы ресурса будут скрытыми, указать частоту обновления для каждой страницы.
Двойной щелчок по названию страницы перенесет вас на следующий этап работы над сайтом, и тут уже можно будет заняться непосредственно его содержимым. По умолчанию страница разделена на четыре блока, в каждый из которых можно добавить объект: текст, графический файл, слайд-шоу, таблицу, флеш-анимацию, мультимедиа файл и т.д. При желании число блоков на странице можно увеличить или уменьшить. Поместив объект на страницу, нужно определить его настройки, например, указать путь к графическому файлу, набрать текст и т.д. Все эти операции нужно будет проделать для каждой страницы.
На четвертом этапе WebSite X5 Evolution предложит указать некоторые дополнительные настройки, например, определить внешний вид вводной страницы, задать параметры отображения flash-рекламы, добавить на сайт блог и ленту RSS-новостей.
Среди предлагаемых возможностей есть и такой элемент как «Корзина для электронной торговли». Используя его, можно быстро создать собственный интернет-магазин. Перейдя к его настройкам, можно быстро создать категории товаров, определить условия доставки, выбрать варианты оплаты, вставить лицензионное соглашение, настроить внешний вид элементов магазина.
Наконец, на последнем этапе выполняется экспорт проекта. Готовый сайт можно сохранить на жесткий диск или же сразу загрузить на FTP-сервер. Кроме этого, программа дает возможность сохранить файлы проекта, чтобы перенести их на другой компьютер. Отметим, что создаваемый проект можно сохранить на любом этапе в собственном формате программы.
Пожалуй, единственным неудобством при работе с WebSite X5 Evolution является невозможность предварительного просмотра страниц в браузере. Если нужно увидеть, как будет выглядеть сайт, можно использовать функцию «Тест», однако на генерацию проекта требуется некоторое время. Кроме того, программа генерирует страницы в собственном просмотрщике, созданном на движке Internet Explorer.
⇡#KompoZer 0.7.10
KompoZer – бесплатный визуальный web-редактор с открытым кодом. Программа доступна не только для Windows, но и для Mac, а также для Linux. Редактор создан на движке Gecko, на котором работает широко известный браузер Firefox. Это дает ряд преимуществ: во-первых, движок прекрасно поддерживает современные web-стандарты, такие как XML, CSS и JavaScript. Во-вторых, возможности редактора, основанного на Gecko, могут быть расширены за счет подключаемых модулей.
В программу интегрирован FTP-клиент, причем, его можно использовать не только для загрузки готового проекта, но и для быстрого редактирования страниц уже размещенного на сервере сайта. Указав данные для входа на сервер, можно перемещаться по дереву каталогов и выбирать страницы для редактирования. Их содержимое будет загружаться в окне KompoZer, и редактировать их можно прямо «на лету».
KompoZer дает возможность одновременно работать с несколькими страницами. Каждая из них открывается на отдельной вкладке, между которыми можно быстро переключаться. Для каждой страницы ведется своя история отмены и возврата действий. Взглянув на значок в заголовке вкладки, можно сразу же определить, вносились ли в содержимое страницы изменения, которые еще не были сохранены.
Несмотря на то, что KompoZer самостоятельно создает код веб-страниц, при необходимости можно просмотреть его и внести некоторые изменения. В нижней части каждой страницы есть вкладки, при помощи которых можно переключаться между визуальным отображением страницы и показом кода.
По умолчанию на панель инструментов программы вынесены наиболее часто используемые инструменты: добавление гиперссылки, вставка изображения, таблицы, средства для создания веб-форм и т.д. При желании можно изменить внешний вид этой панели (например, уменьшив иконки), а также добавить на нее некоторые другие инструменты.
В целом, несмотря на то, что KompoZer является визуальным веб-редактором, рассчитан он на пользователей, у которых уже есть некоторый опыт создания сайтов. Вы не найдете в нем готовых шаблонов и примеров меню навигации, но зато в программу интегрирован мощный редактор CSS, есть инструменты для проверки HTML-кода и для проверки орфографии.
⇡#BestAddress HTML Editor 17
Работа в режиме визуального построения веб-страницы напоминает работу с конструктором – можно самостоятельно задавать размеры и цвет элементов, размещать по своему усмотрению кнопки, графику, меню и прочие компоненты сайта. Удобное форматирование, почти как в текстовом редакторе, может использоваться для управления положением любых элементов страницы. Шаблонов в BestAddress HTML Editor 2010 Professional вы не найдете, зато есть возможность загрузки веб-страницы, расположенной по указанному адресу. Открыв страницу в программе, можно затем отредактировать ее.
⇡#Заключение
Разработка редактора для создания веб сайтов/лендингов (опыт)
(Art by http://www.simonstalenhag.se/)
Предыстория / Дисклеймер
Всем привет, данная статья является по факту материалом для моего выступления в понедельник на марафоне в Киеве. Но не думайте, что вы аудитория на которой я отрабатываю текст, просто мне так проще подготовиться.
На данный момент я Front-end разработчик в Conductor/WeWork. Мы не занимаемся разработкой редакторов, как собственно и я, по вечерам не разрабатываю такие вещи. Это больше об опыте который я получил на прошлом проекте в компании УТИ(сокращенно), утипути, ути-…. Это было достаточно давно, но как оказывается, тема актуальна и по сей день, как и косяки связанные с ней.
Речь идет как правило о сайт визитках, лендингах, и более менее функциональных сайтах, но разумеется не о бек офисах или админках.
Ограничения
Дать возможность загружать свой HTML, и редактировать его, это конечно смелый ход. С точки зрения юзера это большая свобода. Но вот есть чудесный пример, того как обстоят дела в вебе — A Blue Box.
Ограничение 00
Выбор следующий — запретить ту или иную верстку, сделать стайлгайд или же запретить загружать пользовательский HTML. Разумеется мы выбрали второе 🙂
Ограничение 01
Раз уж мы запретили загружать пользовательский HTML, то нам нужны свои компоненты/элементы, и это первый шаг к настоящему редактору.
Ограничение 02
Так как пользователь будет работать с рядом наших элементов, мы должны запретить редактору работать с не «нашими элементами» и научить работать с ними.
Рабочее окружение
Не самая интересная тема, но важная. Мне очень нравится интерфейс фотошопа. Есть ряд панелей, и рабочая область. Рабочей областью вы можете манипулировать как хотите, она по центру и в зависимости от размеров, вы можете скролится как по горизонтали, так и по вертикали.
Так же немало меня задел своим дизайном Google Web Designer:
Кстате, это своего рода редактор от Google, кто-то использовал его?
Самое сложное, это разбить страницу таким образом. Я не эксперт CSS, и в этот раз мне это далось намного легче, но тогда это были танцы с табличной версткой. Прежде чем мы пойдем дальше, давайте посмотрим какие вообще лаяуты рабочей области есть.
Фотошоп
По факту мы уже обсудили этот лаяут выше. Слева часто используемые инструменты, справа параметры, сверху что-то дополнительное, снизу информационная полоса. Самый очевидный вариант, но в тоже время перегруженный для пользователя. Он боится всех этих кнопочек, будто он в кабине самолета и ему нужно сделать экстренную посадку.
Так перегружен, что надо все прятать
За 5ть лет, дизайн викса мало поменялся. Зайдя в LPGenerator, вы сразу понимаете, что можно перетянуть какой-то элемент на страницу, видите настройки итд. В случае с Wix, все изначально спрятано. Это хороший подход. Дело в том, что пользователю не нужно видеть, то, что ему скорей всего и не понадобится на данный момент. Но тут нужно соблюсти баланс. У Wix.com уж слишком много элементов которые вы можете добавить на страницу и по этому они сделали целую галлерею элементов. Но конечно очевидные вещи как текст или кнопка, можно было бы и вынести на одну из панелей для быстрого доступа.
При клике на элемент, над ним появляется дополнительный функционал, который относится к элементу.
Реализовать такую штуку тот еще гемор, об этом мы поговорим чуть позже.
Минималист
Минимальный дизайн, рабочая область занимает большую часть экрана, из интерфейса самый необходимый минимум. Набор инструментов очень странный. Например вот так редактируется первый экран с кнопкой:
Кнопка тут представлена текстом.
Сам по себе режим редактирования очень похож на предпросмотр и только при двойном клике на некоторые экраны, получается перейти в режим редактирования.
При этом редактор нас как бы перемещает в другую часть приложения.
Я есть грут
Редактируя сайт, вы словно находитесь на нем. Очень похоже на WordPress и его панель сверху с функционалом редактирования/публикаций и прочего. Но при этом, функционал не такой стопорный как у Squarespace и тот же текст поддается редактированию куда проще.
Что бы, что-то добавить, необходимо кликнуть на +. Перенести кнопку в любое удобное для вас место, так просто не выйдет. Все ограниченно.
Следствием этого являются такие вот галлереи с кучей различных вариантов одного и того же элемента.
Как вы уже могли понять я фанат фотошопного варианта. Когда-то я мучился с табличной версткой, но сейчас 2018 и в целях познавательных, мы можем наплевать на поддержку и реализовать лаяут на CSS Grids.
Если кто не знаком с CSS гридами, то это один из последних способов верстать лаяут страниц. Если Flexbox предпочтительно использовать для меню, формочек и прочего набора элементов, то CSS Grids, отлично себя чувствуют именно в глобальных вещах.
Это не туториал по CSS Grids, по этому я объясню по ходу дела в двух словах, но без мега деталей.
И так наша задача сделать левую и правую панель, а по середине рабочую область где будет отображаться контент веб сайта.
Работать с гридами немного проще в FireFox, это странно, но хром в этом деле отстает. В одной из прошлых статей я уже говорил об этом.
Как выглядит инспекция гридов в хроме:
В то же время в мазиле:
Есть мини представление грида, показываются семантические лейблы колонок/строк. По этому если хотите побольше информативности, используйте пока FireFox. Странно я себя чувствую рекомендуя этот браузер. Время Bugzilla уже прошли.
Давайте начнем с простой разметки
.left — левая панель
.content — середина, где будет отображаться сайт
.right — правая панель
По умолчанию дочерние элементы превращаются в строки. Это своего рода оси flexbox. Нам необходимо задать колонки, сделать это можно следующим способом:
Супер. Но это была самая простая часть. Теперь нам необходимо, сделать рабочую область.
.site это наш мнимый сайт. Давайте сделаем его в стандартные 960px и подсветим.
Если это дело сжать, то все еще веселей:
Решает проблему. Остается только эстетическая часть. Отступы.
Сделать это можно с помощью margin :
Вот как-то так. Если у кого-то есть идеи получше, добро пожаловать в комментарии.
Отображение сайта
Тот же document
Пользователи которым не объяснили как пользоваться кружкой:
Инкапсулированный CSS пока еще не реальность как и 5 лет назад. Варианты есть, но они либо слишком тяжелые, либо полностью не защищают. Когда пользователь перекосит весь интерфейс и случайно удалит всю свою работу, винить в этом будут вас. Забегая немного вперед, когда вы решите добавить ряд своих готовых шаблонов, ваше же разработчики будут с этим мучаться. Как бы не переопределить какой-то стиль. Вот если посмотреть на Tilda, у них с этим беда.
Возьмем например первый попавшийся под руку UI этого редактора. Кнопочки форматирования текста:
Признаюсь, я вставил этот код в ручную. Но я нашел халявный 2х недельный период с возможностью вставки пользовательского HTML и CSS, и достиг ровно того же эффекта.
Как так можно? Вот представьте, у вас купили услуг разработать сайт в Tilda за n тысяч долларов, и вы захотели задать собственный стиль ссылкам. Все, сайт редактировать пользователь уже не сможет. Ну с бордерами я утрирую, но вы можете представить любой другой стиль, не говоря уже о пользовательском JS. Причем коллизия, распространяется на даже какой-то вложенный интерфейс, хотя это очевидно.
Не дать пользователям вставлять собственный код, будет решением этой проблемы. Но в реальном мире это практически невозможно. Не будете же вы делать кастомные интеграции под каждого пользователя. Это возможно с жирными клиентами. Но не когда у вас 90% функционала стоит 5-10 баксов.
Iframe
Но для поддержки ваших стилей, вам придется импортить в iframe все необходимое. Тут же вам придется приделать экран загрузки, что бы пользователь не видел сайт/интерфейс не накрашенным.
Wix
Следовательно вам стоит понимать, что делать это необходимо только при редактировании. И не забывайте про пользовательский стиль или у вас опять будут проблемы.
Grapesjs класс который я «случайно» обновил бордером:
Grapesjs добавляет класс gjs-comp-selected при выделении, который при инспекции хорошо виден и уж поверьте это будет первое, что пользователь скопирует для кастомизации.
Выделение элементов
Мы немножко забегаем наперед, ведь мы пока не поняли как научить редактор видеть элементы на странице, но это нам не помешает. Прежде чем углубится в более технологически сложную тему, давайте посмотрим, насколько же технологически сложно, сделать выделение элементов на странице 🙂 Как вы думаете, это сложно? Если вы очень самоуверенны, то вот как с этим справляются все выше упомянутые редакторы на примере текста:
Google Web Designer
А при редактировании
Часть текст не видно вообще. Ну ладно. С точки зрения фронт-енд разработчика это фича.
Дело в том, что редакторы выделяют по большей части DOM модель. Но вот посудите сами, вы как пользователь, далекий от разработки сайтов, думаете это ок? Нет это не ок. Контент больше того, что вам показывает редактор. В случае с некоторыми, есть вероятность потерять возможность выбрать элемент. Это нормально для браузера выделять таким образом для разработчиков, это верно по спецификации.
Что видит пользователь (синий, текст сделал прозрачным, для очевидности проблемы), что выделяется редакторами, браузерами (красный):
При выделении текста в FF, хром так не умеет.
С точки зрения UI/UX, это может быть технически не понятная вещь, и такие детали реализации как правило остаются на усмотрение разработчика.
Из моего сандбокса:
Пожалуй самая полезная информация, которую я извлек из msdn:
Но и тут нет ответа на наш вопрос.
Давайте попробуем то, что нам предоставляет DOM в первую очередь. Имеем такую вот верстку:
Размер видимого контента 62px, браузер нам показывает 40px. Как получить 62px?
getBoundingClientRect возвращает нам — 40px
clientHeight — 20px
scrollHeight — 41px
Можно очень долго играться с математикой, но решения используя такой вот подход, я не нашел.
Но как и
5ть лет назад, я знал, что разгадка в выделении текста. Ну вот посмотрите, если выделить текст, то выделение точь в точь такое как нам надо:
Не удачный пример, но по высоте с которой у нас основная проблема — все круто. Но как же выделять так, как это делает какая-то системная магия?
Спустя столько лет я погуглил (научился!), к сожаления как я гуглил и линка утеряна, но вот решение:
И по высоте и по ширине, идеальное выделение.
(Выделением в редакторе будет синий бордер, никакого фона. Выделил текст, что бы показать системное выделение.)
Другая менее важная часть выделение, то это как его показывать? Есть идеи? Способов куча. Начиная от бордера, заканчивая дополнительным плавающим элементом.
В моем случае, я использовал ::before, но это тоже не круто. Самый надежный способ это сделать либо 4 полоски, и позиционировать их по краям (которые в дальнейшем и будут элементами резайсинга элемента), или же блоком поверх. Выбирать лучше из этих двух вариантов, максимум комбинируя их. Слишком много позиционирования на странице не есть помощью в оптимизации и без того перегруженного UI. Так, что чем больше многофункциональных вещей которые вы позиционируете, тем лучше.
Это не все
Мы только, что реализовали выделение. Но это выделение на уровне «навел и увидел». С ним еще связаны две проблемы которые я оставлю вам на подумать самим. Они не такие противные.
Редактирование
Раз уж мы заговорили о выделении на примере текста, давайте быстренько пройдемся по его редактированию.
По факту текст это вторая важная часть в редакторе после картиночек и выделения 🙂
Ну вот как сделать так, что бы когда я выделил часть текст и нажал на какой-то функционал форматирования, я отформатировал именно выделенный текст?
Если вы сын маминой подруги и гениальный разработчик, то вы наверняка скажете — обернуть выделенный текст. О и вы будете правы, примерно как если бы Илон ответил, что построить ракету === нанять сотню инженеров.
Оборачивать выделенный текст не так просто. В итоге там будет куча тегов, и как их потом мержить при очередном выделении и форматировании большой вопрос. Я долго изучал тот же CKEditor и обнаружил чудо:
Это блин редактор в браузере. Он не просто дает нам возможность писать текст, но и форматировать его.
Этот API позволяет выполнять команды форматирования над выделенным текстом:
Изменение цвета, отступы, вставка линки, кастомные стили и многое другое можно делать с помощью этого инструмента.
Есть небольшие кросс браузерные причуды. Сейчас их все меньше и меньше, но тогда, хром и мазила в некоторых случая выдавала разные обертки под изменение цвета итп. Это разумеется малость мешало, если пользователь редактировал текст в разных браузера. Но это решалось ручным костылем. Просто немного правился тег, после выполнение команды.
contentEditable можно использовать не только для крутого редактирования текста. В некоторых браузерах, есть функционал по работе с картинками и таблицами. Это по началу мешало. Но когда я делал собственные таблицы, очень хотелось это использовать. Но оно все было очень забагованое и не стабильное.
В то время, contentEditable был очень известной болью, благодаря контрибьютерам CKEditor, CodeMirror, и прочих. Они активно плакали в своих блогах о разницах в реализации. В тот момент я столкнулся с кросс браузерными проблемами, по большей части именно из за этой части функционала.
Просто кликнул в сторону и вышел из редактирования:
То есть есть момент с получением стиля обратно.
Ресайз элементов
Пожалуй единственное, что я хочу сказать на этот счет, так это, то, что если вы тяните за левую/верхнюю часть элемента, при увеличении высоты/ширины вам необходимо обновлять его позицию. Так как координаты 0,0 на странице, находятся в верхнем левом углу:
(svg/dom element)
Работа с элементами, VC++, MVC и все такое
До того как стать веб разработчиком или же точней до того, как веб стал актуальной сферой роста для специалиста, я игрался с Visual C++, C#, Delphi и прочим. И как-то так получилось, что со знанием Backbone и вопросом, а как же мы будем работать с элементами на странице, я ни на секунду не задумываясь привел аналогию из вышеперечисленных языков/технологий/фреймворков.
Не знаю, настоящий ли это листинг, но вроде выглядит убедительно.
Этот подход, используется очень давно и может у него нет CSS, он очень гибок и удобен в разработке приложений да еще и с визуальным редактором.
Backbone, по сути своей маленькая библиотека дающая нам представления (View), Модели (Model) и коллекции (Collection). Так есть своего рода контроллер (Router). В качестве контроллера как правило выступает View. MV*, MVV, если вы помните такое.
Так вот, очень удачно получилось использовать Backbone, для реализации схожего подхода. В первую очередь я реализовал View типичного элемента. У него была модель с рядом CSS свойств. Поскольку элементы как правило разные, я наследовался от этого элемента и реализовал View под каждый необходимый мне элемент.
Когда View находилась, происходила инициализация и запись View и Model, в data- атрибут для быстрого доступа. Соответственно сразу после клика, Model передавалась во все инструменты которыми могло быть произведено редактирование элемента и происходил их апдейт, что бы отобразить текущее состояние элемента. Учитывая, что Backbone, не так умен как React, в обновлении DOM, можете представить какой у этого решения перфоманс. Но на самом деле, еще тогда никаких лагов не было. Инструментов бывало штук 50-100 на один элемент и как-то все ок.
Плюс конечно, же не происходил перерендер всего инструмента, а четко ручное обновление HTML. Так, что кода больше, но перфоманс ререндеринга напрямую зависел от меня. И никакие ваши virtual dom, не обгонят по скорости ванильный JS. Это не удобно в разработке — факт. НО!, в таких размеров проектах это обусловленно. Иначе будет как Wix, мерцать как новогодняя елка при скроле и ховере на совершенно разные части приложения:
При ховере на левые элементы топ меню:
При работе с инструментами, из меню на странице:
Это еще ладно скриншоты, включите отображение перерисовки и поработайте с ним. Это фантастиш. Но зато React.
В моем редакторе CSS хранится инлайново, так делают многие редакторы до сих пор. Но это плохой подход который ухудшаеть перфоманс, чтение HTML, и ведет к ряду проблем с дальнейшей работой. Но признаться, это очень простой в реализации подход.
Найболее правильным решением, является создание уникального класса под каждый редактируемый элемент и запись в тег его стилей. То как это реализовать и организовать уже малость выходить за рамки статьй, быть может в другой раз. Там не паханое поле вариантов и возможностей.
Хранение данных
Редактирование/Предпросмотр/Просмотр
Необходимо различать эти состояния. Интерфейс, модели не должны существовать в предпросмотре и просмотре. Не стоит даже трафик на них тратить. Это просто, то, о чем стоит помнить.
Так же подумайте о различных анимациях и тех же ховер эффектах на кнопках. В момент редактирования они жутко раздражают. Они должны быть отключены.
React? Polymer? Vue (родился позже)? Angular (шутка!)?
Второй и 3тий вариант работы с элементами на странице который я не успел реализовать на том проекте, уже когда стали популярными React и только вышел Polymer, были React компоненты и Web Components.
Веб компоненты разве, что упростили бы работу с данными (Polymer), и ими было бы легче манипулировать. Сами веб компоненты очень соблазнительны в данном проекте. Их инкапсулированная натура дает много преимуществ. Но тогда был только Shady DOM о котором я давненько писал, так, что эта идея отпала. По факту толку было бы мало, да еще и тяжелей все эти полифилы были.
React
Честно сказать понятия не имею 🙂 Но давайте подумаем. Отрендерить React в ифрейм и дальше с ним работать проблем вообще не составляет:
Сохранять вы можете просто HTML, за счет ReactDOM.hydrate(element, container[, callback]), словно на фронте после сервер-сайд рендеринга подключать к DOM React. Все события и прочее будут работать. Это круто. Но конечно, по факту все, что на странице будет иметь свое представление в Virtual DOM хотите вы этого или нет. Это бьет по перфомансу.
Организовать работу с элементами и инструментами, можно по средствам стандартных подходов. Redux, Flux, Mobx в вашем распоряжении. Но тут получается так же каждый элемент будет подконекчен к стору Redux, что не есть хорошо.
Я в свое время боялся добавлять Marrionett к проекту. Это небольшая оболочка для Backbone. А тут такие траты. Но это не известно.
Видится только одна проблема, которая может повлиять на многое. Как добавлять элементы на страницу? Допустим мы перетаскиваем новые элементы написанные на React, на страницу. Как их правильно встроить в DOM? Делать у каждого элемента массив дочерних элементов? Делать ReactDOM.hydrate после изменения HTML? Так делать можно, учитывая нашу следующую тему которую необходимо обсудить напоследок.
Responsive and Adaptive
В то время еще не было таких понятий. Ну может я вру, они уже применялись, но не были так хорошо известны каждому. Тогда еще правила верстка на основе 960px. То есть сайт помещался на любом экране, а если места было больше, то там был какой-то продуманный фон. С ростом популярности смартфонов ситуация менялась.
В моем редакторе, вы можете явно видеть пунктирные полоски, которые обозначают границы сайта. Выход за их рамки, это ваш риск и страх.
(зачетный интерфейс на разных языках)
Это плюс для него, но и большой минус. Он может натворить дел, когда сайт превратиться не в пойми, что очень быстро, сайт очень хрупкий при таком подходе. И у него нет нормальной верстки.
Ограничение 03
Предоставлять готовые куски, экраны. У лендингов есть понятие экраны. Мы назвали это секцией.
Это все тот же 960px, но уже более структурированный. Пользователь не может взять и случайно потянуть пол страницы хлама.
Далеко не ходя, скажу, что адаптивности и отзывчивости тогда не было в редакторах. Wix, и на данный момент решает это весьма стремным способом. Возможно я натыкаюсь на старые шаблоны, но так или иначе они в самом верху и я как и любой другой пробую именно их.
Решено это у них двумя версиями шаблона. Да-да. Если вы, что меняете на большой версии, например просто тот же цвет текста, переключаюсь или сжимая браузер до мобильной — этих изменений не будет.
Интересно пообщаться с первой линией тех. поддержки на этот счет 🙂
12 друзей верстки, флекс, гриды.
12 колоночная система, знаете? Поклацайте https://grapesjs.com/, и вы сразу поймете о чем я.
Это ограничение, которое несколько ограничивает пользователя в свободе, но позволяет ему творить крутые сайты если он освоит этот инструмент. Пользователь вынужден использовать блоки которые предоставляет ему редактор, помещать элементы в только определенные места и так далее. У пользователя меньше шансов застрелиться. Для нас как для разработчиков это праздник.
Заготовки, шаблончики и платный сервис/помощь, мутные люди вокруг
Но как ни крути сделать идеальный инструмент сложно. Пользователям все равно до лампочки на все ваши элементы верстки и как они должны двигать элементы. Создание сайта это творческая работа и как правило, тем кому не повезло работать в вашем редакторе думают совершенно не о том как бы четенько сделать сайт. По этому есть заготовки и шаблоны. И чем их больше, тем хуже у вас дела с UI/UX.
Пользователи хоть как-то могут получить уже готовый сайт за пару кликов, и меняя только лишь текст, цвет, картиночки — получить желаемый результат.
Отдельный разговор, это прослойка бизнеса, которая делает сайты, на таких инструментах. Это например как настройка рекламы в гугл. Вроде просто, куча туториалов, а сотни тысяч делают на этом третьй фирмы.
Я лишь пожелаю вам удачи. Cделать редактор на самом деле не рокет сайнс. Главное это UI/UX. Работа с текстом не такая уж и простая задача, я даже не упоминал undo/redo функционал, его сделать достаточно сложно. Ну или просто, если вы будете дампить HTML всей страницы в localStorage… Нет, конечно же я так не делал.
Рокет сайнс научить пользователей им пользоваться. Мой редактор работает от силы на двух проектах, его используют разные аудитории, но насколько им это удобно и соответствует результат их ожиданиям — неизвестно. Если у вас есть вопросы, буду рад ответить в коментариях, личке.