duggy: onclick word neben maus selektieren/markieren

Hallo Community,

ich habe mir einen kleine WYSIWYG-Editor gebastelt. Funktioniert auch prima. Nun wollte ich, dass alle Änderungen, die damit an einem contenteditable DIV gemacht werden automatisch markiert werden, damit man direkt sieht, was geändert wurde.

Auch das geht noch.

Aber wie speicher ich, was der User gelöscht hat?

Das Ganze ist ein internes System, also nur für eingeweihte User. Es wäre also kein Problem, wenn ich irgendwie festlege, dass nur markierter Content gelöscht werden kann (Delete-Tasten sperren, außer wenn Text markiert ist). Dann müsste ich nur irgendwie für getSelection() statt dem Text den gesamten HTML-Code bekommen, der markiert ist.

--> Wie bekomme ich den gesamten HTML-Code des markierten Textes?

Dann müsste ich irgendwie noch die y-Position vom Textmarker bekommen (diesem blinkenden Strich der zeigt, wo man gerade tippen kann), um auf dieser Höhe eine Markierung zu setzen. y-koordinate entweder relativ zum div oder zum body.

--> wie bekomme ich die y-Koordinate vom Textcursor?

Wenn euch bessere Wege einfallen, wie ich das umsetzen kann, bin ich natürlich offen für Denkanstöße.

Trotzdem würde ich mich parallel über die 2 Antworten freuen, damit ich zumindest temprär diese Version nutzen kann.

Danke und VG
duggy

  1. ich habe mir einen kleine WYSIWYG-Editor gebastelt. Funktioniert auch prima.

    Respekt. Da hast du dir IMHO eine der schmerzhaftesten Themen in der JS Programmierung ausgesucht. Insbesondere, wenn du Cross-Browser funktional arbeiten willst.

    Mit diesem Schmerz befasen sich seit einigen Jahren die Entwickler vom TinyMCE. Da er im Source vorliegt, wirst du dort bestimmt Antworten auf deine Fragen finden.

    Beispiel für noneditable content

    1. Respekt. Da hast du dir IMHO eine der schmerzhaftesten Themen in der JS Programmierung ausgesucht. Insbesondere, wenn du Cross-Browser funktional arbeiten willst.

      Ich weiß. Vorerst reicht aber eine Funktionalität im Firefox.

      Mit diesem Schmerz befasen sich seit einigen Jahren die Entwickler vom TinyMCE. Da er im Source vorliegt, wirst du dort bestimmt Antworten auf deine Fragen finden.

      Habe vorher auch TinyMCE genutzt. Arbeite aber auch viel mit eigenen Tags und Methoden, daher bin ich umgestiegen.

      Den Code uneditable zu machen ist ja nicht mein Problem.

      Ich möchte lediglich beim markieren von fettem Text zum löschen den <b>-Tag mit in der Selektion haben (wenn mann bei mozilla auf "Auswahl-Quelltext anzeigen" geht wird ja auch der markierte Text inklusive Tags selektiert. Also irgendwie muss man darauf ja zugreifen können.

      1. Habe vorher auch TinyMCE genutzt. Arbeite aber auch viel mit eigenen Tags und Methoden, daher bin ich umgestiegen.

        Du weisst aber schon, dass der TinyMCE eine sehr brauchbare Plugin-Schnittstelle und API hat?

        Ich möchte lediglich beim markieren von fettem Text zum löschen den <b>-Tag mit in der Selektion haben (wenn mann bei mozilla auf "Auswahl-Quelltext anzeigen" geht wird ja auch der markierte Text inklusive Tags selektiert. Also irgendwie muss man darauf ja zugreifen können.

        http://wiki.moxiecode.com/index.php/TinyMCE:Functions#tinyMCE.getContent

        Denke ferner nicht in Tags, sondern in Dom, Nodes, Parents...

        1. Du weisst aber schon, dass der TinyMCE eine sehr brauchbare Plugin-Schnittstelle und API hat?

          Habe mich dennoch für einen eigenen entschieden.

          http://wiki.moxiecode.com/index.php/TinyMCE:Functions#tinyMCE.getContent

          Denke ferner nicht in Tags, sondern in Dom, Nodes, Parents...

          schon klar. Gibt es denn eine Möglichkeit, das OHNE tiny zu machen?

          1. mir würde auch vorerst die Antwort reichen, wie ich die aktuelle Poition des Textcursors ermittle (in px).