javascript - How to add Insert Image button to CKEditor? - Stack Overflow

admin管理员组

文章数量:1379475

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 plete reference:
    // !/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.

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 plete reference:
    // http://docs.ckeditor./#!/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.

• javascript
• ckeditor

Share Improve this question Follow edited Dec 24, 2013 at 3:49 Nate asked Dec 24, 2013 at 2:56 NateNate 28.6k3939 gold badges136136 silver badges228228 bronze badges 2

• you want to add the an insert image into the CKEDITOR ? or upload ? – Yehia Awad Commented Dec 24, 2013 at 3:00
• @яша - Just add the button that allows you to insert a link to an images, not uploading anything.. – Nate Commented Dec 24, 2013 at 3:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

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

Make sure you install the Image (https://ckeditor./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.

本文标签： javascriptHow to add Insert Image button to CKEditorStack Overflow