CKEditor 4
Tue, 10/27/2009 - 14:16
#1
gregb
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  
             });  
         }  
     });      
 })();
   

Top
Tue, 10/27/2009 - 15:57
shri046
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']
                ]
   });

Top
Tue, 10/27/2009 - 16:02
gregb
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
Top
Tue, 10/27/2009 - 16:10
shri046
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.
Top
Tue, 10/27/2009 - 17:44
gregb
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.
Top
Wed, 10/28/2009 - 16:11
shri046
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

Top
Wed, 10/28/2009 - 17:47
gregb
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.
Top
Wed, 10/28/2009 - 22:05
gregb
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");
   }
};

Top
Wed, 10/28/2009 - 22:11
gregb
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.
Top
Wed, 10/28/2009 - 22:50
shri046
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 ;)

Top
Wed, 10/28/2009 - 23:05
gregb
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.
Top
Thu, 10/29/2009 - 15:17
shri046
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.
Top
Thu, 10/29/2009 - 16:38
gregb
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

Top
Fri, 10/30/2009 - 15:56
shri046
shri046's picture
Joined: 08/04/2008
Posts: 56

Re: Another Plugin Question

Not a problem. Glad to be of help :)

Top
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check