Question

我已经设置了我的CKEditor实例，以便在查看WYSIWYG（实时）模式时[image:abc123]被替换为图像的实际URL。

例如，在HTML源代码视图中，您会看到：

<img src="[image:abc123]" />

但是当你查看WYSIWYG（实时）模式时，它会显示：

<img src="/file/image/abc123" />

以下是我作为插件添加的插件代码：

CKEDITOR.plugins.add( 'myplugin',
{
    requires : ['richcombo'],
    init : function( editor )
    {
        var config = editor.config, lang = editor.lang.format;

        /* Images */
        editor.dataProcessor.dataFilter.addRules({
            elements: {
                img: function( element ) {
                    var file_id = element.attributes.src.match(/\[image:([a-zA-Z0-9-]+)\]/);
                    if (file_id)
                        element.attributes.src = site_url + 'file/image/' + file_id[1];
                }
            }
        });

    }
});

现在一切正常，直到我使用图像属性对话框编辑图像。当我点击保存时，它会删除我上面的插件代码并将图像显示为404。

我找到了一些代码，用于检测图像对话框是否已保存，以便我可以应用相同的代码。这是更新的插件代码：

CKEDITOR.plugins.add( 'myplugin',
{
    requires : ['richcombo'],
    init : function( editor )
    {
        var config = editor.config, lang = editor.lang.format;

        /* Images */
        editor.dataProcessor.dataFilter.addRules({
            elements: {
                img: function( element ) {
                    var file_id = element.attributes.src.match(/\[image:([a-zA-Z0-9-]+)\]/);
                    if (file_id)
                        element.attributes.src = site_url + 'file/image/' + file_id[1];
                }
            }
        });

        /* When image properties saved, make sure image retains its URL */
        CKEDITOR.on('dialogDefinition', function(ev) {

            // Take the dialog name and its definition from the event data
            var dialogName = ev.data.name;
            var dialogDefinition = ev.data.definition;

            if (dialogName == 'image') {
               dialogDefinition.onOk = function(e) {

                     /* Images */
                    editor.dataProcessor.dataFilter.addRules({
                        elements: {
                            img: function( element ) {
                                var file_id = element.attributes.src.match(/\[image:([a-zA-Z0-9-]+)\]/);
                                if (file_id)
                                    element.attributes.src = site_url + 'file/image/' + file_id[1];
                            }
                        }
                    });

               };
            }
        });

    }
});

它可以工作，但我在图像对话框中设置的属性都没有添加到图像中。这几乎就像我的代码覆盖了插件代码......任何想法我需要添加什么来使这个工作？

Answer 1

在对话框定义（jsFiddle）中覆盖commit函数就足够了。使用浏览器的检查器检查WYSIWYG源，看看src是否正确：

function convertSrc( src ) {
    var match = src.match(/\[image:([a-zA-Z0-9-]+)\]/);

    if ( match )
        return 'http://foo.bar/file/image/' + match[ 1 ];
    else
        return src;
}

CKEDITOR.replace( 'editor', {
    plugins: 'wysiwygarea,sourcearea,toolbar,basicstyles,image',
    on: {
        pluginsLoaded: function() {
            this.dataProcessor.dataFilter.addRules( {
                elements: {
                    img: function( el ) {
                        el.attributes.src = convertSrc( el.attributes.src );
                    }
                }
            } );             
        }
    }
} );

CKEDITOR.on( 'dialogDefinition', function( evt ) {
    if ( evt.data.name == 'image' ) {
        var def = evt.data.definition,
            defUrl = def.getContents( 'info' ).get( 'txtUrl' ),
            orgCommit = defUrl.commit;

        defUrl.commit = function( type, element ) { 
            orgCommit.call( this, type, element );

            // Here's the magic:                
            element.setAttribute( 'src', convertSrc( this.getValue() ) );            
        }
    }
} );

CKEditor 4图像和dataProcessor API

1 个答案: