Кодирование

Как добавить редактор WYSIWYG на свой сайт – полное руководство

Оглавление скрыть 1 Возможно, вам интересно: Почему мне следует использовать редакторы WYSIWYG? 2 преимущества редакторов WYSIWYG 3...

как добавить редактор WYSIWYG на свой сайт

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

Разве это не потрясающе?

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

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

Вам может быть интересно: почему мне следует использовать редакторы WYSIWYG?

Редакторы WYSIWYG — один из лучших инструментов для начинающих. Они помогают быстро создавать веб-страницы и размещать их в Интернете без каких-либо знаний в области программирования. Не имеет значения, если вы вообще не разбираетесь в кодировании HTML; вы по-прежнему можете без труда создавать визуально привлекательные веб-сайты.

Чтобы понять это, давайте рассмотрим некоторые преимущества, которые он предлагает по сравнению со стандартными текстовыми редакторами.

Преимущества редакторов WYSIWYG

  • Улучшенная навигация по коду

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

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

  • Копирование/вставка из MS Word/OpenOffice Writer

Редакторы WYSIWYG позволяют копировать и вставлять текст из MS Word/OpenOffice Writer на ваш веб-сайт. Некоторые продвинутые редакторы, такие как Froala, позволяют копировать/вставлять данные как из Microsoft Word, так и из Excel.

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

  •  Автоматическое форматирование

Что делает HTML-редакторы WYSIWYG лучше традиционных текстовых редакторов кодирования, так это их способность автоматически форматировать коды, гарантируя наличие всех тегов. Это избавит вас от утомительных сеансов редактирования, чтобы исправить ошибки.

  • Нет языкового барьера

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

Примечание: Некоторые из продвинутых HTML-редакторов WYSIWYG, такие как Froala, просто работают на любом языке (включая языки Восточной Азии). Именно поэтому его используют во всем мире в более 100 стран.

  • Креативные заголовки с легкостью 

С HTML-редакторами WYSIWYG вам не нужно беспокоиться о написании кода форматирования. Вы можете быстро написать привлекательные заголовки одним нажатием кнопки. Помимо этого, вы получите безграничные возможности экспериментировать с заголовками. Это сэкономит вам время и деньги.

  • Помощь в разметке

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

  • Бесшовные гиперссылки

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

  • Быстрые изменения

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

  • Высокая производительность

Редакторы WYSIWYG специально разработаны с учетом производительности. Некоторые редакторы, такие как Froala, могут выдержать даже самые строгие тесты и обеспечить плавную работу даже при выполнении тяжелых задач. Он способен достаточно инициализироваться в менее 40 мс. Невероятно быстро, не так ли?

  • Универсальный доступ

Когда дело доходит до доступности, многие стандартные текстовые редакторы не справляются с растущими потребностями. Небольшой вес такие редакторы, как Froala, предлагают расширенное редактирование текста в различных условиях. Он соответствует Раздел 508, WCAG 2.0 и WAI-ARIA. предложить непревзойденный доступ при различных сценариях.

После того, как вы ознакомились с этими преимуществами, вам должно быть достаточно любопытно, чтобы попробовать, не так ли?

Ну кто тебе мешает? Просто добавьте его на свой сайт и сами увидите результаты.

Как добавить редактор WYSIWYG на свой сайт?

Что ж, когда дело доходит до добавления редактора WYSIWYG на ваш сайт, есть много вариантов. В этом руководстве рассказывается о добавлении Редактор Froala WYSIWYG на ваш сайт.

как добавить редактор WYSIWYG на свой сайт
как добавить редактор WYSIWYG на свой сайт

Вам может быть интересно, почему Froala?

Будучи удобным для разработчиков редактором, он предлагает вам возможность дальнейшего расширения своих возможностей. Фроала поставляется с более 30 плагинов из коробки. Плюсом Froala является оптимизация, которая позволяет использовать его на различных платформах, таких как настольные компьютеры, ноутбуки, планшеты и т. д. Более того, не имеет значения, используете ли вы платформу Android или iOS; Froala совместима с обоими.

Но то, что делает его уникальным, — это простота интеграции. Вы можете без труда интегрировать его с WordPress, React или любыми внешними технологиями.

Давайте добавим его на ваш сайт, выполнив несколько простых шагов.

Шаг 1: установить

Когда дело доходит до установки редактора Froala, есть много способов сделать это. Здесь используется NPM. Это один из лучших и простых вариантов.

Что касается НПМ, введите команду, указанную ниже.

npm установить редактор froala

После завершения процесса установки вставьте приведенный ниже код в свой HTML-файл.


Примечание: Вы также можете использовать CDN в качестве альтернативы.


Шаг 2: Создать

Вы можете запустить редактор Froala для любого элемента DOM, но рекомендуется использовать DIV элемент.

Добавить пустой элемент, который будет превращен в редактор форматированного текста.

Шаг 3: Инициализация

Инициализируйте редактор Froala на ранее созданном пустом элементе.

редактор var = новый FroalaEditor('#example')

Шаг 4. Отображение контента

Включите приведенные ниже файлы CSS, чтобы сохранить внешний вид отредактированного HTML вне редактора форматированного текста.


<ссылке href="»../css/froala_style.min.css» rel="таблица стилей" type="text/css" />

Не забудьте поместить отредактированный контент внутрь элемента с помощью вид с фр.


  Вот HTML-код, отредактированный с помощью редактора форматированного текста Froala.
</div>

Вот полный пример формы, показывающий интеграцию HTML-редактора Froala WYSIWYG с сайтом.

e

<HTML>
< >
<ссылке href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<скрипт type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></скрипт>


</ >
<тело>
<DIV id="пример"></DIV>
<DIV класс="fr-view">
  Вот HTML-код, отредактированный с помощью редактора форматированного текста Froala.
</DIV>
</тело>
<скрипт>
редактор var = новый FroalaEditor('#example')
</скрипт>
</HTML>

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

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

Окончательный вердикт

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

Оставьте комментарий

Translate »