How can I add a new customize control in the toolbar?

you must create a new plugin for ckeditor. In the plugin you use addButton (http://docs.cksource.com/ckeditor_api/s ... #addButton).
And you included your custom plugin in your config file with extraPlugins ((http://docs.cksource.com/ckeditor_api/s ... traPlugins)

Please forgive me for jumping in. I like to do the same and have been trying to understand the documentation, but I can't get my head around it.

I like to create a button "Hyphen" which inserts the code (entity) '­' into a document. When I apply what I read I would write:

// Add a new button named "Hyphen".
editorInstance.ui.add( 'Hyphen', CKEDITOR.UI_BUTTON,
    {
        label : 'Hyphen',
        command : '­'
    });

into a new file with the name plugins.js in a new folder with the name panel?

In the config.js I would add:

config.extraPlugins = 'Hyphen';

Would that work? How would that button get an image?

Please advise.

Kind regards,

Frank

ckeditor/

config.js
plugin/

hyphen/

plugin.js
images/

icon.gif

plugin.js

CKEDITOR.plugins.add('hyphen',{
  init:function(editor){
    editor.addCommand( 'hyphen', {
        exec : function(editor) {
            editor.insertHtml('-');
        }
    });
    editor.ui.addButton('Hyphen',{
      label : 'Hyphen', 
      command : 'hyphen',
      icon : this.path + 'images/icon.gif'
    });
  }
});

config.js

CKEDITOR.editorConfig = function( config ) {
  config.extraPlugins = 'hyphen';
};
CKEDITOR.config.toolbar_Basic = [
   ['Source','Bold','Italic','-','NumberedList','BulletedList','-','Link','Unlink'],['Hyphen']
];

Great writeup. Your line:

editor.setData(editor.getData()+'-');

That just sticks the hyphen on the end of the document right? It doesn't actually insert it at the insertion point?

It looks like the insertSpecialChar function in specialchar/dialogs/specialchar.js properly inserts the character and handles the selection... but that's quite a bit of code!

Yes my bad, juste replace

editor.setData(editor.getData()+'-');

by

editor.insertHtml('-');