Подключение своих CSS стилей в визуальном редакторе Битрикса
22 октября 2019
Визуальный редактор в Битриксе можно подключить с помощью класса CHTMLEditor.
Для подключения собственных стилей нужно в настройках редактора у параметра iframeCss указать импортируемые стили через css-правило @import url('/путь/к/файлу.css') all;.
Пример самописной функции, которая возвращает код визуального редактора.
В этой функции для редактора подключается файл стилей, находящийся по пути /styles/visual_editor.css
Для подключения собственных стилей нужно в настройках редактора у параметра iframeCss указать импортируемые стили через css-правило @import url('/путь/к/файлу.css') all;.
Пример самописной функции, которая возвращает код визуального редактора.
В этой функции для редактора подключается файл стилей, находящийся по пути /styles/visual_editor.css
/**
* Возвращает html/js код с визуальным редактором для конкретного поля
*
* @param string $input_name - имя поля, которое будет использовано в визуальном редакторе
* @param string $input_value - содержимое поля
* @param array $editor_settings - массив с настройками визуального редактора
*
* @return string
*/
function get_text_editor($input_name, $input_value, $editor_settings=array())
{
$return = '';
\CModule::IncludeModule("fileman");
$editor = new \CHTMLEditor;
$ar_settings = array(
'iframeCss' => "@import url('/styles/visual_editor.css') all;",
'name' => $input_name,
'id' => 'id_input_'.$input_name,
'inputName' => $input_name,
'content' => $input_value,
'width' => '100%',
'minBodyWidth' => 350,
'normalBodyWidth' => 555,
'height' => '400',
'bAllowPhp' => false,
'limitPhpAccess' => false,
'autoResize' => true,
'autoResizeOffset' => 40,
'useFileDialogs' => false,
'saveOnBlur' => true,
'showTaskbars' => false,
'showNodeNavi' => false,
'askBeforeUnloadPage' => true,
'bbCode' => false,
'siteId' => SITE_ID,
'controlsMap' => array(
array('id' => 'Bold', 'compact' => true, 'sort' => 80),
array('id' => 'Italic', 'compact' => true, 'sort' => 90),
array('id' => 'Underline', 'compact' => true, 'sort' => 100),
array('id' => 'Strikeout', 'compact' => true, 'sort' => 110),
array('id' => 'RemoveFormat', 'compact' => true, 'sort' => 120),
array('id' => 'Color', 'compact' => true, 'sort' => 130),
array('id' => 'FontSelector', 'compact' => false, 'sort' => 135),
array('id' => 'FontSize', 'compact' => false, 'sort' => 140),
array('separator' => true, 'compact' => false, 'sort' => 145),
array('id' => 'OrderedList', 'compact' => true, 'sort' => 150),
array('id' => 'UnorderedList', 'compact' => true, 'sort' => 160),
array('id' => 'AlignList', 'compact' => false, 'sort' => 190),
array('separator' => true, 'compact' => false, 'sort' => 200),
array('id' => 'InsertLink', 'compact' => true, 'sort' => 210),
array('id' => 'InsertImage', 'compact' => false, 'sort' => 220),
array('id' => 'InsertVideo', 'compact' => true, 'sort' => 230),
array('id' => 'InsertTable', 'compact' => false, 'sort' => 250),
array('separator' => true, 'compact' => false, 'sort' => 290),
array('id' => 'Fullscreen', 'compact' => false, 'sort' => 310),
),
);
if(is_array($editor_settings))
{
foreach($editor_settings as $z => $v)
{
$ar_settings[$z] = $v;
}
}
//Получение редактора
ob_start();
$editor->Show($ar_settings);
$return = ob_get_contents();
ob_end_clean();
//Обёртка в дополнительный блок (используется для специфичных действий)
$return = '<div class="rt_box">'.$return.'</div>';
return $return;
}