Question

通过提供contenteditable=true，

将div用作编辑器

<div id="edited_content" contenteditable="true" >
</div>

无论用户输入除标题标记之外的内容，它都应转换为<p>content</p>事件中的keyup 例如：

a）如果编辑器中没有内容，则div应为

<div id="edited_content" contenteditable="true"/>

b）用户输入This is a paragraph.而不输入以下内容。内容应该是

<div id="edited_content" contenteditable="true">
    <p>This is a paragraph.</p>
</div>

c）用户删除所有先前按下退格键的内容超过必要的内容，例如， 25次。内容现在是空的。并重写该段落。内容应该是

<div id="edited_content" contenteditable="true">
  <p>This is a paragraph.</p>
</div>

d）用户有一些带有标题的文字（h1，h2，h3，h4，h5，{{1}中的任意一个}）。例如

h6

c）用户将光标放在<div id="edited_content" contenteditable="true"> <p> some paragraph</p> <h1>a header<h2> <p>other paragraph</p> </div>的末尾，然后按Enter键开始新段落并输入a header内容应该

This is a paragraph.

我的代码是：

<div id="edited_content" contenteditable="true">
    <p> some paragraph</p>
    <h1>a header<h2>
    <p>This is a paragraph.</p>
    <p>other paragraph</p>
</div>

但我的代码并不适用于所有浏览器。在chrome中，有时在容器下生成无标记的var timeoutReference; $("#edited_content").keyup(function(e) { var code; code = (e.keyCode ? e.keyCode : e.which); if (code === 13) { $("#edited_content").contents().filter(function() { return this.nodeType === 3 && $.trim(this.nodeValue).length; }).wrap("<p />"); } else { if (timeoutReference) { clearTimeout(timeoutReference); } timeoutReference = setTimeout(function() { $("#edited_content").contents().filter(function() { return this.nodeType === 3 && $.trim(this.nodeValue).length; }).wrap("<p />"); }, 3000); } });而不是后者的text string，Enter会创建新的<p>text</p>标记而不是新的<div>标记。有些浏览器会创建<p>而不是<br>

on <p>

1）检查光标所在的位置 2）纠正标签
3）再次将光标放在用户期望的位置

div中的预期p标签contenteditable = true

0 个答案: