CODEWITHSUNDEEP
javascriptckeditor
Nate
Nate

Reputation: 28444

How to add Insert Image button to CKEditor?

I'm using CKEditor 4.1.1 and can't figure out how to show the Insert Image button in th toolbar. This is my current CKEditor configuration in config.js.

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For the complete reference:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for a single toolbar row.
    config.toolbarGroups = [
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'forms' },
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'tools' },
        { name: 'others' },
        { name: 'about' }
    ];

    // The default plugins included in the basic setup define some buttons that
    // we don't want too have in a basic editor. We remove them here.
    config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript,Font,SpellChecker';

    config.disableNativeSpellChecker = false;
    config.removePlugins = 'scayt,menubutton,contextmenu';

    // Let's have it basic on dialogs as well.
    config.removeDialogTabs = 'link:advanced';
};

How should I modify this to show the Insert Image button?

I have been reading the documentation and trying various things, but nothing has worked thus far.

Upvotes: 3

Views: 13536

Answers (3)

softboxkid
softboxkid

Reputation: 908

Make sure you install the Image (https://ckeditor.com/cke4/addon/image). Extract the downloaded file, and put into plugins folder in ckeditor installation path. after that, edit your config.js file put line like below:

CKEDITOR.editorConfig = function( config ) {
.....

   config.extraPlugins = 'image';
});

Reload your page and done.

Upvotes: 0

Sadda-shutu
Sadda-shutu

Reputation: 1309

first you need to check your CKEditor Which css using for example CK Editor\skins\office2003\editor.css in that you can add image the icon of image button i searched and checked it works for me 

.cke_skin_office2003 .cke_button a.cke_button_ICONNAME .cke_icon
{
    background-image:url(ICONNAME.png);
    background-repeat:repeat; 
    background-position:0px;
}

hopes it helps some one

Upvotes: 0

Yehia Awad
Yehia Awad

Reputation: 2978

I used to have the same issues long time ago. I have opened my old site code to check it out for you :

try to add this to your config.js

in the config.toolbarGroups Object

 { name: 'insert', items: [ 'Image']},

instead of

 { name: 'insert'},

if that doesn't work replace image with lowercase

Btw I have found this documentation which might be helpful

Good Luck

Upvotes: 2

Related Questions