CKEditor 4：在編輯器視圖中替換代碼

我的軟件允許用戶將圖片上傳到我網站上的「文件」部分。我想允許用戶將這些圖像插入到CKEditor 4實例中，但我想控制這些圖像的託管位置。CKEditor 4：在編輯器視圖中替換代碼

除了插入如下：

<img src="http://domain.com/image.jpg" />

我希望插入：

<img src="[file:12345678]" />

然後我就可以使用PHP來控制哪些網址將在網站上顯示。

問題是，在CKEditor的WYSIWYG視圖中，它顯示無法找到圖像。無論如何，我可以創建一個插件，在所見即所得視圖中用圖像代碼替換[file:12345678]，但在源視圖中，它會恢復爲[file:12345678]？

有點像BBCode插件如何工作。當你去到源視圖看到：

The [b]brown fox[/b] jumped over the log

但編輯器視圖中看到：

的的棕色狐狸躍過日誌

我試圖從BB代碼制定出碼插件，但BBCode解析器似乎是內置的東西。

我發現下面的代碼，但它只適用於源視圖。我似乎無法確定是否有所見即所得的視圖的類似功能。

editor.dataProcessor.htmlFilter.addRules(
{ 
    elements : 
    { 
     img : function(element) 
     { 
      // I can get the src of any image and then replace it. 
      element.attributes.src 
     } 
    } 
});

謝謝你可以提供任何意見;）

來源

2013-07-20 Ben Sinclair

有在htmlDataProcessor兩件式的過濾器（這是默認的數據處理器） - 這是用來過濾HTML格式htmlFilter，所以所使用的格式「編輯內部」編輯器;和用於過濾數據格式的dataFilter，因此使用「外部」編輯器的格式 - 您在源模式下看到的或您撥打editor.getData()時看到的格式。這些名稱可能會令人困惑，但是當您記住「數據」在外時會有所幫助（因爲editor.getData()）。

所以我想，當將數據加載到編輯器（將數據轉換爲HTML）時，您想用一些散列地址代替[file:\d+] URL，並且在獲取數據（將HTML轉換爲數據）時想要進行相反的轉換。

因此，您需要擴展兩個篩選器 - htmlFilter和dataFilter。這是怎樣的dataFilter可以看：

editor.dataProcessor.dataFilter.addRules({ 
    elements: { 
     img: function(el) { 
      el.attributes.src = fileIdToUrlHash[ el.attributes.src ]; 
     } 
    } 
});

類似的操作你必須在htmlFilter做。

來源

2013-07-20 09:49:39 Reinmar

CKEditor 4：在編輯器視圖中替換代碼

回答

相關問題