Get selected / highlighted text with code mirror from text area not working
<p>On my text area with <a href="https://codemirror.net/" rel="nofollow noreferrer">codemirror</a> I am trying to be able to select/ highlight text and then be able to click on my bold button and should wrap the bold tags around it.</p>

<p>I have looked at </p>

<p><a href="https://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text">SO Question 1</a> , <a href="https://stackoverflow.com/questions/5643635/how-to-get-selected-html-text-with-javascript">SO Question 2</a></p>

<p>But does not seem to work with code mirror.</p>

<p><strong>My Question is:</strong> With <a href="https://codemirror.net/" rel="nofollow noreferrer">codemirror</a> How could I grab the selected text and then make sure when I click on the bold button it wraps the text correctly?</p>

<p><a href="http://codepen.io/riwakawebsitedesigns/pen/mVmxpp" rel="nofollow noreferrer">Codepen Code View</a></p>

<p><a href="http://codepen.io/riwakawebsitedesigns/full/mVmxpp/" rel="nofollow noreferrer">Codepen Full View</a></p>

<p>Script</p>

<pre><code>var editor = document.getElementById('text-editor');
var string = grabed_text();

    $("#text-editor").each(function (i) {
        editor = CodeMirror.fromTextArea(this, {
            lineNumbers: true,
            mode: 'html'
        });

        $('button').click(function(){

          var val = $(this).data('val');


          switch(val){
            case 'bold': editor.replaceSelection('&lt;b&gt;' + string + '&lt;/b&gt;');
            break;
           }
        });
    });

function grabed_text() {

}    
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="container"&gt;

&lt;div class="row"&gt;

&lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
&lt;div class="panel panel-default"  onLoad="text_editor();"&gt;
&lt;div class="panel-heading"&gt;
&lt;button type="button" data-val="bold" class="btn btn-default"&gt;Bold&lt;/button&gt;
&lt;/div&gt;
&lt;div class="panel-body"&gt;
&lt;textarea id="text-editor" name="text-editor" class="form-control"&gt;&lt;/textarea&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;

&lt;div class="row"&gt;

&lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
&lt;div id="question-iframe"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;

&lt;/div&gt;
</code></pre>