tinyMCE ajax to save data

Question

I have seen many posts about tinyMCE and ajax, but i could not get it working - not by triggering tinyMCE.triggerSave(); not by overriding submit and not by triggering tinyMCE.get("elm1").save();

here is my code:

$('#ss').submit(function (e) {
        e.preventDefault();
        var ed = tinyMCE.get('elm1');
        var data = ed.getContent()

    //  tinyMCE.triggerSave();
    //  tinyMCE.get("elm1").save();

    //    var data = $(this).serialize();
        console.log(data);
        $.ajax({
            type:       'POST',
            cache:      false,
            url:        'xtras/ssheetsave.php',
            data:       data,
            success:    function(){
                        console.log("Updates have successfully been ajaxed");
            }
        });
        return false;
    });

form:

<form id="ss" method="post" style="margin-top: 40px;">
    <input type="hidden" id="cat_id" name="cat_id" value="<?php echo $id; ?>">
    <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">
                </textarea>

    <input type="submit" name="save" value="Submit" />
    <input type="reset" name="reset" value="Reset" />
</form>

and tinyMCE:

tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "autolink,lists,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,wordcount,advlist,autosave,visualblocks",
//      save_onsavecallback : "ajaxSave",

        // Theme options
        theme_advanced_buttons1 : "save,cancel,|,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,|,forecolor,backcolor",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,cleanup,help,code,tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,advhr",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Style formats
        style_formats : [
            {title : 'Bold text', inline : 'b'},
            {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
            {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
            {title : 'Example 1', inline : 'span', classes : 'example1'},
            {title : 'Example 2', inline : 'span', classes : 'example2'},
            {title : 'Table styles'},
            {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
        ],

        // Replace values for the template plugin
        template_replace_values : {
            username : "Some User",
            staffid : "991234"
        }
    });

can someone please help me to get this working? - basically i don't even get data in console console.log(data);

Answer 1

You need to use the "name" value in your original textarea and you get the content with "getContent()"

This is straight from their documentation.

<script>
tinymce.init({
    selector: "textarea",
    plugins: "save",
    toolbar: "save",
    save_enablewhendirty: true,
    save_onsavecallback: function() {
                        // USE THIS IN YOUR AJAX CALL
                alert(tinyMCE.get('ajax_text').getContent());
        }
});
</script>

<textarea name="ajax_text" /></textarea>