gregb's picture
Joined: 19/06/2009
Posts: 11
Another Plugin Question
I've written a small plugin using the instructions at http://syrinx.ph/articles/CkEditorPluginGuide.aspx

My plugin.js looks like this:
(function(){  
   var a={
       exec:function(editor){
      alert("Got to the new plugin");
      
      }
   }
      
     b='examenLink';  
     CKEDITOR.plugins.add(b,{  
         init:function(c){  
             c.addCommand(b,a);  
             c.ui.addButton('ExamenLink',{  
                 label:'Link',   
                 icon: this.path + 'images/anchor.gif',  
                 command:b  
             });  
         }  
     });      
 })();
   

That code is in the examenLink directory under the ckeditor/plugins directory.


My tool bar configuration looks like this:
      config.toolbar_SimpleMessageToolbar =
        [
           ['Source','Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker','-','Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
           '/',
           ['Bold','Italic','Underline','Strike','-','Subscript','Superscript','-','NumberedList','BulletedList','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','Link','Unlink','Anchor'],
           '/',
           ['ExamenLink','Bold'],
           '/',
           ['Styles','Format','Font','FontSize','-','TextColor','BGColor','-','Maximize']
      ];


I should see my new plugin as the first icon of the 3rd row of the tool bar. However, it doesn't show up.

I see these sentences in the plugin article : "You can repackage the editor into a new ckeditor.js so that it includes your custom plug-ins or modifications to the standard plug-ins. This is discussed later in the documentation."

A) I really don't want to modify the obfuscated ckeditor.js source file.
B) There must be a better way to register my plugin than modifying the source code. There's got to be a more reasonable way.
C) "This is discussed later in the documentation." is not discussed later in the doc.

There must be a third step which I'm missing. Can anyone point me in the right direction? How do I make my new plugin show up on my tool bar?

Thank you

Greg
shri046's picture
Joined: 08/04/2008
Posts: 56
Re: Another Plugin Question
I tried your code as is throwing it in the plugins folder and adding the definition to the custom toolbar. The only extra option I had to use to get the button to show up was extraPlugins : 'examenLink'. Below is an example of how I called the editor

CKEDITOR.replace( 'editor1',
   {
      linkShowAdvancedTab : false,
      linkShowTargetTab : false,
      toolbarCanCollapse : false,
      removePlugins : 'elementspath',
      extraPlugins : 'examenLink',
      toolbar : [
                     ['Undo','Redo','-','Cut','Copy','Paste'],
                     ['ExamenLink','Bold','Italic','Underline',],
                     ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                     ['Link','Unlink','Anchor','-','Source','Maximize']
                ]
   });


One thing you will need to make sure though is that you are working with the _source files and not the compressed ckeditor.js file. To do that you simply incude the ckeditor_source.js file instead of ckeditor.js file in your page.

<script type="text/javascript" src="../ckeditor_source.js"></script>


As for your other questions -
A) I really don't want to modify the obfuscated ckeditor.js source file.
>> In my opinion you really shouldn't be modifying the ckeditor.js file directly. It contains a lot of special characters/symbols which may get corrupted if the file encoding is not maintained. Of course the code itself is not supposed to be user friendly as it has been compressed.

B) There must be a better way to register my plugin than modifying the source code. There's got to be a more reasonable way.
>> Adding a new plugin to CKEditor would be considered as a development effort so you have to work with the source files first to get your code working and then package/release it for use.

C) "This is discussed later in the documentation." is not discussed later in the doc.
>> By this I think you mean the steps to actually "repackage" the source files to generate the compressed ckeditor.js file. This is quite a simple step actually and I'd be glad to help you out with it.

But first test your plugin with the source files to make sure it is working. I can add to the thread with directions on how to package the source files once you get your plugin working :)

Hope that helps,
Shri
gregb's picture
Joined: 19/06/2009
Posts: 11
Re: Another Plugin Question
Awesome, I'll try that. As I'm working with that I'd like to have your instructions for repackaging the _source js files.

Thank you for the quick response.

Greg
shri046's picture
Joined: 08/04/2008
Posts: 56
Re: Another Plugin Question
Oh I forgot to ask, what platform are you working on? I've used the packager tool on Windows XP and I think the directions may be a bit different for Unix platforms.

And also as a side note, it is not absolutely necessary that you have to package your plugin with the other source files. If you get your plugin to work in the _source directory, then you can also just copy it to the ckeditor\plugins directory (under the main ckeditor folder) and then include the ckeditor.js file in your page with the same config options. That should work too.

Repackaging the files I think would be needed (recommended) if your plugin code is quite large and you see performance impacts. I don't have any metrics with me on when and why custom plugins should or should not be packaged. I'll leave that question to be answered by the developers.
gregb's picture
Joined: 19/06/2009
Posts: 11
Re: Another Plugin Question
I will be doing the development and repackaging on a Windows box. The code, ultimately will run on a Unix server but that shouldn't effect the process once it's packaged.
shri046's picture
Joined: 08/04/2008
Posts: 56
Re: Another Plugin Question
What you will need for packaging the files is a tool called CKPackager http://svn.fckeditor.net/CKPackager/trunk/bin/. I am not sure if there is another place where you can download it from but I work directly with the SVN so I have it checked out directly from there. What you would need from that page is those two files, the .exe and .jar.

Now I myself haven't played a lot with the packager tool and its options but have successfully been able to package the source files. So here are the steps -

1. Place both those files in your main ckeditor directory. Doesn't have to be in the same directory really but I just do it for the ease of command line use.
2. In your root ckeditor folder open the file named ckeditor.pack. This file contains the definitions/declarations for the source files being packaged. Under output : 'ckeditor.js' if you scroll to the bottom you will see how the other plugins are referenced to be packaged in the ckeditor.js file. Add your custom plugin definition to the end of the file, example in your case '_source/plugins/examenLink/plugin.js'.
3. Open the command prompt to your ckeditor root directory and run the following (Note: The -v at the end is optional. It just spits out a verbose log of all the files that got packaged and the compression details.)
ckpackager.exe ckeditor.pack -v

And that should be it. Your custom plugin should now be included in the "repackaged" ckeditor.js file and ready for use.

Hope that helps,
Shri
gregb's picture
Joined: 19/06/2009
Posts: 11
Re: Another Plugin Question
Excelent Advice! Thank you very much.

I'll be trying this today and I'll let you know how it goes.
gregb's picture
Joined: 19/06/2009
Posts: 11
Re: Another Plugin Question
Aarrggh! I had written a long post and then lost it. I'll try again:

I repackaged my code and tried it but the editor didn't show up at all. That turned out to be a javascript error in my plugin. I was missing a comma just before the line that said
b='examenLink';

After fixing that the editor did show up. If I look inside the newly created (and obfuscated) ckeditor.js file I can find my examenLink code.

However, I can't get the darn icon to show up in the toolbar.

So I tried re-writing my code to match the style used in the existing plugins/link/plugin.js code. That code looks like this:

// This odd java formatting is documented in the CKEDitor plugin guide
// http://syrinx.ph/articles/CkEditorPluginGuide.aspx
CKEDITOR.plugins.add( 'examenLink',
{
   init : function( editor )
   {
      editor.addCommand( 'examenLink', new CKEDITOR.examenLinkCommand() );
      editor.ui.addButton( 'ExamenLink',
         {
            label : editor.lang.link.toolbar,
            command : 'examenLink',
            icon: this.path +'anchor.gif'
         } );
      
      // I'm not sure I need this
      // Add the CSS styles for anchor placeholders.
      editor.addCss(
         'img.cke_anchor' +
         '{' +
            'background-image: url(' + CKEDITOR.getUrl( this.path + 'images/anchor.gif' ) + ');' +
            'background-position: center center;' +
            'background-repeat: no-repeat;' +
            'border: 1px solid #a9a9a9;' +
            'width: 18px;' +
            'height: 18px;' +
         '}\n' +
         'a.cke_anchor' +
         '{' +
            'background-image: url(' + CKEDITOR.getUrl( this.path + 'images/anchor.gif' ) + ');' +
            'background-position: 0 center;' +
            'background-repeat: no-repeat;' +
            'border: 1px solid #a9a9a9;' +
            'padding-left: 18px;' +
         '}'
            );

   }
});

CKEDITOR.examenLinkCommand = function(){};
CKEDITOR.examenLinkCommand.prototype =
{
   /** @ignore */
   exec : function( editor )
   {
      alert("Got here");
   }
};


This also compiles and it's pretty much the same code as my original plugin. It just uses a different format.

So I think we're very close. I just need to figure out how to make the icon appear.
gregb's picture
Joined: 19/06/2009
Posts: 11
Re: Another Plugin Question
Aha! The existing toolbar icons are all strung together in icons.png. I'll have to figure out how CKEditor indexes into that png file and gets the icon.
shri046's picture
Joined: 08/04/2008
Posts: 56
Re: Another Plugin Question
Well if the icon showed up when you were working with the _source files it should work with the compressed file as well. Remember that there is a "plugins" folder under the root ckeditor as well. I think you can place your custom plugin directory (with the "images" directory) under ckeditor\plugins the icon should be displayed.

As I said before it is not absolutely necessary that you package your plugin code with the ckeditor.js and it can be just placed under the root directory as is ;)
gregb's picture
Joined: 19/06/2009
Posts: 11
Re: Another Plugin Question
I never got the icon to show up via the _source directory either.

I see that the icons.css file has the type cke_button_link which gives the index into the icons.png file. That's appears to be how the ckeditor finds the icon for the existing link toolbar button.

I'll keep searching to see how ckeditor makes that connection between the link button and the icons.css file.
I know that the code that is rendered in the toolbar is

<a id="cke_33" class="cke_off cke_button_link" onclick="CKEDITOR.tools.callFunction(30, this); return false;" onfocus="return CKEDITOR.ui.button._.focus(27, event);" onkeydown="return CKEDITOR.ui.button._.keydown(27, event);" onblur="this.style.cssText = this.style.cssText;" hidefocus="true" role="button" tabindex="-1" title="Link" href="javascript:void('Link')" style="">
<span class="cke_icon"/>
<span class="cke_label">Link</span>
</a>


Once I figure out how the toolbar button renders the
class="cke_off cke_button_link"
I think I'll have it.
shri046's picture
Joined: 08/04/2008
Posts: 56
Re: Another Plugin Question
I actually was able to get the image to show up both in the _source folder and the root folder. You just have to make sure your image path in the plugin definition matches the actual folder path. So for example the plugin.js is in the _source folder and the image path is as below then the image needs to be under ckeditor\_source\plugins\examenLink\images\anchor.gif.

      editor.ui.addButton( 'ExamenLink',
         {
            label : editor.lang.link.toolbar,
            command : 'examenLink',
            icon: this.path + 'images/anchor.gif'
         } );


If it is under the root plugins folder then the path should be ckeditor\plugins\examenLink\images\anchor.gif. I tested both cases and the image showed up just fine for me.
gregb's picture
Joined: 19/06/2009
Posts: 11
Re: Another Plugin Question
Got it!

You know what I missed? The addition of the line
extraPlugins : 'examenLink',
in my CKEditor.replace.


You told me that way back at the beginning and I missed it.

I really do appreciate the help you've given me. If you ever come to the Sacramento area I owe you a beer or two ;) Thank you very much for all your help.

Greg
shri046's picture
Joined: 08/04/2008
Posts: 56
Re: Another Plugin Question
Not a problem. Glad to be of help :)