Syntax Highlighter for CK editor

[pictus]

Hello,
i wanted to add some plugins zu ckeditor, but i dont understand where to edit what. can please explain me and tell me if it works.

here is one plugin i wanted to add:
http://psykoptic.com/blog/post/2008/12/0...x#download
and a "bb code plugin". is this possible?

[datiswous]

There is a plugin for this, but I couldn't make this work with css in v.3 beta r373:

http://get-simple.info/forum/topic/1080/...or-plugin/

--------------------------------------------------------------------------------------------------------------------------
What bbcode functions you want to add?

[Connie]

first read the docs at ckeditor.net about plugins

you will see they must be installed into a certain subdirectory of CKEditpr
Check if the plugin is not already there (there are a lot of already)

then it must be activated
As I am just testing the CKEditor in GS, I am not sure whether it is possible to add this in the EDITOR-Options in the gsconfig.php or whether it must be done in the CKEditor-Configuration itself (which will be overwritten by every upgrade)

[datiswous]

The page http://psykoptic.com/blog/post/2008/12/0...x#download says:

It WON'T work with the new CKEditor (yet).

here is one plugin i wanted to add:
http://psykoptic.com/blog/post/2008/12/0...x#download
and a "bb code plugin". is this possible?

B.t.w. that plugin is for FCKeditor. I think you need this one:

http://code.google.com/p/ckeditor-syntaxhighlight/

It is a rewrite/port of the syntaxhighlight plugin for FCKEditor you mentioned.

[mikeh]

I don't know how related this is to this thread, but it is very possible to get codemirror to work with the ckeditor in getsimple. This would accomplish a syntax highlighter with the source view.. I succesfully implemented this in V3.0, but not as a plugin, by hacking up the edit.php page.

Edit (forgot the link): http://heydojo.co.cc/ckeditor-codemirror/index.html

[Connie]

I got it to work, but it is not easy as the available plugin is very poorly documented.

see a very simple example here: http://www.urbanistan.de/getsimple/syntax-1

download the plugin from http://code.google.com/p/ckeditor-syntaxhighlight/ and follow the installation

this plugin is only half the work:

- you need to load the original Syntaxhighlighter Script from
http://alexgorbatchev.com/SyntaxHighligh...iguration/

I uploaded it to admin/templates/js/syntaxhighligter

- the best would be to create a special template for pages with code and add this to the header.

Code:

<!-- SyntaxHighlighter -->
<link type="text/css" rel="stylesheet" href="admin/template/js/syntaxhighlighter/styles/shCoreDefault.css"/>
<link type="text/css" rel="stylesheet" href="admin/template/js/syntaxhighlighter/styles/shCore.css"/>
         <script type="text/javascript" src="admin/template/js/syntaxhighlighter/scripts/shCore.js"></script>
        <script type="text/javascript" src="admin/template/js/syntaxhighlighter/scripts/shBrushCss.js"></script>
         <script type="text/javascript" src="admin/template/js/syntaxhighlighter/scripts/shBrushJScript.js"></script>
         <script type="text/javascript" src="admin/template/js/syntaxhighlighter/scripts/shBrushPhp.js"></script>
         <script type="text/javascript" src="admin/template/js/syntaxhighlighter/scripts/shBrushPlain.js"></script>

- after the content in the template, you must add:

Code:

<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

in your template

to configure the editor, you have to add a button to the toolbar:
in the gsconfig.php add this to the DEFINE EDITORTOOL- Definition

Code:

'/'
    ['Code']

in the GSEDITOROPTIONS:

Code:

define('GSEDITOROPTIONS', "
    extraPlugins : 'syntaxhighlight',
   syntaxhighlighthLangDefault : 'php'
");

in the syntaxhightlightLangDefault set the Language you want, either PHP or JAVA or whatever

thats not all, in
admin/templates/js/ckeditor/config.js add this:

Code:

CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // config.toolbarCanCollapse = true; // hide toolbar collapse button
config.extraPlugins += (config.extraPlugins ? ',syntaxhighlight' : 'syntaxhighlight' );
config.toolbar_Full.push(['Code']);
};

then it should work and you can send me roses ;=)