Copy DIV contents to TinyMCE

Question

I'm having trouble getting the right content in my TinyMCE editor. The scenario is like this: Admin fills in a Form, the form is splitted up in 3 pages (switching with jquery). First page he enters the information (name, company name etc.) of his customers. Last page he can send an e-mail to them. The TinyMCE textarea has prefixed text, and in between that text, I want the name of the customer as soon as the admin fills in the name on the first page. It works with

$('input[name="info_name"]').change(function(){
    var info_name = this.value;
    tinyMCE.activeEditor.setContent(info_name);
});

But then there is no prefixed text, because the text has to be between the prefix. Just a raw example of what I want:

<div page1>
    <input name="name">blablabla</input>
</div>
<div page3>
    <textarea>
        dear $name,
        prefix text
    </textarea>
</div>

I made a hidden div with the prefix content, and the name of the customer, to extract the total content from the div, and insert it into the TinyMCE, but I keep getting has no method 'replace' in console.

$('input[name="info_name"]').change(function(){
    var info_name = this.value;
    $('span#info_name').append(this.value);
    var mailcontent = $('div#message-hidden').val;
    tinyMCE.activeEditor.setContent(mailcontent);
});

Anyone?

Mina Mina · Accepted Answer · 2013-10-03T08:46:08

Say your HTML is

<p><input type="text" name="first_name" class="test" /></p>

<textarea>Your content here.</textarea>

<div class="dummy">Your __NAME__ here!</div>

This JS will set the content of active TinyMCE editor when the text input changes

tinymce.init({selector:'textarea'});

$(document).on('change', $('input.test'), function(){
   dummy_html = $('div.dummy').html();
   editor_content = dummy_html.replace("__NAME__", $('input.test').val());
   tinymce.activeEditor.setContent(editor_content);
});

Working example here http://fiddle.jshell.net/4n3Cr/

Copy DIV contents to TinyMCE

1 Answers