JavaScript无法添加contenteditable属性

问题描述 投票：0回答：1

JavaScript：

var insertImage = function(src, alt) {
   var html = '<div contenteditable="false"><img ' + 'src="'+src+'" alt="'+alt+'" onclick="imageClick()" /></div>';
   document.execCommand('insertHTML', false, html);
};

HTML：

<body>
  <div id="yq_editor_content" style=" width: 100%; height: 100%; -webkit-overflow-scrolling: touch; overflow: hidden; background-color:lightblue;" contenteditable="true">
  </div>
  <div id="yq_editor_footer"></div>
</body>

但是执行JavaScript函数后，我得到div没有contenteditable的HTML，如下所示：

“

javascript html contenteditable
1个回答
0
投票

我想你想要这样的东西吗？https://jsfiddle.net/_jserodio/ywe48rwy/

JavaScript，CSS和HTML

  

var insertImage = function(src, alt) {
   var img = '<img ' + 'src="'+src+'" alt="'+alt+'"/>';
   document.querySelector('#yq_editor_content').innerHTML += img;
};

document.querySelector('#insert').addEventListener("click", function() {
    insertImage('http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico', 'so');
}, false);
#insert {
  width: 25px;
  heigth: 25px;
  cursor: pointer;
}
<div id="yq_editor_content" style=" width: 100%; height: 100%; -webkit-overflow-scrolling: touch; overflow: hidden; background-color:lightblue;" contenteditable="true">
  Hello, try to edit this!
</div>
<div id="yq_editor_footer">
  <img id ='insert' src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-insert-image-icon.png" alt="insert image icon">
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.