我今天拜读了一下知乎编辑器的js代码,发现那个@功能其实好像可以分为:
获取@符号的位置
清除@符号
在@符号的位置上将将抓取到的字符串x以@x的形式添加进去
将焦点定位到@X上
这四个步骤不知道个人理解得对不对,这个用selection.createRange()是怎么实现的呢?不知如何下手写这个功能。
很艰难地找到了一个能用的代码样例:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css?1.2.1"> <script src="//code.jquery.com/jquery-1.9.1.js?1.2.1"></script> <script src="../tpok/js/jquery-ui.min.js?1.2.1"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css?1.2.1"> <script> $(function () { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $("#tags").autocomplete({ source: availableTags, close: function(event, ui) { var textObj = document.getElementById("tags"); po_Last_p(textObj); } }); }); </script> <script> </script> </head> <body> <p class="ui-widget"> <label for="tags">标签:</label> <p style="width:100px;height:50px;background:#ccc;" contenteditable="true" id="tags" ></p> <p style="width:100px;height:50px;background:#ccc;" contenteditable="true" id="tags2" >aaaa</p> </p> </body> <script type="text/javascript"> function po_Last_p(obj) { if (window.getSelection) {//ie11 10 9 ff safari obj.focus(); //解决ff不获取焦点无法定位问题 var range = window.getSelection();//创建range range.selectAllChildren(obj);//range 选择obj下所有子内容 range.collapseToEnd();//光标移至最后 } else if (document.selection) {//ie10 9 8 7 6 5 var range = document.selection.createRange();//创建选择对象 //var range = document.body.createTextRange(); range.moveToElementText(obj);//range定位到obj range.collapse(false);//光标移至最后 range.select(); } } </script> </body> </html>
你说的是 吗
var range = document.createRange();
range.selectNode(node); // node is where you need the caret to be (with contenteditable)
range.collapse();
var selection = document.getSelection();
selection.removeAllRanges();
selection.addRange(range);