Лучший редактор Magento 2 WYSIWYG для электронной коммерции

Magento Jun 29, 2020

Лучший редактор Magento 2 WYSIWYG для электронной коммерции

Главная / Блог / Лучший редактор Magento 2 WYSIWYG для электронной коммерции

Magento 2 является одной из наиболее широко используемых платформ CMS с открытым исходным кодом для интернет-магазинов. Около 20% всех сайтов электронной коммерции в мире основаны на платформе, и более 155 миллиардов долларов обрабатываются в транзакциях, обрабатываемых ее возможностями.

Magento WYSIWYG Editor позволяет редактировать связанный контент для всех, кто не знаком с HTML, что ускоряет публикации, избавляя от необходимости указывать теги и атрибуты вручную. Таким образом, вы можете увидеть окончательный вид проекта в Magento 2 в самом начале.

installing-magento-2-composer

WYSIWYG редактор

WYSIWYG («Что видишь, то и получаешь») предназначен для редактирования формы представления документа без каких-либо манипуляций с исходным кодом и написания каких-либо блоков вручную. Все, что нужно для манипулирования, это встроенные компоненты редактора, чтобы увидеть общую картину незаконченного документа, проекта или события (WYSIWYG Lighting Design).

Программисты и разработчики склонны критиковать этот подход к проектированию, жалуясь на значительные части «грязного» кода. Современные редакторы, однако, постоянно совершенствуются, и некоторые из них способны обеспечить хорошее качество рабочего процесса с минимальными недостатками.

Есть идеи по поводу вашего проекта?

Свяжитесь с нами!

Сделать запрос

Изначально браузеры поддерживали возможность редактирования WYSIWYG, но функции чтения постепенно стали более сфокусированными (без учета редактирования текста в формах ввода). Однако, современные браузеры, хорошо восприимчивы к редактированию веб-страниц. Существенные моменты, на которые следует обратить внимание при внесении любых изменений, включают следующее.

Режим настройки можно запустить двумя способами:

Метод document.execCommand позволяет запускать команды (настройка шрифтов, добавление ссылок и т. д.) для редактирования областей и стилизации тегов.

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

Проверка безопасности текста позволяет убедиться, что он не содержит вредоносный элемент JavaScript, открывающий возможности XSS-атак. В некоторых браузерах (например, Firefox) он включен по умолчанию, что ограничивает использование функций, связанных с буфером (например, копирование / вставка). Ограничения можно снять с помощью about: config.

При необходимости редактируемый контент может быть создан с помощью HTML, что позволяет вам работать с React, Angular и другими библиотеками для тщательного управления компонентами, контент которых нельзя редактировать.

7 лучших программных решений WYSIWYG

WYSIWYG-редакторы используются для создания приложений, веб-сайтов различного назначения или для задач управления контентом. Они не обязательно требуют знания HTML или навыков кодирования.

Эффективный редактор такого типа должен обладать следующими свойствами:

Следующие программные решения обеспечивают это и многое другое.

TinyMCE

Один из самых доступных, но многофункциональных редакторов, который включал в себя Atlassian, Medium и Evernote. Поддерживает облачные и гибридные развертывания и может быть интегрирован с некоторыми из самых известных сред - React, Vue, Angular.

VisualEditor

Это позволяет вносить изменения и исправления в проекты без необходимости проходить разметку викитекста.

SummerNote

Super Simple WYSIWYG редактор в Bootstrap SummerNote - библиотека JavaScript, которая позволяет создавать пользовательские редакторы онлайн.

Quill

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

Froala Editor

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

CKEditor

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

ContentTools

Хороший редактор для HTML-контента. Имеет довольно высокую оценку пользователей среди аналогичных инструментов WYSIWYG.

Узнайте: Как нанять лучшего Magento разработчика для вашего проекта

Редактор Magento 2 WYSIWYG

С точки зрения создания ресурсов электронной коммерции на основе Magento 2, WYSIWYG используется для редактирования внутреннего содержимого без каких-либо необходимых навыков программирования. Далее представлены основные редакторы Magento.

TinyMCE 4 - WYSIWYG Editor Pro

Основной Magento WYSIWYG редактор, который обычно используется по умолчанию. Включают в себя такие основные функции:

wysiwyg-editor-pro-for-magento-2

Magento 2 Page Builder

Благодаря Magento 2 Page Builder пользователи получают долгожданную возможность создавать пользовательские страницы без каких-либо необходимых изменений кода. Page Builder - это визуальный редактор, который позволяет настраивать страницы с помощью удобного, интуитивно понятного интерфейса (включая функцию перетаскивания). Активы добавляются путём перетаскивания предварительно подготовленных типов контента - доступные параметры можно просмотреть в меню.

page-builder

В общем, основные функции типов контента включают в себя:

Существует два основных типа конфигурации Page Builder, которые зависят от потребностей конечного пользователя:

Редактор интегрирован с Magento Commerce с основными функциями и доступен для покупки всем владельцам Magento Open Source.

Также рекомендуем ознакомиться: Как перенести онлайн магазин на платформу Magento: Полное руководство

Как включить / отключить WYSIWYG Редактор

С помощью Magento 2 WYSIWYG Editor вы можете легко создавать блоки и страницы CMS, описания продуктов и категории. Добавить и отредактировать текст, виджеты, ссылки, переменные и изображения просто, не используя HTML, и увидеть непосредственные результаты ваших действий в бэкенде.

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

Чтобы избежать таких возможных трудностей, лучше включать / отключать редактор при внесении изменений в HTML-код, что требует следующей последовательности действий.

  1. Зайдите в Админ панель-> Магазины-> Конфигурация;disable-magento-2-wysiwyg-editor
  2. Нажмите General->Content Management, чтобы увидеть опцию включения / выключения.magento-2-wysiwyg-editor
  3. WYSIWYG включен по умолчанию. Чтобы отключить его, снимите флажок «Использовать системное значение» и выберите опцию раскрывающегося меню:
    • По умолчанию отключено - редактор HTML будет отображаться при загрузке страницы, и вы можете переключить его на редактор WYSIWYG;
    • Отключено полностью - возможности редактирования будут полностью отключены.disable-magento-2-editor
  4. Сохраните все изменения. Если вы обнаружите, что редактор Magento 2 WYSIWYG не работает должным образом, вы должны проверить все основные требования и очистить кеш следующим образом:
    • Перейдите в System->Tools->Cache Management;wysiwyg-editor
    • В списке нажмите Refresh->Select all->Submit.magento-2-wysiwyg

Подводя итоги

Выбор редактора WYSIWYG при создании веб-сайта должен основываться на целях компании, потребностях, требованиях к пользовательскому опыту, бюджете, маркетинговой стратегии, технической базе и множестве других аспектов. Таким образом, не может быть единого универсального лучшего варианта. Однако переход на Magento 2 - лучший выбор для прогрессивной компании.

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

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

Хотите узнать больше

Получите свежие статьи, новости и тематические исследования в первую очередь на вашу электронную почту

Теперь вы подписаны!