Подветка синтаксиса в Wysiwyg - CKEditor + GeSHi

16.12.2017

Расширяем функцеонал CKEditor.
Подветка синтаксиса - Geshi.
Для установки нам понадобится:
Установленный и настроенный CKEditor
Модуль Drupal - GeSHi Filter for syntax highlighting
Библеотека (Php Class) - GeSHi

Установка:

wget http://ftp.drupal.org/files/projects/geshifilter-6.x-1.3.tar.gz
tar -xf geshifilter-6.x-1.3.tar.gz
wget wget http://downloads.sourceforge.net/project/geshi/geshi/GeSHi%201.0.8.9/GeSHi-1.0.8.9.tar.gz
tar -xf GeSHi-1.0.8.9.tar.gz
mv geshi geshifilter
mv geshifilter /var/www/site_name/sites/all/modules/

Настройка:

Активируем модуль:
Переходим /admin/build/modules
Устанавливаем галочку напротив "GeSHi Filter".

Настраиваем CKEditor:
cd /var/www/site_name/sites/all/modules/ckeditor/
emacs ckeditor.config.js

Находим:
config.extraPlugins += (config.extraPlugins ? ',drupalbreaks' : 'drupalbreaks' );
Вставляем строкой ниже:
config.extraPlugins += (config.extraPlugins ? ',geshi' : 'geshi' );
Находим:
config.toolbar_DrupalFull = [
Вставляем строкой ниже:
['Geshi-code','Geshi-php','Geshi-bash','Geshi-html','Geshi-css'],
Этими процедурами мы прописали GeSHi в CKEditor и прописали кнопки.
Описиваем плагин:
cd /var/www.site_name/sites/all/modules/ckeditor/ckeditor/plugins/
mkdir geshi
touch geshi/plugin.js
chown -R www-data geshi
emacs geshi/plugin.js
Заполняем:
CKEDITOR.plugins.add( 'geshi',
{
requires : [ 'styles', 'button' ],

init : function( editor )
{
// All buttons use the same code to register. So, to avoid
// duplications, let's use this tool function.
var addButtonCommand = function( buttonName, buttonLabel, commandName, styleDefiniton )
{
var style = new CKEDITOR.style( styleDefiniton );

editor.attachStyleStateChange( style, function( state )
{
editor.getCommand( commandName ).setState( state );
});

editor.addCommand( commandName, new CKEDITOR.styleCommand( style ) );

editor.ui.addButton( buttonName,
{
label : buttonLabel,
command : commandName
});
};

var config = editor.config;
// var lang = editor.lang;

addButtonCommand( 'Geshi-code' , 'code' , 'Geshi-code' , config.coreStyles_code );
addButtonCommand( 'Geshi-php' , 'php' , 'Geshi-php' , config.coreStyles_php );
addButtonCommand( 'Geshi-bash' , 'bash' , 'Geshi-bash' , config.coreStyles_bash );
addButtonCommand( 'Geshi-html' , 'html' , 'Geshi-html' , config.coreStyles_html );
addButtonCommand( 'Geshi-css' , 'css' , 'Geshi-css' , config.coreStyles_css );
}
});

// Basic Inline Styles.
CKEDITOR.config.coreStyles_code = { element : 'pre' };
CKEDITOR.config.coreStyles_php = { element : 'pre', attributes : { 'language' : 'php' } };
CKEDITOR.config.coreStyles_bash = { element : 'pre', attributes : { 'language' : 'bash' } };
CKEDITOR.config.coreStyles_html = { element : 'pre', attributes : { 'language' : 'html4strict' } };
CKEDITOR.config.coreStyles_css = { element : 'pre', attributes : { 'language' : 'css' } };
Настраиваем кнопки:
cd /var/www/site_name/sites/all/modules
emacs ckeditor/ckeditor/skins/kama/editor.css
В конец файла добавляем:
.cke_skin_kama .cke_button_Geshi-code span.cke_icon,
.cke_skin_kama .cke_button_Geshi-php span.cke_icon,
.cke_skin_kama .cke_button_Geshi-bash span.cke_icon,
.cke_skin_kama .cke_button_Geshi-html span.cke_icon,
.cke_skin_kama .cke_button_Geshi-css span.cke_icon
{
display:none !important;
}

.cke_skin_kama .cke_button_Geshi-code span.cke_label,
.cke_skin_kama .cke_button_Geshi-php span.cke_label,
.cke_skin_kama .cke_button_Geshi-bash span.cke_label,
.cke_skin_kama .cke_button_Geshi-html span.cke_label,
.cke_skin_kama .cke_button_Geshi-css span.cke_label
{
display:inline;
font-size: 90%;
}
Конфигурируем GeSHi Filter:
Переходим: /admin/settings/geshifilter
В "Generic syntax highlighting tags:" - добавляем pre конечний вид строки code blockcode pre
На этойже странице чекбокс переставляем на:
GESHI_HEADER_PRE_TABLE: uses a

construction for adding line numbers which avoids selection/copy/paste problems.
Правим Input Formats
Переходим: /admin/settings/filters
Редактируем: Filtered HTML
Ставим чекбокс: GeSHi filter
Сохраняем конфигурацию
Корректируем:
cd /var/www/site_name/sites/all/modules/
emacs geshifilter/geshi/geshi.php
Находим:
// Replace all newlines to a common form.
$code = str_replace("\r\n", "\n", $this->source);
$code = str_replace("\r", "\n", $code);
Добавляем ниже:
$code = str_replace(">", ">", $code);
$code = str_replace("<", "<", $code);
$code = str_replace("‹", "‹", $code);
$code = str_replace("›", "›", $code);
$code = str_replace("'", "'", $code);
$code = str_replace(""", "\"", $code);
$code = str_replace("&", "&", $code);