javascript 如何将插入图像按钮添加到 CKEditor？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20754248/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add Insert Image button to CKEditor?
提问by Nate
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 4.1.1 并且无法弄清楚如何在工具栏中显示“插入图像”按钮。这是我当前在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.
我一直在阅读文档并尝试各种方法，但到目前为止没有任何效果。
回答by Yehia Awad
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
尝试将此添加到您的 config.js
in the config.toolbarGroupsObject
在config.toolbarGroups对象中
{ name: 'insert', items: [ 'Image']},
instead of
代替
{ name: 'insert'},
if that doesn't work replace imagewith lowercase
如果这不起作用，请替换image为小写
Btw I have found this documentationwhich might be helpful
顺便说一句，我发现这个文档可能会有所帮助
Good Luck
祝你好运
回答by Sadda-shutu
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
首先你需要检查你的 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;
}
hopes it helps some one
希望它可以帮助某人
回答by softboxkid
Make sure you install the Image (https://ckeditor.com/cke4/addon/image). Extract the downloaded file, and put into pluginsfolder in ckeditor installation path. after that, edit your config.js file put line like below:
确保安装图像 ( https://ckeditor.com/cke4/addon/image)。解压下载的文件，放入pluginsckeditor安装路径下的文件夹中。之后，编辑您的 config.js 文件放置行，如下所示：
CKEDITOR.editorConfig = function( config ) {
.....
config.extraPlugins = 'image';
});
Reload your page and done.
重新加载您的页面并完成。
