2011-07-08 39 views
4

當前在CKEditor中內置了一個iframe插件,該插件允許將iframe插入到編輯器中,但無論iframe中的內容如何,​​都會顯示一個相當醜陋的佔位符。我正在研究一個插件,該插件從用戶獲取視頻ID並構建一個指向頁面的iframe,以在我們的網站上顯示視頻。我想爲我的用戶可以看到一個佔位符,清楚地表明,他們已經插入了一個視頻:我的自定義CKEditor插件如何正確插入帶有唯一佔位符圖像的特殊iframe?

醜陋的iframe佔位符: Ugly iframe placeholder

漂亮的視頻佔位符: Pretty video placeholder

爲了得到這遠遠我把這一點的Javascript添加到我的插件的onOk函數。我已經包含上下文:

onOk: function() { 
    var videoID = this.getValueOf('info', 'video_id'); 
    var caption = this.getValueOf('info', 'caption'); 
    var display = this.getValueOf('info', 'display'); 
    var size = this.getValueOf('info', 'size'); 
    var width = size * 160; 
    var height = size * 120; 

    if (videoID.length > 0) { 
     if (display == 0) { 
      e.insertHtml("<a onclick=window.open(this.href,this.target,'width=" + width + ",height=" + height + "'); return false; target=newVideo href=/kbs/Video.aspx?videoId=" + videoID + "&amp;Width=" + width + "&amp;Height=" + height + ">" + caption + "</a>"); 
     } else {/*Here is the relevant code that is applied when display is set to embedded*/ 
      var iframeNode; 
      //iframeNode = "<iframe height='" + (height + 40) + "' width='" + (width + 40) + "' src='/kbs/Video.aspx?videoId=1&height=" + height + "&width=" + width + "' frameBorder='0' scrolling='no'></iframe>"); 
      iframeNode = new CKEDITOR.dom.element('iframe'); 
      iframeNode.setAttribute('class', 'GROK-Video'); 
      iframeNode.setAttribute('height', height+40); 
      iframeNode.setAttribute('width', width + 40); 
      iframeNode.setAttribute('src', '/kbs/Video.aspx?videoId=1&height=' + height + '&width=' + width); 
      iframeNode.setAttribute('frameBorder', 0); 
      iframeNode.setAttribute('scrolling', 'no'); 
      var newFakeImage = e.createFakeElement(iframeNode, 'cke_GROKVideo', 'iframe', true); 
      e.insertElement(newFakeImage); 
     } 
    } 
} 

魔法在編輯器的createFakeElement函數中。它取代了我的iframe與被顯示爲任何圖像I與該位CSS在我plugin.js選擇一個虛設的元素:

editor.addCss(
    'img.cke_GROKVideo' + 
    '{' + 
     'background-image: url(' + CKEDITOR.getUrl(this.path + 'images/YouTubePlayButton.png') + ');' + 
     'background-position: center center;' + 
     'background-repeat: no-repeat;' + 
     'border: 1px solid #a9a9a9;' + 
     'width: 80px;' + 
     'height: 80px;' + 
    '}' 
); 

嗯,我已經很遠得到,但當源是出現問題查看。該圖像變回iframe,iframe插件用它自己的佔位符替換它!更糟糕的是,當文檔被保存並重新打開進行編輯時,會發生同樣的情況。我怎樣才能保持我的播放按鈕佔位符而不破壞或替換內置的iframe插件佔位符? pagebreak插件似乎與div做類似的事情,但我不確定CKEditor在編輯器中放入假元素時如何區分pagebreak div和普通div。有沒有人嘗試過這樣的事情?我寧願不在我的網站上爲此創建自定義HTML元素。

+0

,我發現這個線程上CKEditor的論壇如果有人需要任何想法:http://cksource.com/forums/viewtopic.php?f=11&t=18793&start=10 – Tozar

回答

3

解決方案包括只有兩個更改文件的時間:

添加到您的plugin.js

(function() { 
    [...] 
    CKEDITOR.plugins.add('yourPluginNName', { 
     init: .... , 
     afterInit: function(editor){ 
      var dataProcessor = editor.dataProcessor, 
       dataFilter = dataProcessor && dataProcessor.dataFilter; 

      if (dataFilter) 
      { 
       dataFilter.addRules(
        { 
         elements : 
         { 
          iframe : function(element) 
          { 
           if(element.attributes["class"] && element.attributes["class"].indexOf("GROK-Video") >= 0){ 
           var e = editor.createFakeParserElement(element, 'cke_GROKVideo', 'iframe', true); 

           // if you want add a thumbnail background or other 
           // styles then do it here. 
           // but note that it's a parser element, not an html 
           // element, it goes something like this: 
           e.attributes["style"] += "background: url(...);"; 
           return e; 
           } 
           else{ 
           return element; 
           } 
          } 
         } 
        }, 3); //Priority allows this to overrule the iframe plugin. 
      } 
     } 
    }) 
})(); 

這是什麼有效的作用是它掛接到編輯初始轉換步驟, 如果它鼓勵一個iframe元素,它將用一個假元素替換它。

另請注意,它只替換元素名稱爲GROK-Video的元素,所有其他iframe都不會受到傷害。

如果您有多個不同的媒體插件,這非常棒。

禁用的iframe插件在你的配置:

這很簡單:

config.removePlugins = "iframe"; 

也許你可以告訴IFRAME插件跟你的插件,但我並不需要它,我只是不能被打擾。

+0

謝謝!我忘了這個問題。我弄清楚了讓iframe和我的插件與對方「玩得好」的解決方案。在規則上設置優先級(通過未公開的可選參數),可以在內置CKEditor iframe規則之前或之後應用規則。 (請參閱我添加到您的解決方案的代碼行。 – Tozar

+0

哦,這真的很好知道。我看不到在我的代碼中的這種變化,它只是'''dataFilter.addRules(...,) '''? – kritzikratzi

+0

是的,我的變化似乎不存在,我相信我的數字是3,如果它沒有出現,我會再試一次,你能添加嗎? – Tozar