Question

I am using CLEditor in my site and I am facing a problem when using it with IE. The problem is: When you insert image and place it in the editor then insert another image , it will overwrite the prevoius one. With Firefox it will place the new one beside the prevoius one. I contacted the CLEditor and he told me this is a browser sprecific issue. He adivse me to make a work around by checking for IE then collapse the current range to its end using TextRange.collapse() method after the image have been inserted. I tried to make this soultion but I am not expert with Javascript to make it works. I need your help to make it working.

This is the code for inserting the image to the editor area:

.bind(CLICK, function() {

  // Insert the image or link if a url was entered
  var $text = $popup.find(":text"),
    url = $.trim($text.val());
  if (url !== "")
    execCommand(editor, data.command, url, null, data.button);

  // Reset the text, hide the popup and set focus
  $text.val("http://");
  hidePopups();
  focus(editor);

});

Answer 1

This is the solution for this problem. It take three days to solve this because I am not JavaScript expert. I hope this will help.

      .bind(CLICK, function() {

          // Insert the image or link if a url was entered
          var $text = $popup.find(":text"),
            url = $.trim($text.val());
          if (url !== "")
            execCommand(editor, data.command, url, null, data.button);

          // Reset the text, hide the popup and set focus
          $text.val("http://");
          hidePopups();
          if ($.browser.msie) {
    var editorvalue=editor.$frame[0].contentWindow;   
    var pos = editorvalue.document.body.innerHTML.length;
    var textRange = editorvalue.document.body.createTextRange();
    textRange.collapse(true);
    textRange.moveEnd("character", pos);
    textRange.moveStart("character", pos);
    textRange.select();


  }

          focus(editor);

        });