从其他html

时间:2016-03-25 15:48:08

标签: html5 contenteditable

鉴于这个小提琴:

https://jsfiddle.net/zax0gsv7/1/

Copy this:<br><br>

<div style="width:200px; border:1px solid black; overflow:scroll; height:50px; white-space:nowrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nunc sed mollis luctus, ex nisi fringilla mauris, a tincidunt metus est sit amet justo. Aliquam semper elementum ullamcorper. Cras tincidunt facilisis ligula, vitae pulvinar dui fringilla quis. Proin posuere laoreet enim, quis laoreet libero suscipit vitae. Vestibulum vulputate massa ex, in imperdiet nunc consectetur vel.
Nulla justo sapien, viverra ut tristique a, euismod at diam. Integer convallis felis ut dictum interdum. Curabitur finibus sollicitudin metus, nec varius arcu mollis vitae. Sed fringilla congue purus non faucibus. Pellentesque venenatis mauris sodales, ultrices orci eu, vehicula odio. Suspendisse sed volutpat magna. Maecenas lorem purus, efficitur in varius vel, consectetur non tortor. Nulla facilisi. Praesent a est id nisi egestas bibendum sed a odio. Nam in nibh eu mauris egestas eleifend sit amet quis enim. Phasellus blandit eleifend ligula. </div>

<br>here:<br><br>

<pre id="box" style="border:1px solid black; width:100%; min-height:100px;max-height:100px; overflow:scroll;" contenteditable="true">
</pre>

<br>then click here:<br><br>

<button id="set">Number of newlines:</button> <span id="out"></span>

在firefox中手动将第一个框的内容复制粘贴到第二个包含contentEditable的框中时,会添加一些在第一个框中不存在的换行符。我添加到原版中只有一个换行符在“Nulla justo sapien”之前,它被保留了下来。 显然在Chrome上没有添加换行符,但手动添加的换行符也会被删除。还添加了一个计算换行符的小函数。

想知道这是一个错误或预期的行为,以及如何在firefox和chrome上解决它以正确保留原始换行符而不在此过程中添加其他换行符。

1 个答案:

答案 0 :(得分:0)

简而言之

这不是错误。这是不同浏览器处理内部HTML的另一种方式。

详细说明

contenteditable的好处是它允许您更改块内的文本。这确实适用于每个浏览器,您甚至可以复制标记和样式。

contenteditable的坏处和最大问题是在contenteditable的阴影中生成的HTML在不同的浏览器中是不同的。请注意input / textareacontenteditable之间的区别:在标准输入中,您有一个名为value的属性,用于存储{{1}中的实际值你有HTML,一种跳过空格/换行符的标记语言。

最后,它来了:有一个contenteditable standard,它不是很具描述性。它确实表明它应该如何表现,但是根据标准新行应该生成contenteditable不同的浏览器处理甚至这种情况不同。例如。当前版本的Chrome将该行包裹在<br>内。从本例中可以看出,即使是标准也没有得到尊重。

您的案例甚至不符合标准。每个浏览器实现都不同。你的情况不是一个错误:HTML代码中的换行符没有任何意义 - &gt;您仍然可以编辑内容,即使有1000个换行符,HTML看起来也一样。

我在尝试<div>时为自己做出的结论 - 这是如此不一致,以至于我不能使用它。它到目前为止一直有效。