0

CKEditor 4.x で挿入された画像のマークアップを変更する必要があります。私の画像には、画像の近くに説明と作成者の名前が必要です。

私はすでに画像情報を取得する方法を持っており、少し掘り下げた後、これを得ました：

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;
            var editor = ev.editor;

            // Check if the definition is from the dialog we're
            // interested in (the 'image' dialog). This dialog name found using DevTools plugin
            if (dialogName == 'image') {
                // Remove the 'Advanced' tabs from the 'Image' dialog.
                dialogDefinition.removeContents('advanced');

                // Get a reference to the 'Image Info' tab.
                var infoTab = dialogDefinition.getContents('info');

                // Remove unnecessary widgets/elements from the 'Image Info' tab.        
                infoTab.remove('txtAlt');
                infoTab.remove('txtHSpace');
                infoTab.remove('txtVSpace');
                infoTab.remove('txtBorder');
                dialogDefinition.onOk = function(e) {
                    var imageSrcUrl = e.sender.originalElement.$.src;
                    var width = e.sender.originalElement.$.width;
                    var height = e.sender.originalElement.$.height;
                    var jqxhr = $.getJSON('data.json');
                    jqxhr.done(function(data) {
                        alert(data);
                        console.log(data);
                        var imgHtml = CKEDITOR.dom.element.createFromHtml(
                        '<div class="figure">' +
                        '<img src="' + imageSrcUrl + '" alt="' + data.description + '"' +
                            'width="' + width + '"' + 'height="' + height + '"' +'/>' +
                        '<div class="figcaption">' + data.description + '</div>' +
                        '</div>');
                        editor.insertElement(imgHtml);
                    });
                };
            }
        });

これにより、希望どおりに画像が正しく挿入されますが、問題があります。画像を編集しようとすると、[OK] ボタンをクリックすると、タグだけimgが置き換えられ、次のようなマークアップが表示されます。

<div class="figure">
<div class="figure"><img alt="foo" src="xxxxxxxxx"/>
<div class="figcaption">foo</div>
</div>

<div class="figcaption">foo</div>
</div>

それで、画像の「基本マークアップ」を変更することは可能ですか？画像を変更すると、すべての要素が変更されますか？

4

1 に答える 1

0

あなたがやろうとしていることは簡単ではありません。問題を解決するウィジェット機能がエディター (4.3) に間もなく登場するまで待つことをお勧めします。

于 2013-07-29T07:03:13.530 に答える