CKEditor - extracting modified content with its associated HTML markup

Question

CKEditor - extracting modified content with its associated HTML markup

I am currently developing my own custom Drupal plugin and I recently reviewed the code provided in the API for change events:

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

Using this code snippet, I am able to view all the data within my editor when changes are made. My content is organized using custom HTML tags, each with unique data attributes. My primary query revolves around identifying the closest tags when a user adds new content, so that I can append a data attribute to signify that changes have been made.

Additionally, I am looking for a way to implement a timer or delay function to prevent the trigger from occurring with every keystroke. Do you have any suggestions on how best to achieve this?

javascript plugins ckeditor

Answer 1

Answer №1

Your code snippet appears to be written in jQuery. It seems you have created a function that triggers on the change event within an editor. This function will execute each time a user modifies something in the editor. To prevent excessive firing, consider implementing the following approach:

First, declare a global variable in the parent scope (above your function):

var editorTimer = null;

Next, adjust your function as follows:

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

This setup clears the previous timer and waits for 1000ms (1s) after each change before executing the function. If the user does not make any changes for 1s, the function will be triggered.

Be sure to modify your function and substitute the console.log() with code that serves your intended purpose. Utilize jQuery selectors to identify elements: http://api.jquery.com/category/selectors/

Consider using methods like .closest(), .parents(), or .find() based on your specific requirements.

Answer 2

Your code snippet appears to be written in jQuery. It seems you have created a function that triggers on the change event within an editor. This function will execute each time a user modifies something in the editor. To prevent excessive firing, consider implementing the following approach:

First, declare a global variable in the parent scope (above your function):

var editorTimer = null;

Next, adjust your function as follows:

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

This setup clears the previous timer and waits for 1000ms (1s) after each change before executing the function. If the user does not make any changes for 1s, the function will be triggered.

Be sure to modify your function and substitute the console.log() with code that serves your intended purpose. Utilize jQuery selectors to identify elements: http://api.jquery.com/category/selectors/

Consider using methods like .closest(), .parents(), or .find() based on your specific requirements.

CKEditor - extracting modified content with its associated HTML markup

Answer №1

Similar questions

Issue with using async await in map function: async function may not complete before moving on to the next item in the

Trouble with Mongoose: Data Not Being Saved

Align the reposition button with the pagination in the datatables

Receiving the message "servlet temporarily moved" while attempting to pass serializable data through an AJAX request to a servlet

Incorporate additional form element functionalities using radio inputs

Exploring the TLS configuration for a Node.js FTP server project: ftp-srv package

typescript error: passing an 'any' type argument to a 'never' type parameter is not allowed

Search for specific parameters in an array and retrieve them

Enhance and Modify feature using Javascript

Using JavaScript regex to eliminate content enclosed in parentheses, brackets, and Cyrillic characters

reveal.js: Upon a fresh installation, an error has been encountered: ReferenceError - 'navigator'

Exploring the world with an interactive map in R, incorporating Shiny and leaflet

Tips on implementing a function within a navigation bar from a specific context

What occurs when socket.io events are not properly handled?

The combination of Spring Boot and Angular's routeProvider is a powerful

Is it more effective to utilize a filter or request fresh data when filling in a form's drop-down choices?

Displaying a single photo on mobile, while simultaneously showing four photos on the web using Nuxt.js

JavaScript will continue to process the submit to the server even after validation has been completed

Jump to Anchor when Page Reloads

"Encountering a connectivity problem with Apollo server's GraphQL