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

这会以我想要的方式正确插入图像，但是有一个问题：如果我尝试编辑图像，当我单击“确定”按钮时，只有标签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 回答