CODEWITHSUNDEEP
javascriptcssckeditor
benua
benua

Reputation: 195

Adding buttons with different width and horizontal separator in CKEditor

Is it possible to add several wider buttons to the CKEditor toolbar?

I know how to make all of them wider by changing width parameter in editor.css:

CSS

but I only need several buttons, in similar to "source button" style:

Source

Any hints?

UPDATE

Ok, lets say I want to widen icon of this plugin: 

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

and former result I got by adding this:

.cke_button_insertTimestamp { width: 32px !important; }

this doesn't change anything:

#cke_11 {
    width: 32px ;
}

no matter what integer I choose, and I don't see any integers like you mentioned while inspecting. I have CKEditor build in IPBoard maybe that's the issue?

What should I add? Sorry for me being noob

UPDATE

Ok I got this at last and have identical results - half icon. Is it about this .cke_icon class which defines 16px width? Many icons share this class. Don't know how to get around or delete it

UPDATE

#cke_61 .cke_icon { width:32px; }

This code did the job thanks a million!

Final question, how do I add horizontal separator below my new icon row like other rows have:

enter image description here

Vertical one I've added in ips_config.js using this:

['Timestamp'],['-'],

but horizontal I have no idea

Upvotes: 1

Views: 1952

Answers (1)

allcaps
allcaps

Reputation: 11228

Every button has an unique id. A line of CSS is all that is needed to adjust the width of a button:

#cke_11 { width: 120px; }

Cut at 120px;

#cke_11 is the first button (cut) on the demo page.

All buttons contain a label. This label is a string of text and hidden with .cke_button_label { display: none; }. If you remove this line of CSS or set the value to inline. You'll get this:

All buttons with label

That is the reason the Source button is wider. Source button has a class cke_button__source_label. This class sets display to inline.

If you only want to show a single label:

#cke_11_label { display: inline; }

Cut button with label

Use your Developer Tools that come with your browser to inspect elements and fiddle with the css.

Upvotes: 2

Related Questions