W związku z wieloma pytaniami na ten temat, podaję nowszą wersję.

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:
[JAVASCRIPT] pobierz, plaintext
  1. CKEDITOR.plugins.add( 'geshi',
  2. {
  3. requires : [ 'styles', 'button' ],
  4. init : function( editor )
  5. {
  6. // All buttons use the same code to register. So, to avoid
  7. // duplications, let's use this tool function.
  8. var addButtonCommand = function( buttonName, buttonLabel, commandName, styleDefiniton )
  9. {
  10. var style = new CKEDITOR.style( styleDefiniton );
  11.  
  12. editor.attachStyleStateChange( style, function( state )
  13. {
  14. editor.getCommand( commandName ).setState( state );
  15. });
  16.  
  17. editor.addCommand( commandName, new CKEDITOR.styleCommand( style ) );
  18.  
  19. editor.ui.addButton( buttonName,
  20. {
  21. label : buttonLabel,
  22. command : commandName
  23. });
  24. };
  25.  
  26. var config = editor.config;
  27. // var lang = editor.lang;
  28.  
  29. addButtonCommand( 'Geshi-code' , 'code' , 'Geshi-code' , config.coreStyles_code );
  30. addButtonCommand( 'Geshi-php' , 'php' , 'Geshi-php' , config.coreStyles_php );
  31. addButtonCommand( 'Geshi-mysql' , 'mysql' , 'Geshi-mysql' , config.coreStyles_mysql );
  32. addButtonCommand( 'Geshi-html' , 'html' , 'Geshi-html' , config.coreStyles_html );
  33. addButtonCommand( 'Geshi-xml' , 'xml' , 'Geshi-xml' , config.coreStyles_xml );
  34. addButtonCommand( 'Geshi-css' , 'css' , 'Geshi-css' , config.coreStyles_css );
  35. addButtonCommand( 'Geshi-js' , 'js' , 'Geshi-js' , config.coreStyles_js );
  36. addButtonCommand( 'Geshi-jquery', 'jquery' , 'Geshi-jquery' , config.coreStyles_jquery );
  37. addButtonCommand( 'Geshi-java' , 'java' , 'Geshi-java' , config.coreStyles_java );
  38. addButtonCommand( 'Geshi-smarty', 'smarty' , 'Geshi-smarty' , config.coreStyles_smarty );
  39. addButtonCommand( 'Geshi-text' , 'text' , 'Geshi-text' , config.coreStyles_text );
  40. }
  41. });
  42.  
  43. //CKEDITOR.buttonLabel_code = {'code'};
  44. // Basic Inline Styles.
  45. CKEDITOR.config.coreStyles_code = { element : 'pre' };
  46. CKEDITOR.config.coreStyles_php = { element : 'pre', attributes : { 'lang' : 'php' } };
  47. CKEDITOR.config.coreStyles_mysql = { element : 'pre', attributes : { 'lang' : 'mysql' } };
  48. CKEDITOR.config.coreStyles_html = { element : 'pre', attributes : { 'lang' : 'html4strict' } };
  49. CKEDITOR.config.coreStyles_xml = { element : 'pre', attributes : { 'lang' : 'xml' } };
  50. CKEDITOR.config.coreStyles_css = { element : 'pre', attributes : { 'lang' : 'css' } };
  51. CKEDITOR.config.coreStyles_js = { element : 'pre', attributes : { 'lang' : 'Javascript' } };
  52. CKEDITOR.config.coreStyles_jquery = { element : 'pre', attributes : { 'lang' : 'jquery' } };
  53. CKEDITOR.config.coreStyles_java = { element : 'pre', attributes : { 'lang' : 'java' } };
  54. CKEDITOR.config.coreStyles_smarty = { element : 'pre', attributes : { 'lang' : 'smarty' } };
  55. CKEDITOR.config.coreStyles_text = { element : 'pre', attributes : { 'lang' : 'text' } };
[JAVASCRIPT] pobierz, plaintext

4. Dodajemy nieco kodu do miejsca, gdzie włączamy edytor:
  1. <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
  2. <script type="text/javascript">
  3. //<![CDATA[
  4. CKEDITOR.replace( "editor1",
  5. {
  6. extraPlugins : "geshi",

5. Dodajemy w tym samym miejscu przyciski:
  1. <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
  2. <script type="text/javascript">
  3. //<![CDATA[
  4. CKEDITOR.replace( "editor1",
  5. {
  6. extraPlugins : "geshi",
  7. toolbar :
  8. [
  9. // ...
  10. { 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' ] }
  11. ],

6. W plikach styli (przykładowo: ckeditor/skins/kama/editor.css) dodajemy kod:
  1. .cke_skin_kama .cke_button_Geshi-code span.cke_icon,
  2. .cke_skin_kama .cke_button_Geshi-php span.cke_icon,
  3. .cke_skin_kama .cke_button_Geshi-mysql span.cke_icon,
  4. .cke_skin_kama .cke_button_Geshi-html span.cke_icon,
  5. .cke_skin_kama .cke_button_Geshi-xml span.cke_icon,
  6. .cke_skin_kama .cke_button_Geshi-css span.cke_icon,
  7. .cke_skin_kama .cke_button_Geshi-js span.cke_icon,
  8. .cke_skin_kama .cke_button_Geshi-jquery span.cke_icon,
  9. .cke_skin_kama .cke_button_Geshi-java span.cke_icon,
  10. .cke_skin_kama .cke_button_Geshi-smarty span.cke_icon,
  11. .cke_skin_kama .cke_button_Geshi-text span.cke_icon
  12. {
  13. display: none !important;
  14. }
  15. .cke_skin_kama .cke_button_Geshi-code span.cke_label,
  16. .cke_skin_kama .cke_button_Geshi-php span.cke_label,
  17. .cke_skin_kama .cke_button_Geshi-mysql span.cke_label,
  18. .cke_skin_kama .cke_button_Geshi-html span.cke_label,
  19. .cke_skin_kama .cke_button_Geshi-xml span.cke_label,
  20. .cke_skin_kama .cke_button_Geshi-css span.cke_label,
  21. .cke_skin_kama .cke_button_Geshi-js span.cke_label,
  22. .cke_skin_kama .cke_button_Geshi-jquery span.cke_label,
  23. .cke_skin_kama .cke_button_Geshi-java span.cke_label,
  24. .cke_skin_kama .cke_button_Geshi-smarty span.cke_label,
  25. .cke_skin_kama .cke_button_Geshi-text span.cke_label
  26. {
  27. display: inline;
  28. font-size: 90%;
  29. }

I tyle, powodzenia.