Position des Text-Cursors im Editor ermitteln

  • Ich erstelle gerade ein Plugin für den Editor (Redactor) und benötige eine Funktion, die mir die aktuelle Position des Text-Cursors im Editor zurück gibt. Der eigentliche Text wird ja zunächst in ein beschreibbares div (incl. html) geschrieben. Im Script wutil.js habe ich keine geeignete Funktion dafür gefunden. Gibt es bereits eine Funktion die das kann oder muss ich mir da selbst etwas basteln?

    Besten Dank

  • Ok, ich bin jetzt dabei, mir selbst eine Routine zu schreiben. Dazu hole ich den Inhalt aus dem beschreiben div mit der Funktion getText(). Soweit so gut.
    Nun rufe ich ein modales Fenster auf (z.B. Code) und schließe es gleich wieder, ohne zusätzliche Eingaben gemacht zu haben. Jetzt befindet sich zusätzlicher Quellcode <span id="selection-marker-1" class="redactor-selection-marker"></span> und/oder auch <span class="redactor-invisible-space"></span> im beschreibbaren div div.redactor-editor. Wieso wird das gemacht und kann man das umgehen?
    Würde ich jetzt wieder die Funktion getText() aufrufen, befänden sich mehr Zeichen im Editor als eigentlich notwendig, was natürlich auch die Position des Textcursors (s. Beitrag 1) verfälscht.

    • Offizieller Beitrag

    benötige eine Funktion, die mir die aktuelle Position des Text-Cursors im Editor zurück gibt.

    Es gibt eine ganze Reihe unterschiedlicher Methoden mit denen das möglich ist, sie verfolgen aber allesamt unterschiedliche Ansätze. Es wäre hilfreich wenn du genauer erläutern könntest was du machen möchtest (das "wie" ist irrelevant).

    Wieso wird das gemacht und kann man das umgehen?

    Das sind interne Marker die für die Funktionsweise benötigt werden, sie sind weder optional noch lässt sich dies abschalten.

  • Vielen Dank.
    Ich schreibe gerade ein Plugin für den Editor, der Formeln mit Hilfe von Tex-Code in einem Beitrag darstellt. Das Plugin fügt Tex-Code umschlossen von den BBCode-Tags [tex][/tex] in einen Beitrag ein (z.B. [tex]\displaystyle\oint_{a}^{b}[/tex]). Nach dem Speichern des Beitrags wird der Tex-Code gerendert und als Formel dargestellt. Das Plugin öffnet im Editor einen Dialog (modal). Dort wird in ein Textfeld (textarea) der Tex-Code eingeben und in einer Vorschau gerendert dargestellt. Das klappt bisher ganz gut.
    Nun möchte ich gern, falls der Benutzer den Textcursor im Beitragseditor zwischen den beiden Tags positioniert hat, den kompletten Tex-Code innerhalb der Tags an das Textfeld im Dialog (textarea) übergeben. Mein Ansatz wäre, ausgehend von der aktuellen Position, sozusagen links und rechts nach den Tags zu suchen, um damit den Inhalt zu erhalten. Sollte kein Tag vorhanden sein, wird stattdessen ein neuer Tex-Code mit den entsprechenden Tags eingefügt. Vielleicht ist mein Denkansatz auch falsch und es gibt dafür bessere Lösungen. Ich wäre wirklich für jede Hilfe dankbar. Irgendwie komme ich da momentan nicht weiter.
    Bisher schaffe ich es nur, markierten Text zu übernehmen, indem ich mit this.wutil.getSelection() den Inhalt hole, in einen String umwandle, aus ihm die "zero width space" ($#8203;)) entferne und dann an mein Textfeld übergebe. Die "zero width space" muss ich entfernen, da sonst der Tex-Code nicht gerendert wird. Vielleicht ist auch dieser Ansatz zu kompliziert. Wie gesagt, ich würde mich über jeden Tipp freuen.

    • Offizieller Beitrag

    Ich würde dir von deinem Vorhaben abraten, HTML als Text zu interpretieren ist ungefähr so erfolgsversprechend wie HTML mit RegEx zu parsen. Im Editor hast du zu wenig Kontrolle über das was zwischen deinen Tags steht und am Ende zerstückelst du irgendein HTML-Element oder ähnliches. Alleine schon eine bestehende Textauswahl mit Tags zu umschließen ist ein Fass ohne Boden, besonders in Firefox ist das ungefähr so angenehm wie ein Beinbruch am ersten Urlaubstag.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!