CKEditor - get changed content and surrounding HTML tags

Question

I am writing my own plugin for Drupal. I checked the following code in the API for the change events:

  editor.on('change', function (evt) {
    console.log(this.getData());
  });

With it, I can see all the data in my editor when changed. I have my content structured with custom HTML tags (which have some data attributes). My question is, if the user writes some content, how can I get the closest tags - and therefore add a data attribute that it has been changed?

I'd also need some kind of timer/delay, to not trigger that on every keystroke, I suppose?

Rafał Mnich Rafał Mnich · Accepted Answer · 2016-06-21T13:02:57

The code you've shown is jQuery code. You've made a function that fires on change event on editor. It will fire every time user changes something in editor. To avoid this you can make something like this:

add an global variable at parent scope (before your function):

var editorTimer = null;

then change your function to:

if (editorTimer.length) {
    clearTimeout(editorTimer);
}
editorTimer = setTimeout(function () {
    console.log(this.getData());
}, 1000);

It will clear last timer and then wait 1000ms (1s) after each change to fire the function inside. If user won't change anything for 1s the function will be called.

Now - you need to prepare your function and change the console.log() to something that works. To find tags use jQuery selectors: http://api.jquery.com/category/selectors/

like .closest() or .parents() or .find() it depends what you are willing to do.

CKEditor - get changed content and surrounding HTML tags

1 Answers