从文本区域获取选定/高亮显示的文本，代码镜像不起作用

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

本文关键字：文本 代码 镜像 不起作用 显示 获取 区域 高亮      更新时间：2023-09-26

在我的带有codemirror的文本区域上，我试图选择/突出显示文本，然后点击我的粗体按钮，并将粗体标签包裹起来。

我看过

SO问题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('<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>

代码中的问题是在处理粗体按钮的开关情况下。

 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;
          }
  }

这是一支经过上述改动的钢笔。

相关文章：