Question

为了好玩，我想为textarea构建简单的文本格式工具。首先，我希望能够将高亮度文本用**包含在文本区域中，如果它是粗体格式（就像stackoverflow的textarea编辑器一样）。我编写了以下代码，大部分时间都可以使用，但它确实有一个错误，我将在稍后解释。

<html>
<head>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript" language="javascript">
var tmpText = '';
$(document).ready(function(){
        tmpText = '';
        $('#btn_bold').click(function(){bold(tmpText);});
        $('textarea').bind('mouseup', function(){
                  tmpText = '';
                  if(window.getSelection){
                    tmpText = window.getSelection().toString();
                  }else if(document.getSelection){
                    tmpText = document.getSelection().toString();
                  }else if(document.selection){
                    tmpText = document.selection.createRange().text;
                  }
        });
});

function bold(str)
{
        $('textarea').val($('textarea').val().replace(str,'**'+str+'**'));
}
</script>
</head>
<body>
<button type="button" id="btn_bold">bold it</button>
<textarea>AA</textarea>
</body>
</html>

因此，如果您高亮显示第一个字母A并加粗，则会得到结果**A**A。但是如果你强调第二个字母A并加粗它，你仍然得到**A**A而不是A**A**，因为代码行$('textarea').val($('textarea').val().replace(str,'**'+str+'**'));不足以识别你想要的字母A粗体。

什么是识别高亮文字的有效方法并加粗？

Answer 1

我已经编写了一个jQuery plug-in that does this，如果有帮助的话，我可以将其提取到一个独立的脚本中。使用插件将所选文本替换为“hello”一词的示例。

<html>
<head>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript" language="javascript" src="http://rangyinputs.googlecode.com/files/textinputs_jquery.js"></script>
<script type="text/javascript" language="javascript">

$(document).ready(function() {

        $('textarea').bind('mouseup',function() { $(this).replaceSelectedText('hello');});
});
</script>
</head>
<body>
<textarea style="width:300px; height:300px;">
AAA
</textarea>
</body>
</html>

此外，as I commented in a related question of yours，你在那里的功能将不适用于textareas，它有一个单独的机制来处理选择。请参阅我的答案，找到一个可行的功能。

Answer 2

如果您在其上调用tostring（），则选择对象将返回该字符串。您还可以获取范围对象，其中包含有关起点和终点的更多信息。

https://developer.mozilla.org/en/DOM/Selection

和

http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html

Answer 3

如展示here，您可以这样做：

el = document.getElementById('texty');
  if (el.setSelectionRange) {

     el.value = el.value.substring(0,el.selectionStart) + "**" + el.value.substring(el.selectionStart,el.selectionEnd) + "**" + el.value.substring(el.selectionEnd,el.value.length);

  }
  else if(document.selection.createRange()) {
      document.selection.createRange().text = "**" + document.selection.createRange().text + "**"; 
  }

但请注意，此方法仅限于textareas。

Answer 4

 <head>
 <script type="text/javascript">
    function formatText(el,tagstart,tagend) {
      if (el.setSelectionRange) {
        el.value = el.value.substring(0,el.selectionStart) + tagstart +
        el.value.substring(el.selectionStart,el.selectionEnd) + tagend +
        el.value.substring(el.selectionEnd,el.value.length)
      } else {
        // IE code 
        var selectedText = document.selection.createRange().text;
        var tag="b"
        if (selectedText != "") {
          var newText = "<" + tag + ">" + selectedText + "</" + tag + ">";
          document.selection.createRange().text = newText;
        }
      }
    }
</head>
<body>
  <p> <textarea rows="30" cols="59" name="Write-my-life-moments" 
       id="write-my-life- moments"></textarea> </p>

  <input type="button" value="BOLD"  
     onclick="formatText(document.getElementById('write-my-life-moments'), 
     '<b>','</b>')" />
</body>

此代码适用于FF，IE（6）＆gt; ，Opera 9＆gt ;,Safari。我在这些浏览器上测试过它。不是旧的。所以请在旧版浏览器上查看。我没有时间在旧浏览器上查看它（它没有显示我的文本区域打开标签y？我不知道，所以请你自己。写我的生活时刻。它是文本区域的名称）`

使用格式控件构建textarea - 如何获取所选文本

4 个答案: