Question

我正在使用WYSIWYG编辑器，我想在按Enter / Return键时添加<p>，然后用户将写入此新<p>。

现在我遇到了将插入符号设置为这个新<p>的问题。

＆＃13;

$('#content').on('keypress', function(e){
    
    if(e.which === 13){
        
        console.log('enter pressed');
        
        e.preventDefault();
        
        var range = window.getSelection().getRangeAt(0);

        var element = document.createElement('p');

        // element.textContent = 'lorem';  // gets added in the right position
        
        range.insertNode(element);
        
        // range.setStart(element);   // doesn't work
        
    }
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id='content' contentEditable=true>test</p>

＆＃13;

我现在需要在Chrome中使用它。

我该如何解决这个问题？

Answer 1

如果您不希望前contenteditable元素成为p元素，那么一个简单的解决方案就是添加contenteditable div作为p的父级元件。 Enter将自动添加p个元素。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='content' contentEditable=true><p>test</p></div>

如何在contentEditable元素中设置插入符号到新添加的元素？

1 个答案: