Устанавливаем WYSIWYG-редактор «CLEditor»

Устанавливаем WYSIWYG-редактор «CLEditor»

cleditorВ этом уроке мы расскажем вам, как установить WYSIWYG-редактор «CLEditor» к себе на сайт.

Для начала узнаем, что же такое CLEditor.

CLEditor — простой и свободный WYSIWYG-редактор на jQuery.

CLEditor — это бесплатный плагин для jQuery с открытым кодом. Плагин был разработан Крисом Ландовски (Chris Landowski) и распространяется под лицензионным соглашением MIT и GPL. Преимуществом этого редактора является малый вес (около 8кб), полная функциональность и кроссбраузерность.

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

Скачать архив можно по ссылке: cleditor.rar.

Теперь, когда у нас есть все нужные файлы можно приступить к установке.

Шаг 1. Подключаем скрипты

Первым делом нам нужно подключить скрипты — библиотека jQuery и скрипт самого редактора. Также нужно написать пару строчек кода для запуска редактора. Для этого пишем:




Шаг 2. Подключаем стили

Далее нужно подключить файл со стилями. Файл, который отвечает за стили самого редактора называется cleditor.css.



Также не забываем проверять правильность путей к изображениям (кнопки и тулбар) в файле стилей.

Шаг 3. HTML-разметка

В данном шаге нужно сделать HTML-разметку.

Разметка очень простая. Она состоит из формы и одного текстового поля.

Обратите внимание, что текстовому полю был задан такой же id, который мы указали при написании кода скрипта для запуска редактора. Этот id имеет название input, в скрипте написан #input.

Шаг 4. Финальный результат

Если сделали все правильно, то на данном этапе редактор должен начать работать. Если возникли какие-то ошибки, то скачайте исходный файлы.

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

Официальный сайт: premiumsoftware.net/cleditor

На этом урок окончен. Спасибо за внимание!

Автор урока: редакция REDSTAR
Урок для Вас подготовлен командой сайта red-star.pro.