Creating custom ajax command In Drupal 8.x for Inserting Data in Ckeditor In Node add/edit form

Hi guys,
I am writing this post to help drupal 8 developers for creating a custom Ajax Command to insert value in CKEditor in a node edit form, Like Body field of a node. Here are the steps:

  1. Step 1:  create a custom :
    for best practice create a folder named as “custom” in modules folder. Then create a folder named as your module in my case its my_custom. create following files structure.
      
      I. my_custom.info.yml  with following code
     

    name: my_custom
    type: module
    description: Custom module to handle Custom APIs and custom requirements
    package: custom
    core: 8.x

     
     II. my_custom.module
       with following code:
      

    /**
    * @file
    * contains my_custom.module file
    */ 
    
    use DrupalCoreFormFormStateInterface;
    use DrupalnodeEntityNode; 
    use DrupalCoreRenderElementStatusMessages;
    use SymfonyComponentHttpFoundationRedirectResponse; 
    use DrupalCoreAjaxAjaxResponse;
    use Drupalmy_customAjaxInsertInCkeditor; // this my custom class
    
    /**
    * Implementing hook_form_alter() 
    * @param array $form, $form_state , $form_id
    */
    function my_custom_form_alter(array &$form, DrupalCoreFormFormStateInterface $form_state, $form_id) {  
      if ($form_id == 'node_job_listing_form') { 
        // attaching custom js library to node edit form.
        $form['#attached']['library'][] = 'my_custom/my-custom'; 
        //adding a prefix wrapper of ajax callback.
        $form['#prefix'] = '<div id="nodeJobListingForm">';
        $form['#suffix'] = '</div>';  
        //adding a prefix to body field for creating  proper selector.
        $form['body']['widget']['#prefix'] =  '<div id="job_body">'; 
        $form['body']['widget']['#suffix'] =  '</div>'; //job_requirements
    
        //select list on which change I am going to fire js event
        $jobs_list = ['india', 'US', 'Uk', 'France'];
        $form['field_job_title']['widget']['#options'] = array('_none' => '- Select -') + $jobs_list;
        $form['field_job_title']['widget']['#ajax'] = array(
          'callback' => 'updateFormValuesCallback',
          'event' => 'change',
          'wrapper' => 'nodeJobListingForm',
          'progress' => array(
            'type' => 'throbber',
            'message' => NULL,
          ),
        );
    
      }
    }
    
    /**
    * Custom Ajax callback form change on node edit/submit form
    *
    **/ 
    function updateFormValuesCallback(array $form, DrupalCoreFormFormStateInterface $form_state) {
      $response = new AjaxResponse();
      $job_description = '<p>Hi this is test message.</p>';
      $response->addCommand(new InsertInCkeditor('#job_body textarea', 'val', [$job_description])); 
      return $response;
    }

     III. my_custom.libraries.yml
    In this file I will define my custom js library add following code to this file

    my-custom:
      js:
        js/my-custom.js: {}
      dependencies:
        - core/drupal.ajax
        - core/jquery
        - core/ jquery.once
        - core/ drupal
        - ckeditor/drupal.ckeditor

    I have added CKeditor Library as dependency for my js library, so that I will be included on page before my Library and I can use CKEditor Library to insert data.

    Now Need to define Drupalmy_customAjaxInsertInCkeditor class by creating new file in
    my_module/src/Ajax folder

    file name: will be same as class name InsertInCkeditor.php with following code:
     

  2. <?php
    /**
    * InsertInCkeditor.php contains InsertInCkeditor class 
    * Defines custom ajax command for set value in CKEditor by ajax
    **/ 
    namespace Drupalmy_customAjax;
    use DrupalCoreAjaxCommandInterface;
    use DrupalCoreAssetAttachedAssets;
    
    /**
     * Class ExtendCommand.
     */
    class InsertInCkeditor implements CommandInterface {
       /**
       * A CSS selector string.
       *
       * If the command is a response to a request from an #ajax form element then
       * this value can be NULL.
       *
       * @var string
       */
      protected $selector;
    
      /**
       * A jQuery method to invoke.
       *
       * @var string
       */
      protected $method;
    
      /**
       * An optional list of arguments to pass to the method.
       *
       * @var array
       */
      protected $arguments;
    
      /**
       * Constructs an InvokeCommand object.
       *
       * @param string $selector
       *   A jQuery selector.
       * @param string $method
       *   The name of a jQuery method to invoke.
       * @param array $arguments
       *   An optional array of arguments to pass to the method.
       */
      public function __construct($selector, $method, array $arguments = []) {
        $this->selector = $selector;
        $this->method = $method;
        $this->arguments = $arguments;
      }
    
      public function render() { 
          return [
            'command' => 'InsertInCkeditor',
            'selector' => $this->selector,
            'args' => $this->arguments,
          ];  
        }
    }
    
    ?>

Here is the code which will let enable you to insert value in CkEditor using ajax commands programatically. if you face any bug please let know in comment I will try my best to help you.

thanks.

Drupal version: 


Source: https://www.drupal.org/taxonomy/term/4/feed