Zano.ru




Рейтинг@Mail.ru


Главная / Установка визуального редактора CKEditor

Установка визуального редактора CKEditor

С помощью визуального редактора встроенного в сайт очень легко и удобно добавлять и редактировать различную информацию. Например его можно использовать в форме добавления комментариев или новостном блоке, не говоря уже о применении его в администраторском разделе. Бесплатных визуальных редакторов существует множество, самые известные из них это Tinymce и CK Editor (бывший FCK Editor). Рассмотрим установку редактора на сайт на примере CK Editor.

Для начала нужно скачать последнюю версию редактора. Сделать это можно на оффициальном сайте программы ckeditor.com После скачивания архива необходимо распаковать его в какую-либо папку в корневой директории сайта. После распаковки каталог будет иметь такой вид:

Установка визуального редактора CKEditor

Папка _samples содержит примеры использования редактора. В папке _source находятся все исходные коды редактора, предназначенные для разработчиков. Мы можем смело удалить обе папки, а так же файлы отмеченные серым цветом. После проделанных операций размер основного каталога уменьшится вдвое. На следующем этапе необходимо вставить между тегами <head> и </head> следующую строчку:

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

Атрибут src должен содержать полный путь к файлу ckeditor.js Далее нам нужно создать форму с областью текста (тег <textarea>) и добавить в неё несколько строк кода:

<form id="form1" name="form1" method="post" action="">
<textarea name="editor1" id="editor1" cols="45" rows="5"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1');
</script>
</form>

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

CKEditor




 
E-Mail: zanoru@yandex.ru