Question

我正在尝试在一个可疑的div中插入图像。它的工作在chrome，firefox，歌剧和野生动物园。但不能在Internet Explorer中工作。我看到了这个post，它说<input type="button" onmousedown="insertImage(); return false" value="insert image" unselectable="on"> <div contenteditable="true">Click somewhere in here and press the button</div>在IE中有效。但我不知道为什么它不在这里工作。

看到这个jsfiddle，它在jsfiddle网站上完美运作。

HTML：

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");
    }
}

JS

<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脚本中获取元素id来获得相同的结果？请帮我。谢谢。

HTML：

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

JS：

foreach ($hom as $h) {//from TableA
    echo $h->con_id
    foreach ($pro as $p) { //from TableB
        if ($p->con_id == $h->con_id) {
            echo $p->hp_id
        }
    }
}

jsfiddle

Answer 1

将unselectable="on"添加到您的图片按钮

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

这应该可以在IE中使用。

在IE浏览器中，单击图像按钮时，您将失去选择。

UNSELECTABLE attribute

注意
  将UNSELECTABLE属性设置为off不会确保元素是可选的。一个示例是HTML应用程序（HTA），其SELECTION属性设置为no。即使元素的UNSELECTABLE属性设置为off，也无法选择HTA正文中的元素。

单击UNSELECTABLE属性设置为on的元素时，不会销毁任何现有的当前选择。

UNSELECTABLE属性设置为on的元素可以包含在从元素外部开始的选择中。   UNSELECTABLE属性实现为expando。将document对象的expando属性设置为false会排除所有expandos的功能。

＆＃13;
＆＃13;
$(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"); } }); });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

两个相同的功能工作不同

1 个答案: