How to add Insert Image button to CKEditor?

12,157

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

Share:
12,157
Nate
Author by

Nate

I'm a senior in college, majoring in EE and minoring in CS, with a passion for electronics and programming. I'm an entrepreneur and started a small hobby electronics company called FoxyTronics a few years ago, and am now working on launching a shopping website called PriceWombat.

Updated on June 04, 2022

Comments

  • Nate
    Nate almost 2 years

    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.