避免使用IE的contentEditable元素在按下Enter键时创建段落

Question

避免使用IE的contentEditable元素在按下Enter键时创建段落

htmlcontenteditable

11

在InternetExplorer中，每次按Enter键时，contentEditable DIV会创建一个新的段落（），而Firefox会创建一个 标签。是否有可能强制IE插入 而不是新段落？

- Franck Freiburger

5个回答

7

是的，可以通过首先停止keydown事件（window.event.stopPropagation();）然后使用插入HTML命令来避免插入段落。但是，IE依赖于这些div来设置样式等，使用 会导致问题。

我建议您使用像TinyMCE或其他编辑器这样的项目，并寻找一个行为方式与您期望的相同的编辑器，因为它们具有各种不同浏览器问题的解决方法。也许您可以找到一个使用 的编辑器...

- Jonathan Weiss

1

这种策略会破坏撤销功能。每次按Enter键时，都会改变DOM，因此用户无法再使用撤销菜单来撤销更改！ - Dan Fabulich

2

使用命令来操作DOM不会破坏撤销功能。每个命令都可以撤销。当然，你必须避免像div.innerHTML = "foo"这样的操作。 - Jonathan Weiss

6

您可以学习使用 SHIFT + ENTER 进行单行换行，ENTER 进行段落换行。IE在这方面的行为类似于MS Word。

- Fenton

1

如果您需要使用它，FCKEditor 有一个相关的设置。

- Mason

1

更改可编辑的<div>内部的line-height有效：

#editable_div p
{
    line-height: 0px;
}

- user1649326

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rosscj2533 · Accepted Answer

这里有一个解决方案（使用jQuery）。在您单击“更改为BR”按钮后，将插入 标签，而不是标签。

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);
}

这些链接有所帮助。可在此处查看工作示例。