title: How to wrap selected text in ckeditor
body: <p>I wanted to wrap selected words in <code>CKEditor</code> in a <code>&lt;p&gt;</code> element.</p>
  
  <p>From:</p>
  
  <pre><code>&lt;p&gt;This is a paragraph. And this is Selected text.&lt;/p&gt;
  </code></pre>
  
  <p>To:</p>
  
  <pre><code>&lt;p&gt;This is a paragraph. And this is&lt;/p&gt;
  &lt;p class="myclass"&gt;Selected text.&lt;/p&gt;
  </code></pre>
  
  <p>I found some code:</p>
  
  <pre><code>( function() {
      CKEDITOR.plugins.add( 'qna', { 
          init: function( editor ) {
              editor.addCommand( 'insertQnA', { 
                  exec : function( editor ) {    
                      if(CKEDITOR.env.ie) {
                          editor.getSelection().unlock(true); 
                              var selected_text = editor.getSelection().getNative().createRange().text; 
                      } else { 
                          var selected_text = editor.getSelection().getNative();
                      }
                      editor.insertHtml('[before]' + selected_text + '[after]'); 
                  } 
              }); 
              editor.ui.addButton( 'qna', { 
                  label: 'Insert QnA', 
                  command: 'insertQnA', 
                  icon: this.path + 'images/qna.png'
              }); 
          } 
      });
  })();
  </code></pre>
  
  <p>I wanted to replace the <code>[before]</code> and <code>[after]</code> with <code>&lt;p class"myclass"&gt;</code> and <code>&lt;/p&gt;</code> but it doesn't work. </p>
  
  <p>I'm quite a newbie in JS/Jquery. I hope you can shed some light on it for me.</p>
  
  <p><strong>EDIT: From Spon's reply.</strong></p>
  
  <pre><code>( function() {
    CKEDITOR.plugins.add( 'qna', { 
      init: function( editor ) {
        editor.addCommand( 'insertQnA', { 
          exec : function( editor ) {    
            editor.applyStyle(new CKEDITOR.style({
              Element : 'p', 
              Attributes : { class : 'Myclass' }, 
              Styles : { color : '#ff0000','font-family' : 'Courier'} 
            }));
          } 
        }); 
        editor.ui.addButton( 'qna', { 
          label: 'Insert QnA', 
          command: 'insertQnA', 
          icon: this.path + 'images/question.png'
        }); 
      } 
    });
  })();
  </code></pre>
  
  <p>The above code wraps the selected text/words in a <code>&lt;span&gt;</code> element for some unknown reason.</p>
  
  <p>Example:</p>
  
  <p>From...</p>
  
  <pre><code>&lt;p&gt;This is a paragraph. And this is Selected text.&lt;/p&gt;
  </code></pre>
  
  <p>To...</p>
  
  <pre><code>&lt;p&gt;This is a paragraph. And this is &lt;span&gt;Selected text.&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>This is not what I want.</p>