admin管理员组

文章数量:1426491

My task is to insert an empty span node within a contentEditable div at current caret position.

The following gives me no problems on Firefox 22.0:

HTML

<div class="parent" contentEditable=true>
    <div>text</div>
</div>

Javascript

$('.parent').on("keyup", function(e){
    if (e.which == 73) {
       node = '<span class="new"></span>';
       document.execCommand('insertHtml', null, node);
   }
});

To reproduce: Place caret at some point of the word 'text', then press 'i' key to insert an empty span at current selection.

See: /

Example:

When pressing 'i' key in the middle of the word

Expected result: 

<div class="parent" contentEditable=true>
    <div>tei<span class="new"></span>xt</div>
</div>

What happens instead? 

<div class="parent" contentEditable=true>
    <div>teixt</div>
    <span class="new"></span>
    <div><br></div>
</div>

Any help with this would be greatly appreciated. Thank you in advance.

My task is to insert an empty span node within a contentEditable div at current caret position.

The following gives me no problems on Firefox 22.0:

HTML

<div class="parent" contentEditable=true>
    <div>text</div>
</div>

Javascript

$('.parent').on("keyup", function(e){
    if (e.which == 73) {
       node = '<span class="new"></span>';
       document.execCommand('insertHtml', null, node);
   }
});

To reproduce: Place caret at some point of the word 'text', then press 'i' key to insert an empty span at current selection.

See: http://jsfiddle/amirisnino/pZecx/2/

Example:

When pressing 'i' key in the middle of the word

Expected result: 

<div class="parent" contentEditable=true>
    <div>tei<span class="new"></span>xt</div>
</div>

What happens instead? 

<div class="parent" contentEditable=true>
    <div>teixt</div>
    <span class="new"></span>
    <div><br></div>
</div>

Any help with this would be greatly appreciated. Thank you in advance.

  • javascript
  • html
  • google-chrome
  • execmand
  • inserthtml
Share Improve this question asked Jul 9, 2013 at 15:09 Amiris NiñoAmiris Niño 711 silver badge3 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

You can make the contenteditable attribute of span element as false. In order to achieve your expectation, you have to move the last two lines outside of the if-condition. Here it is:

$('.parent').on("keyup", function(e){
    if (e.which == 73) {
         node = '<span contenteditable="false" class="new"></span>';
         document.execCommand('insertHtml', null, node);
       }
       content = $(this).html()
       $('.result').text(content)

});

Does this work?

$('.parent div').append(node);

instead of this:

document.execCommand('insertHtml', null, node);

本文标签：

版权声明：本文标题：javascript - Chrome execCommand &#39;insertHTML&#39; inserts span outside of node when caret is inside it - Stack Overfl 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745398617a2656932.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。