Ckeditor custom plugin- populate dialog data from ajax

Question

I have created a custom plugin to tag a list of usernames in ckeditor. The methodology for implementing is to get the data from the ajax controller. The following is the ajax function to get the list of user names.

  $org = new VA_Logic_Organization($orgid);
    if ($groupid) {
        $group = new VA_Logic_Group($groupid);
        if ($group->assigntomanager == 1) {
            $manager = new VA_Logic_Avatar($group->managerid);
            $avatarlist[$group->managerid] = $manager->firstname . ' ' . $manager->lastname;
        } else {
            $avatarlist = $group->getAvatarListByName($name, $form->hideleveldifference);
        }
    } else if ($form->defaultassigngroup) {
        $group = new VA_Logic_Group($form->defaultassigngroup);
        if ($group->assigntomanager == 1) {
            $manager = new VA_Logic_Avatar($group->managerid);
            $avatarlist[$group->managerid] = $manager->firstname . ' ' . $manager->lastname;
        } else {
            $avatarlist = $group->getAvatarListByName($name, $form->hideleveldifference);
        }
    } else {
        $avatarlist = $org->getAvatarListByName($name, $form->hideleveldifference);
    }

    $this->_helper->layout->disableLayout();
    $this->_helper->viewRenderer->setNoRender(TRUE);
    echo json_encode($avatarlist);

The following is the ckedior pluginname.js.

elements: [
    {
              type: 'select',
              id: 'exam_ID',
              label: 'Select Exam',
              items :function(element) 
                   {
                      $.ajax({
                      type: 'POST',
                      url:  baseurl +"employee/ajax/assignedtoselect/groupid/" ,
                      contentType: 'application/json; charset=utf-8',
                      dataType: 'json',
                      async: false,

                    });
                  }

                } 

            ]

I need to populate the json data on click of the dialog text box.

athreyas s.j athreyas s.j · Accepted Answer · 2014-05-28T05:43:25

Finally found the solution.

The onShow function was very helpful, The working code for pluginname.js is here

CKEDITOR.dialog.add( 'abbrDialog', function( editor ) {

return {

    // Basic properties of the dialog window: title, minimum size.
    title: 'Tag Avatars',
    minWidth: 250,
    minHeight: 100,

    // Dialog window contents definition.
    contents: [
        {
            // Definition of the Basic Settings dialog tab (page).
            id: 'tab-basic',
            label: 'Avatars',

            // The tab contents.
            elements: [
                                    {
                    // Text input field for the abbreviation text.
                        type: 'text',
                                                id: 'avatarid',
                                                label: 'Type an avatar name to tag' 


                },


            ]
        },
                    {
            // Definition of the Basic Settings dialog tab (page).
            id: 'tab-advanced',
            label: 'Items/Modules',

            // The tab contents.
            elements: [
                                    {
                    // Text input field for the abbreviation text.
                        type: 'text',
                                                id: 'instanceid',
                                                label: 'Type an item to tag' 


                },
                                    {
                                        type: 'checkbox',
                                        id: 'checkid',
                                        label: 'check to add link'

                                    }

            ]
        }

        // Definition of the Advanced Settings dialog tab (page).

    ],
                onShow: function() {
                    var assigned_config = {
                                 source: baseurl+"employee/ajax/assignedtoselect/",
                                 select: function(event, ui){

                                         $("#cke_79_textInput").val(ui.item.value);
                                         $("#cke_79_textInput").val(ui.item.id);
                                         window.abbr1 = ui.item.id;
                                 },

                                 change: function (ev, ui) { 
                                     if (!ui.item){
                                         $("#cke_79_textInput").val("");

                                     }
                                 }

                         };
                                  $("#cke_79_textInput").autocomplete(assigned_config);


                      var ac_config = {

                                source: baseurl+"employee/module/parentlist/",
                                select: function(event, ui){
                                        $("#cke_84_textInput").val(ui.item.value);
                                        $("#cke_84_textInput").val(ui.item.id);
                                  window.instanceid = ui.item.id;                                    
                                },
                                change: function (ev, ui) {
                                    if (!ui.item){
                                        $("#cke_84_textInput").val("");

                                    }
                                }

                        };
                                 $("#cke_84_textInput").autocomplete(ac_config); 

                  },

    // This method is invoked once a user clicks the OK button, confirming the dialog.
    onOk: function() {
 var dialog = this;

    if(window.abbr1 === undefined){
     var checkid = document.getElementById('cke_88_uiElement');
     if (checkid.checked) {
      var url = baseurl+ '/employee/module/view/instanceformid/'+instanceid;
      abbr = dialog.getValueOf( 'tab-advanced', 'instanceid' );
       var inst = '<a target="_blank" href='+url+'>'+abbr+'</a>';
       editor.insertHtml(inst);
    }
    else{
       var inst = '\$\[' +instanceid+ '\!\description]'; 
       editor.insertHtml( inst );
        }
    }
            else{

    abbr = dialog.getValueOf( 'tab-basic', 'avatarid' );
    var url = baseurl + '/employee/avatar/friendsprofilepopup/avatarid/' +abbr1;
    var htmlavatar = '<a class="infopopup20" href= '+url+' >'+abbr+ '</a>';
    editor.insertHtml( htmlavatar );
            }
    }   
};
});

Ckeditor custom plugin- populate dialog data from ajax

1 Answers