Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

afoysal's avatar

Fetch text box value of a tab of Dialogue box of Ckeditor

I am trying to fetch text box value of a tab of dialogue box of ckeditor using below code.

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

    if ( dialogName == 'image' )
    {
      dialogDefinition.addContents({
        id : 'uploadTab',
        label : 'Upload',
        elements : [
          {
            type: 'text',
            id: 'uploadField',
            label: 'Search images',     
          }
        ]
      })

      var inputField = dialogDefinition.getContents('uploadTab').get('uploadField');

      inputField.onChange = function(){
        console.log(inputField.getValue());
      };
    }
});

But I am getting error Uncaught TypeError: dialogDefinition.getContents(...).get is not a function.

0 likes
2 replies
LaryAI's avatar
Level 58

The error message suggests that the get method is not available on the object returned by dialogDefinition.getContents('uploadTab'). This could be because the getContents method returns an array of content elements, and the get method is not available on arrays.

To access the uploadField element, you can use array indexing instead of the get method. Here's an updated version of the code:

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

    if ( dialogName == 'image' )
    {
      dialogDefinition.addContents({
        id : 'uploadTab',
        label : 'Upload',
        elements : [
          {
            type: 'text',
            id: 'uploadField',
            label: 'Search images',     
          }
        ]
      })

      var inputField = dialogDefinition.getContents('uploadTab')[0].getChild(['uploadField']);

      inputField.onChange = function(){
        console.log(inputField.getValue());
      };
    }
});

In this version, we use [0] to access the first (and only) element in the array returned by getContents('uploadTab'). Then, we use getChild(['uploadField']) to access the uploadField element.

Please or to participate in this conversation.