How do I add custom editable field to Upload dialog on CKEDITOR 4?

Question

I want to add a field to the image dialog in CKedtior 4, which I will add some text, and it will be added to a parameter in the image code. like, instead of <img src="x" alt="y"/> I will have <img src="x" alt="y" extra="z"/>

I managed to add this field

Using the code

  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;

  if (dialogName == 'image') {
    for (var i in dialogDefinition.contents) {
      var contents = dialogDefinition.contents[i];

      if (contents.id == "info") {
        // Add the textarea element as before
        contents.elements.push({
          type: 'textarea',
          id: 'txtComments',
          label: 'רשימה - אחד בשורה',
          rows: 3,
          setup: function (data) {
            this.setValue(data.txtComments || '');
          }
        });

      }
    }
  }
});

But from here I'm stuck because I'm unable to save the data as a parameter to the HTML, but not only that, I can't really edit the image again because every time I edit the image the field is blank.

So how exactly can I do that? any help will be appreciated.

Answer 1

Basically I added onOk in addition to the current onOk in order to set attribute to the image, and add it to the element.

To retrieve the data from the image element I used getSelection().getSelectedElement();

This is my final code

CKEDITOR.on('dialogDefinition', function (ev) {
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;

  if (dialogName == 'image') {


    for (var i in dialogDefinition.contents) {
      var contents = dialogDefinition.contents[i];

      if (contents.id == "info") {
        // Add the textarea element as before
        contents.elements.push({
          type: 'textarea',
          id: 'txtComments',
          label: 'רשימה - אחד בשורה (להימנע מגרשיים)',
          rows: 5,
          setup: function (data) {


            var editor = ev.editor;
            var sel = editor.getSelection().getSelectedElement();
            if (sel && sel.getName() === 'img') {
                var dataListValue = sel.getAttribute('data-list');
                this.setValue(dataListValue || '');
            }  
            
            
            
          }
        });

      }
    }
  }

  var onOk = dialogDefinition.onOk;

  dialogDefinition.onOk = function (e) {


    var txtCommentsValue = this.getContentElement('info', 'txtComments').getInputElement().getValue();

    // Access the img tag data
    var imgElement = this.cleanImageElement;

    // Check if the img tag exists
    if (imgElement) {

      var sanitizedValue = CKEDITOR.tools.htmlEncode(txtCommentsValue);
      imgElement.setAttribute('data-list', sanitizedValue);
     
    }

    onOk && onOk.apply( this, e );  

  };

});

This code add a field to the image dialog, and the field add the content into the data-list parameter. worth nothing that in order for this to work, I added the code config.extraAllowedContent = 'img[data-list]'; inside the editorConfig function because the ckedior want its images clean from unallowed parameters.