Use getContent from multiple TinyMCE4 instances in one go?

Question

I need to get the HTML from a sourrounding DIV, and at the same time get the correct (raw?) HTML from the multiple DIVs with the inline tinyMCE4.

I have managed to get all the HTML by using :

jQuery("#ForSaving").html(jQuery(".Editable").html());

But this gets the wrong HTML from the tinyMCE. In stead of a output of for instance <iframe>, I get a <img class="mce-object mce-object-iframe" etc.

I have tried to use tinyMCE's getContent(), but have not succeeded to get the correct from all tinyMCE instances in one go.

It is important to me that I don't only get the content from inside the tinyMCE DIVs, but also the surrounding DIVs and code. I need that to further process the HTML.

Here is an example of my pure HTML:

<html>
<head>        
    <script type="text/javascript">
        tinymce.init({
            selector: "div.tinyeditor",
            inline: true,
            theme: "modern",
    </script>                
</head>
<body>
    <div id="ForSaving"></div>

    <div id="Editable">
        <div class="contentwrap" id="area_(randnumb)">
            <div class="somediv">Some html</div>
            <div class="tinyeditor"><p>The HTML inside tinyMCE</p></div>
        </div>

        <div class="contentwrap" id="area_(randnumb)">
            <div class="somediv">Some html</div>
            <div class="tinyeditor"><p>The HTML inside tinyMCE</p></div>
        </div>

        <div class="contentwrap" id="area_(randnumb)">
            <div class="somediv">Some html</div>
            <div class="tinyeditor"><p>The HTML inside tinyMCE</p></div>
        </div>

        <div class="contentwrap" id="area_(randnumb)">
            <div class="somediv">Some html</div>
            <div class="tinyeditor"><p>The HTML inside tinyMCE</p></div>
        </div>
    </div> <!-- end of div#editable -->
</body>
</html>

I need to get ALL the HTML content from within the DIV #Editable, but with the (raw?) correct HTML output from the tinyMCE instances. Hopefully at once.

I need to get a HTML looking like this:

           <div class="contentwrap" id="area_(randnumb)">
                    <div class="somediv">Some html</div>
                    <div class="tinyeditor">(THE REAL HTML FROM tinyMCE)</div>
           </div>

           <div class="contentwrap" id="area_(randnumb)">
                    <div class="somediv">Some html</div>
                    <div class="tinyeditor">(THE REAL HTML FROM tinyMCE)</div>
           </div>

           <div class="contentwrap" id="area_(randnumb)">
                    <div class="somediv">Some html</div>
                    <div class="tinyeditor">(THE REAL HTML FROM tinyMCE)</div>
           </div>

           <div class="contentwrap" id="area_(randnumb)">
                    <div class="somediv">Some html</div>
                    <div class="tinyeditor">(THE REAL HTML FROM tinyMCE)</div>
           </div>
</div>

Is there a simple way to do this?

No, that is the HTML I need. :-) If you look closely you will see that this is all the HTML inside the DIV#Editable. I just need it to also get the real HTML content from all the tinyMCE DIVs too. — Preben

Preben Preben · Accepted Answer · 2014-11-10T11:20:41

I solved this by doing some changes:

1) I used jquery each() to run a loop through each div.contentwrap

2) I first got the contentwrap's true ID

3) Then built the usin var contentwrapstart = (and using HTML + the ID here)

<div class="contentwrap" id="area_(randnumb)">

4) Then got the tinyMCE content for that specific tinyeditor. (Had to add a ID to that div too)

5) Then built < to end the wrapping

6) Added each to a var result += (values here)

7) Did this for each

8) Stored var result = outside the loop

9) Got the HTML I needed from var result later.

And this worked well :-)

Use getContent from multiple TinyMCE4 instances in one go?

1 Answers