Is there a way for me to access and retrieve the content of a tinymce textarea that has been modified

After clicking the 'Edit HTML Below then Click Display' button, my input texts work perfectly fine. However, I am facing issues with my tinymce textareas as they do not send the new value to the iframe when edited. How can I resolve this problem and ensure the new values are sent when editing the tinymce textareas? Here's the link to the jsfiddle: http://jsfiddle.net/Ms3NG/1/ along with the code provided below:

<script type="text/javascript">
function init(buttonid, name, iframeid) {
    document.getElementById(buttonid).addEventListener('click',function() {
//        this.style.backgroundColor = '#cc0000';
      gJSL_displayInput(name, iframeid)
    },false);
    gJSL_displayInput(name, iframeid);
}

window.onload = function() {
init('thisButton','test','iframetest');
init('thisButtona','testa','iframetesta');
init('thisButtonb','testb','iframetestb');
}

    function gJSL_displayInput(nameInput, idOutput) {

        var loc = "::JSLearning::gJSL_displayInput()";
        try {
            var ifrm = document.getElementById(idOutput);
            var cnt = (ifrm.contentWindow || ifrm.contentDocument);
            var doc;
            doc = cnt.document;
            doc.open();
            var inputs = document.getElementsByName(nameInput);
            for(var i = 0; i < inputs.length; i++) {
                doc.write(inputs[i].value + "<br />");
            }
            doc.close();
        } catch (e) {
            exceptionAlert(loc, e);
        }
    }
</script>

<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script>
        tinymce.init({selector:'textarea'});
</script>

<div class="scrollbar">
<input id="test1" name="test" value="ajkla;ldkfj">
<input id="test2" name="test" value="bla2">
<input id="test3" name="test" value="bla3">
<input id="test4" name="test" value="bla4">
<input id="test5" name="test" value="bla5">

<br><br>

<textarea class="ckeditor" id="test6" name="test"></textarea>

<br><br>

<input id="test7" name="test" value="bla7">

<br><br>

<textarea id="test8" name="test">HELLO WORLD</textarea>

<br><br>

<textarea id="test9" name="test">HI EVERYBODY</textarea>

<br><br>

<input id="thisButton" type="button" name="Display" value="Edit HTML Below then Click to Display"/>
</div>


<div class="scrollbar"><iframe id="iframetest" src="" style="background: White;"></iframe></div>

Answer №1

Here is a snippet of code that can help you retrieve updated values from tinyMCE:

var updatedContent8 = tinyMCE.get('test8').getContent();
doc.write(updatedContent8);

var updatedContent9 = tinyMCE.get('test9').getContent();
doc.write(updatedContent9);

If you'd like to see an example in action, feel free to check out this JSFiddle I created for you: JSFiddle Link.

Answer №2

When I last utilized tinyMCE, it did not have the autoupdate textarea feature. Therefore, before submitting the form, you need to use .getContent() to update your textarea. You can find more information at this link: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent

Here is an example of how your code should appear:

function gJSL_displayInput(nameInput, idOutput) {
    var loc = "::JSLearning::gJSL_displayInput()";
    try {
        var ifrm = document.getElementById(idOutput);
        var cnt = (ifrm.contentWindow || ifrm.contentDocument);
        var doc;
        doc = cnt.document;
        doc.open();
        var inputs = document.getElementsByName(nameInput);
        for(var i = 0; i < inputs.length; i++) {
            if(inputs[i].tagName == 'TEXTAREA')
              doc.write(tinyMCE.get(inputs[i].id).getContent() + "<br />");
            else
              doc.write(inputs[i].value + "<br />");
        }
        doc.close();
    } catch (e) {
        exceptionAlert(loc, e);
    }
}

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

Tips for using various versions of jQuery at the same time

Despite searching on Stack Overflow, none of the answers provided seem to work for my issue. My requirement is to utilize two separate versions of jQuery. Below is the code snippet: I first link to the initial version and use the following code: <sc ...

What is the best way to convert a circular JSON object to a string

Is there a way to stringify a complex JSON object without encountering the "Converting circular structure to JSON" error? I also need its parser. I am facing issues every time I try to use JSON.stringify and encounter the "Converting circular structure to ...

I need to know how to send a "put" request using JavaScript and Ajax

My task involves programmatically updating a spreadsheet using my code. I am able to write to a specific cell within the spreadsheet with the following function: function update(){ jQuery.ajax({ type: 'PUT', ...

Transfer an array generated within a JavaScript function to a PHP script using another function

I've successfully created an array within a Javascript function, and now I'm looking to pass this array to a PHP script upon clicking a button on the HTML page. My attempt to pass it involves calling the following function: function transferarra ...

Screen the array of objects for data that is valid

My array is structured with keys and values like this: const array = [ { DEVICE_SIZE: ['036', '048', '060', '070'], }, { DEVICE_VOLTAGE: ['1', '3'], }, { &a ...

Having difficulty initializing jQuery DataTables upon button click with an Ajax request

I have a piece of HTML code that represents a partial view: <table id="table_id" class="table table-inverse"> <thead class="thead-inverse"> <tr> <th>Select</th> ...

Jquery Mobile: Navigating back to the first page after calling changePage

In the process of developing a mobile app with phonegap/cordova and jquery mobile, I encountered an issue where the user is supposed to land on a specific page from a status bar notification. However, the app initially displays the default page briefly bef ...

The first name of the user is not shown following the completion of the registration

I'm currently developing an application using React and Node.js. In the frontend, I have implemented a functionality where upon logging in, users are redirected from the /login route to the root route and greeted with their first name. However, when a ...

What technique does React use to selectively update specific sections of the DOM?

How does React efficiently update only the necessary parts of the DOM that have changed, rather than re-rendering the entire DOM? I've noticed that traditional HTML/JavaScript pages tend to refresh the whole DOM when changes occur. However, React uti ...

Exploring Nashorn's capabilities in parsing TypeScript

Recently, I came across a discussion suggesting that Nashorn in JDK 9 should have the capability to parse TypeScript. Excited to try it out, I attempted to use it like this: Parser parser = Parser.create(); CompilationUnitTree ...

Unexpected behavior: Bootstrap modal triggers twice upon closing and reopening

When I click a button, a login form modal is displayed. This modal is loaded from an external file using AJAX. However, I have encountered an issue where if I close and reopen the modal, it launches twice and the modal-backdrop class appears twice as well. ...

A blank canvas appears in Chart.js within a node.js environment

I'm encountering an issue while trying to utilize Chart.js with JSDOM in Node.js. Based on my observations, I don't believe the problem lies within JSDOM because I am able to draw on the canvas and see proper rendering. Therefore, my suspicion i ...

What is the best way to select a specific button to handle the onSubmit event in a React form with multiple buttons

Imagine having the following HTML structure: <div id="container"></div> <p>Output: <span id="output"></span></p> accompanied by this block of JS code: function otherAction(e) { document.getElementById('output& ...

The magical unveiling of words through the art of animation

After spending considerable time learning how to code, I find myself seeking assistance in creating a specific animation. For the past two days, I've been struggling to bring my vision to life (see attached image). Unfortunately, my current knowledge ...

Submitting an HTML form with no input data

Looking to dynamically pass arguments between pages using the code below: <script type="text/javascript> function buildAndSubmitForm(index){ <? $args = 't='.$team.'&s='.$season.'&l='.$league.&apo ...

How to Retrieve the Current div's ID in VueJS

When using the v-for directive to dynamically generate an id for my div, I need to pass this unique id to a specific function. <div v-for="(item, index) in items" :key="index" :id="'form' + index" > ...

jQuery Triggered Download Resulting in 'Error: Connection Issue'

I need to trigger a download using a JQuery AJAX request once it's finished. EXAMPLE CODE: $('.getPDF').click(function(){ var filepath = 'localhost:3000/pdf/formula-' + this.id + '.pdf'; $.ajax({ url: '/formu ...

The function parseFloat in Javascript can be used to subtract two numbers, returning an integer value

Apologies for the inconvenience, but I could really use some assistance. I attempted to convert a string into a decimal and was successful, although I encountered an issue: number = document.getElementById("totalcost").innerHTML; //String that rep ...

Using TypeScript, you can pass an object property name as a function argument while ensuring the type is

How can I define a type in a function argument that corresponds to one of the object properties with the same type? For instance, if I have an object: type Article = { name: string; quantity: number; priceNet: number; priceGross: number; }; and I ...

Steps for sending a form with jQuery's submit method1. Start

Below is the jquery code that I have written: $(document).ready(function () { $('.bar_dropdown').on('change', function() { console.log("dropdown changed") $('#bar_graph_form_id').submit(function(e ...