1

我有一个内容可编辑的 DIV，它链接/同步回文本区域。

contenteditable DIV 是一个免费的沙箱，它将在调用它们时创建格式化元素等。然而，这确实经常导致混乱的堆叠元素。

我希望能够在将 textarea 表单发送到服务器之前清理代码。

最终可能会出现以下情况：

<div>
  <b>
    <i>
        Hel
    </i>
    <i>
        l
    </i>
  </b>
  <i>
    <b>
       o World!
    </b>
  </i>
</div>

理想情况下将转换为：

<div>
  <b>
    <i>
       Hello World!
    </i>
   </b>
</div>

如果我（递归地）遍历 div 的子节点，我大概可以跟踪格式(tagName.toUpperCase() == {'B','I' ....} )// 或执行 a document.queryCommandState，在此期间我可以document.execCommand('removeFormat',false,null)在selectNode(thenode).

但是，我对如何跨格式的相邻节点进行跟踪有点迷茫。

作为参考，这是我最近为 DOM 解析所做的以从 IMG 标签中删除格式：http: //jsfiddle.net/tjzGg/

注意：这是一个类似的问题> jquery - 合并堆叠的 DOM 元素，但它是关于将useCSS样式线合并为一种主要样式。这是一个不同的问题的原因是，我希望将文本与一种通用样式合并，但由于文本的格式设置，人为地将其拆分为多个元素。如果您采用一个可内容编辑的 div 并一次单独加粗一个字符，您最终将得到每个元素一个字符。

4

1 回答 1

1

我有几个解决方案，它们各有利弊。

首先，我在 gmail 中玩耍时发现，如果格式样式处于相同的当前选定模式，则可内容编辑的 DIV 将“吸收”相邻节点。这个“免费赠品”允许我仅仅尝试重新组织格式化发生的顺序以清理大部分 html 汤。这不是一个完整的解决方案。理想的解决方案是具有最大的格式化模式，因为具有子集文本的父级将具有递减的量级是进一步的嵌套模式。

在我上面的人工示例中，结果本质上会转换为：

<div>
   <b>
     <i> 
        Hel
        l
     </i>
    </b> 
....

警告：这仅使用文本进行了测试，没有图像。由于解决方案 1 中的节点解析和解决方案 2 中 textContent.length 的使用，我想在处理时会出现一两个错误。

解决方案 1：

第一个在 Chrome 中有效，但在 Firefox 中调用execCommand会导致节点选择失去焦点并被取消选中。这是一个我似乎无法理解或编程的致命缺陷。除非我能弄清楚如何重新突出显示/选择新格式化的节点，否则这已被放弃。

http://jsfiddle.net/tjzGg/3/

我希望能够让这个与 Firefox 一起工作。关于我在哪里出错的任何建议。

解决方案 2：

第二种方法是尝试想出一个解决 Firefox 失去焦点的解决方案。我可以处理的唯一方法是忽略选择整个节点，而是一次选择一个字符，查看其格式，核对并按特定顺序重新应用。这在两种浏览器中都有效，但DOM 会被拆分为childNode每个字符的一个。我不确定组合它们的最佳方式（textContent？）。

http://jsfiddle.net/LDVpD/3/

[背景：查看了 jsbeautifier、htmlsoup、html tidy、nokogiri、hpricot、jtidy ......我真的很惊讶没有解决方案。GMail 也会生成“丑陋”的格式！]

我知道有更好的解决方案 - 我很想听听一些建议。

更新

经过测试，很明显解决方案 2 慢得离谱（通过跟踪头部来优化它并不复杂，因为它是一种渐进的“洪水”，但仍然很慢），甚至可以轻松地将其修改为处理整个 textNodes 但解决方案 1 似乎是一个更好的方法，如果它只在 Firefox 中工作。

解决方案 1+2=3：

我发现如果我应用格式作为切换的一种方式，它会起作用，但是正如预测的那样，文本节点会根据相邻匹配格式的自然合并而增长/缩小。因此，我在睡觉时突然意识到，如果我创建了一个文本节点列表，并且从后到前，如果在应用格式化时内部 DOM（对于 Firefox ！！！）正在增长/缩小，我就不在乎了。结合解决方案 2 的 textNode 列表（然后弹出尾节点），效果很好。事实上，迭代而不是递归文本节点（原始解决方案 1 方法）甚至更快。

http://jsfiddle.net/tjzGg/4/

注意：selectNodeContents 与 selectNode

于 2013-04-26T20:55:37.707 回答