locatie cursor in een DIV - Softwareontwikkeling

dinsdag 11 juni 2002 17:04

Acties:

Verwijderd

Topicstarter

Hallo, ik ben een CMStooltje aan het bouwen om een contenteditable div, ik ben redelijk ver gekomen maar ik blijf met 1 groot probleem zitten. Ik moet altijd een selectie maken voordat ik de locatie van de cursor kan vinden en daarna met een execcommand kan manipuleren. Als ik een stuk tekst wil pasten dan kan dat alleen met een selectie. Ik wil gewoon dat op de locatie van mijn cursor ik kan pasten. Het kan wel als ik op ctrl+v druk, maar daar wil ik niet vanuit gaan.

Als iemand het weet, ik heb de search en heel msdn eigenlijk al doorgespit

dinsdag 11 juni 2002 22:29

Acties:

Willem

En als je in de class van die div een cursor:default; opgeeft?...

Motor (of auto) onderhoud bijhouden

dinsdag 11 juni 2002 23:31

Acties:

ErectionJackson

Ff testen hoe lang een onderti

Op dinsdag 11 juni 2002 22:29 schreef willem169 het volgende:
En als je in de class van die div een cursor:default; opgeeft?...

Dan verandert alleen de vorm van de cursor en dat bedoelt ie niet

Ik snap wel wat je bedoelt, maar kan je niet gewoon met een Writeline functie werken in de div die contenteditable is? Of gaat ie dan niet schrijven op het punt waarop je cursor staat?

Microsoft SharePoint oplossingen | www.onlinesamenwerken.nl | Persian Dance Helia

dinsdag 11 juni 2002 23:39

Acties:

Verwijderd

innerhtml van je div uitlezen en daar achter je nieuwe paste bende plaatsen ?!
En als het midden tussen je innerhtml moet, ik weet zeker dat er een site over bestaat op MSDN, alleen ff niet welke..

dinsdag 11 juni 2002 23:52

Acties:

Clay

cookie erbij?

't suffe is dat dat execCommand gedoe met toebehoren op een selection werkt,

code:

1 2	range = document.selection.createRange(); range.pasteHTML('bladie');

maar als je dus geen selection hebt gemaakt krijg je wel een object terug van die createRange, maar de paste wordt ergens heel anders uitgevoerd, ik dacht meestal bovenaan.
Dat kan eventueel komen omdat de .text en .htmlText van de range leeg is, en dan is de "match" van de paste de eerste lege string, en da's bovenaan je pagina, maar ik gok maar wat.

Wat je dus eigenlijk zou moeten hebben is iets van een

code:

1	document.cursorPosition.createRange();

of een soort window.paste() die gewoon ctrl-v simuleert.

Ik weet het ook niet.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

woensdag 12 juni 2002 09:02

Acties:

André

Analytics dude

Kun je dat niet met een onclick event opvangen?

Dan verwijs je het event naar een functie die gaat kijken waar je geklikt hebt. En als dat op een div is moet hij de tekst van je clipboard daar aan toevoegen.

woensdag 12 juni 2002 09:09

Acties:

crisp

Devver

Pixelated

De windows paste voer je zo uit (IE only):

code:

1 2	document.getElementById('pastebox').select(); document.execCommand('Paste');

In plaats van select() kan je ook focus() gebruiken; ik gebruik echter in mijn GoT Tracker de select() omdat dan de pagina gewoon op de achtergrond blijft

Intentionally left blank

woensdag 12 juni 2002 09:33

Acties:

Verwijderd

Topicstarter

Het vervelende is dat createTextRange() niet ondersteunt wordt in een DIV en de createRange() alleen met een selectie dus deze vallen af. Het pasten is ook geen probleem dat kan je op verschillende manieren doen. met een execcommand of gewoon de inhoud veranderen van de div. maar de cursorlocatie blijft een probleem.

woensdag 12 juni 2002 22:01

Acties:

Verwijderd

Op Webfx is een mooi voorbeeld te zien, waar het wel werkt.
Onder Articles->widgets->rich text editor.
Ze veranderen de functie execcommand daar in:

code:

el.execCommand = function (execProp, execVal, bUI) {
return execCommand(this, execProp, execVal, bUI);}

function execCommand(el, execProp, execVal, bUI) {
var doc = el.frameWindow.document;
var type = doc.selection.type;
var oTarget = type == "None" ? doc : doc.selection.createRange();
var r = oTarget.execCommand(execProp, bUI, execVal);
if (type == "Text")
oTarget.select();
return r;
}

Ik weet eigenlijk niet goed hoe dit script werkt, maar ik geloof dat dit gedeelte ervan de oorzaak ervan is, dat er op de goede cursorpositie tekst wordt toegevoegd

Wat doet die backspace trouwens raar, elke keer als ik die indruk, wordt ik uit mijn reply gegooid.

donderdag 13 juni 2002 00:59

Acties:

2

Ben ook erg lang op zoek geweest hiernaar, maar ben uiteindelijk op deze oplossing gekomen. Hoop dat het een beetje is wat je zoekt.

code:

<html>
<head>
<script>
var cursorPos;
function saveCursorPos(){
  if(document.selection.createRange()) {
    cursorPos = document.selection.createRange().duplicate();
  }
}
function addSomething() {
  if(cursorPos) {
    cursorPos.pasteHTML("<b>ingevoegde string</b>");
  }
}
</script>
</head>
<body>
<div 
    contenteditable 
    style="border: solid 1px #000; width: 300px; height:150px;" 
    onClick="saveCursorPos();" 
    onKeyUp="saveCursorPos();">
</div>
<a href="javascript:addSomething();">invoegen</a>
</body>
</html>

Of klik hier voor een voorbeeld.

vrijdag 14 juni 2002 13:35

Acties:

Verwijderd

Topicstarter

Hey geweldig, volgens mij zoek ik dit, ik ga ff het script uitpluizen en kijken of ik er goed mee kan werken.

ik zal het eindresultaat wel even online zetten als het af is.