Einstellung der Cursorposition in einem contentEditable div - cross Browser

Ich stehe vor einem Problem mit der Cursorposition in einem contentEditable div und suche etwas Hilfe.Einstellung der Cursorposition in einem contentEditable div - cross Browser

Ich habe bereits an mehreren SO und anderen Online-Lösungen ohne Erfolg sieht, einschließlich: jquery Setting cursor position in contenteditable div und Set cursor position on contentEditable <div> und viele andere Online-Ressourcen.

Im Grunde genommen verwenden wir einen Telerik-Editor, bei dem contentAreaMode auf DIV gesetzt ist, wodurch er gezwungen wird, ein contentEditable div anstelle eines iFrame zu verwenden. Wenn ein Benutzer auf den Editor klickt, möchten wir den Cursor zum Klickpunkt bewegen können, so dass der Benutzer Inhalte eingeben/bearbeiten kann, wo immer sie im Editor möchten. Mit dem folgenden Beispielcode kann ich die Cursorposition in FF, Chrome und IE9 NACH dem inneren div festlegen. In IE8 (das in den Block else if (document.selection) fällt) kann die Cursorposition jedoch nicht nach dem div verschoben werden, sodass getippter Text entweder vor oder innerhalb des div - nie danach liegt. Ich wäre sehr dankbar für jede Hilfe.

ZUSÄTZLICHE INFO: Benötigt dies im IE8 Standards Dokument Modus zu arbeiten - NICHT im Quirks-Modus (was funktioniert).

UPDATE: Hier ist ein jsfiddle des Problems zu spielen: 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>

Quelle

2012-03-28 user415127

Mit Rangy (Offenlegung: Ich bin der Autor) funktioniert für mich in IE 7 und 8 in der windowload Ereignis. Es ist eine schlechte Idee, das Caret zu verschieben, wenn der Benutzer auf ein editierbares Element klickt: Es widerspricht dem Verhalten des Standard-Browsers und funktioniert daher möglicherweise nicht so, wie es der Benutzer erwartet).

<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>

Quelle

2012-03-28 16:13:45

Hallo, danke für die Antwort - werde jetzt Code Beispiel versuchen. Sie erwähnen, dass es eine schlechte Idee ist, das Caret zu verschieben - aber es wird nicht dort platziert, wo der Benutzer standardmäßig klickt ... muss etwas tun. Fehle ich etwas? Wie wird eine solche Aufgabe normalerweise in einem WYSIWYG-Editor gehandhabt? – user415127

Dies funktioniert nicht für mich ... Ich kann nicht die Cursorposition PAST das innere div - es endet immer in der div. Ich hätte erwähnen sollen - ich brauche es im IE8 Dokument Modus zu arbeiten - es funktioniert nur im QUIRKS Modus ... – user415127

@ user415127: OK. Ich vermute, dass dies dann möglicherweise unmöglich ist. Ist es möglich, den Cursor mit der Maus anstelle von programmatisch zu platzieren? –

Einstellung der Cursorposition in einem contentEditable div - cross Browser

Antwort

Verwandte Themen