plugins - 为CKEditor自定义插件创建伪造的图像

Question

我正在开发用于视频嵌入的插件，当单击插件对话框的“确定”按钮时，我将这段代码放入。

var embedCode = 
    '<iframe title="YouTube video player" class="youtube-player" type="text/html"' +
        width="' + width + '" height="' + height + '" src="http://www.youtube.com/embed/' + textField + '?rel=0"' +
        frameborder="0" width="620" height="200" style="width:' + width + 'px; height:' + height + 'px">' +
    '</iframe>';

this.getParentEditor().insertHtml(embedCode);

现在，在编辑器中双击iframe时，请打开iframe属性对话框，而不是我的插件对话框。

如何为自定义插件开发伪造的图像。

Answer 1

我已经找到了解决方案。
Ckeditor从插件生成的代码中制作假元素。当编辑器加载时，它将代码获取并将其转换为假元素，并且对该假元素进行默认编辑，其代码将在

afterInit : function( editor )
    {

编辑器的功能，并在edior的OK事件中调用

onOk : function()
{
    var embedCode = updatePreview( this,true );
    var newFakeImage = editor.createFakeElement( embedCode, 'cke_audio', 'audio', true  );

伪元素示例的代码如下，我为音频嵌入代码插件创建了代码

afterInit : function( editor )
    {
        function createFakeElement( editor, realElement )
        {
            return editor.createFakeParserElement( realElement, 'cke_audio', 'audio', true );
        }

        var dataProcessor = editor.dataProcessor,
                dataFilter = dataProcessor && dataProcessor.dataFilter;
            if ( dataFilter )
            {
                dataFilter.addRules(
                    {
                        elements :
                        {
                            'div' : function( element )
                            {
                                //alert("here");
                                var attributes = element.attributes;

                                if( attributes.class == 'audio' ){
                                    //alert("here");
                                    return createFakeElement( editor, element );
                                }
                                return null;

                            }
                        }
                    },
                    5);
            }
        }