避免ie contentEditable元素在Enter键上创建段落

时间:2010-01-13 15:36:15

标签: html contenteditable

在InternetExplorer上,每次按Enter键时,contentEditable DIV都会创建一个新段落(<p></p>),而Firefox会创建一个<br/>标记。 是否可以强制IE插入<br/>而不是新段落?

5 个答案:

答案 0 :(得分:7)

是的,可以通过先停止keydown事件(window.event.stopPropagation();)然后使用insert HTML command插入字符串来避免插入段落。

然而,IE依赖于这个div来设置样式等,你会在使用&lt; br&gt; s时遇到麻烦。

我建议您使用像TinyMCE or other editors这样的项目,然后搜索一个行为符合您需要的编辑器,因为它们针对不同的浏览器问题提供了各种解决方法。也许你可以找到一个使用&lt; br&gt; s ...

的编辑器

答案 1 :(得分:6)

这是一个解决方案(使用jQuery)。点击“更改为BR”按钮后,系统会插入<br>标记,而不是<p></p>标记。

HTML:

<div id='editable' contentEditable="true">
This is a division that is content editable. You can position the cursor 
within the text, move the cursor with the arrow keys, and use the keyboard 
to enter or delete text at the cursor position.
</div>
<button type="button" onclick='InsertBR()'>Change to BR</button>
<button type="button" onclick='ViewSource()'>View Div source</button>

使用Javascript:

function InsertBR()
{
    $("#editable").keypress(function(e) {
        if (e.which == 13) 
        {
            e.preventDefault();
            document.selection.createRange().pasteHTML("<br/>")     
        }
    });
}

function ViewSource()
{           
    var div = document.getElementById('editable');
    alert('div.innerHTML = ' + div.innerHTML);
}

These links helped。 工作示例here

答案 2 :(得分:5)

您总是可以学习使用 SHIFT + ENTER 进行单行返回,使用 ENTER 进行段落返回。 IE在这方面表现得像MS Word。

答案 3 :(得分:1)

如果您可以使用它,FCKEditor有此设置

答案 4 :(得分:1)

更改可编辑line-height<p>的{​​{1}}作品:

<div>