當前在CKEditor中內置了一個iframe插件,該插件允許將iframe插入到編輯器中,但無論iframe中的內容如何,都會顯示一個相當醜陋的佔位符。我正在研究一個插件,該插件從用戶獲取視頻ID並構建一個指向頁面的iframe,以在我們的網站上顯示視頻。我想爲我的用戶可以看到一個佔位符,清楚地表明,他們已經插入了一個視頻:我的自定義CKEditor插件如何正確插入帶有唯一佔位符圖像的特殊iframe?
醜陋的iframe佔位符:
漂亮的視頻佔位符:
爲了得到這遠遠我把這一點的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 + "&Width=" + width + "&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元素。
,我發現這個線程上CKEditor的論壇如果有人需要任何想法:http://cksource.com/forums/viewtopic.php?f=11&t=18793&start=10 – Tozar