Stop ckeditor from triggering set callback when the text is modified by an external source

Currently, I am developing a Vue project that involves the use of ckeditor5 as a text editor. Pusher, a real-time API utilizing websockets, is used to broadcast events to other Pusher instances in real time. Learn more about Pusher here.

Within the ckeditor configuration, I have included a set callback. This callback is triggered on any text change and is utilized to send pusher events, broadcasting the text value to other instances of Pusher.

An issue arises when the receiving Pusher instance processes the event and Vue updates the text value in the DOM reactively. This then triggers the set callback once again, resulting in text flickering in the real-time environment.

As I only receive a string value in the callback, I am unable to determine what initiated it and therefore cannot prevent the execution.

Is there a method to prevent ckeditor5 from triggering the callback?

This issue may be present in any project utilizing websockets.

javascriptvue.jsckeditorpusherckeditor5

Answer №1

An issue arises when a change triggers a broadcast and a Pusher client receives and applies it, causing it to be broadcasted as the clients change. The original broadcaster then struggles to determine if it is its own change and applies it again.

Following several unsuccessful attempts to create a ckeditor plugin that filters out incoming changes initiated by the ckeditor instance itself, I devised a workaround to address this problem.

I implemented a caching system that temporarily stores initialized changes before broadcasting them. When a change is received from a Pusher client, it is only applied if it is not found in the cache, indicating it was initiated by another client.

While this workaround is effective in most cases, there may still be issues with very slow internet connections and low response times, depending on the caching duration.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to integrate bower with gulp for automation

I am trying to get gulp to run the installation of all files listed in my bower.json. However, despite writing the code below, it is not working and I'm not seeing any errors. What could be causing this issue? var gulp = require("gulp"); var bower = ...

javascriptnode.jsnpmgulpbower

Enable Google Chart to visualize multiple sets of data beyond just 2

This Google chart displays 2 data sets (Tea, Coffee). I've attempted to modify it to show 5 data sets but encountered difficulties. I experimented with changing the button.onclick function and the button value. Below you will find the original code (2 ...

javascripthtmlasp.netasp.net-mvcgoogle-visualization

The justify-between utility in Tailwind is malfunctioning

Can someone help me figure out how to add justify-between between the hello and the user image & name? They are in different divs, but I've tried multiple ways without success. I'm fairly new to this, so any advice would be appreciated. This ...

javascriptnext.jstailwind-css

Is it possible to implement the splice() method within a forEach loop in Vue for mutation

Hey there! I'm looking for a more efficient way to replace objects that match a specific index with my response data. Currently, I'm attempting to use the splice() method within a forEach() loop in Vue.js. However, it seems to only remove the obj ...

javascriptarraysvue.jsvuex

Breeze js requests metadata without needing to make a second call to the server

Currently, I am developing an Angular application that utilizes Breeze JS and ASP.NET OData controller. While testing, I encountered an issue where Breeze JS successfully makes the initial call to retrieve metadata from the server but fails to make the sec ...

javascriptangularjsodatabreezeasp.net-web-api2

I am attempting to update the background image pattern every time the page refreshes. Despite trying numerous codes, I have not been able to achieve the

Here is my code that I've been struggling with. I am trying to change the image on page refresh, but it's not working as expected. <SCRIPT LANGUAGE="JavaScript"> var theImages = new Array() theImages[0] = 'images/1.png' ...

javascriptphpcss

Using React to create a fadeout effect and decrease the length of the photo

Is there a way to create a fade-out effect for each photo card and then shorten the length of the photos following the fade out? I have tried implementing a solution, but it doesn't seem to work when I click on each photo. Any suggestions or insights ...

javascriptreactjs

Stop files from being downloaded every time the page is visited

Within my Vue.js application, there is an animation that appears on a specific page. However, each time I visit that page, the assets for the animation are re-downloaded from scratch. Although the app does get destroyed when leaving the page, using v-show ...

javascriptvue.js

Discovering the pixel value of scrolled distance (scroll delta) using jQuery scroll event

Here's the issue I'm facing: $(window).scroll(function(e){ console.log(e); }) I'm trying to figure out how much I've scrolled in pixels. It seems like the scroll value may be influenced by the window size and screen resolution ...

javascriptjquery

The website no longer uses AJAX calls and does not display any errors, although it used to do so in the past

I've noticed that my website is no longer making the ajax call it used to make before I made some changes to my code. However, I can't seem to figure out what exactly I changed. The function call appears to be correct as it triggers the initial a ...

javascriptphpjqueryhtmlajax

Enhancing JavaScript Variables Through Dynamic Ajax/PHP Interaction

I've been encountering some difficulties when trying to refresh my game. Initially, I attempted echoing the entire script each time... but that method was not aesthetically pleasing. Currently, I am experimenting with updating the variables through an ...

javascriptphpjqueryajax

Leveraging Mermaid for angular applications

As a newcomer to Mermaid, I am attempting to integrate it into my Angular project. Placing it in my HTML has proven successful. <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.0.1/mermaid.min.js"></script> <div class="merma ...

javascriptangularmermaid

Utilizing a custom function to filter Firestore collection data based on location proximity

I have a question about filtering a Firestore collection using a function where the values of the documents in the collection are used as arguments. Let's say we have a Firestore collection with documents structured like this: { pointOfInterest: "S ...

javascriptgoogle-cloud-firestore

Encountering a TypeError while trying to run Pythonshell on my Mac device

When I run a python script in node.js using python shell, it works perfectly on my Windows system. However, I encounter an error when trying to run the same thing on my Macbook: Error: TypeError: can't multiply sequence by non-int of type 'float ...

javascriptpythonnode.jsmacostypeerror

Can I use jqPlot to create a separate division for the legend?

Is it feasible to move the legend to a distinct div using jqPlot? legend: { show: true, placement: 'outside', fontSize: '11px', location: 'n' } ...

javascriptjqueryjqplot

How can you retrieve the input value in JavaScript when the cursor is not focused?

Here is an input I am working with: <a-form-item label="user" :colon="false"> <a-input placeholder="user" name="user" @keyup.enter="checkUser"/> </a-form-item> Within my methods: chec ...

javascriptvue.js

In Angular, link a freshly loaded ".js" controller to a newly loaded "html" view following the bootstrapping process on ngRoutes

As a newcomer to Angular, I have been experimenting with loading dynamic views using ngRoutes (which is very cool) along with their respective .js controllers for added functionality. However, I am encountering difficulties in binding them together after b ...

javascriptangularjsasynchronouspartial-views

New project was successfully generated, but the information is missing when transmitted from React to Django API

I recently developed a React + Django application and implemented a basic CRUD feature. Everything was working smoothly until I encountered an issue while creating a project and storing it in the Django database. When I view the project at projects/list, o ...

javascriptpythonreactjsdjangoweb-deployment

What is the alternative method of invoking a function within another function in React Native without utilizing a constructor?

Within my RegisterTaster function, I need to execute another function called endRegisterAlert. Since I'm not using a constructor and instead treating the class as a const in React Native, how can I achieve this? What is the best way to call the endRe ...

javascriptreactjsreact-nativefunction

What is the best way to determine the total number of classes that come before a specific element

Currently, this is my approach: <script> function Answered(str) { var script = document.getElementsByClassName('Answered')[str]; if(script!==null) {script.setAttribute("style", "");} } </script> <span class=Answered style=" ...

javascriptjquery