Связка WYSIWYG CKEditor GeSHi - Проблема с тегом span

Главные вкладки

Аватар пользователя Domenom Domenom 11 октября 2010 в 9:48

Всем добрый день.
Очень надеюсь на вашу помощь так как сам за неимением достаточного опита проблему решить не могу.

Суть в том что очень хочется связать 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/GeS...
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);

Комментарии

Аватар пользователя Domenom Domenom 11 октября 2010 в 10:56

Вообщим все это чудо успешно работает.
С единственним но. После виделения текста и сохранения его появлютсо теги span

К примеру имею текст:

require_once './includes/bootstrap.inc';
drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);
$return = menu_execute_active_handler();

Виделяю назначаю ему кнопочкой посветить как php. На виходе получаю:

<span style="display: none; "> </span>require_once './includes/bootstrap.inc';
drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);
$return = menu_execute_active_handler();<span style="display: none; "> </span>
Аватар пользователя Jackinua Jackinua 21 ноября 2010 в 16:35

if (Drupal.ckeditorCompareVersion('3.1')) {
CKEDITOR.plugins.addExternal('drupalbreaks', Drupal.settings.ckeditor.module_path + '/plugins/drupalbreaks/');
CKEDITOR.plugins.addExternal('geshi', Drupal.settings.ckeditor.module_path + '/plugins/geshi/');
}