TinyMCE

If you allow user from uploading file, you need the following code to initialize the uploading process where '#sel_file' is "<input type='file'>":

    var my_file_callback = null;

    var uf = $('#sel_file');
    uf.change(function (e) {
        var c0 = $(this);
        var f2 = c0[0].files[0];
       
        // use XMLHttpRequest to upload the image file to the server.

        //<<------//<<------//<<------//<<------
        // then, show the image file on the browser.
        // we need to specify the full url of the file.
        my_file_callback('http://localhost/test/' + f2.name, { alt: 'you have selected a image file' });
        //<<------//<<------//<<------//<<------
    });

To initialize the TinyMCE:

    tinymce.init({
        //selector: 'textarea',
        selector: '.template_div .msg_body',
        plugins: [
               'advlist autolink lists link image charmap anchor',
               'searchreplace visualblocks code fullscreen',
               'insertdatetime table contextmenu paste code'
        ],
        toolbar: 'undo redo | bold italic underline fontsizeselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',

        fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
        height: '200',
        removed_menuitems: 'newdocument',
        relative_urls: false,
        remove_script_host: false,
        convert_urls: true,

        file_browser_callback_types: 'image',
        file_picker_callback: function (callback, value, meta) {
            // get the callback reference
            my_file_callback = callback;

            // show the file selection browser.
            $('#sel_file').trigger('click');
        },
        setup: function (editor) {
            editor.on('init', function () {
                // this will be call for the initial setup.
                // call your function OR below code to set the the contents.

                 tinymce.get('your textarea control-id').setContent('this is my contents....', { format: 'raw' });
            });
       }

    });

Changing the URL in the address bar with JQuery

Changing the URL in the address bar with JQuery is quite straight forward. The purpose of this technique is to resolve the user support for the "single page application" (i.e., all contents were loaded by JQuery).

I have modified the technique used by the following article in order to avoid the security error raised by the browser. It appends the "anchor" to the URL.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function ChangeUrl(page, url) {
            if (typeof (history.pushState) != "undefined") {
                var i = window.location.href.indexOf('#');
                if (i > 0) {
                    url = window.location.href.substring(0, i) + url;
                }
                else {
                    url = window.location.href + url;
                }
               
                var obj = { Page: page, Url: url };
                history.pushState(obj, obj.Page, obj.Url);
            } else {
                alert("Browser does not support HTML5.");
            }
        }
        $(function () {
            $("#button1").click(function () {
                ChangeUrl('Page1', '#Page1');
            });
            $("#button2").click(function () {
                ChangeUrl('Page2', '#Page2');
            });
            $("#button3").click(function () {
                ChangeUrl('Page3', '#Page3');
            });
        });
    </script>
    <input type="button" value="Page1" id="button1" />
    <input type="button" value="Page2" id="button2" />
    <input type="button" value="Page3" id="button3" />


Reference

http://www.aspsnippets.com/Articles/Change-URL-in-Browser-Address-Bar-without-reloading-using-JavaScript-and-jQuery.aspx