Dateizeiger in <div> Tag

[callt]

Hallo,

Ich bastele gerade an einem Browsergestütztem wysiwyg HTML-Editor.
Dazu ersetze ich das Textareafeld mit einem div Bereich und beziehe die Eingabezeichen über Keycode.

Aber...
Ich finde einfach keine Lösung den Textcursor an eine andere Stelle, als an das Textende zu setzen.

Hat jemand eine Idee ?

Danke im Vorraus

callt

[mrhappiness]

function insertAtCaret (textEl, text)
{
       if (textEl.createTextRange)
              textEl.caretPos = document.selection.createRange().duplicate();
       if (textEl.createTextRange && textEl.caretPos)
       {
              var caretPos = textEl.caretPos;
              caretPos.text =caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
       }
       else
       textEl.value  = text;
} 

musst du noch an die versch. browser anpassen, aber vom prinzip her sollte es klappen

is übrigens ungetestet und von hier: http://www.faqts.com/knowledge_base/...d/1052/fid/130

[callt]

nicht ganz

Der Ansatz ist schon ziemlich gut.

Läßt sich jedoch meiner Meinung nach nur auf <textarea> Felder anwenden.

Ich habe es mit <div> versucht. Klappt aber nicht.

callt

[wahsaga]

erstens glaube ich auch, dass das nur bei textareas funzen wird, und zweitens

musst du noch an die versch. browser anpassen, aber vom prinzip her sollte es klappen

etwas vergleichbares zu diesem caretPos kennen die anderen browser glaube ich gar nicht.

[mrhappiness]

wenn'S partout nich will, könntest den text im div ja in ein textfeld schreiben, da ändern und dann zurückschreiben...

oder du nimmst statt div ein textfeld. warum machst du das eigentlich nicht?

[wahsaga]

Original geschrieben von mrhappiness
oder du nimmst statt div ein textfeld. warum machst du das eigentlich nicht?

weil er sich doch einen what you see is what i guess-editor schreiben will - und in einer textarea kann man so schlecht html anzeigen...

[mrhappiness]

c'est vrai

ich versteh nur noch nich so ganz wo er die eingabezeichen über keycode bezieht?
vielleicht erklärt mir ja einer das prinzip

[wahsaga]

Original geschrieben von mrhappiness
ich versteh nur noch nich so ganz wo er die eingabezeichen über keycode bezieht?
vielleicht erklärt mir ja einer das prinzip

also, er will einen wysiwyg-editor schreiben.

das ergebnis soll also sofort als html in einem div angezeigt werden; bearbeitung und darstellung sollen also an ein und der selben stelle erfolgen.

da du in einem div aber keine eingaben machen kannst wie in einem textfeld, will er da einen cursor darstellen, und wenn du dann eine taste drückst, will er das mittels eventhandler registrieren, den keycode abfragen, und dann das entsprechende zeichen direkt in den div einfügen...

so in etwa.

[mrhappiness]

aber wenn er das per keycode macht, dann muss die routine ja verdammt umfangreich sein, wenn die formatierungen dannauchn och erkannt werden sollen.
Ne Prüfroutine wär auch nich verkehrt, sonst kann ich ja reinHTMLen was ich will, z.B. auch php/ssi... (und unlink und andere schöne sachen ausführen lassen)

aber ich sag ja nix

[callt]

Hi,

Freut mich, daß meine Frage auf Interesse gestossen ist.
Also wie wahsaga schon meint, es soll an Ort und Stelle angezeigt werden, was eingegeben wird.

Selbstgeschriebener HTML-Code wird abgefangen.

Nur vorbestimmte Codes können über Button erzeugt werden.
<B> <I> <font color> <font size ><Tables> <a href> usw.

Mit createTextRange gibt es keine Probleme, aber caretPos scheint erst mal nicht zu machen zu sein.
Bin aber noch am probieren.

Mir würde es reichen, wenn die Stelle auf die geklickt wird zur weiterverarbeitung markiert(gespeichert) wird, ohne daß ein Cursorähnliches Gebilde angezeigt wird.
Aber die Textmarke springt immer ans Ende.

callt

[wahsaga]

Re: Hi,

Original geschrieben von callt
Aber die Textmarke springt immer ans Ende.

wie realisierst du denn überhaupt eine textmarke in einem div?

[callt]

Genau

Vieleicht war meine Frage falsch formuliert,

Aber genau daß was Du mich jetzt fragst, ist meine Frage.

Wie gesagt, bei Eingabe wird immer ans Ende des Textes angefügt.

createTextRange funktioniert auch.

Ich kann zum Beispiel Text markieren, und ersetzen.

Vielleicht gibt es so was wie createTextRange ohne markiertem Text, also nur eine Position die gespeichert wird, an der dann weiter gearbeitet werden kann.

callt

[wahsaga]

Re: Genau

Original geschrieben von callt
Vielleicht gibt es so was wie createTextRange ohne markiertem Text, also nur eine Position die gespeichert wird, an der dann weiter gearbeitet werden kann.

also ich glaube, sowas was du da haben willst, gibt es standardmässig nicht.

aber du kannst es ja durchaus selbst realisieren:

du merkst dir die aktuelle 'cursor'-position im text.

bewegt wird der cursor über die linke und rechte cursor-taste; per mausklick wird nicht gehen (wenn doch, dann nur hyper-kompliziert).

als cursor fügst du dann z.b. ein | (blah|blubb) oder viellecht sogar besser einen null breiten Nichtverbinder, wie selfhtml das ding nennt, ein. der macht nämlich keinen abstand zwischen zwei benachbarten zeichen, sieht dann fast wie ein richtiger cursor aus: blah&zwnj;blubb

wenn sich die position ändert, musst du den text an der derzeitigen cursorposition aufsplitten, um den text-teil vor und den nach dem cursor zu bekommen. diese beiden teile fügst du wieder zum gesamttext ohne cursor zusammen, und splittest anschliessend erneut an der neuen cursor-position auf, um dort den cursor wieder einzufügen...

wenn die position nicht geändert und stattdessen ein 'normales' zeichen eingegeben wird, splittest du den text vor dem cursor auf, fügst das zeichen an den ersten teil an, und setzt den zweiten teil inklusive cursor wieder dran.

[callt]

Re: Re: Genau

Original geschrieben von wahsaga
du merkst dir die aktuelle 'cursor'-position im text.

Ich nehme an, Du meinst über window.event.x und window.event.y.

Das bin ich gerade am probieren.

callt

[wahsaga]

Re: Re: Re: Genau

Original geschrieben von callt
Ich nehme an, Du meinst über window.event.x und window.event.y.

nein, ich meine einfach als integer-zahl, die die cursorposition in deinem string angibt, der den inhalt des divs enthält.
diese position ist am anfang bei leerem div 0, und ändert sich dann durch texteingaben oder bewegung des cursors.

über window.event.x/y wird's wie ich schon sagte sehr schwierig werden - wie willst du da den cursor positionieren, bzw. bei einem tastendruck die stelle im text rausfinden an der du einfügen musst?