Update Höhepunkt der Sätze in TinyMCE im laufenden Betrieb

Question

Okay. Ich habe Markjs.io und TinyMCE verwendet, um ein kleines Tool zu erstellen, das lange Sätze hervorhebt (über n Wörter).

Im Moment habe ich den Text korrekt auf Last hervorgehoben.

Ich versuchte dann Som.on ('keyup', function()) und .on ('change', function()) hinzuzufügen, um die Funktion auszuführen und die Markierungen/Markierungen neu zu berechnen, während ich tippe.

Jedoch. Dieser Ansatz liefert anscheinend immer den Originaltext zurück. Und ich kann dem Feld keinen neuen Text hinzufügen.

Was ich tun möchte:

Also, was ich tun möchte ist, herauszufinden, wie meine Funktion sollte neu berechnet zu halten laufen und lange Sätze markieren. Aber in gewisser Weise, so dass es tatsächlich auch den neuen Text hinzufügt, den ich gerade bearbeite oder aktuelle Bearbeitungen mache ich im TinyMCE-Editor.

Verfügbar auf CodePen hier: http://codepen.io/MarkBuskbjerg/pen/rWWRbX

HTML:

<div id="myTextArea" contenteditable="true"> 
    Any text will do. Above 16 words in a single sentence - from dot to dot - will be highlightet for all the world to see. 
</div> 

JavaScript (jQuery):

tinymce.init({ 
    selector: '#myTextArea', 
    height: 300, 
    setup: function(ed) { 
    ed.on('change', myCustomInitInstance); 
    ed.on('keyup', myCustomInitInstance); 
    ed.on('paste', myCustomInitInstance); 
    ed.on('cut', myCustomInitInstance); 
    }, 
    init_instance_callback: "myCustomInitInstance", 
}); 

function myCustomInitInstance(inst) { 
    var rawText = tinyMCE.get('myTextArea').getContent({ 
    format: 'text' 
    }); 

    var sentenceArray = rawText.split("."); 
    var matchWarning = []; 
    var longSentence = 16; 
    var words; 
    var wordCounter; 
    var output; 

    for (var i in sentenceArray) { 
    words = sentenceArray[i].split(" "); 
    wordCounter = words.length; 
    if (wordCounter > longSentence) { 
     matchWarning.push(sentenceArray[i]); 
    } 
    } 

    var $clone = $("#myTextArea").clone(); 
    $clone.mark(matchWarning, { 
    "separateWordSearch": false, 
    }); 

    tinyMCE.activeEditor.setContent($clone.html()); 
}): 

Answer 1

Das Problem ist die Zeile:

var $clone = $("#myTextArea").clone(); 

, die gerade bekommt das Originalwert aus dem Textarea jedes Mal, weshalb es nicht aktualisiert wird.

makejs auf dem Körperelement des WYSIWYG iframe verwenden sollten stattdessen arbeiten:

function myCustomInitInstance(inst) { 
    var rawText = tinyMCE.get('myTextArea').getContent({ 
    format: 'text' 
    }); 

    var sentenceArray = rawText.split("."); 
    var matchWarning = []; 
    var longSentence = 16; 
    var words; 
    var wordCounter; 
    var output; 

    for (var i in sentenceArray) { 
    words = sentenceArray[i].split(" "); 
    wordCounter = words.length; 
    if (wordCounter > longSentence) { 
     matchWarning.push(sentenceArray[i]); 
    } 
    } 

    var editor = tinyMCE.activeEditor; 
    // Store the selection 
    var bookmark = editor.selection.getBookmark(); 

    // Remove previous marks and add new ones 
    $(editor.getBody()).unmark().mark(matchWarning, { 
    acrossElements: true, 
    "separateWordSearch": false, 
    }); 

    // Restore the selection 
    editor.selection.moveToBookmark(bookmark); 
}