Web Analytics Made Easy - StatCounter
Главная Блог Как интегрировать редактор Medium в Angular 8

Как интегрировать редактор Medium в Angular 8

Как интегрировать редактор Medium в Angular 8

Введение

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

Medium Editor - это независимая библиотека Javascript для создания панели управления контентом, которая появляется, когда вы выбираете немного контента на своей странице, который оживляется великолепием Medium.com. Вы можете превратить каждое поле из сообщения в контактной форме в целую статью на внутреннем интерфейсе в профессионально оформленный текстовый абзац, содержащий блоки цитат, заголовок, гиперссылки или несколько выбранных слов.

Вы также можете попробовать включить текстовый редактор в Angular 8 для удобства обновлений и редактирования вашего контента. Angular 8 выпустила свою последнюю функцию - бета 6 с привлекательными новыми функциями для тестирования вашего программного обеспечения и исправления ошибок.

Одним из них является Bazel - часть открытого внутреннего инструмента Google под названием Blaze, которая способна выполнять инкрементные сборки и тесты. Давайте посмотрим, как вы можете интегрировать редактор Medium в платформу Angular 8.

Шаги по созданию редактора с использованием Angular 8

Шаг 1

Прежде всего, создайте проект в Angular, и вы также можете использовать загрузчик, чтобы он выглядел довольно хорошо, добавив ссылки CDN в index.html. После ввода вышеуказанной командной строки, оно будет генерировать угловое стартовое приложение после завершения установки всех зависимостей.

Шаг 2

Установите пакет npm, введя строку ниже. А затем включите CSS и JS в файл angular.json

Шаг 3

Создайте компонент с выбранным вами именем, а затем создайте компонент с именем create.

Шаг 4

Нажмите на недавно созданный component.html и сделайте div, указав в шаблоне ссылку на имя. Попробуйте приведенный выше фрагмент кода в нескольких классах начальной загрузки, чтобы дать базовые стили.

Шаг 5

Выберите класс компонента и создайте редактор переменных, чтобы просмотреть дочернее свойство, как показано ниже:

Шаг 6

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

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

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

Шаг 7

После этого вам может потребоваться еще несколько альтернатив на панели инструментов вашего редактора. Для этого вам нужно передать объект расположения в MediumEditor Constructor.

источник
иллюстрация