在contentEditable div中设置光标位置 - 跨浏览器

我在设置contentEditable div中的光标位置时遇到问题并寻求一些帮助。在contentEditable div中设置光标位置 - 跨浏览器

我已经看了几个SO和其他在线解决方案没有成功，其中包括： jquery Setting cursor position in contenteditable div，并 Set cursor position on contentEditable <div>和许多其他在线资源。

基本上，我们使用的Telerik Editor将contentAreaMode设置为DIV，强制它使用contentEditable div而不是iFrame。当用户点击编辑器时，我们希望能够将光标移动到点击位置，以便用户可以在编辑器中随意输入/编辑内容。使用下面的示例代码，我可以将FF，Chrome和IE9中的光标位置设置为内部div之后。但是，在IE8（属于else if（document.selection）块）中，我无法让光标位置在div之后移动，因此任何输入的文本都会在div之前或之内结束 - 从未之后。我会非常感谢任何帮助。

其他信息：需要此工作在IE8标准文档模式 - 不在怪癖模式（它工作）。

更新：这是问题的一个的jsfiddle一起玩：http://jsfiddle.net/kidmeke/NcAjm/7/

<html> 
    <head> 
     <style type="text/css"> 
      #divContent 
      { 
       border: solid 2px green; 
       height: 1000px; 
       width: 1000px; 
      } 
     </style> 

     <script type="text/javascript"> 
     $(document).ready(function() 
     { 
      $("#divContent").bind('click', function() 
      { 
       GetCursorPosition(); 
      }); 
      $("#divContent").bind('keydown', function() 
      { 
       GetCursorPosition(); 
      }); 
     }); 

     function GetCursorPosition() 
     { 
      if (window.getSelection) 
      { 
       var selObj = window.getSelection(); 
       var selRange = selObj.getRangeAt(0); 
       cursorPos = findNode(selObj.anchorNode.parentNode.childNodes, selObj.anchorNode) + selObj.anchorOffset; 
       $('#htmlRadEdit_contentDiv').focus(); 
       selObj.addRange(selRange); 
      } 
      else if (document.selection) 
      { 
       var range = document.selection.createRange(); 
       var bookmark = range.getBookmark(); 
       // FIXME the following works wrong when the document is longer than 65535 chars 
       cursorPos = bookmark.charCodeAt(2) - 11; // Undocumented function [3] 
       $('#htmlRadEdit_contentDiv').focus(); 
       range.moveStart('textedit'); 
      } 
     } 
     function findNode(list, node) 
     { 
      for (var i = 0; i < list.length; i++) 
      { 
       if (list[i] == node) 
       { 
        return i; 
       } 
      } 
      return -1; 
     } 
     </script> 

    </head> 
    <body> 
     <div id="divContent" contentEditable="true"> 
      <br> 
      <div style="background-color:orange; width: 50%;"> 
       testing! 
      </div> 
     </div> 
    </body> 
</html>

来源

2012-03-28 user415127

使用瘦长（披露：我是作者）在windowload事件在IE 7和8为我工作。尝试在用户点击可编辑元素时移动插入符号是一个糟糕的主意：它与默认浏览器行为相冲突，因此可能无法正常工作，并且不会执行用户期望的操作（即将插入符号放在点击位置或附近）。

<html> 
    <head> 
     <style type="text/css"> 
      #divContent 
      { 
       width: 1000px; 
       height: 1000px; 
       border: solid 2px green; 
       padding: 5px 
      } 
     </style> 
     <script src="http://rangy.googlecode.com/svn/trunk/currentrelease/rangy-core.js"></script> 

     <script type="text/javascript"> 
      window.onload = function() { 
       rangy.init(); 
       var el = document.getElementById("divContent"); 
       el.focus(); 
       var range = rangy.createRange(); 
       range.setStartAfter(el.getElementsByTagName("div")[0]); 
       range.collapse(true); 
       rangy.getSelection().setSingleRange(range); 
      }; 

     </script> 

    </head> 
    <body> 
     <div id="divContent" contentEditable="true"> 
      <br> 
      <div style="background-color:orange; width: 50%;"> 
       testing! 
      </div> 
     </div> 
    </body> 
</html>

来源

2012-03-28 16:13:45

嗨，感谢您的回复 - 现在就试试代码示例。你提到尝试移动插入符号是一个坏主意 - 但它不会放置在用户默认点击的位置......必须执行某些操作。我错过了什么吗？所见即所得编辑器通常如何处理这样的任务？ – user415127 2012-03-28 17:29:39

这对我不起作用......我无法设置光标位置PAST内部div - 它总是在div内部结束。我应该提到 - 我需要它在IE8文档模式下工作 - 它只能在QUIRKS模式下工作... – user415127 2012-03-28 17:43:19

@ user415127：好的。我怀疑这可能是不可能的。是否可以使用鼠标而不是编程将光标放在所需的位置？ – 2012-03-30 23:49:45

在contentEditable div中设置光标位置 - 跨浏览器

回答

相关问题