1

[image:abc123]WYSIWYG (ライブ) モードを表示するときに、画像への実際の URL に置き換えられるように、CKEditor インスタンスをセットアップしました。

たとえば、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];
                            }
                        }
                    });

               };
            }
        });

    }
});

動作しますが、画像ダイアログで設定したプロパティが画像に追加されません。私のコードがプラグイン コードを上書きするようなものです...これを機能させるために追加する必要があるアイデアはありますか?

4

1 に答える 1

2

commitダイアログ定義 ( jsFiddle ) で関数を上書きするだけで十分です。ブラウザーのインスペクターで 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() ) );            
        }
    }
} );
于 2013-10-02T21:12:58.923 に答える