CKEditor 4图像和数据处理器API [英] CKEditor 4 Images and dataProcessor API

问题描述

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

I have set-up my CKEditor instance so that when viewing the WYSIWYG (live) mode [image:abc123] is replaced with the actual URL to the image.

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

So for example in the HTML source view, you see this:

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

但是当您查看WYSIWYG（live）模式时，会显示：

But when you view the WYSIWYG (live) mode, it shows this:

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

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

Here is the plugin code I added as a plugin that does the trick:

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的图像。

Now this all works fine until I edit the image using the Image properties dialog. When I hit save, it removes my plugin code above and displays the image as a 404.

我发现一些代码检测是否保存图像对话框，应用相同的代码。以下是更新的插件代码：

I found some code that detects if the Image Dialog is saved so that I could apply the same code. Here is the updated plugin code:

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

               };
            }
        });

    }
});

它可以工作，但是我在图像对话框中设置的属性都不会添加到图像。它几乎像我的代码覆盖插件代码...任何想法我需要添加以使这项工作吗？

It works but none of the properties that I set in the Image Dialog are added to the image. It's almost like my code overwrites the plugin code... Any ideas what I need to add to make this work?

推荐答案

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

It's enough to overwrite commit function in dialog definition (jsFiddle). Inspect WYSIWYG source with browser's inspector to see that src is correct:

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图像和数据处理器API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！