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' });
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:
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.