User selection removed when opening a jQuery UI dialog box..how to fix this?

Question

I am trying to create a link with:

document.execCommand('createLink',false,linkVal);

For getting the link href value from user i am using jQuery UI dialog.

So when my user select some text on the page & click on a link it will open a jQuery UI dialog like this (this dialog contain a form inside it).

$("a#link-it").on('click',function(e){
    e.preventDefault();
    $( "#dialog-form" ).dialog( "open" );   
});

Ui Dialong inilization code looks like this:

$( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        "Create": function() {
        var linkVal=$("#link").val();
        document.execCommand('createLink',false,linkVal);
        $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
      }
    });

jQuery UI dialog is opening & working properly but the issue is when user click on the link to open it all the user selection got wiped immediatly from browser window. So this command is not working.

document.execCommand('createLink',false,linkVal); 

So please suggest how can i prevent wiping of user selection after opening the UI dialog?

or if you can suggest how a wysiwyg editor link creating works?

Answer 1

Finally i solved it using solution given here

Take a look on https://code.google.com/p/rangy/

and

http://rangy.googlecode.com/svn/trunk/demos/saverestore.html