Jquery: contenteditable div/Text einfügen + vorher bearbeiten

[MsvP@habdichliebhasi]

Hallo ihr Lieben,

ich hätte es nicht gedacht, wie kompliziert es ist, einen einzufügenden Text zu bearbeiten, und ihn anschließend an die vorgesehene Position zu platzieren.

Folgendes habe ich vor:

Ein Div der contenteditable='true' besitzt für einen eigenen kleinen WYSIWYG-Editor. Beim Einfügen von formatiertem Text, soll dieser durchlaufen werden und von allem "Unrat" befreit werden.
Ich habe es mittlerweile auf verschiedenen Wegen probiert.

Anscheinend ist es nicht möglich mittels einer einfach jQuery-Funktion den Text auszulesen um ihn zu bearbeiten. Laut meiner Recherchen muss ich:

1. den bisherigen Text zwischenspeichern
2. dann den neu eingefügten Text ausschneiden.
3. anschließend wieder den alten Text einfügen
4. den ausgeschnittenen Text bearbeiten.
5. im letzten Schritt, muss der bearbeitete Text wieder an die Stelle eingefügt werden, wo er ursprünglich eingefügt werden sollte.

Soweit so gut, in der Theorie kompliziert, in der Praxis laufe ich noch gegen eine Wand.

Ich habe einige Code-Schnipsel gefunden mit denen ich den eingefügten Text ausschneiden kann.
Zu dem bekomme ich die Cursor-Position ermittelt, bevor irgend etwas passiert. Auch den Text von Formatierungen zu befreien klappt. Aber diesen jetzt an die vorherige Paste-Position zurück zu platzieren, daran scheitere ich derzeit.

Hier mal, was ich mir bisher so zusammengesucht habe:

function cleanWordPaste( in_word_text ) {
var tmp = document.createElement("DIV");
tmp.innerHTML = in_word_text;
var newString = tmp.textContent||tmp.innerText;
// this next piece converts line breaks into break tags
// and removes the seemingly endless crap code
newString  = newString.replace(/\n\n/g, "<br />").replace(/.*<!--.*-->/g,"");
// this next piece removes any break tags (up to 10) at beginning
for ( i=0; i<10; i++ ) {
  if ( newString.substr(0,6)=="<br />" ) {
   newString = newString.replace("<br />", "");
  }
}
return newString;
}

function getCaretPosition(editableDiv) {
    var caretPos = 0, containerEl = null, sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            if (range.commonAncestorContainer.parentNode == editableDiv) {
                caretPos = range.endOffset;
            }
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        if (range.parentElement() == editableDiv) {
            var tempEl = document.createElement("span");
            editableDiv.insertBefore(tempEl, editableDiv.firstChild);
            var tempRange = range.duplicate();
            tempRange.moveToElementText(tempEl);
            tempRange.setEndPoint("EndToEnd", range);
            caretPos = tempRange.text.length;
        }
    }
    return caretPos;
}

function handlepaste (elem, e, cursorPosition) {
    var savedcontent = elem.innerHTML;
    if (e && e.clipboardData && e.clipboardData.getData) {// Webkit - get data from clipboard, put into editdiv, cleanup, then cancel event
        if (/text\/html/.test(e.clipboardData.types)) {
            elem.innerHTML = e.clipboardData.getData('text/html');
        }
        else if (/text\/plain/.test(e.clipboardData.types)) {
            elem.innerHTML = e.clipboardData.getData('text/plain');
        }
        else {
            elem.innerHTML = "";
        }
        waitforpastedata(elem, savedcontent,cursorPosition);
        if (e.preventDefault) {
                e.stopPropagation();
                e.preventDefault();
        }
        return false;
    }
    else {// Everything else - empty editdiv and allow browser to paste content into it, then cleanup
        elem.innerHTML = "";
        waitforpastedata(elem, savedcontent,cursorPosition);
        return true;
    }
}

function waitforpastedata (elem, savedcontent, cursorPosition) {
    if (elem.childNodes && elem.childNodes.length > 0) {
        processpaste(elem, savedcontent,cursorPosition);
    }
    else {
        that = {
            e: elem,
            s: savedcontent
        }
        that.callself = function () {
            waitforpastedata(that.e, that.s, cursorPosition)
        }
        setTimeout(that.callself,20);
    }
}

function processpaste (elem, savedcontent,cursorPosition) {
    pasteddata = elem.innerHTML;
    //^^Alternatively loop through dom (elem.childNodes or elem.getElementsByTagName) here

     elem.innerHTML = savedcontent;
 
    cleanPaste = cleanWordPaste(pasteddata);

}

Und dazu dann noch folgender Aufruf:

    $('.textEditor').on('paste', function(event){
        cursorPosition = getCaretPosition(this);
     
        cleanWord = handlepaste(this,event,cursorPosition);
     
    });

Das hier sieht auch recht vielversprechend aus, allerdings bekomme ich es nicht mit dem einzufügenden Text kombiniert, da es zu diesem Zeitpunkt ja schon keinen "Caret"-Position mehr gibt, da ja der Text zwischenzeitlich gelöscht wurde - vielleicht könnte man diese Funktion so umbauen, dass sie nicht die aktuelle Cursorposition nutzt, sondern die vorher von mir abgespeicherte aus der Variable "cursorPosition" - aber ich bekomm es nicht hin:

function pasteHtmlAtCaret(html, selectPastedContent) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // only relatively recently standardized and is not supported in
            // some browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            var firstNode = frag.firstChild;
            range.insertNode(frag);
         
            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                if (selectPastedContent) {
                    range.setStartBefore(firstNode);
                } else {
                    range.collapse(true);
                }
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        // IE < 9
        var originalRange = sel.createRange();
        originalRange.collapse(true);
        sel.createRange().pasteHTML(html);
        if (selectPastedContent) {
            range = sel.createRange();
            range.setEndPoint("StartToStart", originalRange);
            range.select();
        }
    }
}

Hilfe....

Liebe Grüße und Danke!

 

[MsvP@habdichliebhasi]

Also wahrscheinlich würde mir schon eine Funktion reichen, die einen Text an Position XY in einem contenteditable-Div einfügt. Da ich die Position ja bereits herausfinde, bevor alles gelöscht wird. In sofern müsste ich jetzt den bearbeiteten Text nur wieder richtig eingefügt bekommen. Jemand da eine Idee?

 

[MsvP@habdichliebhasi]

Okey, dann mache ich mal weiter.

Zumindest klappt es jetzt, dass der bearbeitete Text eingefügt wird. Dazu habe ich diese Funktion folgendermaßen erweitert:

function processpaste (elem, savedcontent,cursorPosition) {
    pasteddata = elem.innerHTML;

    cleanPaste = cleanWordPaste(pasteddata);

    var output = [savedcontent.slice(0, cursorPosition), cleanPaste, savedcontent.slice(cursorPosition)].join('');

    elem.innerHTML = output;

}

Leider ist das aber nur die halbe Miete, wie ich gerade rausfinden muss. Da der Text z.B. bei mehreren Zeilenumbrüchen an die falsche Stelle gesetzt wird.
Zudem gibt es ein Problem bei markiertem Text. Der wird nicht ersetzt, wie es normalerweise der Fall wäre, wenn man etwas einfügt, da er ja vorher Zwischengespeichert wird...