Italiano English

Un plugin Geshi per CKEditor (4.x)

Ultimo Aggiornamento: 18/09/2013 - Visite: 62357 dal 22 gen 2010 - Voto:1,7 (15 Voti) 11 commenti
Parole chiave: Javascript, PHP, Utility, HTML
Sezioni: Nessuna
Argomenti: Programmazione

In questa pagina viene presentato un plugin per gestire la colorazione del codice tramite GeSHi con CkEditor 4.x. Viene anche mostrato come estrarre i blocchi di codice da un documento e trattarli con GeSHi.

Aggiornato e funzionante con CkEditor 4.3.3

CKEditor è sicuramente uno dei principali editor WYSIWYG per HTML come GeSHi è il principale syntax highliter per PHP, perchè non metterli insieme ?

CKEditor, ormai arrivato alla versione 4.3, non dispone di un syntax highlight nativo. Nelle precedenti versioni 2.0 erano disponibili alcuni plugin permettevano di gestire la codifica del codice nei documenti, in modo conforme a syntax higlighter esistenti. Il principale è proprio un plugin per SyntaxHighlighter di Alex Gorbatchev.

Perchè allora lavorare su un altro plugin ? Perchè GeSHi è sicuramente lo strumento piu' completo e perche' nonostante il grande lavoro di Alex Gorbatchev , SyntaxHighlighter dispone di un limitato set di linguaggi riconosciuti :(

D'altra parte un plugin per CKEditor non è altro che uno strumento che permette di identificare il blocco di codice da formattare e di specificare le opzioni del formattatore. Infatti è possibile scrivere manualmente le istruzioni richieste dal formattatore in modalità "sorgente" direttamente con CKEditor. Il lavoro di evidenziazione della sintassi viene svolta fuori dall'editor.

Così ho provato ad adattare il plugin di Ramble.in alle esigenze di GeSHi con risultati soddisfacenti.

Formattazione Server side con CKEditor o altri WYSIWYG?

La formattazione del codice è una operazione che viene eseguita in fase di rendering della pagina, tuttavia esiste una sostanziale differenza tra formattazione Server Side operata dai formattatori PHP come GeSHi, e client side operata dai formattatori JavaScript come SyntaxHighlight.

Questi ultimi richiedono semplicemente che il codice sorgente da formattare sia incluso un un blocco (div,pre ecc..) con gli opportuni parametri, il browser eseguirà il codice JavaScript e otterrà il codice formattato. Questa soluzione è molto semplice da utilizzare con un editor WYSIWYG dato che basta creare il tag appropriato.

La formattazione server side viene operata tramite PHP,Perl ecc.. sul server e il browser riceve il codice già formattato. Questa soluzione non puo' essere gestita completamente a livello di editor dato ma si può procedere in questo modo

Con l'editor, marcare in qualche modo il blocco di codice in modo simile a come si procede con i metodi ClientSide

  1. Al momento del salvataggio del file un postprocessor PHP estrae i blocchi richiede la formattazione e salva il documento formattato
  2. Alla richiesta della pagina un preprocessor PHP estrae i blocchi richiede la formattazione e mostra il documento formattato

Nel primo caso il documento salvato conterrà il codice formattato, quindi in caso di modifica CKEditor lo tratterà come normale codice HTML, eventuali modifiche al codice non potranno essere riconosciute dal postprocessor.

Nel secondo caso il documento salvato contiene le istruzioni necessarie al preprocessor per generare la formattazione, in caso di modifica il codice rimane pulito e sempre conforme al formato definito per il preprocessore.

La seconda opzione è dunque preferibile ed è quella qui implementata.

Funzionamento

Il plugin proposto permette all'utente di inseire un blocco di codice che viene marcato con il tag pre e gli specifici parametri per GeSHI. In particolare

  • [geshi:linguaggio] specifica il linguaggio del codice sorgente
  • [line_num:false] (optional) indica se utilizzare o no la numerazione delle linee del codice

It create an HTML code like following

 Installazione

  • Estrai i file in <ckeditor_root>/plugins/geshi
  • Modifica il la tua configurazione di CKEditor per usare questo plugin:
  • Se si utilizza un file di configurazione globale (normalmente  <ckeditor_root>/config.js) allora modifica il file in questo modo :
 
//
// This is your active config.js
//
 
CKEDITOR.editorConfig = function( config )
{
  // Define changes to default configuration here. For example:
 
  //Add following two line 
  config.extraPlugins = 'geshi';        //Add the plugin. separate plugins by comma
  config.toolbar_Full.push(['Code']);   //add the plugin button to the full toolbar
 
  //in addition disable html tag valitation from ckeditor 
  config.allowedContent = true;         // // allow use of statement like class=geshi:language or put here you allowed content
};
  • Se si utilizza la configurazione al "volo" su un oggetto CKeditor allora è necessario aggiungere la configurazione del plugin all'oggetto:
  1.  
  2. <label for='Content'>Content</label>
  3. <textarea cols='80' id='Content' name='Content' rows='30'> <? echo htmlspecialchars($Content); ?> </textarea>
  4.  
  5. <script type='text/javascript'>
  6. CKEDITOR.replace( 'Content' , {
  7. extraPlugins: 'geshi', // enable the plugin
  8. allowedContent: true, // allow use of statement like class=geshi:language
  9.  
  10. //define your toolbar here
  11. toolbar: [
  12. { name: 'document', items : [ 'Source','-','Save',] },
  13. { name: 'clipboard', items : [ 'Cut','Copy','Paste','-','Undo','Redo' ] },
  14. all toolbar you want
  15. { name: 'tools', items : [ 'Maximize', '-','About' ] },
  16.  
  17. //Add geshi plugin button where you want
  18. { name: 'Geshi', items : [ 'Code' ] }
  19. ]
  20. });
  21. ?>
  22.  
  • in fine elimina o disabilita la cache del browser e aprendo CKEditor dovrebbe comparire il pulsante "GeSHi" come indicato in figura

Utilizzo

Download Geshi (http://qbnz.com/highlighter/) poi devi scrivere il tuo preprocessor PHP per estrarre i blocchi di sorgenti dal documento e gestirli con GeSHi.

Insieme al plugin trovi un codice di esempio per questo scopo, il codice molto migliorabile ma funziona ExtractCodeForGeshi.php

Vota questa pagina
0    1    2    3    4    5   

The coding examples presented here are for illustration purposes only. The author takes no responsibility for end-user use
This work is property of Pk Lab. You can use it for free but you must retain author's copyright

Commenti

11 commenti (Invia il tuo commento)

Inviato da George 09/02/2010 | #1

Sounds great, but I was not able to get it work, yet.
I already uploaded the files and added your two lines to ckeditor.config.js. Nevertheless the code button does not appear. I hope you can help me.

Thanks a lot and best regards,
George

Inviato da Pklab 10/02/2010 | #2

Do you are using CKEditor Full tool bar ?
Do you have disabled or deleted your browser chache ?

Inviato da George 10/02/2010 | #3

I already deleted my browsers cache and flushed all Drupal caches.
Maybe Geshi was installed wrong. At the moment I use the Durpal module "Geshifilter" so Geshi is extracted in /sites/all/modules/geshifilter/geshi.
That could be my mistake. So where do I have to extract Geshi from http://qbnz.com/highlighter/?

Thanks a lot,
George

Inviato da PkLab 10/02/2010 | #4

Dear George,
really CKEditor geshi plugin does not require geshi to run. This is because geshi works when your document is requested while plugin works when the document is edited.
The plugin just write few parsable tags in CKEditor generated html.

If you can't see the plugin button on CKEditor, your problem is at CKEditor level.

You must
- copy my plugin files on CKEditor plugin root folder.
- Change your CKEditor active config file as it's shown above
That is all you need to have Geshi plugin button on CKEditor tool bar.
Check you are editing right (active) config.js

To close the loop with gesghi, you need of a script, such as the ExtractCodeForGeshi.php above, that parses the tags and calls geshi to obtain an highlighted version of your document.

let me know
Bye

Inviato da George 11/02/2010 | #5

Dear PkLab,

I fear that I have to give up, because I have no idea what the problem still could be.

Nevertheless, thanks for the support!
George

Inviato da Tony 12/02/2010 | #6

Dear pklab,
Unfortunately, you've misunderstood the core concept behind GeSHi. I did too, initially. It's easily done.
It is not an inline parser that you use to parse a php page with source code on it every time you visit the page. You can do it that way but you will find that it puts undue strain on php.
The way we use GeSHi on our sites is to process the code using GeSHi once and then post GeSHi's output once into the post using the editor.
This prevents the need to include the GeSHi class on every page which you post syntax highlighted code on.
GeSHi will output highlighted code for you using in line css or at your option, using your own separate style sheets (Which creates less code.)
Please see the GeSHi demo included with the GeSHi download from the GeSHi site and the GeSHi documentation to see how GeSHi is supposed to be used.

I was likewise unable to get this plugin even register with ckeditor.
I'm in the process of creating my own and I'd just thought I'd let you know.
While your effort is admirable, this plugin's concept isn't sound and it just doesn't work.

Thanks,
Tony

Inviato da Tony 12/02/2010 | #7

Hi again,
I forgot to mention that I think adding :

editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName) );

below :

var command = editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName) );

Fixes your plugin to work with latest CKEditor svn because you aren't calling the editor add command first before setting it's params.

Thanks,
Tony

Inviato da PkLab 12/02/2010 | #8

Dear Tony
thank you very much for your comment.

I understand GeSHi concept. At design time I'm looking for a simple solution to avoid inline parsing with GeSHi. But parsing the post from editor implies that you will save a formatted content. On this way, when you come back to editing the content you will need to clean GeSHi formatting from embedded code, apply your modification than reformat the document.
This can be hard to do and require a reverse GeSHi.
For above reason I've preferred to save clean code and use inline formatting.

Sure my plugin can be improved and or redesigned, if you do this I will be very happy to cite your work on this page.

Finally about your fix suggestion, I don't understand very well, because the sentence
var command = editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName) );
instances the "command" var calling the editor add command.

Do you have tested your solution on latest CKEditor svn ?

I've tested my version of plugin with CKEditor 3.1 official release and it works fine.
I think that problems about plugin registration are related to right usage, for this reason I've improved configuration section of this page.

thanks again

Inviato da Tony 15/02/2010 | #9

Hi PkLab,
I think that you will be hard pressed to find a simple solution to avoid repeated in line parsing at every page view. It should just be completely avoided IMO.
Large amounts of code on pages that are parsed by GeSHi every time a visitor requests that page (If you don't have a good cache system) Will bring your site down to a crawl. php 5 really struggles with very large single GeSHi parsing transactions.

It really depends on how much you edit of course. The way I use GeSH is to display good code already created and that therefore requires no or minimal editing.
If you are interested in version control, which is essentially what you mean when you talk about editing GeSHi code output, then I can recommend git but I'm pretty sure it would require a new plugin to operate with GeSHi and CKEditor.
So if your code is always changing, like if you were using a VCS, you should plugin to that first and get GeSHi to parse it in a back end once and store it separately for each revision before you try to use CKEditor to post that code.

You can certainly edit GeSHi's output in CKEditor, without much problem, whether you use GeSHi inline or using css to control the colours.

I don't need to cite your work. I have already created a correct GeSHi plugin for CKEditor which actually uses GeSHi directly and offers GeSHi's many modes at highlight. I have written it from scratch.
It does not just parse a code block into a pre tag and then leave you to use GeSHi on it afterwards.
It avoids the possible output of invalid xhtml too.

Your variable is just setting the variable. You need to call the command that the variable contains to tell CKEditor to create the new command before you set any properties on it. That's essentially why it doesn't work, as I remember. I kind of abandoned trying to use your plugin after realising how it's supposed to work but I'm pretty sure that was why.

Yes I use CKE svn. The 3.2 milestone should be nearing completion soon and your plugin does not work with it.

I'm not trying to bash your plugin because you've obviously worked hard on it but I can achieve the same effect by setting CKEditor to not destroy php tags, slap the code straight into a php variable in CKEditor and use GeSHi's pre valid option, inline. I have a working example of that.

Effectively, your plugin would be great to use with Alex Gorbatchev's highlighter instead because it is essentially just a pre formatter.
No part of your plugin actually directly uses the GeSHi class to output highlighted code. That has to be done outside of your plugin. All it does is wrap code in a pre tag.

Thanks,
Tony

Inviato da pklab 30/07/2013 | #10

Thanks Tony for information you are giving.

My plugin is dated and it should be revised.

Anyway it's usefull for when you have few lines of code that you are proving as example in your webpage.
As addiction Geshi cover a lof of language (bash too) and I found this work way usefull.
than I decided to provide my work for the community :)

cheers

Inviato da alan 21/08/2013 | #11

I tried as you advised: first extract and upload Geshi files to a folder under plugins of ckeditor 4.2 and then modified the config.js and I'm sure config.js is functional and effective.

Then I tried to use the editor and the editor showed a blank area. If I delete the two lines you advised us to do, the text area showed up again.

I had no idea what's going on. Please help. Thanks in advance.

Lascia il tuo commento:

Nome:

Email:

La email non e' obligatoria e non sara' visibile in alcun modo

Commento:


Codice di verifica:


Scrivere il codice riportato qui a sinistra
 

Note:
  • Si prega di inviare solo commenti relativi a questa pagina
  • Commenti inappropriati o offensivi saranno modificati o eliminati
  • Codici HTML sono consentiti,prego usare codici BB
  • le URL complete di "http://" o "mailto:" saranno convertite automaticamente