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

TinyMCE + 1с-Битрикс.

Для этого нам понадобится дистрибутив самого редактора, берем самую свежую версию с сайта производителя http://tinymce.moxiecode.com/.

Создаем каркас нашего компонента. Для лучшего понимания я вынесу этот компонент в свое пространство имен, думаю так будет удобнее. Итак создаем вот такую структуру папок:

/bitrix/components/tools/

/bitrix/components/tools/editor.tiny.mce/

/bitrix/components/tools/editor.tiny.mce/templates/

/bitrix/components/tools/editor.tiny.mce/templates/.default/

И создаем папку куда выложим сам дистрибутив редактора tiny_mce т. е.

/bitrix/components/tools/editor.tiny.mce/tiny_mce/

В папке /bitrix/components/tools/editor.tiny.mce/ создаем 2 файла.

componet.php — кто еще не знает это логика нашего компонента

.parameters.php — файл для описания входящих параметров

Итак приступим. Копируем скаченный дистрибутив в папку tiny_mce. Открываем файл componet.php и начинаем подключать .  Опишу важные моменты,  исходник я выложу ниже :

Подключаем сам редактор:

<?  $APPLICATION->AddHeadScript($this->__path .’/tiny_mce/tiny_mce.js’); ?>

Подключаем стили, я их вынес в папку с компонентом чтобы было удобнее, это настройка уже в js, в коде инициализации:

content_css : ‘<?=$this->__path?>/example.css’,

Очень важный момент,  если на странице 2 или более редакторов то мы идентифицируем их по имени классы editor_selector : ‘<?=$sEditorID?>’. Странное решение со стороны разработчиков но все же это так.

Ну и собственно сама текстария для которой это все и делается

<textarea id='<?=$sIdTextAria?>’  name='<?=$sNameTextAria?>’ style=’width:<?=$iTextariaWidth?>’><?=$sText?></textarea>

Итак как использовать. Просто подключается вот в таком виде:

[source language=’php’]

IncludeComponent(«tools:editor.tiny.mce», «.default», array(
«TEXT» => $_POST[«content»], // контент из запроса который нужно вставить
«TEXTARIA_NAME» => «content», // имя поля
«TEXTARIA_ID» => «content»,         // id поля
«TEXTARIA_WIDTH» => «100%»,  // ширина
«TEXTARIA_HEIGHT» => «300»,    // высота

«INIT_ID» => «ID» // ID самого редактора
),
false
);
?>

[/source]

Ну вот и архив, можно посмотреть на пример, доработать и использовать. В следующий раз покажу как прикрутить к компоненту добавления элемента iblock.element.add.

Скачать