TinyMCE + 1с-Битрикс
Дек 13
1С-Битрикс, PHP 1с-Битрикс, bitrix, bitrix api, JavaScript, php, TinyMCE 7 Comments
TinyMCE - Javascript WYSIWYG Editor
Пост скорее для новичков битрикса. В нем я хочу показать как просто и легко можно создать компонент. Мы сделаем компонент по выводу виз редактора (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.
RSS
Twitter
Google
Facebook
Skype