www.Litecode.ru – Сборник рецептов для создания сайтов

WYSIWYG CKeditor

ГлавнаяJavaScript → WYSIWYG CKeditor

Наверняка многие разработчики как минимум слышали о существовании HTML — редакторов, встраиваемых в веб страницы. Хочу представить Вам пожалуй самый продвинутый на сегодняшний день WYSIWYG. Для непосвященных опишу в двух словах о чем идет речь. Если Вы или Ваши клиенты хотите своими руками редактировать контент сайта, а познавать основы html нет времени или желания — то Ckeditor то что нужно.

Ранее продукт назывался FCKeditor, но из-за нездоровых ассоциаций у англичан связанных с аббревиатурой FCK (создатель проекта Frederico Calderia Knabben), редактор был переименован в Ckeditor. Кроме названия в новой версии исчезли api для работы с файлами на perl и python, по крайней мере в бесплатном дистрибутиве. Разработчики предлагают несколько тарифных планов по поддержке и возможно на этих условиях вам предоставят не только их. На данный момент по умолчанию есть asp и php. Я же в своей работе использую perl и буду писать интерфейс сам. Позже выложу. А в целом проект имеет плагинную архитектуру, которой довольно легко управлять если разбираетесь в JS.

Скачать WYSIWYG ckeditor можно здесь или на сайте www.ckeditor.com.

Так он собственно выглядит. Правда я вам представил немного урезанную версию, но от полного комплекта почти не отличается.

Подключение и настройка ckeditor

Подключение по умолчанию

Подключается и настраивается ckeditor очень легко.

1. Скачиваем ckeditor и распаковываем в корень сайта, CMS или другой системы. Разработчики не рекомендуют начинающим программистам переименовывать каталоги и файлы во избежание конфликтов в редакторе. Если все оставить как есть то запуск по умолчанию — минутное дело.

2.В коде страницы грузим основной код и вставляем элемент textarea. Причем элементов textarea может быть несколько, главное им назначить разные идентификаторы.

<script src="/ckeditor/ckeditor.js" type="text/javascript"></script>
<textarea id="textID" name="textID"></textarea>

3.Инициализация на Ваш вкус, но лучше делать после того как объектная модель документа будет готова.

Для Jquery:

<script>
    $.noConflict();
    jQuery(document).ready(function($) {
        CKEDITOR.replace( 'textID',{}); 
    });
</script>

Для Ext JS:

Ext.onReady(CKEDITOR.replace( 'textID',{}));

Древний способ:

<body onload="CKEDITOR.replace( 'textID',{});">

Или непосредственно перед закрывающим тегом

<script>
    CKEDITOR.replace( 'textID',{}); 
</script>

Дополнительная настройка

Для изменения настроек по умолчанию в ckeditor предусмотрен некоторого рода конфигурационный файл config.js, который лежит по адресу /ckeditor/config.js. Он содержит в себе настроечный хеш.

Вот пример того который используется для демо версии на данной странице:

CKEDITOR.editorConfig = function( config )
{
	config.skin             = 'kama';
	config.uiColor        = '#E0E0E0';
	config.language         = 'ru';
	config.fullPage         = false;
	config.height           = 200;
	config.removePlugins    = 'resize,about,save';
};

config.skin - интерфейс. Возможны три варианта: kama, v2, office2003. По умолчанию kama.

config.uiColor - цвет интерфейса. Работает только для kama.

config.language - Язык интерфейса.

config.fullPage - оплетка для редактируемого документа. Если установлено true то редактируемая область будет содержать полноценный html документ, если false - только контент.

config.height - высота редактируемой области в пикселах. Аналогично для ширины.

config.removePlugins - Список кнопок (плагинов), которые нужно отключить. Например: resize - это благодаря которой область редактора можно растянуть как угодно, удерживая мышью нижний правый угол, save - кнопка сохранить.

Удачи!