Add custom drop down in ckeditor

Hi
In this post I am adding custom drop down in ckeditor also I downloaded ckeditor in my local and using locally not from cdn link.

path of my ckeditor folder which I downloaded from net

/webapp/jscr/ckeditor

ckeditor is my directory.

inside ckeditor have created one folder namely tokens.
inside tokens folder we created a file plugin.js

so the path of my plugin.js is

/webapp/jscr/ckeditor/plugins/tokens/plugin.js

content of plugin.js

CKEDITOR.plugins.add( 'tokens',
{
   requires : ['richcombo'], //, 'styles' ],
   init : function( editor )
   {
      var config = editor.config,
         lang = editor.lang.format;

      // Gets the list of tags from the settings.
      var tags = []; //new Array();
      //this.add('value', 'drop_text', 'drop_label');
      tags[0]=["[contact_name]", "Name", "Name"];
      tags[1]=["[contact_email]", "email", "email"];
      tags[2]=["[contact_user_name]", "User name", "User name"];
   
      // Create style objects for all defined styles.

      editor.ui.addRichCombo( 'tokens',
         {
            label : "Custom DD",
            title :"Custom DD",
            voiceLabel : "Custom DD",
            className : 'cke_format',
            multiSelect : false,

            panel :
            {
               css : [ config.contentsCss, CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ],
               voiceLabel : lang.panelVoiceLabel
            },

            init : function()
            {
               this.startGroup( "Tokens" );
               //this.add('value', 'drop_text', 'drop_label');
               for (var this_tag in tags){
                  this.add(tags[this_tag][0], tags[this_tag][1], tags[this_tag][2]);
               }
            },

            onClick : function( value )
            {      
               editor.focus();
               editor.fire( 'saveSnapshot' );
               editor.insertHtml(value);
               editor.fire( 'saveSnapshot' );
            }
         });
   }
});

I have lots of fields inside my html and we are using thymeleaf, so I am not pasting all code here
only text area where we have to bind our ckeditor.

now content of my html file is

<textarea name="editorArea" id="editorArea">

<script type="text/javascript" src="jscr/plugins/ckeditor/ckeditor.js"></script>

<script>

window.onload = function() {
  
   CKEDITOR.replace( 'editorArea',{
   toolbar :
        [
           ['SpecialChar'],
           ['Format'],
           ['Styles'],
           ['Undo', 'Redo'],
           ['Bold', 'Italic', 'Strike'],
           ['NumberedList', 'BulletedList'],
           ['Cut', 'Copy', 'Paste'],
           ['Blockquote'],
           ['Source'],
           ['tokens']
           
        ],
        extraPlugins: 'tokens'
 });

    }

</script>

here I am facing issue of thymeleaf custom attribute thats y we use 

window.onload else in simple html no need.

Hope this would work as it is working for me.

Thanks