在TinyMCE上更新句子的亮點

Question

好的。我使用Markjs.io和TinyMCE創建了一個突出顯示長句子（單詞數量超過n個）的小工具。

我目前有文字在加載時正確突出顯示。然後我嘗試添加som .on（'keyup'，function（））和.on（'change'，function（））來運行該函數並在我輸入時重新計算高亮/標記。

但是，這種方法顯然不斷返回原文。而且我無法在該字段添加任何新文字。

我想要做什麼：

所以我想要做的是找出我的功能應該如何運行，以保持重新計算，並強調長句。但從某種意義上說，它實際上也增加了我輸入的新文本或我在TinyMCE編輯器中進行的當前編輯。

上CodePen可在這裏：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

的問題是該行：

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

剛剛得到每次都從textarea獲得原始值，這就是爲什麼它沒有更新。

所見即所得的iframe的body元素的使用，而不是makejs應該工作：

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); 
}