title: wrap selected text in <span> on behalf of selection of drop down list
body: <p>I have a drop down list out of editor area . I have to add <code>&lt;span&gt;</code> on selection of any of those list item around the selected text. I have made styles for this .But its not working.
  Note: I am not using any plugin.</p>
  
  <pre><code>document.write( '&lt;select id="markup" onchange="createEditor( this.value );"&gt;' );
              var markup = ['Person','Event','Place'];
              for ( var i = 0 ; i &lt; markup.length ; i++ )
              {
                  document.write(
                      '&lt;option value="' + markup[i] + '"&gt;' +
                          markup[i] +
                      '&lt;/option&gt;' );
              }
              document.write( '&lt;/select&gt;' );
  var editor;
                  function createEditor( selected )
                  {
                      if ( editor )
                      editor.destroy();
            /*        CKEDITOR.stylesSet.add( 'my_styles',
  [
  { name : 'Span1', element : 'span', attributes : { 'itemprop' : 'prop' } },
  { name : 'Span2', element : 'span', attributes : { 'itemscope' : '' , 'itemtype' : 'type' } }
  ]);         */
                      editor = CKEDITOR.replace( 'editor1',
                          {
                          style : new CKEDITOR.style(
                          {
                              element : 'span',
                              attributes : {  'itemprop' :  'prop' },
                          }),
                          style1 : new CKEDITOR.style(
                          {
                              element : 'span',
                              attributes : { 'itemscope' : '' , 'itemtype' : 'type'  },
                          }),
                              on :
                            {
                                  instanceReady : function()
  
                                {
                                     //  config.stylesSet = 'my_styles';
                                      var mark = document.getElementById( 'markup' );   
  this.style.apply(editor.getSelection().getSelectedText());
                                  //  this.style1.apply(editor.document);
  
                                  }
                              }
                          } );
                  }
                  createEditor( '' );
  
              &lt;/script&gt;
  </code></pre>
  
  <p>Please Help anybody in wrapping selected text in <code>&lt;span&gt;</code> on selection of list item of drop drop down list.</p>