How to set the initial text an a TinyMCE textarea?

Question

I'm in a curious situation where I previously had no problem achieving what I'm looking for. The following code is a part of an HTML page which is to host a TinyMCE rich textbox:

...
<textarea id="editing_field">This text is supposed to appear in the rich textbox</textarea>
...

At first this worked as intended, creating a rich textbox with the enclosed text in it. At some point, though, the TinyMCE code decided that the textarea HTML should be transformed to the following:

<textarea id="editing_field" style="display: none;"/>
This text is supposed to appear in the rich textbox

This renders the text below the textbox which is not exactly ideal. I don't have a clue what caused this change of behavior, though I'm also using jQuery along with it if that could have any effect.

I can work around the problem by loading content into the textbox with javascript after the page has loaded, either by using ajax or by hiding the text in the HTML and just moving it. However, I would like to emit the text into the textbox directly from PHP if at all possible. Anyone knows what is going on here and how to fix it?

Update 2: I have succesfully reproduced the situattion which causes the change of behavior: At first I just had plain text in the textarea as in the first code snippet. However, after saving the content the text would look like this:

<p>This text is supposed to appear in the rich textbox</p>

The presence of the p tag causes TinyMCE to trigger the transformation between an enclosing textarea to a textarea which is just a single tag (as illustrated above).

Update 1: added TinyMCE config file:

tinyMCE.init({
     // General options
     mode : "exact",
     elements : "editing_field",
     theme : "advanced",
     skin : "o2k7",
     skin_variant : "black",
     plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
     save_onsavecallback : "saveContent",

     // Theme options
     theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull", 
     theme_advanced_buttons2 : "search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,forecolor,backcolor", 
     theme_advanced_buttons3 : "hr,removeformat,|,sub,sup,|,charmap,emotions,|,print,|,fullscreen,code", 
     theme_advanced_buttons4 : "styleselect,formatselect,fontselect,fontsizeselect",
     theme_advanced_toolbar_location : "top", 
     theme_advanced_toolbar_align : "left", 
     theme_advanced_statusbar_location : "bottom", 
     theme_advanced_resizing : false,

     // Drop lists for link/image/media/template dialogs
     template_external_list_url : "lists/template_list.js",
     external_link_list_url : "lists/link_list.js",
     external_image_list_url : "lists/image_list.js",
     media_external_list_url : "lists/media_list.js",

     // Replace values for the template plugin
     template_replace_values : {
      username : "Some User",
      staffid : "991234"
     },

     width : "450",
     height : "500"
    });

Answer 1

That second example <textarea ... /> is empty tag notation. If you want the text to be inside the tage you need to do it like the first way <teatarea ....>foo</textarea>

What is outputting the textarea tags? Can you debug that to see if it is doing the empty tag notation?

Eric

Answer 2

We're using TinyMCE here lately as well. I'm particularly puzzled about the change the the style attribute of the textarea to hide the element. Very odd.

I'm curious what your configuration file looks like (some documentation on configuration files at: django)

---

UPDATE

wow... you're using a LOT of tinyMCE plugins. I'll try to research further when I get some time and see if I can't figure out some likely suspects.

Answer 3

If you don't call tinyMCE's javascript function you may have to deal with browser compatibility issues.

If you only have one tinymce box on the page you can just do this.

tinyMCE.activeEditor.setContent('<span>some</span>');

You can also set a format such as bbcode. Check out the documentation setContent.

I would have your php code echo out the html into a javasript function and have it called with onload. Something like this.

function loadTinyMCE($html) {
    echo "
        <script type="text/javascript">function loadDefaultTinyMCEContent(){
             tinyMCE.activeEditor.setContent('$html');
        }</script>
    ";
}

then

<body onload="loadDefaultTinyMCEContent()">

If you don't want to use the page onload event tinymce has an init option called oninit that functions simulary.

Or if you want setupcontent_callback gives you direct access to the iframe.

Answer 4

It appears that I have solved the problem, unless there are any edge cases which ruins the solution. I use the following PHP code on page content before I save it to the database:

$content = str_replace(chr(10), "", $content);
$content = str_replace(chr(13), "", $content);
$content = str_ireplace('<','&#x200B;<',$content);

What it does is it removes any newlines and then prepend a zero-width invisible character before any beginning tag. This text is then later inserted between the textarea tags before TinyMCE does its magic. I don't know why but this does not trigger the problem and the appended characters are not shown in the final html or in the html view of TinyMCE, so the only problems I can see with this solution is the performance hit. A detail is that it appears only the start tags need to be prepended in this way, but I haven't taken this into consideration here, for simplicity.

Answer 5

http://sameera-programming.blogspot.com/2009/05/not-able-to-increase-textarea-height-in.html

Answer 6

Given that the presence of <p> tags causes the transformation, I suspect that your HTML ends up looking like:

...
<textarea id="editing_field"><p>This text is supposed to appear in the rich textbox</p></textarea>
...

Unfortunately, HTML elements aren't technically allowed inside <textarea> tags, so something may be considering the <p> tags as the start of a new block element, implicitly closing your textarea. To fix this, you can encode the angle brackets:

...
<textarea id="editing_field">&lt;p&gt;This text is supposed to appear in the rich textbox&lt;/p&gt;</textarea>
...

Using PHP, this can be done by sending your value through htmlspecialchars() before echoing it to the page.