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

时间:2013-12-24 02:56:14

标签: javascript ckeditor

我正在使用CKEditor 4.1.1并且无法弄清楚如何在工具栏中显示“插入图像”按钮。这是config.js中我当前的CKEditor配置。

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

我该如何修改它以显示“插入图像”按钮?

我一直在阅读文档并尝试各种各样的事情,但迄今为止没有任何工作。

3 个答案:

答案 0 :(得分:2)

我过去常常遇到同样的问题。我打开了旧网站代码,为您查看:

尝试将此添加到您的config.js

config.toolbarGroups对象

中的

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

而不是

 { name: 'insert'},

如果不起作用将image替换为小写

顺便说一句,我发现这可能有用documentation

祝你好运

答案 1 :(得分:0)

首先你需要检查你的 CKEditor使用哪个css例如 CK Editor \ skins \ office2003 \ editor.css,你可以添加图像我搜索的图像按钮的图标,并检查它是否适合我

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

希望它对某人有所帮助

答案 2 :(得分:0)

确保安装映像(https://ckeditor.com/cke4/addon/image)。解压缩下载的文件,并放入ckeditor安装路径中的plugins文件夹中。之后,编辑您的config.js文件放置行,如下所示:

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

   config.extraPlugins = 'image';
});

重新加载页面并完成。