Пост скорее для новичков битрикса. В нем я хочу показать как просто и легко можно создать компонент. Мы сделаем компонент по выводу виз редактора (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>

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

<? echo $_POST['content'] ?>
<? echo $_POST['content2'] ?>
<form action="" method="post" name="">
<? $APPLICATION->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
);
?>
<input value="submit" name="sub" type="submit" />
</form>

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

Скачать