Последние записи

SyntaxHighlighter в CKeditor на Kohana

Дата: 27-02-2011

1. Качаем последнюю версию SyntaxHighlighter (на момент написания 3.0.83 по ссылке http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current. Устанавливаем в директорию /media/js/syntax

2. Качаем плагин SyntaxHighlighter для CKeditor по ссылке http://code.google.com/p/ckeditor-syntaxhighlight/downloads/list.

3. Распаковываем и устанавливаем его в папку с CKeditor, например /media/js/ckeditor/plugins/syntaxhighlight

4. Подключаем файлы стилей для подсветки кода, ядро и тему по дефолту (можно и другие темы, список тем и демо к ним здесь - http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/)

$this->template->styles = array('media/css/style.css',
            'media/js/syntax/styles/shCore.css',
            'media/js/syntax/styles/shThemeDefault.css');

5. Далее подключаем файлы скриптов с нужными языками:

$this->template->scripts = array(
            /* 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', */
            'media/js/syntax/scripts/shCore.js',
            'media/js/syntax/scripts/shBrushPhp.js',
            'media/js/syntax/scripts/shBrushJScript.js',
            'media/js/syntax/scripts/shBrushCss.js',
            'media/js/syntax/scripts/shBrushBash.js',
        );
 $this->template->scripts[] = 'media/js/jquery-1.6.2.min.js';

5. В конфиге CKeditor - в файле config.js прописываем:

CKEDITOR.editorConfig = function( config )
{
        config.extraPlugins = 'syntaxhighlight';
        config.toolbar_Full.push(['Code']);
};

6.  В нужно view выводим функцию включения плагина:

7. После чего в панели CKeditor должна появится кнопка вставки кода:

8. После нажатия вываливается окно с опцией выбора языка подсветки (который должен быть обязательно прописан в п.4 )

Окно вставки кода в CKeditor

9. Во вкладке Advanced есть возможность опциально выделить любые строки кода, уставновить флажок переноса строк (что достаточно удобно) и еще пару функции - начало строки ит.д.


Категория: PHP