Изменить разметку вставленного изображения на CKEditor 4.x

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), который поможет решить вашу проблему.