CKEditor 4
Tue, 10/27/2009 - 14:16
#1
gregb
gregb's picture
Joined: 19/06/2009
Posts: 11

Another Plugin Question

http://syrinx.ph/articles/CkEditorPluginGuide.aspx


(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  
             });  
         }  
     });      
 })();
   






      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']
      ];














Top
Tue, 10/27/2009 - 15:57
shri046
shri046's picture
Joined: 08/04/2008
Posts: 56

Re: Another Plugin Question

extraPlugins : 'examenLink'

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']
                ]
   });





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




>> 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.


>> 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.


>> 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.

:)


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

http://svn.fckeditor.net/CKPackager/trunk/bin/




ckeditor.packoutput : 'ckeditor.js''_source/plugins/examenLink/plugin.js'
-v
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












// 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



;)
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










;)

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

Re: Another Plugin Question

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