修改CKEditor鏈接對話框以將鏈接添加到自定義屬性

我在網站上使用CKEditor，我需要能夠在通過編輯器創建的某些鏈接上放置特殊的數據屬性。用戶可以通過選中鏈接對話框中的複選框來指示他們需要放置在鏈接上的特殊屬性。我設法添加一個複選框到鏈接對話框，下面的代碼：修改CKEditor鏈接對話框以將鏈接添加到自定義屬性

CKEDITOR.on('dialogDefinition', function(ev) { 
    if (ev.data.name == "link") { 
     var info = dialog.getContents("info"); 
     info.elements.push({ 
      type: "vbox", 
      id: "urlOptions", 
      children: [{ 
       type: "hbox", 
       children: [{ 
        id: "button", 
        type: "checkbox", 
        label: "Button", 
        commit: function(data) { 
         data.button = this.getValue() 
         console.log("commit", data.button, data); 
        }, 
        setup: function(data) { 
         this.setValue(data.button); 
         console.log("setup", data.button, data); 
        } 
       }] 
      }] 
     }); 
    } 
});

現在我有兩個問題。第一個問題是，儘管我在commit和setup函數中添加了應該保存複選框狀態的代碼，但它不起作用。就好像data不能保存任何其他參數，但默認情況下那些參數。

第二個問題是我不知道如何添加/刪除我的鏈接上的數據屬性。在我看來，我應該在對話框的onOk回調中這樣做，但是，鏈接對話框已經有onOk回調，所以我不知道應該如何繼續。我當然不想直接修改CKEditor的任何文件。

我該如何做到這些？

來源

2012-10-15 Alex Turpin

你最好的選擇是修改插件。所以你需要打開源代碼並找到文件links.js在c:\ckeditor_3.6.5\ckeditor\_source\plugins\link\dialogs\

源代碼是相當大的（40k），但在這裏你可以修改對話框，但是你想要的。當你完成後只需將它複製到你的插件文件夾，並壓縮它：http://jscompress.com/

我已經做了你需要我自己。整個壓縮的文件是在這裏：https://gist.github.com/3940239

你需要做什麼：

首先就在對話框中的「瀏覽」按鈕，追加前加入這一行。約。在行：547：

     { 
          id: "button", 
          type: "checkbox", 
          label: "Button", 
          setup: function (data) { 
           this.allowOnChange = false; 

           if (data.button) 
            this.setValue(data.button); 

           this.allowOnChange = true; 
          }, 
          commit: function (data) { 
           data.button = this.getValue() 
           this.allowOnChange = false; 
          } 
         },

這部分其實是你的代碼。我只是複製並粘貼它。

然後，轉到onOk功能，約。在1211線：和commitContent後添加以下代碼：

this.commitContent(data); 

//My custom attribute 
if (data.button) 
    attributes["custom-attribute"] = "button"; 
else 
    attributes["custom-attribute"] = "";

這將修改你的鏈接添加屬性元素，例如<a href="#" custom-attribute="button">text</a>

就是這樣。雖然，您可能還想加載複選框的當前狀態。然後，轉到功能parseLink。約。第179行加載屬性：

... 
if (element) 
{ 
    retval.button = element.getAttribute('custom-attribute'); 

    var target = element.getAttribute('target'); 
...

來源

2012-10-23 17:35:15

這是非常好的，但我擔心更新CKEditor並覆蓋這些更改後。你確定沒有辦法修改文件本身嗎？ –

我不認爲有另一種方式來做到這一點。我明白了你的觀點，但你只需對源代碼中的1個文件進行3個小改動，這需要1分鐘才能完成。您可以隨時備份「鏈接」文件夾並將其視爲插件。所以如果你需要更新，你總是會解壓縮包含你自己功能的文件。 –

@ Xeon06你試過了嗎？讀取CKEditor的源代碼時，鏈接對話框不會將這些功能公開給主配置。修改源代碼是唯一的解決方案。 –

我現在正在探索同樣的事情。我已經決定在這一點上做的是：

獲取基本CKEditor的安裝沒有鏈接插件
創建自己的鏈接插件的叉，並添加我的更改，然後激活和使用這個插件內的組連接正常顯示英寸

...使用它作爲自定義插件（儘管是原件的副本）應該可以緩解升級問題。你只是根本不使用原始鏈接插件。複製並重命名它，然後使用您的自定義副本。

來源

2013-03-02 18:55:45

修改CKEditor鏈接對話框以將鏈接添加到自定義屬性

回答

相關問題