如何包含execCommand创建的图像

时间:2016-11-11 03:29:31

标签: javascript jquery html css execcommand



<input type="button" onclick="document.execCommand('insertimage',null,'http://barwoncopiers.com/wp-content/uploads/2011/03/linkedin-icon-45x45.jpg');" value="Img"/>
<br>
<div contenteditable="true" class="editor" id="editor"></div>

---

<qwe><img></qwe>
&#13;
&#13;
&#13;

如果图像已创建,我想自动将标记括起来。

怎么&lt; qwe&gt;标签创建?

1 个答案:

答案 0 :(得分:0)

您可以使用以下内容测试执行是否为真

if (document.execCommand('insertimage', null, 'http://barwoncopiers.com/wp-content/uploads/2011/03/linkedin-icon-45x45.jpg'))

当您将光标放在编辑框中并单击按钮时,请注意如何使用包含图像的标签执行if语句(请参阅检查器工具)

document.getElementById("input").onclick = function() {
  if (document.execCommand('insertimage', null, 'http://barwoncopiers.com/wp-content/uploads/2011/03/linkedin-icon-45x45.jpg')) {
    var images = document.querySelectorAll("img[src$='wp-content/uploads/2011/03/linkedin-icon-45x45.jpg']");
    for (var x = 0; x < images.length; ++x) {
      if (images[x].parentNode.tagName != "QWE") {
        images[x].outerHTML = "<qwe>" + images[x].outerHTML + "</qwe>";
      }
    }
  }
}
<input id="input" type="button" value="Img" id="in" />
<br>
<div contenteditable="true" class="editor" id="editor">hh</div>