Учебное пособие по интеграции редактора WYSIWYG в приложение Elixir / Phoenix

Что такое WYSIWYG Editor?

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

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

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

В этом руководстве мы узнаем, как интегрировать классический CK Editor 5 в форме эликсира.

CKEditor - это редактор HTML WYSIWYG с открытым исходным кодом.

Как это интегрировать?

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

Если та же версия CK Editor загружена в браузер (даже с другого веб-сайта), она загружается из кеша. Таким образом, это ускоряет следующие запросы.

Скачать редактор можно с помощью тега <script >.

Создать классический редактор

Предположим, нам нужно добавить CKEditor в поле описания формы для редактирования product деталей. Тег id из textarea равен product_description.

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

Чтобы удалить какие-либо инструменты из редактора, мы можем добавить имена инструментов в removePlugins в методе .create. Код ниже удаляет инструменты ImageUpload и MediaEmbed из CKEditor.

Мы также должны остановить отображение текстового редактора HTML до того, как на его место загрузится CKEditor. Для этого нам нужно будет сделать текстовое поле скрытым, как показано ниже, добавив class: ‘invisible’ к тегу textarea.

После редактирования в CKEditor и отправки формы. Редактор отправляет отредактированный текст вместе с разметкой HTML на бэкэнд в строковом формате. Отредактированный текст в бэкэнде сохраняется с разметкой HTML.

Например: В Aviacommerce мы сохранили описание украшения жирным шрифтом, как показано ниже.

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

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

Фронтенд-рендеринг

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

Со встроенными редакторами такого типа приложения подвергаются атакам XSS. Например, Aviastore, демонстрационное приложение Aviacommerce, испытала подобную XSS-атаку, когда пользователь пытался ввести <script> в редактор. Следовательно, заставляя innerHTML выполнять содержимое тега сценария. К счастью, мы этого ожидали и справились с этим на нашей стороне.

В AngularSpree мы также создали такой редактор, в котором мы хотели разрешить выполнение innerHTML вместе с предотвращением XSS-атак. Поэтому мы справились с этим, добавив sanitizeHTML pipe. (Щелкните, чтобы перейти к коду) sanitizeHTML конвейер Angular позволяет вам desanitize HTML только при сохранении остальной дезинфекции как есть, тем самым предотвращая атаки XSS.

Но, к нашему облегчению, нам не нужно беспокоиться об этих вещах с CKEditor. CKEditor справляется с этим самостоятельно. Например, я попытался добавить текст жирным шрифтом вместе со скриптом в тег <script>. Ниже представлен результат.

На изображении выше показано, что CKEditor обрабатывает рендеринг разметки HTML, предотвращая атаку XSS, очищая вредоносный скрипт.

Вы можете обратиться к этому классному блогу, где объясняется DomSanitizer в Angular.

АВИАКОММЕРЦИЯ: ЭЛЕКТРОННАЯ КОММЕРЦИЯ С ОТКРЫТЫМ ИСТОЧНИКОМ

Aviacommerce - это платформа электронной коммерции с открытым исходным кодом. Он не идет на компромисс в отношении скорости и надежности. Посмотрите на www.aviacommerce.org

Если вам понравилась эта история, нажмите кнопку 👏 и поделитесь ею, чтобы помочь другим найти ее! Не стесняйтесь, чтобы оставить комментарий ниже.