Визуальный cms редактор: CMS S.Builder: Визуальный редактор

Хороший визуальный редактор для MaxSite CMS.

Привет дорогие друзья!

Недавно наткнулся на один плагин визуального редактора для MaxSite CMS, сделанного на базе известного Tiny MCE. Про него я как то вам рассказывал в одном из своих постов.

Немного покопавшись с редактором, был приятно удивлен тем, что этот он генерирует нормальный код, и плюс очень прост в работе. Как будто работаешь на Word.

Поэтому решил написать для вас маленький обзор этого плагина. Тем более, наши посетители уже не первый раз спрашивают про хороший визуальный редактор, так как в MaxSite из нормальных редакторов пока были только невизуальные.

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

Но ведь не всем хочется колупаться и разбираться в HTML и BB-кодах. Многим эти знания вообще не нужны. А хочется просто разместить статью на сайте, причем что-бы было все предельно просто, а главное – быстро и удобно.

И так, автор этого плагина — Николай Громов. Одним из его занятий является разработка и создание сайтов, в том числе и на MaxSite CMS. Я лично видел некоторые из его шаблонов, сделаны на совесть, и поэтому, в профессионализме этого человека – не сомневаюсь.

Теперь по поводу его плагина:

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

Нашел пару неприятных моментов, но с этим можно спокойно смириться.

Сам редактор скачивайте с этой странички: Визуальный редактор для MaxSite CMS

Теперь немного о своих впечатлениях:

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

Очень порадовал тот факт, что редактор нормально обрабатывает код. Т.е. использует те теги, которые надо:

— Абзацы идут как абзацы, а не переносы (тег br).

— Выделение жирным или курсивом оформляется при помощи тегов strong и em, а не стилями.

— Если выравниваем картинку – автоматически добавляются нужные отступы, что бы текст не прилипал к ней в плотную. И сразу же можно ее уменьшить, или увеличить – сохранив пропорции.

— Если надо вставить спец. символ – можно спокойно нажать на кнопку и выбрать любой символ из таблицы.

— Широкий функционал для работы с таблицами. Я лично их практически не использую, но может кому и пригодится.

В общем, для стандартных функций пользователей – там есть все, что надо. Лично я бы, писал текст прямо в редакторе. А потом расставлял где надо картинки, цитаты, списки и т.д.

По сравнению с теми визуальными редакторами, которые были до него, это все равно, что небо и земля. Глюков нет, конвертирует нормальный код, очень удобен, красивый, практичный интерфейс.

На данный момент — это лучший визуальный редактор для MaxSite CMS!

Для любителей визуальщины – самое то! Рекомендую!

И, конечно же, Вам в плечи пару ложек дегтя:

1. Нет встроенного загрузчика картинок, надо указывать ссылку на картинку.

2. Тест из Word, или с веб страниц вставляется с кучей лишнего кода, поэтому его следует копировать из блокнота, либо вставлять в режиме HTML (кода).

3. Один раз, при копировании текста с сайта, редактор вместо абзацев (тег p) – влепил переносы строк (тег br). Поэтому скопированный текст лучше вставляйте в режиме кода, а затем уже, в визуальном режиме, разбивайте текст на абзацы клавишей – Enter. Или пишите текст прямо в редакторе.

4. Очень важно! Этот редактор желательно использовать только на новых сайтах, так как он отключает систему авторасстановки тегов MaxSite CMS. Т.е. – может слететь оформление содержимого всех ваших статей. Это не смертельно, просто надо будет сидеть и редактировать отдельно каждую статью на сайте.

Как я говорил выше, с этими моментами можно спокойно мириться, тем более автор пообещал у себя на блоге еще доработать этот плагин . Так что у меня от него – одни только приятные впечатления.

Ну что же, вот и подошел к концу мой маленький обзор.

В свою очередь, я прошу высказать свое мнение:

Какие редакторы вы используете?

И как вообще относитесь к визуальным и невизуальным редакторам?

Панель редактирования страниц сайта (визуальный редактор) — Полная документация системы управления сайтами DIAFAN.CMS

Для редактирования созданного раздела или подраздела необходимо нажать на название пункта меню в панели администрирования сайта. Откроется следующее окно:

HTML-код. Отображает содержимое (HTML код) страницы без визуального редактора.

Применить типограф. Применение экранной типографики при вёрстке материалов.

Изменить. Позволяет вернуть или отменить действие; вырезать, копировать, вставить или вставить как текст; выделить всё.

Вставить. Позволяет вставить/редактировать ссылку, видео, изображение или добавить горизонтальную линию.

Таблица. Позволяет вставить и редактировать таблицу, форматировать ячейку, столбец или строку таблицы.

Редактировать HTML-код. Отображает HTML код страницы.

Замена.

Полужирный (Ctrl+B). Для работы с данными кнопками необходимо выделить нужное слово или сочетание слов и нажать нужную кнопку (сделать текст Жирным, Наклонным, Подчеркнутым, Зачеркнутым).

Курсив (Ctrl+I). Для работы с данными кнопками необходимо выделить нужное слово или сочетание слов и нажать нужную кнопку (сделать текст Жирным, Наклонным, Подчеркнутым, Зачеркнутым).

Подчеркнутый (Ctrl+U). Для работы с данными кнопками необходимо выделить нужное слово или сочетание слов и нажать нужную кнопку (сделать текст Жирным, Наклонным, Подчеркнутым, Зачеркнутым).

Зачеркнутый. Для работы с данными кнопками необходимо выделить нужное слово или сочетание слов и нажать нужную кнопку (сделать текст Жирным, Наклонным, Подчеркнутым, Зачеркнутым).

Подстрочный. Чтобы в редактируемом тексте поставить Подстрочный или Надстрочный индекс, необходимо нажать соответствующую кнопку.

Надстрочный. Чтобы в редактируемом тексте поставить Подстрочный или Надстрочный индекс, необходимо нажать соответствующую кнопку.

Цвет текста. Нажав на данную кнопку, можно изменить цвет шрифта выделенного или набираемого текста.

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

Маркированный список. Нажав на данную кнопку, можно создать нумерацию/маркировку выделенного или набираемого текста.

Уменьшить отступ. Нажав на данные кнопки, можно уменьшить/увеличить отступ текста от края страницы. Также используется для создания вложенных (многоуровневых) списков.

Увеличить отступ. Нажав на данные кнопки, можно уменьшить/увеличить отступ текста от края страницы. Также используется для создания вложенных (многоуровневых) списков.

Цитата. Кнопка позволяет оформить цитату в редактируемом тексте.

Формат.

Шрифт. Нажатие этой кнопки позволяет изменить стиль шрифта выделенного или набираемого текста.

Размер. Нажатие этой кнопки позволяет изменить размер шрифта выделенного или набираемого текста.

После завершения редактирования страницы сайта необходимо нажать одну из кнопок: «Сохранить», «Сохранить и выйти», «Выйти без сохранения»

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

Приятной работы в DIAFAN.CMS.

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

легко, как Wix или Elementor, но с React

ФУНКЦИИ

React Bricks — первая безголовая CMS для создателей контента.

Простое визуальное редактирование, такое как Word или Pages.

Почему визуальное редактирование?

Визуальное редактирование — наиболее естественный интерфейс для создателей контента: это интерфейс, который мы используем для редактирования документа в Word или Pages. Разработчики привыкли редактировать код в одном месте и видеть результат в другом, но маркетологи и создатели контента не любят таких трений.

Безголовые CMS были созданы в основном для того, чтобы облегчить жизнь разработчикам, но с безголовыми CMS мы потеряли визуальное редактирование контента, которое у нас было с пустой страницей WordPress, заменив его уродливыми серыми формами. Сможете ли вы отличить зеленое поле от рельса из холодной стали?

Как насчет Wix или Webflow?

С другой стороны, такие инструменты, как Wix или Webflow, удобны для пользователя, но у них есть много других подводных камней, которые делают их непригодными для корпоративных веб-сайтов:

• Не гибкий : такие инструменты, как Wix, которые, как правило, очень просты в использовании, не являются гибкими в отношении системы дизайна, поэтому вы не можете воспроизвести точную систему корпоративного дизайна, но вам нужно выбрать один из предложенных шаблонов. Отлично подходит для фрилансерского проекта, не подходит для корпоративного.
• Комплекс : Более продвинутые инструменты, такие как WebFlow, очень гибкие, но, как правило, сложны в использовании, потому что создатель контента должен знать, что такое поля или отступы.
• Слишком гибкий : Более того, создание дизайна и настройка параметров CSS не входит в обязанности создателя контента. Для корпоративного сайта дизайн-система создается дизайнерами вместе с разработчиками, и никто не должен ломать дизайн-систему. Мы хотим быть уверены, что у нас не будет зеленого текста на красном фоне! 🙂

Подход React Bricks

React Bricks имеет преимуществ как Headless CMS, так и No-code side builder .

Мы знаем, что корпоративный веб-сайт должен начинаться с кода, и мы также знаем, что лучший пользовательский опыт для создателя контента — визуальное редактирование.

Код для разработчиков

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

Он работает с любым фреймворком React, включая стартеры для Next.js, Gatsby и Remix , которые помогают создать молниеносно быстрый веб-сайт.

Он работает с любой структурой CSS и вы можете разместить его где угодно .

Узнайте, как React Bricks работает с React!

Visual UX для создателей контента!

Создатели контента имеют интерфейс «укажи и щелкни»:

• Они напрямую редактируют текст и изображения , просто нажимая на текст и записывая, как вы делаете в Word или Pages, и нажимая на изображения, загружая и обрезая (с установленными ограничениями) ).
• Могут изменять свойства , как цвет фона и т. д., но только те свойства, которые разработчики выбрали для редактирования и с допустимыми значениями, с правилами проверки.

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

И это гораздо более вдохновляет, чем серые формы, , верно?

Зарегистрируйтесь бесплатно

Посмотрите в действии!

Будьте первыми, кто узнает наши последние новости. Никакого спама, обещаю.

Визуальное редактирование в безголовой CMS: как это работает

Основная цель системы управления контентом — помочь брендам создавать, редактировать и управлять цифровым опытом через маркетинговые каналы. На заре Интернета это был просто веб-сайт. Тем не менее, средства массовой информации, ориентированные на клиентов, и CMS, которые управляют их контентом, значительно изменились за эти годы.

От специально созданных CMS мы перешли к традиционным платформам CMS для ведения блогов и безголовым CMS, которые доставляют контент в мобильные приложения, гарнитуры виртуальной реальности, смарт-часы и многие другие точки взаимодействия с клиентами. Тем не менее, несмотря на то, что возможность предоставлять контент для этих каналов имеет решающее значение, маркетологи по-прежнему должны иметь возможность редактировать этот контент так же, как они это делали, когда им нужно было заниматься только веб-сайтом. К сожалению, чисто безголовые CMS, как известно, трудны для понимания и эффективного использования маркетологами.

Так как же маркетологи могут создать динамичный и привлекательный опыт для всех этих захватывающих каналов с клиентами? С визуальным редактированием.

В этой статье мы объясним, как опыт редактирования контента изменился за эти годы, и познакомим с некоторыми функциями dotCMS, которые помогают маркетологам получить больше от своего опыта.

Традиционные редакторы контента: CMS WYSIWYG

Традиционные платформы CMS, такие как WordPress, часто поставляются с визуальным редактором, известным как редактор WYSIWYG. Эти традиционные интерфейсы для редактирования контента, аббревиатура от (What You See Is What You Get), предлагают простейшую форму визуального редактирования. С CMS WYSIWYG авторы контента знают, что контент, который они видят в своем редакторе, после публикации будет выглядеть точно так же.

Маркетологи могут быстро и легко создавать новые статьи и добавлять изображения, видео и другие активы контента, не беспокоясь о базовом коде. Однако, хотя традиционная или WYSIWYG CMS может предлагать упрощенный процесс редактирования контента, она также имеет некоторые ограничения.

Чаще всего традиционная CMS используется для создания и управления контентом для веб-сайта и, в некоторых случаях, для мобильного приложения. Проблема в том, что сегодня веб-сайт — это лишь один из каналов, где бизнесу необходимо публиковать контент. К сожалению, традиционная CMS не способна доставлять контент в цифровые киоски, смарт-часы и другие новые каналы, где потенциальные клиенты потребляют контент.

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

Управление контентом с помощью Pure Headless CMS

Поскольку традиционные CMS не были ответом, когда речь шла об многоканальной доставке контента или хорошем опыте разработки, многие компании выбрали Headless CMS.

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

С другой стороны, безголовая CMS отделяет интерфейсный уровень от внутреннего репозитория данных. Бэкенд-уровень по-прежнему можно использовать для управления контентом и его хранения, но теперь, без внешнего интерфейса, разработчики могут подключаться к любому внешнему интерфейсу по своему выбору, а также свободно использовать подходящие им платформы и инструменты.

Редактирование контента с помощью гибридной безголовой CMS

Итак, если чистая безголовая CMS не подходит для маркетологов, а традиционная CMS ограничивает разработчиков, то каков ответ? Гибридная безголовая CMS.

Гибридные безголовые платформы CMS, по сути, предоставляют вам безголовую CMS, визуальное редактирование и макеты страниц без кода в одном. Разработчики могут использовать свободу для создания привлекательных интерфейсов на всех типах интерфейсных каналов, от веб-сайтов и мобильных приложений до смарт-часов, автомобильных интерфейсов и многого другого. В то же время маркетологи получают традиционный интерфейс редактирования контента, который им нравился раньше, и выполняют свои задачи независимо от технологических групп, повышая гибкость предприятия

Вот некоторые другие преимущества редактирования контента с помощью гибридной безголовой CMS:

Многоканальная публикация

Предприятиям не нужно ограничиваться только публикацией на веб-сайте. Вместо этого гибридный безголовый позволяет публиковать многоканальный контент на любом канале пути клиента. Как и безголовая CMS, гибридная безголовая CMS использует API для подключения интерфейса к серверу. Эти API делают возможной публикацию контента и позволяют компаниям обращаться к своим клиентам, где бы они ни находились.

Удобное для рынка управление контентом

Гибридная безголовая CMS предлагает удобный для рынка интерфейс управления контентом традиционной CMS. Вместо того, чтобы полагаться на разработчиков для дизайна внешнего интерфейса и выплат по страницам, как это может понадобиться при работе с чистой CMS без управления контентом, маркетологи могут перетаскивать контент на место и предварительно просматривать, как он выглядит, перед публикацией.

Свобода разработчика

Разработчики могут свободно создавать внешний интерфейс на любом канале, а это означает, что они могут выбрать популярные платформы, такие как React или Vue, если захотят. Кроме того, им не нужно помогать маркетологам даже в самых простых задачах, они могут сосредоточиться на других видах деятельности.

Более быстрый выход на рынок

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

dotCMS: максимальный опыт визуального редактирования

Визуальное редактирование имеет решающее значение для обеспечения наилучшего качества обслуживания клиентов в современной многоканальной среде. Клиенты засыпаны вариантами на каждом этапе своего путешествия, и маркетологи (и разработчики) должны знать, что они предоставляют качественный контент, который действительно нужен клиентам.

Гибридная CMS dotCMS дает предприятиям свободу и гибкость автономной CMS и добавляет возможности управления визуальным контентом традиционной CMS. Наша гибридная безголовая платформа включает в себя инструменты NoCode, которые обеспечивают встроенное редактирование, дизайн макета и редактирование с помощью перетаскивания, необходимые маркетологам.

Наши последние дополнения, палитра содержимого с перетаскиванием и редактор блочного содержимого, еще больше расширяют возможности визуального редактирования.

Расширенное построение страниц

Палитра контента dotCMS с функцией перетаскивания предоставляет маркетологам множество типов контента, которые можно легко перетаскивать на страницу. Авторы контента могут более эффективно создавать гладкие страницы с помощью редактирования макета с помощью нашей гибридной автономной CMS.

Редактор блочного содержимого 

Редактор блочного содержимого идеально подходит для вырезания и вставки, поскольку содержимое разделено на блоки. Маркетологи могут помещать изображения, видео и практически любые ресурсы контента между другими блоками, чтобы добавить больше яркости фрагментам контента. Они также могут встраивать контент в контент, например, встраивая продукты электронной коммерции в блог, чтобы предоставить клиентам персонализированный опыт.

Визуальный редактор dotCMS также удобен при работе с одностраничными приложениями (SPA).