How to set the initial text in 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"
    });

Sard

Is your Textarea inside a <form> element? – Kokoschka

Answer 1

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.

Sard

Answer 2

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.

Gesture

You have some good points, but I would still prefer to avoid javascript altogether. I think the only way that might be possible is if someone can figure out how to make TinyMCE not merge the two textarea tags into one. – Sard

its only work if tinyMce is already initialized. but when you initialize tinyMce and then in the next line, you set the value, it'll not work. because, it needs some time to init the tinymce around 0.5 sec (may be). – Bucovina

Answer 3

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

Mctyre

The problem is that the TinyMCE code modifies the original textarea to a single closed tag. The first code snippet is my code as I have written it and the second snippet is after TinyMCE has modified it. – Sard

Answer 4

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.

Maxillary

Answer 5

tinyMCE.activeEditor.setContent('some') works for me.Cheers

Buffybuford

Answer 6

I've come to the same problem while using React, perhaps it's related to this. The initial value passed to the component is the original value. Once received, the component will take over and handle the content, regardless of whether a new value is passed to it. So if you are passing a string, then it's a constant and it exists at initial render of your component. But if you are passing a variable, it's possible that the initial value of the variable is different to the value you want to display (like it's probably null or undefined until you receive the value to display). In my case I receive an object with the page contents, one of which is the html to display as initial content. But the render method was first being fired with an empty object, and then with the actual object with data.

Synthesize

Answer 7

set in tinyMCE.init -

init_instance_callback: function (editor) {
                AFunction();
            }

function AFunction(){
//your code here
tinyMCE.get('youtinytextareaname').setContent("your text here");
}

Zwart

Answer 8

To change an specific tinymce field, you can do this:

tinyMCE.get('editing_field').setContent('your default text');

Palestra

In your case its not set default text in setContent we should need html type of text eg: tinyMCE.get('editing_field').setContent('<p> some text here </p>'); – Hendrika