Was ist der beste Weg, um die Cursor- / Caret-Position festzulegen?

Wenn ich Inhalt in einen Textbereich einfüge, den TinyMCE kooptiert hat, wie kann ich die Position des Cursors/Carets am besten festlegen?

Ich benutze tinyMCE.execCommand("mceInsertRawHTML", false, content); um den Inhalt einzufügen, und ich möchte die Cursorposition an das Ende des Inhalts setzen.

Beide document.selection und myField.selectionStart wird dafür nicht funktionieren, und ich habe das Gefühl, dass dies von TinyMCE unterstützt wird (durch etwas, das ich in ihrem Forum nicht finden kann) oder es wird ein wirklich hässlicher Hack sein.

Später: Es wird besser; Ich habe gerade herausgefunden, dass beim Laden von TinyMCE in WordPress der gesamte Editor in einem eingebetteten Iframe geladen wird.

Später (2): ich kann nutzen document.getElementById('content_ifr').contentDocument.getSelection(); um die Auswahl als Zeichenfolge zu erhalten, aber kein Auswahlobjekt, das ich verwenden kann getRangeAt(0) an. Stück für Stück Fortschritte machen.

Zuerst sollten Sie am Ende des Inhalts, den Sie erstellen möchten, eine Spanne hinzufügen.

var ed = tinyMCE.activeEditor;

//add an empty span with a unique id
var endId = tinymce.DOM.uniqueId();
ed.dom.add(ed.getBody(), 'span', {'id': endId}, '');

//select that span
var newNode = ed.dom.select('span#' + endId);
ed.selection.select(newNode[0]);

Dies ist eine Strategie, die von den TinyMCE-Entwicklern selbst beim Schreiben von Selection.js verwendet wird. Das Lesen der zugrunde liegenden Quelle kann bei dieser Art von Problem sehr hilfreich sein.

Nachdem ich über 15 Stunden mit diesem Problem verbracht hatte (mit Hingabe, ich weiß), fand ich eine Teillösung, die in FF und Safari funktioniert, aber nicht in IE. Im Moment ist das gut genug für mich, obwohl ich vielleicht in Zukunft weiter daran arbeiten werde.

Die Lösung: Beim Einfügen von HTML an der aktuellen Caret-Position verwenden Sie am besten die folgende Funktion:

tinyMCE.activeEditor.selection.setContent(htmlcontent);

In Firefox und Safari fügt diese Funktion den Inhalt an der aktuellen Caret-Position innerhalb des Iframes ein, den WordPress als TinyMCE-Editor verwendet. Das Problem mit IE 7 und 8 ist, dass die Funktion den Inhalt oben auf der Seite hinzuzufügen scheint, nicht den Iframe (dh der Texteditor fehlt vollständig). Um dieses Problem zu beheben, habe ich eine bedingte Anweisung hinzugefügt basierend auf diesem Code das wird diese Funktion stattdessen für IE verwenden:

tinyMCE.activeEditor.execCommand("mceInsertRawHTML", false, htmlcontent);

Das Problem bei dieser zweiten Funktion ist jedoch, dass die Caret-Position auf den Anfang des Beitragsbereichs gesetzt wird, nachdem sie aufgerufen wurde (ohne Hoffnung, sie basierend auf dem Browserbereich usw. abzurufen). Irgendwann gegen Ende entdeckte ich, dass diese Funktion funktioniert, um die Caret-Position am Ende des eingefügten Inhalts mit der ersten Funktion wiederherzustellen:

tinyMCE.activeEditor.focus();

Außerdem stellt es die Caret-Position am Ende des eingefügten Inhalts wieder her, ohne die Länge des eingefügten Textes berechnen zu müssen. Der Nachteil ist, dass es nur mit der ersten Einfügefunktion funktioniert, was anscheinend Probleme in IE 7 und IE 8 verursacht (was eher ein WordPress-Fehler als TinyMCE sein könnte).

Eine wortreiche Antwort, ich weiß. Gerne können Sie Fragen zur Klärung stellen.

Es ist so einfach, den Cursor an das Ende zu bewegen, dass ich nicht glauben kann, welche schrecklichen Kludges an anderer Stelle online gepostet wurden, um dies zu tun. Mr. Spockes Antwort war anfangs nicht hilfreich, aber am Ende lieferten mir die API-Dokumente die Antwort. “Alle Inhalte auswählen und dann die Auswahl reduzieren”:

ed.selection.select(ed.getBody(), true); // ed is the editor instance

ed.selection.collapse(false);

Ich hoffe, das hilft jemand anderem, da dieser Thread einer der ersten ist, der in Google auftaucht.

Der beste Weg, den ich gefunden habe, besteht darin, den Inhalt mit einer temporären ID einzufügen und diesen Fokus dann mit einigen Tricks zu geben, die ich in gefunden habe Advlink-Plugin.

Hoffe das hilft.

var ed = tinyMCE.activeEditor;

ed.execCommand('mceInsertContent', false, '<a id="_mce_temp_rob" href="http://robubu.com">robubu.com</a>');

//horrible hack to put the cursor in the right spot
ed.focus(); //give the editor focus
ed.selection.select(ed.dom.select('#_mce_temp_rob')[0]); //select the inserted element
ed.selection.collapse(0); //collapses the selection to the end of the range, so the cursor is after the inserted element
ed.dom.setAttrib('_mce_temp_rob', 'id', ''); //remove the temp id

Wenn Sie dies über ein Popup tun, müssen Sie meiner Meinung nach auch hinzufügen

tinyMCEPopup.storeSelection();

bevor Sie das Popup schließen.

Für alle, die versuchen, Inhalte aus einer benutzerdefinierten WordPress-Metabox in den TinyMCE-Editor einzufügen, ist dies die Lösung, die funktioniert. Ich habe eine Menge anderer Skripte ausprobiert, darunter ein weiteres auf dieser Seite, die obige Antwort von Gary Tan, die bei der Installation benutzerdefinierter TinyMCE-Schaltflächen für mich funktionierte, aber in diesem Szenario nicht funktionierte.

Die richtige Lösung ist die Verwendung der tinyMCE-API tinymce.dom.Selection

http://www.tinymce.com/wiki.php/API3:class.tinymce.dom.Selection

die Syntax ist etwa so:

var rng = tinymce.DOM.createRng();  // the range obj
var newNode = editor.dom.select(...    // find the correct selector so that newNode is the element of your editor text
rng.setStart(newNode.firstChild, 0); // 0 is the offset : here it will be at the beginning of the line.
rng.setEnd(newNode.firstChild, 0);
editor.selection.setRng(rng);

es funktioniert, ich benutze das selbst.

Also, hier ist die Lösung aus unserem Projekt. Unser Ziel war die Veränderung (+)/(-)/(?) Zeichenfolgen zu den entsprechenden Bildern “on the fly”, während der Benutzer tippt.

Es gab ein Problem: Jedes Mal, nachdem der String in ein Bild geändert wurde, ging der Cursor zum Anfang des Bildes, nicht wie erwartet zum Ende.

Wir haben einen Großteil des Codes hinzugefügt, der den Cursor an das Ende des Bildes bewegt, sodass der Benutzer kontinuierlich tippen kann, ohne den “springenden” Cursor zu unterbrechen.

Schlüsselteil: Anstatt zu verwenden editor.getBodygibt es eine elegantere Möglichkeit, die temporäre Spanne zu erstellen und sie außerdem sofort nach den erforderlichen Aktionen zu löschen.

if (value.match(/\([+?-]\)/)) {
        // set current cursor via span
        editor.selection.setContent('<span id="temp-span"/>');

        // refresh Content with new span
        value = editor.getContent();

        // changing (+)/(-)/(?) to the appropriate image "on the fly"
        value = value.replace('(+)', ' <img src="https://url_here/static/task_manager/img/add.png">&nbsp;');
        value = value.replace('(-)', ' <img src="https://url_here/static/task_manager/img/forbidden.png">&nbsp;');
        value = value.replace('(?)', ' <img src="https://url_here/static/task_manager/img/help_16.png">&nbsp;');
        if (this.state.editor) {
            editor.setContent(value);

            // move cursor to the latter span
            var newNode = editor.dom.select('span#temp-span');
            editor.selection.select(newNode[0]);
            editor.selection.setContent('');
        }
        // and refreshing content again w/o span
        value = editor.getContent();
    }

Ich füge HTML-Inhalte an der aktuellen Caret-Position (ohne in diesem übergeordneten HTML-Element zu bleiben) wie folgt ein:

editor.insertContent( '<div>My html inserted code here...</div>' + '&nbsp;' , {format: 'html'} );

Dieses Leerzeichen am Ende stellt sicher, dass der weitere eingegebene Text außerhalb des eingefügten div-Elements platziert wird.