Plugin does not load icon

I created a custom plugin to use Keyoti RapidSpell on my CKEditor. I was able to create the element in the toolbar and the functionality works. But the icon is not showing in the toolbar. The tooltip shows up and the colour changes when I hover over it.

Here is the code for my initialisation.

CKEDITOR.plugins.add('spell',
    {
        icons: 'spell',
        init: function (editor) {
            editor.addCommand('spellCheck', {
                exec: function (editor) {
                    rapidSpell.ayt_staticMode = false;
                    rapidSpell.ayt_aytEnabled = false;
                    spell('cke_contents_Model_NoteText', 'dialog');
                }
            });
 
            editor.ui.addButton('Spell', {
                label: 'Spell Check',
                command: 'spellCheck'
                //toolbar: 'Full'
            });
        }
    });

I have the icon created as a 20x20 png image and it has the same name as the name of my plugin. I tried using 'spell' as well as 'spell.png' to define the icon with no luck. Can someone tell me what I am doing wrong.

Attachments:

Screenshot

Thu, 02/20/2014 - 11:02

Anna

Joined: 14/12/2010

Posts: 1369

Aren't you using CKEditor 4

Aren't you using CKEditor 4 code in CKEditor 3? The plugin tutorials for CKEditor 3 are here: http://docs.cksource.com/CKEditor_3.x/Tutorials and it seems some icon stuff was done differently then. See the most basic example:

CKEDITOR.plugins.add( 'timestamp',
{
	init: function( editor )
	{
		editor.addCommand( 'insertTimestamp',
			{
				exec : function( editor )
				{    
					var timestamp = new Date();
					editor.insertHtml( 'The current date and time is: <em>' + timestamp.toString() + '</em>' );
				}
			});
		editor.ui.addButton( 'Timestamp',
		{
			label: 'Insert Timestamp',
			command: 'insertTimestamp',
			icon: this.path + 'images/timestamp.png'
		} );
	}
} );

Documentation Manager, CKSource

See CKEditor 5 docs, CKEditor 4 docs, CKEditor 3 docs, CKFinder 3 docs, CKFinder 2 docs for help.
Visit the new CKEditor SDK for samples showcasing editor features to try out and download!

Fri, 02/21/2014 - 16:30

(Reply to #2) #3

avsln

Joined: 19/02/2014

Posts: 5

Thanks

Looks like that is what I did :-)

I changed my code to what you suggested and it works. Thanks for the reply.