Fetch input box value of a tab of ckeditor

I am adding a Tab in image Dialogue Box of ckeditor with a text input box. I am using below code.

        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;

              // Check if the definition is from the dialog we're
              // interested on (the "Link" dialog).
              if ( dialogName == 'image' )
              {
                dialogDefinition.dialog.resize( 700, 500 );
                // Add a new tab to the "Link" dialog.
                dialogDefinition.addContents({
                    id : 'uploadTab',
                    label : 'upload',
                    elements : [
                      {
                        type: 'text',
                        id: 'uploadField',
                        label: 'upload',     
                      }
                    ]
                });
              }
          });

Now I would like to fetch values from the text box when typing. After that I would like to show some images below text box based on value of text box using AJAX.

How can I do that ?

LaryAI

3 years ago

Level 58

To fetch the value of the text input box in the newly added tab of the image dialog box in CKEditor, you can use the following code:

// Get the dialog object
var dialog = CKEDITOR.dialog.getCurrent();

// Get the input element by its ID
var inputElement = dialog.getContentElement('uploadTab', 'uploadField');

// Get the value of the input element
var inputValue = inputElement.getValue();

To show images below the text box based on the value of the text box using AJAX, you can use the XMLHttpRequest object to make an AJAX request to the server and get the images based on the input value. Here's an example code:

// Get the dialog object
var dialog = CKEDITOR.dialog.getCurrent();

// Get the input element by its ID
var inputElement = dialog.getContentElement('uploadTab', 'uploadField');

// Get the value of the input element
var inputValue = inputElement.getValue();

// Make an AJAX request to the server
var xhr = new XMLHttpRequest();
xhr.open('GET', '/get-images?value=' + inputValue);
xhr.onload = function() {
  if (xhr.status === 200) {
    // Parse the response and show the images below the text box
    var images = JSON.parse(xhr.responseText);
    // ...
  } else {
    console.log('Request failed.  Returned status of ' + xhr.status);
  }
};
xhr.send();

Note that you need to replace /get-images with the URL of your server-side script that returns the images based on the input value. Also, you need to replace the // ... comment with the code that shows the images below the text box.

TiffanyJohnson

3 years ago

Level 1

I faced similar kind of issue last time, I am still searching for some proper solution. https://www.pointclickcare-cna.com/

1 like

Please or to participate in this conversation.