TinyMCE Forum / TIP: triggerSave, is your output blank?

spocke · 2004-12-03 19:00:55

This is a short rundown on how TinyMCE works when you implement it on a normal/problematic page.

We take a normal page with a form.

Code:

<html>
<body>
<form name="myform" method="post" action="saveit.php">
<textarea name="content"></textarea><br />
<input type="submit" name="submitform" value="Sendform">
</form>
</body>
</html>

What TinyMCE does is something like this:
1) Scans the page for textarea elements
2) Converts textarea elements to <div> and <iframe> to display editor.
3) Creates a "hidden" field with same name as original textarea.

If you have a completly normal form, you just need to add TinyMCE as usuall and submit the form normaly (submit button). However, if you use any form of javascript to submit the form you need to make use of
tinyMCE.triggerSave();

Example of problematic code:

Code:

<html>
<body>
<form name="myform" method="post" action="saveit.php">
<textarea name="content"></textarea><br />
<a href="javascript:document.forms[0].submit();">Submit Form</a>
</form>
</body>
</html>

To fix this, make a function and call tinyMCE.triggerSave(); just before you send the form.

Code:

<script language="Javascript">
function submitForm() {
tinyMCE.triggerSave();
document.forms[0].submit();
}
</script>

---

<a href="javascript:submitForm();">Submit Form</a>

---

This seems to be one of the biggest problems for ppl implementing TinyMCE, especially those who try to "add" it to an already existing software and does not know exactly how that software works.

Hope this helps.

Regards,
Moxiecode Systems
TinyMCE developers

reto · 2004-12-20 16:12:09

I use script that should process the content of all form fields before of submitting and even without submitting. The examples below shows a simplified version where the script does not show alert-boxes with the content of the editor-panes but only of the normal text-areas.

I would appreciate your help!

reto

Code:

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
    function formFieldValues(form) {
        var children = form.childNodes;
        for (var i = 0; i < children.length; i++) {
            if ((children[i].nodeName == 'INPUT') 
                || (children[i].nodeName == 'SELECT') 
                || (children[i].nodeName == 'TEXTAREA')) {
                alert(children[i].value);
            }
        }
    }
</script>
<script src="/stylesheets/scripts/tiny_mce/tiny_mce_src.js" 
    type="text/javascript" language="javascript"> </script>
<script type="text/javascript" language="javascript">
   tinyMCE.init({
      mode : "specific_textareas",
      theme : "advanced",
      language : "uk",
      relative_urls: false,
      remove_script_host: true
   });
</script>
</head>
<body>
<form enctype="multipart/form-data" method="POST" accept-charset="UTF-8" action="" id="form">
    <textarea mce_editable="true" rows="14" cols="60"  name="field"> </textarea><br/>
    <textarea mce_editable="false" rows="14" cols="60"  name="field"> </textarea><br/>
    <textarea mce_editable="true" rows="14" cols="60"  name="field"> </textarea><br/>
    <textarea mce_editable="false" rows="14" cols="60"  name="field"> </textarea><br/>
    <input type="button" onclick="tinyMCE.triggerSave();
    formFieldValues(document.getElementById('form'));
    return false" value="Create">
</form>
</body>
</html>

DewiMorgan · 2004-12-20 22:30:22

Use the save_callback parameter to call formFieldValues, not onClick().

This parameter is described here:
http://tinymce.moxiecode.com/docs/using.htm

Also, the contents of the TinyMCE textarea are NOT stored in a textarea once TinyMCE is loaded, they are stored in an iframe, so displaying the value of the textarea will not help you much.

Instead, use tinyMCE.getContent(), described on the same page.

Killer_R · 2005-01-22 15:06:53

Hi!

Let me see if I understand what you are saying...
On my website I would like to make a JavaScript-validation to check if the editor is empty when the user presses the submit-button...
The JavaScript-function to do this looks like this:

Code:

<script type="text/javascript">
function BtnClick() {
var StrFejl = "";

tinyMCE.execCommand("mceCleanup");
tinyMCE.triggerSave();
if (tinyMCE.getContent() == "" || tinyMCE.getContent() == null)
    StrFejl = "Please type your text!";

if (StrFejl == "") {
    document.forms["post"].submit();
}
else {
    alert(StrFejl);
}
}
</script>

<input name="BtnSubmit" type="button" onclick="BtnClick()" value="  Tilføj  " class="submit">

Is this the correct way of doing that?
Will it work in all browsers?

cpra · 2005-05-26 10:23:43

This is a short rundown on how TinyMCE works when you implement it on a normal/problematic page.
........

If you have a completly normal form, you just need to add TinyMCE as usuall and submit the form normaly (submit button). However, if you use any form of javascript to submit the form you need to make use of
tinyMCE.triggerSave();

......

To fix this, make a function and call tinyMCE.triggerSave(); just before you send the form.

.......

I still have problem with tinyMCE.triggerSave();

I installed User Home Page / UHP in mambo 4.5.2 that use tinymce as default editor. Same tinyMCE editor works fine in other form (eg.sumit news etc). However in UHP edit area the textarea dissapear when I submit the page. Note: I create a testing page to dump all the post variable into the screen. The textarea not even there.

I'm using Mozilla firefox. Same page works fine in IE 6.

Please Help ....

Code:


<script type="text/javascript">
tinyMCE.init({
    theme : "advanced",
    language : "uk",
    mode : "specific_textareas",
    document_base_url : "http://spr153ws/mambo/mambots/editors/tinymce/",
    invalid_elements : "script,object,applet,iframe",
    theme_advanced_toolbar_location : "top",
    theme_advanced_source_editor_height : "550",
    theme_advanced_source_editor_width : "750",
    directionality: "ltr",
    force_br_newlines : "false",
    content_css : "http://spr153ws/mambo/templates/veritas/css/template_css.css",        
    debug : false
});

function submitbutton(pressbutton) {
    var form = document.adminForm;
    if (pressbutton == 'cancel') {
        submitform( pressbutton );
        return;
    }

    tinyMCE.triggerSave();
 
    if (form.nick.value == "") {
        alert( "Entry should have a nickname." );
        return;
    }
    if (form.email.value == ""){
        alert( "Entry should specify the email address." );
        return;
    }
    submitform( pressbutton );
}
</script>

krokogras · 2005-12-25 10:20:14

I have a similar problem:
When posting the editors content in IE6, everything works fine.
Using Mozilla Firefox, "" is posted, i cannot catch the editors content.
This is only reproducable with the latest version of tinymce 2.01, prior versions are working very well.

jasch · 2006-02-01 00:47:50

I tried but I can't get triggersave to work...

This is the code I am using

Code:

<script type="text/javascript">
  function Post(field, value){
    document.form.action += '&' + field + '=';
    if (value != null)
        document.form.action += value;
    else
        document.form.action += 'Yes';

    if (typeof(Validate) == 'undefined' || Validate())
        document.form.submit();
  }
</script>

<form action="results.htm" name="form">

<a href="javascript:tinyMCE.triggerSave();Post('SendNow');">SendNow</a>
                
<script language="javascript" type="text/javascript" src="http://ssl.conexion.co.cr/includes/tiny_mce/tiny_mce_gzip.cfm"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
    mode : "textareas",
    theme : "simple"
});
</script>
<textarea name="bodyhtml" id="compose-body" cols="80" rows="20" wrap="virtal" tabindex="5"></textarea>
</form>

I get the TinyMCE working, and no matter what I type when I click on SendNow the "bodyhtml" variable is sent blank to the next page.

Any ideas?

ossi · 2006-05-08 21:41:11

I have very simply but for me very big problem:
when I edit the data in textarea which come direct form database all works fine but when i have an empty form and click preview I see only undefined.

please help me !!!!

jore419 · 2006-06-29 18:13:04

hello,

hopefully someone has some time to help me get this doc to save. here is the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Advanced example</title>
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
    tinyMCE.init({
        theme : "advanced",
        mode : "exact",
        elements : "editfield",
        save_callback : "customSave",
        content_css : "example_advanced.css",
        extended_valid_elements : "a[href|target|name]",
        plugins : "style,layer,table,advimage,advlink,iespell,insertdatetime,preview,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable",
        theme_advanced_buttons1_add_before : "newdocument,separator",
        theme_advanced_buttons1_add : "fontselect,fontsizeselect",
        theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor",
        theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
        theme_advanced_buttons3_add_before : "tablecontrols,separator",
        theme_advanced_buttons3_add : "iespell,separator,ltr,rtl,separator,insertlayer,moveforward,movebackward,absolute,|,styleprops,fullscreen",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_path_location : "bottom",

        //invalid_elements : "a",
        theme_advanced_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1", // Theme specific setting CSS classes
        //execcommand_callback : "myCustomExecCommandHandler",
        debug : false
    });

    // Custom event handler
    function myCustomExecCommandHandler(editor_id, elm, command, user_interface, value) {
        var linkElm, imageElm, inst;

        switch (command) {
            case "mceLink":
                inst = tinyMCE.getInstanceById(editor_id);
                linkElm = tinyMCE.getParentElement(inst.selection.getFocusElement(), "a");

                if (linkElm)
                    alert("Link dialog has been overriden. Found link href: " + tinyMCE.getAttrib(linkElm, "href"));
                else
                    alert("Link dialog has been overriden.");

                return true;

            case "mceImage":
                inst = tinyMCE.getInstanceById(editor_id);
                imageElm = tinyMCE.getParentElement(inst.selection.getFocusElement(), "img");

                if (imageElm)
                    alert("Image dialog has been overriden. Found image src: " + tinyMCE.getAttrib(imageElm, "src"));
                else
                    alert("Image dialog has been overriden.");

                return true;
        }

        return false; // Pass to next handler in chain
    }

    // Custom save callback, gets called when the contents is to be submitted
    function customSave(id, content)
    {
        alert("output = " + content);
    }
    
</script>
<!-- /tinyMCE -->

</head>
<body>
  
   
   <script language="php">
global $filename;
   
    $file = fopen("$filename","r");

   $retval = fread($file,filesize("$filename"));
   if (false !== $retval) { // no readfile error

   echo "<textarea name=\"editfield\" style=\"width:100%\" rows=\"50\">$retval</textarea>"; 
   echo "<input type=\"hidden\" name=\"ftoedit\" value=\"$filename\">"; 
   echo "<br><br><input type=\"button\" name=\"save\" value=\"save\" onclick=\"tinyMCE.triggerSave();\">"; 
   
         fclose($file);
   } else {
   $retval = "no go";
   echo "<script language=\"javascript\"> \n "; 
   echo "alert('The file could not be processed'); \n";     
   echo "</scrip". "t>";
   }
</script>
</form>
</body>
</html>

the situation at the moment is, everything is working fine. i can call a page through global $filename and when i hit the save button it shows the changed contents, by running the javascript customSave function.

now, all i want to do is change the customSave function, so it will write "content" back to $filename.

ie: is it possible to change:

Code:

// Custom save callback, gets called when the contents is to be submitted
    function customSave(id, content)
    {
        alert("output = " + content);
    }

so it will run some php instead? something vaguely along the lines of the $file = fopen("$filename","w"); thing?

if not, can i save back to $filename using javascript? is that even possible if javascript runs client side?

anyway, any help will be very much appreciated. i've basically run into a snag cause im not very good with any of this.

thanks in advance.

dell · 2006-08-21 06:10:56

spocke's method does not work on v2.0.6.1, any idea?

bk73 · 2006-10-02 23:18:48

I'm using mostlyce v4.5.4 as an editor, Mambo v4.5.4, Firefox. When i'm trying to save my work, I'm getting the following message "A script on this page may be busy, or it may have stopped responding.You can stop the script now or you can continue to see if the script will complete". Even after 2 or 3 min hitting the continue button, the same message keeps appearing.

Please help!!

wmconlon · 2006-10-16 02:37:55

I see this problem sporadically and it's very frustrating to our users. We use a plain old submit button, and usually everything works fine. But sometimes their content is lost. It seems to be associated with a form submittal before the TinyMCE JavaScript code has completed its processing.

Here's the equence of events:
1. User selects content area to be edited.
2. Content editor page is displayed with content in a textarea.
3. User edits content and presses submit
4. Content editor page is displayed, but there is now no content in the textarea

The problem occurs most frequently when users work quickly (ie., the most experienced users have the most problems).

One workaround was to tell users to press the BACK button to get their content, and re-submit. Needless to say this is not a good solution. As a backstop, I now check the length of the textarea field submittal, and if it's zero bytes long, I ignore the submittal and ask the user to go BACK and re-submit. At least this way they don't lose their content.

Last edited by wmconlon (2006-10-16 02:38:53)

edir · 2006-12-27 02:50:03

wmconlon wrote:
I see this problem sporadically and it's very frustrating to our users. We use a plain old submit button, and usually everything works fine. But sometimes their content is lost. It seems to be associated with a form submittal before the TinyMCE JavaScript code has completed its processing.

Here's the equence of events:
1. User selects content area to be edited.
2. Content editor page is displayed with content in a textarea.
3. User edits content and presses submit
4. Content editor page is displayed, but there is now no content in the textarea

The problem occurs most frequently when users work quickly (ie., the most experienced users have the most problems).

One workaround was to tell users to press the BACK button to get their content, and re-submit. Needless to say this is not a good solution. As a backstop, I now check the length of the textarea field submittal, and if it's zero bytes long, I ignore the submittal and ask the user to go BACK and re-submit. At least this way they don't lose their content.

Is there a solution to this? I'm getting crazy, i'm losting the content frequently!

I take off all the submits and put <button onclick="tinyMCE.triggerSave(); this.form.submit();">Save</button>. Works fine until i use the option upload present in this form. The upload button is the same as submit, it returns to the form with all data fields after upload. Sometimes works other times not.

What can i do to confirm if all the content of the editor has been sent rightly and no content has been lost?

Last edited by edir (2006-12-27 02:54:11)

edwinboersma · 2007-01-05 14:44:50

Looking for a solution to use my form validation script, I added tinyMCE.triggerSave() to tiny_mce.js at "handleEvent" -> "case 'blur':" after tinyMCE.hideMenus() (in tiny_mce_src.js, on line 1060), and now it works! The form is updated now before the validation script is called.

I think this is the only right solution to it. Submitted a request at Sourceforge for this change.

Edwin

Last edited by edwinboersma (2007-01-05 14:47:30)

edir · 2007-01-08 16:46:05

I'm getting this problem using firefox yet.

But, In that case, up ^, i forgot to set the type in button tag, type="button", this tag when nothing had been set the browser uses a button like "submit".

UogalNevets · 2007-03-22 13:03:50

krokogras wrote:
I have a similar problem:
When posting the editors content in IE6, everything works fine.
Using Mozilla Firefox, "" is posted, i cannot catch the editors content.
This is only reproducable with the latest version of tinymce 2.01, prior versions are working very well.

I have the exact same problem, A simple post in ie6 or ie7 works fine, in Firefox versions 2.0.0.x no data is saved when trying to retrieve using textBox.Text serverside. Am I missing something?

-Steve

blaise · 2007-05-09 21:12:12

UogalNevets wrote:
krokogras wrote:
I have a similar problem:
When posting the editors content in IE6, everything works fine.
Using Mozilla Firefox, "" is posted, i cannot catch the editors content.
This is only reproducable with the latest version of tinymce 2.01, prior versions are working very well.
I have the exact same problem, A simple post in ie6 or ie7 works fine, in Firefox versions 2.0.0.x no data is saved when trying to retrieve using textBox.Text serverside. Am I missing something?

-Steve

I have this problem too since 2.1.1 (2.1.0 works fine). IE6, IE7 and FF 2 fail, Opera 9 succeeds. Also, when I view the HTML source with the HTML button, it doesn't return TinyMCE's content.

Maybe it has something to do with using <button type="submit">submit</button> instead of <input type="submit"> ?

Last edited by blaise (2007-05-09 21:13:13)

spocke · 2007-05-09 21:51:31

Could you send me a URL to where this is happening. There is a bug in 2.1.1 with the save_callback option not handling dot notation correctly. Like obj.func maybe this is related.

blaise · 2007-05-09 21:58:15

I sent you an email with the URL

spocke · 2007-05-09 22:10:17

It seems to be yet another bug the valid_child_elements option not working. I added a fix for it in the SVN version. Try that one against your site.

blaise · 2007-05-09 22:16:22

Thanks for the help, it works now with the SVN version

MoSs · 2007-07-18 23:29:20

Once again me too I had problems with Firefox and tinyMCE.triggerSave() function
It seems that when i submit my form once it works ok, but i dont know why exactly when i redraw the same
form (using AJAX) and resubmit it produces some kind of error and my form doesnt submit again.

But a little workarround can fix this problem,
when you submit your form you can make a function like this:

Code:

<form id="myform" method="post" action="mypage.php">
<textarea id="mytext"></textarea>
<img onclick="submitForm()" src="image.jpg">
</form>

Code:

<script>
function submitForm() { 
   document.getElementById("mytext").value = tinyMCE.getContent(); //this is the workarround
   document.getElementById("myform").submit();

}
</script>

Works great for me at least now :) hope this helps!

Last edited by MoSs (2007-07-18 23:32:47)

MoSs · 2007-07-19 16:08:06

Disregard my previous post, please read this: http://tinymce.moxiecode.com/punbb/view … 029#p25029

zhao315689 · 2008-12-03 06:09:34

Thanks ! Thank you very much.
ugg boots
wholesale ugg boots
ugg boots

DaveC426913 · 2008-12-03 23:06:54

DewiMorgan wrote:
Use the save_callback parameter to call formFieldValues, not onClick().

This parameter is described here:
http://tinymce.moxiecode.com/docs/using.htm

No it ain't...

#1 2004-12-03 19:00:55

TIP: triggerSave, is your output blank?

Code:

Code:

Code:

#2 2004-12-20 16:12:09

Re: TIP: triggerSave, is your output blank?

Code:

#3 2004-12-20 22:30:22

Re: TIP: triggerSave, is your output blank?

#4 2005-01-22 15:06:53

Re: TIP: triggerSave, is your output blank?

Code:

#5 2005-05-26 10:23:43

Re: TIP: triggerSave, is your output blank?

Code:

#6 2005-12-25 10:20:14

Re: TIP: triggerSave, is your output blank?

#7 2006-02-01 00:47:50

Re: TIP: triggerSave, is your output blank?

Code:

#8 2006-05-08 21:41:11

Re: TIP: triggerSave, is your output blank?

#9 2006-06-29 18:13:04

Re: TIP: triggerSave, is your output blank?

Code:

Code:

#10 2006-08-21 06:10:56

Re: TIP: triggerSave, is your output blank?

#11 2006-10-02 23:18:48

Re: TIP: triggerSave, is your output blank?

#12 2006-10-16 02:37:55

Re: TIP: triggerSave, is your output blank?

#13 2006-12-27 02:50:03

Re: TIP: triggerSave, is your output blank?

wmconlon wrote:

#14 2007-01-05 14:44:50

Re: TIP: triggerSave, is your output blank?

#15 2007-01-08 16:46:05

Re: TIP: triggerSave, is your output blank?

#16 2007-03-22 13:03:50

Re: TIP: triggerSave, is your output blank?

krokogras wrote:

#17 2007-05-09 21:12:12

Re: TIP: triggerSave, is your output blank?

UogalNevets wrote:

krokogras wrote:

#18 2007-05-09 21:51:31

Re: TIP: triggerSave, is your output blank?

#19 2007-05-09 21:58:15

Re: TIP: triggerSave, is your output blank?

#20 2007-05-09 22:10:17

Re: TIP: triggerSave, is your output blank?

#21 2007-05-09 22:16:22

Re: TIP: triggerSave, is your output blank?

#22 2007-07-18 23:29:20

Re: TIP: triggerSave, is your output blank?

Code:

Code:

#23 2007-07-19 16:08:06

Re: TIP: triggerSave, is your output blank?

#24 2008-12-03 06:09:34

Re: TIP: triggerSave, is your output blank?

#25 2008-12-03 23:06:54

Re: TIP: triggerSave, is your output blank?

DewiMorgan wrote:

Board footer