Hi in a wizard on a confirmation tab i try to get the content from the tinymce editor. But it doesn't work. With normal textareas it works without any problems.

Example normal Textarea:

<div class="control-group">
<label class="control-label">MyValue<span class="required">*</span></label>
<div class="controls">
<textarea class="span12 m-wrap" style="max-width:100%;" name="MyValue" rows="7"></textarea>
</div></div>

Code to show text from textarea on the confirmation page:

<div class="control-group">
<label class="control-label">MyValue</label>
<div class="controls">
<span class="text display-value" data-display="MyValue"></span>
</div>
</div>

My JavaScript code:

        var displayConfirm = function() {
            $('.display-value', form).each(function(){
                var input = $('[name="'+$(this).attr("data-display")+'"]', form);
                if (input.is(":text") || input.is("textarea")) {
                    $(this).html(input.val());
                } else if (input.is("select")) {
                    $(this).html(input.find('option:selected').text());
                } else if (input.is(":radio") && input.is(":checked")) {
                    $(this).html(input.attr("data-title"));
                } else if ($(this).attr("data-display") == 'htmlinhalt') {
                    $(this).html($('[name="htmlinhalt"]', form).val());
                } 
            });
        }

But why it doesn't work with a tinymce textarea? I think I must get the content directly from tinymce not from textarea, but how?

Hi in a wizard on a confirmation tab i try to get the content from the tinymce editor. But it doesn't work. With normal textareas it works without any problems.

Example normal Textarea:

<div class="control-group">
<label class="control-label">MyValue<span class="required">*</span></label>
<div class="controls">
<textarea class="span12 m-wrap" style="max-width:100%;" name="MyValue" rows="7"></textarea>
</div></div>

Code to show text from textarea on the confirmation page:

<div class="control-group">
<label class="control-label">MyValue</label>
<div class="controls">
<span class="text display-value" data-display="MyValue"></span>
</div>
</div>

My JavaScript code:

        var displayConfirm = function() {
            $('.display-value', form).each(function(){
                var input = $('[name="'+$(this).attr("data-display")+'"]', form);
                if (input.is(":text") || input.is("textarea")) {
                    $(this).html(input.val());
                } else if (input.is("select")) {
                    $(this).html(input.find('option:selected').text());
                } else if (input.is(":radio") && input.is(":checked")) {
                    $(this).html(input.attr("data-title"));
                } else if ($(this).attr("data-display") == 'htmlinhalt') {
                    $(this).html($('[name="htmlinhalt"]', form).val());
                } 
            });
        }

But why it doesn't work with a tinymce textarea? I think I must get the content directly from tinymce not from textarea, but how?

• php
• javascript
• tinymce

• Have you tried tinyMCE.triggerSave(); before starting any submission or validation? – MahanGM Commented Jul 29, 2013 at 9:38
• No I still doesn't try it. For Info: The tinymce code is not in the self js file than my displayConfirm javascript code. @MahanGM if i write it above my javascript code. Nothing happens. Or where I must integrate it? – TrivoXx Commented Jul 29, 2013 at 9:41
• There is one thing that you should know, when you're editing with TinyMCE it's not going to use from the textarea that you've provided instead it's using its inner html frame tag to keep and show the data. You must do an update like saving the trigger to get data into that textarea. – MahanGM Commented Jul 29, 2013 at 9:46
• @MahanGM so I can't show the conten't on the 3 tab from my wizard with javascript? ---- I also find var ed = tinymce.activeEditor; // get editor instance ed.save(); //save editor content to textarea --- But how to integrate it? – TrivoXx Commented Jul 29, 2013 at 9:52

3 Answers 3

Try

tinymce.get('your_textarea_id').getContent();

I had exactly the same problem and the previous answer wouldn't work for me either. The problem for me was that my textarea had no id. After giving it an id I was able to get the content easily with the previous answer (albeit with capital 'MCE'):

tinyMCE.get('your_textarea_id').getContent();

So you want to add an extra line into your if statement. If you give the textarea the same id as its name then this should work:

   var displayConfirm = function() {
        $('.display-value', form).each(function(){
            var input = $('[name="'+$(this).attr("data-display")+'"]', form);
            if (input.is(":text")) {
                $(this).html(input.val());
            } else if (input.is("textarea")) {
                $(this).html(tinyMCE.get($(this).attr("data-display")).getContent());
            } else if (input.is("select")) {
                $(this).html(input.find('option:selected').text());
            } else if (input.is(":radio") && input.is(":checked")) {
                $(this).html(input.attr("data-title"));
            } else if ($(this).attr("data-display") == 'htmlinhalt') {
                $(this).html($('[name="htmlinhalt"]', form).val());
            } 
        });
    }

You can get the raw contents (with html tags), or only the text (html striped). The default format returned with function getContent() is the raw.

<textarea id="MyValue" name="MyValue"></textarea>
<div>
    <a href="javascript:alert(tinymce.EditorManager.get('MyValue').getContent({format : 'raw'}));">[getRawContents]</a>
    <a href="javascript:alert(tinymce.EditorManager.get('MyValue').getContent({format : 'text'}));">[getTextContents]</a>
    <a href="javascript:alert(tinymce.EditorManager.get('MyValue').getContent());">[getContents]</a>
</div>

I use MyValue since you use in the your question. Change for your_textarea_id if needed.

More information for tinyMCE 3.x in API 3 More information for tinyMCE 4.x in API 4