使用文本区域中的代码镜像获取选定/突出显示的文本

在我的带有codemirror的文本区域中,我试图能够选择/突出显示文本,然后能够单击我的粗体按钮,并应在其周围包裹粗体标签.

我看过了

问题1,SO问题2

但似乎不适用于代码镜像.

我的问题是:使用codemirror我如何获取所选文本,然后确保当我单击粗体按钮时它正确包装文本？

Codepen代码视图

Codepen全视图

脚本

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('' + string + '');
            break;
           }
        });
    });

function grabed_text() {

}    

HTML

Bold

Arkantos.. 5

您的代码中的问题出在切换情况下,您正在处理粗体按钮.

 case 'bold': 
      editor.replaceSelection('' + string + '');
      break;

在这里,你通过在string变量周围包装标签来替换当前选择,但它没有在任何地方定义.理想情况下,它应该反映编辑器中的当前选择.所以我建议你改变你的代码,如下所示.

  // inside your click handler
  var val = $(this).data('val');
  var string = editor.getSelection();

  switch(val){
     case 'bold': { 
               editor.replaceSelection('' + string + '');
            break;
          }
  }

 case 'bold': 
      editor.replaceSelection('' + string + '');
      break;

  // inside your click handler
  var val = $(this).data('val');
  var string = editor.getSelection();

  switch(val){
     case 'bold': { 
               editor.replaceSelection('' + string + '');
            break;
          }
  }