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根據版本不同，可能是任意數字，引號也可能有單引號及雙引號的區分，這些均不影響本操作的有效性。