Menu
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"
});
582
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 setContent documentation.
I would have your PHP code echo out the HTML into a JavaScript function and have it called with onload:
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 similarly.
Alternatively, setupcontent_callback gives you direct access to the iframe.
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
