获取 SelectionStart 之前和 SelectionEnd 之后的所有文本

Question

我正在从头开始创建一个文本编辑器。

加粗代码

$('#bold').click(function(){

            var start = window.getSelection().toString();

            var bolded = '<b>' + start + '</b>';
            var cursorPositionBegin = $('#TextEditor').prop("selectionStart");
            var cursorPositionEnd = $('#TextEditor').prop("selectionEnd");
// to check 
                alert(bolded);
            })  

HTML 代码

<table width="50%">
    <tr>
        <td>
            <div>
                <div>
                    <span><input type=button value="B" id="bold"></span>
                </div>
                <div contenteditable="true">
                    <textarea cols="47" rows="23" placeholder="editor" id="TextEditor"></textarea>
                </div>
            </div>  
        </td>
    </tr>
</table>

当我为一组选定的字符单击#bold 时，我想在#TextEditor 中添加characters。我想也许获取光标的开始和结束位置可以帮助分解并将开始和结束与 characters 一起形成我需要的内容。

我也使用 jQuery

[更新 1] 还是有其他方法可以满足我的要求？ [更新 2] 将contenteditable="true" 添加到放置#TextEditor id 的div 中

您的帮助将不胜感激。

Answer 1

正如@webBer 所说，您将不允许在 textarea 元素中添加标签，而是使用属性为 contenteditable="true" 的 div

$('#bold').click(function(){
  var string = window.getSelection().toString();
  var bolded = '<b>' + string + '</b>';
  var selC, range;
      if (window.getSelection) {
          selC = window.getSelection();
          if (selC.rangeCount) {
              range = selC.getRangeAt(0);
              range.deleteContents();
              range.insertNode(document.createTextNode(bolded));
          }
      } else if (document.selection && document.selection.createRange) {
          range = document.selection.createRange();
          range.text = bolded;
      }
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="50%">
    <tr>
        <td>
            <div>
                <div>
                    <span><input type=button value="B" id="bold"></span>
                </div>
                <div contenteditable="true" style="height: 300px;width: 300px;border: 1px solid black">
                    
                </div>
            </div>  
        </td>
    </tr>
</table>