我的自定义 CKEditor 插件如何正确插入具有独特占位符图像的特殊 iframe？

Question

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 + "&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，该元素显示为我在 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 元素。

Answer 1

解决方案只包含对文件的两项更改：

将此添加到您的 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 插件与你的插件成为朋友，但我不需要它，我只是懒得打扰。