目前 CKEditor 中内置了一个 iframe 插件,它允许将 iframe 插入到编辑器中,但无论 iframe 中有什么,它都会显示一个相当难看的占位符。我正在开发一个插件,它从用户那里获取视频 ID,并构建一个 iframe,该 iframe 指向一个页面,用于在我们的网站上显示视频。我希望我的用户看到一个占位符,清楚地表明他们已经插入了一个视频:
丑陋的 iframe 占位符:
漂亮的视频占位符:
为了做到这一点,我在插件的 onOk 函数中添加了这段 Javascript。我已经包含了上下文:
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,该元素显示为我在 plugin.js 中使用这段 CSS 选择的任何图像:
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 元素。
最佳答案
该解决方案仅包含对文件的两个更改:
将此添加到您的 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.
}
}
})
})();
这有效地做的是它 Hook 到编辑器的初始转换步骤, 如果它遇到一个 iframe 元素,它会用一个假元素替换它。
另请注意,如果元素的类名是 GROK-Video,它只会替换该元素,所有其他 iframe 都不会受到伤害。
如果您有多个不同的媒体插件,这会很棒。
在您的配置中禁用 iframe 插件:
这很简单:
config.removePlugins = "iframe";
也许您可以让 iframe 插件与您的插件成为 friend ,但我不需要它,我也懒得理会。
关于javascript - 我的自定义 CKEditor 插件如何正确插入具有独特占位符图像的特殊 iframe?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6630851/