Подключение своих CSS стилей в визуальном редакторе Битрикса

22 октября 2019
Визуальный редактор в Битриксе можно подключить с помощью класса CHTMLEditor.
Для подключения собственных стилей нужно в настройках редактора у параметра 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;
}