如何在textarea中获取所选文本？

我正在尝试制作自己的WYSIWYG编辑器.有什么办法,如何获取用户在textarea中选择的文本？

例如,如果用户选择了某个单词然后单击按钮,我该如何找出选择了哪个文本？

我正在使用jQuery.

要在window.getSelection().toString()Firefox中获取所选内容:

function getSel() // javascript
{
    // obtain the object reference for the     var txtarea = document.getElementById("mytextarea");
    // obtain the index of the first selected character
    var start = txtarea.selectionStart;
    // obtain the index of the last selected character
    var finish = txtarea.selectionEnd;
    // obtain the selected text
    var sel = txtarea.value.substring(start, finish);
    // do something with the selected content
}
</pre>

<p><code><textarea></code> 我使用Chrome而不是Firefox.</p>

<p>参考:  </p>

<p>
<p>textarea的  </p>
<p>文献</p>
<p></p>
        <hr>@DanDascalescu我以前尝试过,现在.它适用于Chrome,但似乎不适用于FireFox. <br><br><b>2> Scott Evernd..：</b><hr><p>不同浏览器的处理选择是不同的:</p>

<pre class="brush:bash;">var userSelection;
if (window.getSelection) {
    userSelection = window.getSelection();
}
else if (document.selection) { // Opera
    userSelection = document.selection.createRange();
}
</pre>

<p>这会给你一个范围对象.每个范围代表一个选择(使用控制/命令键可以进行多个活动选择).</p>

<p>您现在拥有的范围对象的类型取决于浏览器.对于IE,它是一个Text Range对象; 对于其他人来说是一个Selection对象.要将Selection对象转换为文本范围,可以调用getRangeAt; 对于Safari,你需要构建:</p>

<pre class="brush:bash;">var range;
if (userSelection.getRangeAt)
    range = userSelection.getRangeAt(0);
else { // Safari
    range = document.createRange();
    range.setStart(userSelection .anchorNode, userSelection.anchorOffset);
    range.setEnd(userSelection.focusNode, userSelection.focusOffset);
}
</pre>

<p>范围对象为您提供选择的起始和结束dom元素以及文本偏移.</p>

<p>有关范围对象的更多信息,请访问quirksmode.org</p>

<p>如果您使用的是jQuery,您可能需要查看Batiste Bieler 的轻量级jQuery RTE插件.它可能足以满足您的需求,或者至少可以为您提供一些东西.</p></p>
        <br><br><b>3> eKek0..：</b><hr><p>试试jquery-fieldselection插件.</p>

<p>你可以从这里下载.还有一个例子.</p></p>
        <br><br><b>4> tpdi..：</b><hr><p>getSelection()</p>

<p>这有点不同浏览器,请参阅此处了解最多可以使用的功能:http:
 //snipplr.com/view/775/getselection/</p></p>
        <hr>你如何在特定的`textarea`元素上使用这个函数？ <br><br><b>5> Subin..：</b><hr><p>一个小的函数，它将获取文本区域或输入元素的选定字符串/文本：</p>

<pre class="brush:bash;">function getInputSelection(elem){
 if(typeof elem != "undefined"){
  s=elem[0].selectionStart;
  e=elem[0].selectionEnd;
  return elem.val().substring(s, e);
 }else{
  return '';
 }
}
</pre>

<p>请注意，以上代码需要<strong>jQuery</strong>才能工作。获取ID为<strong>abc123</strong>的输入元素的选定字符串的示例<strong/></p>

<pre class="brush:bash;">getInputSelection($("#abc123"));
</pre>

<p>上面的函数将返回选择的字符串。如果没有用户选择的字符串，它将返回<code>null</code>。</p>

<h2>更多例子</h2>

<pre class="brush:bash;">getInputSelection($("body").find("input[name=user]"));
</pre>

<p>在使用类名选择的元素上，将返回元素数组的第一个元素的选定字符串，而不是所有元素的选定字符串。毕竟，页面中的选择始终为<strong>1</strong>。</p></p>
            </div>

    <div class="article_ab" style="width: 720px;height: 100px;margin: 0 auto;margin-top: 15px;">

    </div>

    <div class="article_recommend">
        <div class="list_top">推荐阅读</div>
        <div class="ListItems">
            <ul class="NewsList">
                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Zai_Haskell_Zhon_49988c8f.html" target="_blank" title="在Haskell中对无限列表进行燕尾迭代">在Haskell中对无限列表进行燕尾迭代</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《在Haskell中对无限列表进行燕尾迭代》经验，为你挑选了2个好方法。 ...
                        <a href="https://devbox.cn/p/Zai_Haskell_Zhon_49988c8f.html" target="_blank" title="在Haskell中对无限列表进行燕尾迭代">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeZaiMeiGeShuC_e31577da.html" target="_blank" title="如何在每个输出记录中显示结果集的总计数？">如何在每个输出记录中显示结果集的总计数？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何在每个输出记录中显示结果集的总计数？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeZaiMeiGeShuC_e31577da.html" target="_blank" title="如何在每个输出记录中显示结果集的总计数？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/JCabi_FangMian_-_1708a059.html" target="_blank" title="JCabi方面@RetryOnFailure如何抛出异常">JCabi方面@RetryOnFailure如何抛出异常</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《JCabi方面@RetryOnFailure如何抛出异常》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/JCabi_FangMian_-_1708a059.html" target="_blank" title="JCabi方面@RetryOnFailure如何抛出异常">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/iOS7-UICollectio_70dddde8.html" target="_blank" title="iOS7:UICollectionView出现在UINavigationBar下">iOS7:UICollectionView出现在UINavigationBar下</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《iOS7:UICollectionView出现在UINavigationBar下》经验，为你挑选了3个好方法。 ...
                        <a href="https://devbox.cn/p/iOS7-UICollectio_70dddde8.html" target="_blank" title="iOS7:UICollectionView出现在UINavigationBar下">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Resharper_ZhongX_8920270d.html" target="_blank" title="Resharper重新格式化String.Format()参数">Resharper重新格式化String.Format()参数</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《Resharper重新格式化String.Format()参数》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/Resharper_ZhongX_8920270d.html" target="_blank" title="Resharper重新格式化String.Format()参数">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/WuFaZaiZhongDuan_ca3d787e.html" target="_blank" title="无法在终端中找到XML架构命名空间错误的Spring NamespaceHandler">无法在终端中找到XML架构命名空间错误的Spring NamespaceHandler</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《无法在终端中找到XML架构命名空间错误的SpringNamespaceHandler》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/WuFaZaiZhongDuan_ca3d787e.html" target="_blank" title="无法在终端中找到XML架构命名空间错误的Spring NamespaceHandler">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RENAME_YuJuShiJi_8e65455f.html" target="_blank" title="RENAME语句实际上如何工作？">RENAME语句实际上如何工作？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《RENAME语句实际上如何工作？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/RENAME_YuJuShiJi_8e65455f.html" target="_blank" title="RENAME语句实际上如何工作？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Zai_ArrayAdapter_b46455e8.html" target="_blank" title="在ArrayAdapter中重写getDropDownView时的样式问题">在ArrayAdapter中重写getDropDownView时的样式问题</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsImg">
                            <a href="https://devbox.cn/p/Zai_ArrayAdapter_b46455e8.html" target="_blank" title="在ArrayAdapter中重写getDropDownView时的样式问题"><img src="https://img.devbox.cn/3cccf/16086/243/8e8f4e2f18ab13a1.png" width="120" height="70" alt="在ArrayAdapter中重写getDropDownView时的样式问题"/></a>
                        </div>
                                                <div class="NewsDesc" style="width:500px;margin-left:15px;">
                        如何解决《在ArrayAdapter中重写getDropDownView时的样式问题》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/Zai_ArrayAdapter_b46455e8.html" target="_blank" title="在ArrayAdapter中重写getDropDownView时的样式问题">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Cong_DynamoDB_Da_f1959f4f.html" target="_blank" title="从DynamoDB导出数据">从DynamoDB导出数据</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《从DynamoDB导出数据》经验，为你挑选了3个好方法。 ...
                        <a href="https://devbox.cn/p/Cong_DynamoDB_Da_f1959f4f.html" target="_blank" title="从DynamoDB导出数据">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/ZhongXingSheBeiS_de2c5ca5.html" target="_blank" title="中型设备上的Bootstrap 3行中断">中型设备上的Bootstrap 3行中断</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《中型设备上的Bootstrap3行中断》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/ZhongXingSheBeiS_de2c5ca5.html" target="_blank" title="中型设备上的Bootstrap 3行中断">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Zai_Django_Zhong_588993ef.html" target="_blank" title="在Django中搜索并获取匹配的LDAP用户列表">在Django中搜索并获取匹配的LDAP用户列表</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《在Django中搜索并获取匹配的LDAP用户列表》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/Zai_Django_Zhong_588993ef.html" target="_blank" title="在Django中搜索并获取匹配的LDAP用户列表">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/InnoSetup-_DaiMa_34f564ad.html" target="_blank" title="InnoSetup  - 代码签名证书">InnoSetup  - 代码签名证书</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsImg">
                            <a href="https://devbox.cn/p/InnoSetup-_DaiMa_34f564ad.html" target="_blank" title="InnoSetup  - 代码签名证书"><img src="https://img.devbox.cn/3cccf/16086/243/5e25fe10f29a56d2.png" width="120" height="70" alt="InnoSetup  - 代码签名证书"/></a>
                        </div>
                                                <div class="NewsDesc" style="width:500px;margin-left:15px;">
                        如何解决《InnoSetup-代码签名证书》经验，为你挑选了2个好方法。 ...
                        <a href="https://devbox.cn/p/InnoSetup-_DaiMa_34f564ad.html" target="_blank" title="InnoSetup  - 代码签名证书">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeCong_ASP-NET_91eab44d.html" target="_blank" title="如何从ASP.NET MVC属性中获取枚举值？">如何从ASP.NET MVC属性中获取枚举值？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何从ASP.NETMVC属性中获取枚举值？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeCong_ASP-NET_91eab44d.html" target="_blank" title="如何从ASP.NET MVC属性中获取枚举值？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeJiang_java_F_243663e8.html" target="_blank" title="如何将java泛型转换为Delphi">如何将java泛型转换为Delphi</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何将java泛型转换为Delphi》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeJiang_java_F_243663e8.html" target="_blank" title="如何将java泛型转换为Delphi">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeShiYong_Spri_c7c4a649.html" target="_blank" title="如何使用Spring框架遍历JSP中的列表">如何使用Spring框架遍历JSP中的列表</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何使用Spring框架遍历JSP中的列表》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeShiYong_Spri_c7c4a649.html" target="_blank" title="如何使用Spring框架遍历JSP中的列表">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/ZhongXinLianJieD_3f24de5c.html" target="_blank" title="重新连接到asp.net MVC4应用程序中的Servicestack会话">重新连接到asp.net MVC4应用程序中的Servicestack会话</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《重新连接到asp.netMVC4应用程序中的Servicestack会话》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/ZhongXinLianJieD_3f24de5c.html" target="_blank" title="重新连接到asp.net MVC4应用程序中的Servicestack会话">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/WeiShiMe_CLISP_W_03829e2e.html" target="_blank" title="为什么CLISP无法使用未加工名称调用某些函数？">为什么CLISP无法使用未加工名称调用某些函数？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《为什么CLISP无法使用未加工名称调用某些函数？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/WeiShiMe_CLISP_W_03829e2e.html" target="_blank" title="为什么CLISP无法使用未加工名称调用某些函数？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/ShiYong_Boost-Un_1837c64c.html" target="_blank" title="使用Boost.Units定义百分比">使用Boost.Units定义百分比</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《使用Boost.Units定义百分比》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/ShiYong_Boost-Un_1837c64c.html" target="_blank" title="使用Boost.Units定义百分比">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Zai_WinRT_YingYo_ba80c433.html" target="_blank" title="在WinRT应用程序中使用SQLite时出现异常">在WinRT应用程序中使用SQLite时出现异常</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsImg">
                            <a href="https://devbox.cn/p/Zai_WinRT_YingYo_ba80c433.html" target="_blank" title="在WinRT应用程序中使用SQLite时出现异常"><img src="https://img.devbox.cn/3cccf/16086/243/6db233c03a276edb.png" width="120" height="70" alt="在WinRT应用程序中使用SQLite时出现异常"/></a>
                        </div>
                                                <div class="NewsDesc" style="width:500px;margin-left:15px;">
                        如何解决《在WinRT应用程序中使用SQLite时出现异常》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/Zai_WinRT_YingYo_ba80c433.html" target="_blank" title="在WinRT应用程序中使用SQLite时出现异常">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/jquery-on---39;i_a9084ad0.html" target="_blank" title="jquery .on('input')不会仅在ie8中被触发">jquery .on('input')不会仅在ie8中被触发</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《jquery.on('input')不会仅在ie8中被触发》经验，为你挑选了3个好方法。 ...
                        <a href="https://devbox.cn/p/jquery-on---39;i_a9084ad0.html" target="_blank" title="jquery .on('input')不会仅在ie8中被触发">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                

            </ul>
        </div>
    </div>

    <div class="article_cmnt" style="display: none;">
        <div class="cmnt_title">吐了个 "CAO" !</div>
        <form action="" method="post">
            <div class="cmnt_text">
                <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了