Question

我需要在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>

那么，我是否可以更改图像的“基本标记”，因此当我更改图像时，所有元素都会被更改？

Answer 1

你想要做的事情并不容易。您可能希望等待Widgets feature即将推出的编辑器（4.3），这将解决您的问题。

在CKEditor 4.x上更改插入图像的标记

1 个答案: