Pp przejściu na wersję 3.x CKEditor przestał współpracować z GeSHi. Oto nowsza wersja integracji:
1. Wrzucamy zawartość GeSHI do plugin/geshi,
2. Tworzymy nowy plik o nazwie plugin.js,
3. Wklejamy do niego kod:
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-mysql' , 'mysql' , 'Geshi-mysql' , config.coreStyles_mysql ); addButtonCommand( 'Geshi-html' , 'html' , 'Geshi-html' , config.coreStyles_html ); addButtonCommand( 'Geshi-xml' , 'xml' , 'Geshi-xml' , config.coreStyles_xml ); addButtonCommand( 'Geshi-css' , 'css' , 'Geshi-css' , config.coreStyles_css ); addButtonCommand( 'Geshi-js' , 'js' , 'Geshi-js' , config.coreStyles_js ); addButtonCommand( 'Geshi-jquery', 'jquery' , 'Geshi-jquery' , config.coreStyles_jquery ); addButtonCommand( 'Geshi-java' , 'java' , 'Geshi-java' , config.coreStyles_java ); addButtonCommand( 'Geshi-smarty', 'smarty' , 'Geshi-smarty' , config.coreStyles_smarty ); addButtonCommand( 'Geshi-text' , 'text' , 'Geshi-text' , config.coreStyles_text ); } }); //CKEDITOR.buttonLabel_code = {'code'}; // Basic Inline Styles. CKEDITOR.config.coreStyles_code = { element : 'pre' }; CKEDITOR.config.coreStyles_php = { element : 'pre', attributes : { 'lang' : 'php' } }; CKEDITOR.config.coreStyles_mysql = { element : 'pre', attributes : { 'lang' : 'mysql' } }; CKEDITOR.config.coreStyles_html = { element : 'pre', attributes : { 'lang' : 'html4strict' } }; CKEDITOR.config.coreStyles_xml = { element : 'pre', attributes : { 'lang' : 'xml' } }; CKEDITOR.config.coreStyles_css = { element : 'pre', attributes : { 'lang' : 'css' } }; CKEDITOR.config.coreStyles_js = { element : 'pre', attributes : { 'lang' : 'Javascript' } }; CKEDITOR.config.coreStyles_jquery = { element : 'pre', attributes : { 'lang' : 'jquery' } }; CKEDITOR.config.coreStyles_java = { element : 'pre', attributes : { 'lang' : 'java' } }; CKEDITOR.config.coreStyles_smarty = { element : 'pre', attributes : { 'lang' : 'smarty' } }; CKEDITOR.config.coreStyles_text = { element : 'pre', attributes : { 'lang' : 'text' } };
4. Dodajemy nieco kodu do miejsca, gdzie włączamy edytor:
<script type="text/javascript"> //<![CDATA[ CKEDITOR.replace( "editor1", { extraPlugins : "geshi",
5. Dodajemy w tym samym miejscu przyciski:
<script type="text/javascript"> //<![CDATA[ CKEDITOR.replace( "editor1", { extraPlugins : "geshi", toolbar : [ // ... { name: 'geshi', items : [ 'Geshi-code','-','Geshi-php','-','Geshi-mysql','-','Geshi-html','-','Geshi-xml','-','Geshi-css','-','Geshi-js','-','Geshi-jquery','-','Geshi-java','-','Geshi-smarty','-','Geshi-text' ] } ],
6. W plikach styli (przykładowo: ckeditor/skins/kama/editor.css) dodajemy kod:
.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-mysql span.cke_icon, .cke_skin_kama .cke_button_Geshi-html span.cke_icon, .cke_skin_kama .cke_button_Geshi-xml span.cke_icon, .cke_skin_kama .cke_button_Geshi-css span.cke_icon, .cke_skin_kama .cke_button_Geshi-js span.cke_icon, .cke_skin_kama .cke_button_Geshi-jquery span.cke_icon, .cke_skin_kama .cke_button_Geshi-java span.cke_icon, .cke_skin_kama .cke_button_Geshi-smarty span.cke_icon, .cke_skin_kama .cke_button_Geshi-text 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-mysql span.cke_label, .cke_skin_kama .cke_button_Geshi-html span.cke_label, .cke_skin_kama .cke_button_Geshi-xml span.cke_label, .cke_skin_kama .cke_button_Geshi-css span.cke_label, .cke_skin_kama .cke_button_Geshi-js span.cke_label, .cke_skin_kama .cke_button_Geshi-jquery span.cke_label, .cke_skin_kama .cke_button_Geshi-java span.cke_label, .cke_skin_kama .cke_button_Geshi-smarty span.cke_label, .cke_skin_kama .cke_button_Geshi-text span.cke_label { display: inline; font-size: 90%; }
I tyle, powodzenia.