Javascript 我的自定义CKEditor插件如何正确插入带有唯一占位符图像的特殊iFrame？

目前在CKEditor中内置了一个iframe插件，该插件允许将iframe插入编辑器，但无论iframe中有什么内容，都会显示一个相当难看的占位符。我正在开发一个插件，该插件接收用户的视频ID，并构建一个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);
        }
    }
}

---

好吧，我已经做了很多了，但是当查看源代码时问题就出现了。图像变回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.
            }
        }
    })
})();

这样做的有效之处在于它与编辑器的初始转换步骤挂钩， 如果它遇到一个iframe元素，它将用一个伪元素替换它

还要注意的是，只有当元素的类名为GROK Video时，它才会替换该元素，所有其他iframe都不会受损

这是伟大的，如果你有多个不同的媒体插件

禁用配置中的iframe插件：

这很简单：

config.removePlugins = "iframe";

---

也许你可以告诉iframe插件与你的插件成为朋友，但我不需要它，我只是不想被打扰

我在CKEditor论坛上找到了这个帖子，如果有人需要任何想法：谢谢！我忘了这个问题。我确实找到了让iframe和我的插件“友好相处”的解决方案。设置规则的优先级（通过未记录的可选参数），可以在内置的CKEditor iframe规则之前或之后应用规则。（查看我添加到您的解决方案中的代码行。哦，知道这一点真是太好了。但是我看不到我的代码中的更改。它只是

dataFilter.addRules（…）

？是的，我的更改似乎不存在。我相信我有数字3。我会再试一次，如果它没有显示，您可以添加它吗？

config.removePlugins = "iframe";