Two same function working differently

Question

I am trying to insert image inside a contenteditable div. Its working in chrome, firefox, opera and safari. But not working in Internet Explorer. I saw this post, it says insertImage works in IE. But I have no idea why its not working here.

Saw this jsfiddle, and its working perfectly in jsfiddle website.

html:

<input type="button" onmousedown="insertImage(); return false" value="insert image" unselectable="on">
<div contenteditable="true">Click somewhere in here and press the button</div>

js

function insertImage() {
    var sel = document.selection;
    if (sel) {
        var textRange = sel.createRange();
        document.execCommand('insertImage', false, "http://jsfiddle.net/img/logo.png");
        textRange.collapse(false);
        textRange.select();
    } else {
        document.execCommand('insertImage', false, "http://jsfiddle.net/img/logo.png");
    }
}

But when I executed the same function with mine, its not working correctly. Only when I highlight or select some text does it work. How can I achieve the same result by getting the element id within my js script? Please help me. Thank you.

html:

<button id="btn-insert_image">image</button>

<div id="content" contenteditable="true">
  <p>How does it work? Just put your image size after our URL and you'll get a placeholder.</p>
</div>

js:

$(document).ready(function() {
  $('#btn-insert_image').click(function() {
    document.execCommand('insertImage', false, 'http://placehold.it/350x150');
  });
});

jsfiddle

Answer 1

Add unselectable="on" to your image button like so

<button id="btn-insert_image" unselectable="on">image</button>

That should make it work in IE.

Looks like in IE you are loosing the selection when the image button is clicked.

UNSELECTABLE attribute

Note
Setting the UNSELECTABLE attribute to off does not ensure that an element is selectable. One example is an HTML Application (HTA) with the SELECTION attribute set to no. Elements in the body of the HTA cannot be selected, even if the UNSELECTABLE attribute for an element is set to off.

When you click an element with the UNSELECTABLE attribute set to on, any existing current selection is not destroyed.

An element with the UNSELECTABLE attribute set to on can be included in a selection that starts somewhere outside the element. The UNSELECTABLE attribute is implemented as an expando. Setting the expando property of the document object to false precludes the functionality of all expandos.

$(document).ready(function () {
  $('#btn-italic').click(function () {
    document.execCommand('italic');
  });

  $('#btn-bold').click(function () {
    document.execCommand('bold');
  });

  $('#btn-insert_image').click(function () {
    var sel = document.selection;
    if (sel) {
      var textRange = sel.createRange();
      document.execCommand('insertImage', false, "http://lorempixel.com/100/50/abstract");
      textRange.collapse(false);
      textRange.select();
    } else {
      document.execCommand('insertImage', false, "http://lorempixel.com/100/50/abstract");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn-insert_image" unselectable="on">image</button>
<button id="btn-italic"><i>i</i>

</button>
<button id="btn-bold"><b>B</b>

</button>
<div id="content" contenteditable="true">
  <p>How does it work? Just put your image size after our URL and you'll get a placeholder.</p>
</div>