How to add custom toolbar item ?

noneda wrote:Hi,

Do anyone know how to add a custom item in the toolbar and fire our own custom code for that ?

Regds,
noneda

Hi,
After some hours investigating this, I could achieve what I was looking for: A custom Toolbar Button which opens a popup window with my custom made Picture Gallery dialog, made on .NET .

Hope this helps, here's what I've made (procedures and code):
1 - Create a new folder for your plugin on /ckeditor/plugins folder. ex: /ckeditor/plugins/newplugin
2 - Inside this newplugin folder, create a JS file: ex. plugin.js
3 - Copy a toolbar button icon image to this newplugin folder. This can be a gif/jpg/etc..
4 - Edit the /ckeditor/config.js.

If you are using CKEditor version 3.3.X (and maybe on some earlier versions), your /ckeditor/config.js file looks like this:

CKEDITOR.editorConfig = function( config )
{
   // Define changes to default configuration here. For example:
   // config.language = 'fr';
   // config.uiColor = '#AADC6E';
};

In my case, I have a customized toolbar, showing some ckeditor toolbar buttons only.
Also, I've specified my newplugin in this section.
My /ckeditor/config.js file looks like this:

CKEDITOR.editorConfig = function( config )
{
   // Define changes to default configuration here. For example:
   // config.language = 'fr';
   // config.uiColor = '#AADC6E';

   //--------------------

   // Referencing the new plugin
   config.extraPlugins = 'newplugin';

   // Define the toolbar buttons you want to have available
   config.toolbar = 'MyToolbar';
   config.toolbar_MyToolbar = 
      [
         ['Newplugin', 'Preview'],
         ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Scayt'],
         ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat']
      ];
};

Finally, here's my /ckeditor/plugins/newplugin/plugin.js file:

CKEDITOR.plugins.add('newplugin',
{
    init: function (editor) {
        var pluginName = 'newplugin';
        editor.ui.addButton('Newplugin',
            {
                label: 'My New Plugin',
                command: 'OpenWindow',
                icon: CKEDITOR.plugins.getPath('newplugin') + 'mybuttonicon.gif'
            });
        var cmd = editor.addCommand('OpenWindow', { exec: showMyDialog });
    }
});
function showMyDialog(e) {
    window.open('/Default.aspx', 'MyWindow', 'width=800,height=700,scrollbars=no,scrolling=no,location=no,toolbar=no');
}

I'm using CKEditor version 3.3.2

Good luck, and sorry for my bad english.
JL
(Portugal)

thanks for the post.

I have a question.

I want to change the function and add this function :

Add "Hello" into the ckeditor when i press my new button.

Do you have an idea ?

drweb001 wrote:thanks for the post.

I have a question.

I want to change the function and add this function :

Add "Hello" into the ckeditor when i press my new button.

Do you have an idea ?

Hi,
Inserting some text into ckeditor is quite simple.
You can use exactly the same code posted above. Just modify the function showMyDialog(e) .
Instead of opening a dialog window, use insertHtml function:

function showMyDialog(e) {
    var oEditor = CKEDITOR.instances.editor1;
    oEditor.insertHtml('Hello');
}

NOTE: CKEDITOR.instances.editor1
'editor1' is the textarea Id used by ckeditor.

Good luck.

thanks

I find the solution between my answer and your respons.

Here find my solution :

You add a directory name Hello in the plugin folder.
Add a plugin.js into this directory and also logo_ckeditor.png with 16*16 px

        CKEDITOR.plugins.add('Hello',
    {
        init: function (editor) {
            var pluginName = 'Hello';
            editor.ui.addButton('Hello',
                {
                    label: 'Hello',
                    command: 'OpenWindow1',
                    icon: CKEDITOR.plugins.getPath('Hello') + 'logo_ckeditor.png'
                });
            var cmd = editor.addCommand('OpenWindow1', { exec: showMyDialog1 });
        }
    });
    function showMyDialog1(e) {
       e.insertHtml(' Hello ');
    }

    
    

and add the button here : config.js

CKEDITOR.editorConfig = function( config )
{
    config.extraPlugins = 'Hello,Hello2';
    config.toolbar = 'MyToolbar';

    config.toolbar_MyToolbar =
    [
        ['Save','-','Source','Preview','-','Templates'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
        ['Undo','Redo','-','Find','Replace'],
        ['Link','Unlink','Anchor'],
        '/',        
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
         '/',
        ['Styles','Format','Font','FontSize'],
        ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
        ['Maximize'],
         '/',
        ['Hello','Hello2']
        ,
    ];
};

Warning, if you want to add an other custom button, create a new Hello2 directory, change the buttonname, but also :
OpenWindow1 and showMyDialog1 function name for each new buttons