从文本区域获取带有代码镜像的选定/突出显示文本不起作用

Question

在我的带有 codemirror 的文本区域，我试图能够 select/ 突出显示文本，然后能够点击我的粗体按钮，并且应该将粗体标签包裹在它周围。

我看过

SO Question 1 , SO Question 2

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

我的问题是： 使用 codemirror 我怎样才能抓取 selected 文本，然后确保当我点击粗体按钮时它会换行文字正确吗？

Codepen Code View

Codepen Full View

脚本

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

function grabed_text() {

}

HTML

<div class="container">

<div class="row">

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

</div>

<div class="row">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="question-iframe"></div>
</div>

</div>

</div>

Answer 1

您的代码中的问题出在您处理粗体按钮的开关盒中。

 case 'bold': 
      editor.replaceSelection('<b>' + string + '</b>');
      break;

在这里，您通过围绕 string 变量包装 <b> 标记来替换当前选择，但它没有在任何地方定义。理想情况下，它应该反映您的编辑器当前的选择。所以我建议你像下面这样更改你的代码。

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

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

这里是 Pen 进行了上述更改。

从文本区域获取带有代码镜像的选定/突出显示文本不起作用

Get selected / highlighted text with code mirror from text area not working

javascript

jquery

codemirror