Update highlight of sentences in TinyMCE on the fly

138
November 21, 2016, at 4:42 PM

Okay. I've used Markjs.io and TinyMCE to create a little tool highlighting long sentences (above n-amount of words).

I currently have the text highlighted correctly on load.

I then tried to add som .on('keyup',function()) and .on('change', function()) to run the function and recalculate the highlights / marks as I type.

However. This approach apparently keeps returning the original text. And I can't add any new text to the field.

What I wanna do:

So what I wanna do is figure out how my function should run to keep recalculating and highlight long sentences. But in a way, so that it actually also add in the new text I'm typing or current edits I do in the TinyMCE editor.

Available on CodePen here: 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

The issue is the line:

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

Which just gets the original value from the textarea each time which is why it isn't updating.

Using makejs on the the body element of the WYSIWYG iframe instead should work:

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);
}
READ ALSO
Based on internet connection change color of button to green or grey

Based on internet connection change color of button to green or grey

I want the button itself to change its color when online(based on internet connection) to green otherwise gray. .

91
Pushing into array not working inside jQuery function

Pushing into array not working inside jQuery function

I'm using MaterializeCSS's autocomplete with Angular2-Materialize, and I'm trying to push the selected value into an array. However, I'm getting the following error:.

155
JQuery: Mover the Focus to the First Link

JQuery: Mover the Focus to the First Link

How can I move the focus to the first link on the page when the page is loaded using jquery. .

120