refresh information using ckeditor

I've been facing an issue with updating the content in my CKEditor

<textarea id="monday" class="ckeditor" name="monday" >1</textarea>
<script type="text/javascript" >
    setTimeout(function(){
        $('#monday').val('test');
        CKEDITOR.instances.monday.updateElement();
        alert( $('#monday').val());
    },1000)
</script>

Despite trying different methods, I still end up with '1' in my CKEditor and the alert displays

1

(which doesn't show up)

This is using CKEditor 4.0

I came across a post discussing a similar issue but for an older version of CKEditor

Thanks

edit: 2nd test

<script type="text/javascript" >
setTimeout(function(){
    $('#monday').val('test');
    for ( instance in CKEDITOR.instances )
    {
        CKEDITOR.instances[instance].updateElement();
    }
    alert( $('#monday').val());
},5000)
</script>

However, this approach didn't yield the desired result

Edit 3rd test

<script type="text/javascript" >
setTimeout(function(){
    $('#monday').val('test');
    $('textarea.ckeditor').each(function () {
    var $textarea = $(this);
    $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
    console.log(CKEDITOR.instances[$textarea.attr('name')].getData());
    console.log($('#monday').val())
    });
},5000)
</script>

The console consistently shows

1

every time

and

<script type="text/javascript" >
setTimeout(function(){
    $('#monday').val('test');
    $('textarea.ckeditor').each(function () {
    var $textarea = $(this);
    console.log($('#monday').val())
    });
},5000)
</script>

displays 'test'

Answer №1

here is an alternative choice

$('textarea.tinymce').each(function () {
   var $textarea = $(this);
   $textarea.val(TINYMCE.instances[$textarea.attr('id')].getContent());
});

Answer №2

Have you ever considered the consequences of deleting this particular line?

What could occur if CKEDITOR.instances.monday.updateElement(); was removed?

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

Problems encountered while invoking a function using ng-click within an AngularJS controller?

You can check out the code by visiting When attempting to login, I trigger the simple login() function of the AuthController using ng-click on the login form button. However, upon calling this function, I encounter an error message in the console that I a ...

What could be preventing my function from being invoked at regular intervals?

I have been attempting to trigger a function every few seconds with the following code snippet: HTML: <div id="Result">Click here for the message.</div> JS: $(document).ready(function () { $("#Result").click(function () { var ...

Steps for Implementing a "Load More" Button on an HTML JSON Page

I'm currently engaged in a project that involves fetching product information from a JSON file and displaying it on an HTML page using JavaScript. While I've successfully implemented the fetch function, I now want to add a "Load More" function/bu ...

Utilize Browserify to Dynamically Load all Files within a Directory

As a newcomer to Browserify and JavaScript build systems in general, I find myself in a state of utter confusion. I have successfully set up Gulp for my builds, but recently I have been exploring Browserify to bundle my code, mainly to organize my code in ...

Unable to designate a default boolean parameter as default

I've been exploring various methods for setting default parameters for jQuery functions. One approach I found interesting involves creating a JSON object within the function and utilizing extend to combine any provided options. Currently, however, I h ...

Meteor: Adding information to a fresh database

I am attempting to add elements into a Collection using Meteor/MongoDB for the first time. However, I am encountering an issue when trying to save a new title. "Access denied. No allow validators set on restricted collection for method 'insert&ap ...

Bootstrap 5 dropdown list item not responding to click event

I am attempting to implement a click event on bootstrap 5 dropdown items using Javascript, specifically jQuery. However, I am facing an issue where the event is triggered not upon clicking but rather when the page initially loads. Here is a sample code: & ...

A strange issue with ajax: SyntaxError occurs with an unexpected token "if"

Having an issue with my javascript code: function updatePage() { if (request.readyState == 4) if (request.status == 200) var data = JSON.parse(request.responseText); update_select($('select[name=island_name]'), data); ...

Exploring tailored markup features in Next.js version 13

I am trying to optimize my website for social media sharing on platforms like WhatsApp. I have been experimenting with different methods to set custom markup in Next.js 13, but haven't achieved the desired outcome yet. Your help and insight are greatl ...

What is the best way to convert rows into columns within an array of values?

Below is the structure of my data: let information = [ { X:[ {title: 'Example1', quantity: 25}, {title: 'Example2', quantity: 35} ], Y:[ {title: 'Sample3', quantity: 45}, {title: 'Sample4 ...

Display link and popup box when hovering over an image!

Currently working on a web application with asp.net and telerik RadAjax control. I am looking to implement a functionality where, upon hovering over an image, a hyperlink should be displayed. Upon clicking the link, a new window should open (similar to c ...

What is the best way to retrieve a selected value from one dropdown list and populate it into another dropdown

Can someone assist me with retrieving the selected answer from one drop-down list and populating it into another drop-down list? Below is my code for programming groups A and B: Example: If a user selects an option from group A and group B, I would li ...

Checking for duplicate entries in an array created with the Angular form builder

I am currently utilizing angular6 reactive form with form builder and form array. The issue I am encountering is duplicate subject entries from the drop down in the form array. How can I implement validation to prevent duplicate entries in the form array? ...

What is the process of incorporating a video into a react.js project through the use of the HTML

I'm experiencing an issue where my video player loads, but the video itself does not. Can anyone shed light on why this might be happening? class App extends Component { render() { return ( <div className="App& ...

The server encountered an issue: 415 Unsupported Media Type. JSON data was not loaded as the Content-Type in the request was not 'application/json'

I'm currently working on a React-Python(Flask) project and encountering an error in the backend: '415 Unsupported Media Type: Did not attempt to load JSON data because the request Content-Type was not 'application/json'. the frontend ...

Switching the background color of a button on click and resetting the color of any previously clicked buttons (a total of 8

I'm struggling to implement a feature where only one button out of a column of 8 should be toggled yellow at a time, while the rest remain default green. Unfortunately, I can't seem to get the function to execute on click, as none of the colors a ...

Is it possible to navigate back to a component in Angular without having to reload it?

Within my Angular application, there is a main component that contains various child components. This main component includes logic for showing and hiding components based on certain conditions. <div *ngFor="let data of dataSource; let i=index"> & ...

Most effective method for integrating a JS module across all browsers

I have created a robust library that I want to integrate into a different web project. This library handles all its dependencies and consists of js, css, and html files. My ideal scenario would be to package it as an npm module and simply use import to in ...

Upon redirecting to a new page following the loading of a previous page

At the moment, I have a webpage where filling out a text box and clicking a button redirects you to another page. This page must be loaded because it updates and displays XML data (this aspect cannot be changed). However, my goal is to either redirect th ...

What is the best approach to comparing two times in JavaScript to ensure accuracy after an NTP time update?

We are facing an issue with a JavaScript function that retrieves the start and end times of two events: var startTime = new Date().getTime(); // A lengthy task is executed var endTime = new Date().getTime(); The problem we encountered is that getTime() s ...