Forum PHP.pl

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 
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' } };
[JAVASCRIPT] pobierz, plaintext 

4. Dodajemy nieco kodu do miejsca, gdzie włączamy edytor:

[HTML] pobierz, plaintext 
<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
  <script type="text/javascript">
  //<![CDATA[
    CKEDITOR.replace( "editor1",
    {
      extraPlugins : "geshi",
[HTML] pobierz, plaintext 

5. Dodajemy w tym samym miejscu przyciski:

[HTML] pobierz, plaintext 
<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
  <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' ] }
      ],
[HTML] pobierz, plaintext 

6. W plikach styli (przykładowo: ckeditor/skins/kama/editor.css) dodajemy kod:

[CSS] pobierz, plaintext 
.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%;
}
[CSS] pobierz, plaintext 

I tyle, powodzenia.

Ten post edytował Kshyhoo 20.11.2011, 17:52:38