如何将插入图像按钮添加到CKEditor？

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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.