The forum operates in read-only mode. Please head to StackOverflow for support.

Last post

Thu, 02/14/2013 - 22:02

jrhayward

Joined: 14/02/2013

Posts: 6

Plugins addButton fails with 4.01

Theis plugin stopped working with the latest version. Google Chrome reports

Uncaught TypeError: Object #<Object> has no method 'addButton'

CKEDITOR.plugins.add( "clsave",

{

init: function( editor )

{

editor.addCommand( "clsave",

{

exec : function( editor )

{

doclSave();

}

});

editor.ui.addButton( "CLSave",

Uncaught TypeError: Object #<Object> has no method 'addButton'

{

label: "Save to CL Server",

command: "clsave",

icon: this.path + 'images/save.png';

} );

}

} );

It is added via a custom config file added to the sample api.html and loaded as

// Replace the <textarea id="editor1"> with an CKEditor instance.

CKEDITOR.replace( 'editor1', { customConfig : '/ckeditorv4/clconfig.js',

on: {

focus: onFocus,

blur: onBlur,

// Check for availability of corresponding plugins.

pluginsLoaded: function( evt ) {

var doc = CKEDITOR.document, ed = evt.editor;

if ( !ed.getCommand( 'bold' ) )

doc.getById( 'exec-bold' ).hide();

if ( !ed.getCommand( 'link' ) )

doc.getById( 'exec-link' ).hide();

}

});

The custom config file has config.extraPlugins = 'clsave,clcancel,clsuspend'; // Replace the <textarea id="editor1"> with an CKEditor instance. CKEDITOR.replace( 'editor1', { customConfig : '/ckeditorv4/clconfig.js', on: { focus: onFocus, blur: onBlur, // Check for availability of corresponding plugins. pluginsLoaded: function( evt ) { var doc = CKEDITOR.document, ed = evt.editor; if ( !ed.getCommand( 'bold' ) ) doc.getById( 'exec-bold' ).hide(); if ( !ed.getCommand( 'link' ) ) doc.getById( 'exec-link' ).hide(); } } });

Fri, 02/15/2013 - 17:52

razkim

Joined: 10/02/2013

Posts: 19

Doesn't work for me either

I tried following all the steps to add a custom button to my ckeditor,

added this in plugin.js which is at plugins/abbr/plugin.js path.

CKEDITOR.plugins.add( 'abbr', {
    icons: 'abbr',
    init: function( editor ) {              
        editor.addCommand( 'abbrDialog', new CKEDITOR.dialogCommand( 'abbrDialog' ) );
        editor.ui.addButton( 'Abbr', {
            label: 'Insert Abbreviation',
            command: 'abbrDialog',
            toolbar: 'insert'
        });

        CKEDITOR.dialog.add( 'abbrDialog', this.path + 'dialogs/abbr.js' );
    }
});

In my page,I set up an extraPlugins property to the plugin I created above.

CKEDITOR.replace('editor1', {
                extraPlugins: 'abbr',
                toolbar: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo','abbr']
            });

I do not see any new button added to my CKEditor toolbar. I am also using CKEditor 4.0.1.

Fri, 02/15/2013 - 19:34

(Reply to #2) #3

jrhayward

Joined: 14/02/2013

Posts: 6

Progress Now no image on button.

razkim has what I found I needed to get further along...

I have gotten further along. It was a little hard to track down but, the direcory structure has changed. There is now an icons directory and that is where the image for the buttons evidently now go. You also have to point to the icons in a icons: parm.

I am also using a custom config and under 4.01 there is a configuration setting to list all the plugins in use. I had to copy that from config.js into my config.

For the icons change I saw this in a sample...

CKEDITOR.plugins.add( 'abbr', {
    icons: 'abbr',
    init: function( editor ) {              
        editor.addCommand( 'abbrDialog', new CKEDITOR.dialogCommand( 'abbrDialog' ) );
        editor.ui.addButton( 'Abbr', {
            label: 'Insert Abbreviation',
            command: 'abbrDialog',
            toolbar: 'insert'
        });

With that change everything works except, it does not set the image in the button. I stepped through the code and the correct path is being set in but the style background does not get set.

Fri, 02/15/2013 - 20:01

(Reply to #3) #4

jrhayward

Joined: 14/02/2013

Posts: 6

Progress Now no image on button.

razkim has what I found I needed to get further along...

I am also using a custom config and under 4.01 there is a configuration setting to list all the plugins in use. I had to copy that from config.js into my config.

For the icons change I saw this in a sample...

CKEDITOR.plugins.add( 'abbr', {
    icons: 'abbr',
    init: function( editor ) {              
        editor.addCommand( 'abbrDialog', new CKEDITOR.dialogCommand( 'abbrDialog' ) );
        editor.ui.addButton( 'Abbr', {
            label: 'Insert Abbreviation',
            command: 'abbrDialog',
            toolbar: 'insert'
        });

With that change everything works except, it does not set the image in the button. I stepped through the code and the correct path is being set in but the style background does not get set.

Fri, 02/15/2013 - 20:01

jrhayward

Joined: 14/02/2013

Posts: 6

Now working with a workaround

Tracked down the missing image getIconStyle looks up icon by the plugin name but, plugin.load calls skin.addIcon with the icon name (as specified in the plugins icons:). I worked around this by naming my icon file the same name as my plugin which is the same name on the toolbar.

I think this is a bug but, not certain if naming is enforced this way.

Fri, 02/15/2013 - 20:18

razkim

Joined: 10/02/2013

Posts: 19

jrhayward,

Glad that worked for you..

What did you do here?

"I am also using a custom config and under 4.01 there is a configuration setting to list all the plugins in use. I had to copy that from config.js into my config."

Tue, 02/19/2013 - 15:20

jrhayward

Joined: 14/02/2013

Posts: 6

Work Around

In the distributed config.js there were the following two lines...

config.plugins = 'dialogui,dialog,about,a11yhelp,dialogadvtab,basicstyles,bidi,blockquote,clipboard,button,panelbutton,panel,floatpanel,colorbutton,colordialog,templates,menu,contextmenu,div,resize,toolbar,elementspath,list,indent,enterkey,entities,popup,filebrowser,find,fakeobjects,flash,floatingspace,listblock,richcombo,font,forms,format,htmlwriter,horizontalrule,iframe,wysiwygarea,image,smiley,justify,link,liststyle,maximize,newpage,pagebreak,pastetext,pastefromword,preview,print,removeformat,save,selectall,showblocks,showborders,sourcearea,specialchar,menubutton,scayt,stylescombo,tab,table,tabletools,undo,wsc,xml,ajax,autogrow,divarea,docprops,symbol,wordcount';

  config.skin = 'kama';

I am using a custom config file so I copied those two lines into my config file. Aside from that I determined that the plugin name was being used for lookups of the icons.

The icons are stored under the name of the icon and looked up with the name of the plugin.

So I made sure that my plugin, toolbar item, and icon png file had the same name.

Wed, 02/20/2013 - 00:38

(Reply to #7) #8

jrhayward

Joined: 14/02/2013

Posts: 6

Work Around

razkim

I answered you with a followup post. I aplogize for not using the reply but, because of the long line of text, I could not find the submit button and thought it was a problem with the reply page.