Question

I believe the problem with finding/replacing text is when a wysiwyg steps into the mix.
However, I’m sure someone has figured out how to do the magic.

Here’s the textarea, with no editor attached:

<textarea id="template1" style="width:400px; height:200px;">
<div>Dear {{companyname}},</div>
<div>A new Support Case has been opened for you.</div>
<div>Support Case description:</div>
.........more html text follows
</textarea>

<script language="javascript" type="text/javascript">
$(document).ready(function(){

   var str = $("#template1").val();
   var newstr = str.replace("{{companyname}}", "ACME Inc");
   $("#template1").val(newstr);

}); 
</script>

Without the editor, I’m good to go.
As soon as I apply my editor of choice (TinyMCE), the replace() method gets ignored.

Does anyone know why?

Answer 1

There are two reasons why your replace function doesn’t work.

1. The contents of the former textarea get replaced, but you cannot see the result because tinymce hides the textarea and uses a contenteditable iframe to load and style the former contents. The editor content gets written back to the textarea onSave and onSubmit

2. $(document).ready all ressources of your page have been loaded, but the tinymce editor is not ready.

This will lead to the question on how to replace the code in the tinymce editor. $(document).ready won’t help here. You will need use the tinymce configuration paramter onInit

// Adds an observer to the onInit event using tinyMCE.init

tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onInit.add(function(ed) {
          //console.debug('Editor is done: ' + ed.id);

          // replace the editor content
          var str = ed.getContent();
          var newstr = str.replace("{{companyname}}", "ACME Inc");
          ed.setContent(newstr);
      });
   }
});