設定のカーソル位置 - クロスブラウザ

は私がのcontentEditableのdiv内のカーソル位置を設定し、いくつかの支援を求めるとの問題に直面しています。設定のカーソル位置 - クロスブラウザ

は、私はすでに含めて、成功せず、いくつかのSOおよびその他のオンラインソリューションを見てきました： jquery Setting cursor position in contenteditable div、および Set cursor position on contentEditable <div>および他の多くのオンラインリソースを。

基本的に、我々はそれがiFrameのの代わりにのcontentEditableのdivを使用するように強制的にDIVに設定contentAreaModeとTelerikエディタを使用しています。ユーザーがエディタをクリックすると、カーソルをクリックポイントに移動して、エディタで希望する場所にコンテンツを入力/編集できるようにします。以下のサンプルコードを使用して、内部のdivの後にFF、Chrome、およびIE9のカーソル位置を設定できます。しかし、（そうでない場合（document.selection）ブロックに該当）IE8で、私はdivの後に移動するカーソルの位置を取得することができませんので、任意の入力したテキストは、前またはdivの内のいずれか終わる - 決して後。私はどんな助けにも大いに感謝しています。

ADDITIONAL INFO：IE8標準原稿モードで動作するようにこれが必要 - NOT（仕事をする）に関する注意点モードで。

UPDATE：ここで一緒にプレイする問題のjsfiddleです：Rangyを使用して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

こんにちは、お返事ありがとうございます - 今すぐコードサンプルを試してみてください。キャレットを試して移動することは悪い考えですが、ユーザーがデフォルトでクリックする場所に配置されるのではなく、何かをしなければならないということです。何か不足していますか？このようなタスクは、WYSIWYGエディタでどのように処理されるのですか？ – user415127

これは私のためには機能しません...カーソル位置をPAST内のdivに設定することはできません。常にdiv内で終了します。私は言及すべきだった - 私はIE8のドキュメントモードで動作する必要があります - それはQUICKSモードでのみ動作します... – user415127

@ user415127：OK。私はこれがうまくいかないかもしれないと思う。プログラムではなくマウスを使用してカーソルを配置することは可能ですか？ –

設定のカーソル位置 - クロスブラウザ

答えて

関連する問題