How To Highlight Sentences In Tinymce Like This?

Edit 18th november 2016 I'm trying to mark / highlight long sentences (above 16 words) in a TinyMCE editor. This is my best bet so far using mark.js and TinyMCE editor The HTML is

Solution 1:

You'll need to set the changed HTML using a TinyMCE API method.

This answer demonstrates how to set HTML content using tinyMCE.activeEditor.setContent. Now, since mark.js marks matches directly in the textarea, you'll have to clone the textarea, let mark.js do the changes there and then set the clone's HTML to the original textarea.

This would be the full code:

tinymce.init({
  selector: '#myTextArea',
  height: 300,
  init_instance_callback: "myCustomInitInstance",
});

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

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

  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,
    "iframes": true
  });
  tinyMCE.activeEditor.setContent($clone.html());
}