Question

i have a TinyMCE implementation on my website that works great. But if the user enters a special char like “<” the query send to my MySQL database gets cropped just when the special char appears. Let me show you whats happining:

This is how i call TinyMCE:

tinyMCE.init({
        mode : "exact", elements : "e_text", theme : "simple", oninit : "setPlainText", plugins : "paste" });
        function setPlainText() {
            var ed = tinyMCE.get('e_text');
            ed.pasteAsPlainText = true;  
            if (tinymce.isOpera || /Firefox\/2/.test(navigator.userAgent)) {
                ed.onKeyDown.add(function (ed, e) {
                if (((tinymce.isMac ? e.metaKey : e.ctrlKey) && e.keyCode == 86) || (e.shiftKey && e.keyCode == 45))
                    ed.pasteAsPlainText = true;
                });
            } else {            
                ed.onPaste.addToTop(function (ed, e) {
                ed.pasteAsPlainText = true;
            });
            }
        }

Dont worry about searching for an error there, that code renders the TinyMCE with no errors. Then i have a jquery function that holds the ajax process:

    $("#save-btn").click(function() {
            tinyMCE.triggerSave();
            alert($('#e_text').val());
            $("#status").html('<img src="css/img/ajax-loader.gif" align="absmiddle">&nbsp;Saving...');
            $.ajax({type: "POST",   url: "handler.php", data: "e_text="+ $('#e_text').val() + "&e_title="+ $('#extra_title').val(),
                        success: function(server_response){
                                $("#status").ajaxComplete(function(event, request){
                                alert(server_response);
                                        if(server_response.substring(0,4) == 'Last') {
                                            $("#status").html('<img src="css/img/available.png" align="absmiddle"> <font color="#06699e"> '+ server_response +' </font>&nbsp; ');
                                        }
                                        else {
                                            $("#status").html('<img src="css/img/not_available.png" align="absmiddle"> <font color="red">Not saved, please try again later. '+server_response+'</font>');
                                        }

                                });
                        }

                });
    });

This call handler.php wich handle the ajax call and then return a result. For this particular problem i modify the php script just to print the POST var and see what is going on, or in other hands, what is arriving to the php script:

} elseif(isset($_POST['e_text'])) { 
    $fgmembersite->DBLogin();
    echo($_POST['e_text']);
    mysql_query("INSERT INTO ".table_extra." (id,id_user,title,content) VALUES (NULL,'".$_SESSION['id_of_user']."','".mysql_real_escape_string($_POST['e_title'])."','".mysql_real_escape_string($_POST['e_text'])."') ON DUPLICATE KEY UPDATE title='".mysql_real_escape_string($_POST['e_title'])."', content='".mysql_real_escape_string($_POST['e_text'])."';");
    mysql_query("UPDATE ".$fgmembersite->tablename." SET last_update_cv = NOW();");
    $result = mysql_fetch_array(mysql_query("SELECT NOW();"));

    //echo 'Last saved ' . $result['NOW()'];
}

Ignore everything but the echo instruction. Returning to my jquery code you remember the two alert functions? Well one of them show me the data returned by the TinyMCE before sending it to the php script and the second one show the data returned data by the php script.

Lets suppose i insert the phrase “Hello world >>> Hello again!” into the TinyMCE, this is what i see:

Then i hit Save, and i got the alert number one:

I hit ok and i get the alert number two (the server response, what php got):

SO, WHY?!!! why is the php script (just and echo of what it gets via POST) is returning a cropped phrase? Just when the special char appear?

Thanks for any help you can offer me!

Answer 1

Those ampersands are messing with the URL format for the data property.
Why not change it to something like this instead?

data: {
    "e_text": $('#e_text').val(),
    "e_title": $('#extra_title').val()
}