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

afoysal's avatar

Use keydown event with text box of dialogue box of ckeditor

I would like to bind keydown event with text box of dialogue box of ckeditor. I am using below code.

CKEDITOR.on('dialogDefinition', function(ev) {
  // Get the dialog name and definition
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;

  // Check if the current dialog is the one you want to modify
  if (dialogName === 'myDialog') {
    // Get the text box element
    var textBox = dialogDefinition.getContents('uploadTab').elements['uploadElement'];

    // Check if the text box element is defined
    if (textBox) {
      // Bind the keydown event to the text box
      textBox.on('keydown', function(event) {
        // Handle the keydown event
        console.log('Key pressed: ' + event.data.keyCode);
      });
    }
  }
});

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

0 likes
1 reply
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 a Promise that resolves to the contents of the dialog tab. To access the contents, you need to wait for the Promise to resolve.

Here's an updated version of the code that waits for the Promise to resolve before accessing the contents of the dialog tab:

CKEDITOR.on('dialogDefinition', function(ev) {
  // Get the dialog name and definition
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;

  // Check if the current dialog is the one you want to modify
  if (dialogName === 'myDialog') {
    // Get the text box element
    dialogDefinition.getContents('uploadTab').then(function(tab) {
      var textBox = tab.elements['uploadElement'];

      // Check if the text box element is defined
      if (textBox) {
        // Bind the keydown event to the text box
        textBox.on('keydown', function(event) {
          // Handle the keydown event
          console.log('Key pressed: ' + event.data.keyCode);
        });
      }
    });
  }
});

Please or to participate in this conversation.