✔ Cursor Position IFrame

M

mrno

Erfahrenes Mitglied
Hi,
ich habe folgenden Code:
Code: 
<html>
<head><TITLE>Website erstellen</TITLE>
<script language="JavaScript1.3" type="text/javascript">
function init(){
 document.getElementById("editor").contentDocument.designMode = "on";
}

function insertElement(){
  var editor = document.getElementById("editor");
  //Cursor Position herausfinden
}
</script>
</head>
<body onload="init()">
<div><button onclick="insertElement()">F</button></div>
<iframe id="editor" height="500px" width="500px" >
</iframe>
</body>
</html>

Jetzt will ich an der Stelle //Cursor Position herausfinden
Die Aktuelle Cursor Position im Iframe herausfinden. Wie mache ich das?
 
Was verstehst du unter "Aktuelle Cursor Position"...die Koordinaten?

Wenn du ein Element an der Cursorstelle einfügen willst, reicht es aus, das entsprechende Kommando auf das Textrange-Objekt loszulassen, es weiss von selbst, wo sich der Cursor befindet und wo eingefügt werden muss.
 
Hast du dafür ein Beispiel? Sollte nachher ein WYSIWYG-Editor werden und im Firefox funktionieren.
 
Jo, hab ich...hier mal was einfaches:
Code: 
<html>
<head>
<title>Website erstellen</title>
<script type="text/javascript">
function init()
{
 document.getElementById("editor").contentDocument.designMode = "on";
}

function insertElement(tn)
{
  var editor = document.getElementById("editor");
  if( ui = prompt('gebe deinen Text ein',''))
    {
      if(ui.match(/\S/))
        {
          editor.contentWindow.document.execCommand('inserthtml', false, '<'+tn+'>'+ui+'</'+tn+'>');
        }
    }
}
</script>
</head>
<body onload="init()">
<div><button onclick="insertElement('h1')">H1 einfügen</button></div>
<iframe id="editor" height="500px" width="500px" >
</iframe>
</body>
</html>

Die Spezifikation dazu: http://www.mozilla.org/editor/midas-spec.html
Eine Demo: http://www.mozilla.org/editor/midasdemo/
 
Habe jetzt nochmal eine frage. Habe mir gerade folgendes Angeschaut: http://developer.mozilla.org/en/docs/DOM:window.getSelection
Wenn ich mir jetzt das beispiel herauskopiere und bei mir einfüge, bekomme ich folgende fehlermeldung:
selObj.getRangeAt is not a function
[Break on this error] var selRange = selObj.getRangeAt(0);
Zum Vergrößern anklicken....
Hier nochmal mein Code
Code: 
<html>
<head><TITLE>Website erstellen</TITLE>
<script language="JavaScript1.3" type="text/javascript">
function init(){
 document.getElementById("editor").contentDocument.designMode = "on";
}

function insertElement($tag){
  var editor = document.getElementById("editor").contentDocument;
     var selObj = editor.getSelection(); 
   alert(selObj);
   var selRange = selObj.getRangeAt(0);
   // do stuff with the range
}
</script>
</head>
<body onload="init()">
<div><button onclick="insertElement('b')">F</button></div>
<iframe id="editor" height="500px" width="500px" >
</iframe>
</body>
</html>

Was ist der Grund für die Fehlermeldung? Was habe ich vergessen.
Hoffe ihr könnt mir helfen.
 
In der Spezifikation steht es ja...Selection ist ein "Member" des window-Objektes, und nicht des Document-Objektes, worüber du versuchst, drauf zuzugreifen.

So sollte es gehen:
Code: 
var selObj = document.getElementById("editor").contentWindow.getSelection();
 
Da die eigentliche Frage dieses Threads nicht beantwortet wurde, stelle ich sie nochmals:
Wie kann ich die Cursorposition im Text in einem Iframe herausfinden?

Aufgabenstellung:
Ich möchte wissen welches Zeichen VOR meinem Cursor steht, da ich in Abhängigkeit davon reagiere.
Ziel ist die Verwendung deutscher Anführungszeichen bei Eingabe der Shift+2 Zollzeichen.
Entsprechend muss ich wissen, ob vor dem Cursor ein Leerziechen oder ein Gedankenstrich steht, oder es der Zeilenanfang ist, damit ich dann die Anführungszeichen unten setzen kann.

Mein aktueller Ansatz zu dem mir das Setzen des Indices fehlt:
Code: 
function replaceQuotes(evt) {
	var key = evt.charCode;
	if (key == 34) {
    	var rte = evt.target.id;

    	var oRTE;
    	if (document.all) {
    		oRTE = frames[rte];
    		var selection = oRTE.document.selection;
    		if (selection != null) rng = selection.createRange();
    	} else {
    		oRTE = document.getElementById(rte).contentWindow;
    		var selection = oRTE.getSelection();
    		rng = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
    	}

        content = oRTE.document.body.innerHTML;

        /*
            Ist das eingefügte Zeichen das erste in der Zeile
            oder das vorherige Zeichen ist ein Leerzeichen
            oder das vorherige Zeichen ist ein Gedankenstrich {
                eingefügtes Zeichen mit „ ersetzen
            } ansonsten {
                eingefügtes Zeichen mit “ ersetzen
            }
        */

        var index = ?
        if (index < 0 || content[index] == " " || content[index] == "-") {
            insertHTML('„',rte);
        } else {
            insertHTML('“',rte);
        }
	        
        // ausgabe abfangen
        if (evt.preventDefault) {
            evt.preventDefault();
        } else {
            evt.returnValue=false;
        }
    }
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück