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);
            }
        }

为CKEditor自定义插件创建假图像

1 个答案: