CKEditor图片控件配置

CKEditor的编辑器工具栏中有一项“图片域”，该工具可以贴上图片地址来在文本编辑器中加入图片，但是在默认状态下其中没有图片上传标签。

本文将对图片工具各标签的样式及功能的自定义进行初步探讨。

图片插件的配置文件位于ckeditor\plugins\image\dialogs\image.js
本文中的代码操作均为对此文件的操作。

标签顺序

搜索“contents”
整理后可以看到如下结构：

contents: [
{
     id: "info", label: d.lang.image.infoTab, accessKey: "I", elements:...
},
{
    id: "Link",  requiredContent: "a[href]", label: d.lang.image.linkTab, padding: 0, elements:...
},
{
    id: "Upload", hidden: !0, filebrowser: "uploadButton", label: d.lang.image.upload, elements:...
},
{
    id: "advanced", label: d.lang.common.advancedTab, elements:...
}]

将4个花括号中的内容调换顺序即可实现对标签的自定义排序

“上传”标签

从上面的结构中可以看出，“上传”标签的功能其实是仍然存在，只是被隐藏了，找到代码中的如下片段：

{
    id: "Upload", hidden: !0, filebrowser: "uploadButton", label: d.lang.image.upload, elements:...
},

将其中的hidden: !0修改为hidden: !1或删除之，即可使上传标签显示出来。

“预览”标签中的英文

“预览”中有一大堆英文，这对于中国的用户来说，可能有些难以接受。
搜索config.image_previewText，将(X.config.image_previewText||'')引号中的内容全删了，其中X根据版本不同，可能是任意数字，引号也可能有单引号及双引号的区分，这些均不影响本操作的有效性。