HtmlEditor 和使用 Midas 命令增加/减少字体大小答案

【问题标题】：HtmlEditor and increase/decrease font size with Midas commandsHtmlEditor 和使用 Midas 命令增加/减少字体大小
【发布时间】：2013-09-25 04:06:29
【问题描述】：

我在尝试将 ExtJs HtmlEditor 集成到我们的项目中时遇到了一些跨浏览器的奇怪现象：

如果您在 Firefox3.6 中减小/增大字体大小，它会将选定的文本包装在带有大小属性的 '' 标记中（例如 'visitor'）。如果您在 Chrome6 或 Safari4 中执行相同操作，它会将其包装到带有 'style=font-size...' 属性的 '' 标记中（例如 'visitor'）。因此，一旦您在 Firefox 中更改字体大小，您将无法在 Safari 或 Chrome 中进行修改，反之亦然。

这是由浏览器的 Midas 引擎完成的（如本文所述：http://www.mozilla.org/editor/midas-spec.html）。实现调用：

document.execCommand('FontSize', false, value); // value is the font size as a numeric value

所以，我无法改变它。我正要编写自己的字体大小更改器实现，但在我走下去之后，我意识到那将是一个相当复杂的实现。

还有其他人遇到过这个问题吗？有什么好的解决方案吗？

【问题讨论】：

标签： javascript rich-text-editor midas-editor

【解决方案1】：

只要您将源代码保存在服务器上的某个位置，我建议您保持编辑器不变。

在服务器端，您通常会验证源代码，因此验证将是将源代码转换为独特样式的好时机。

【讨论】：

我宁愿不在后端做。对我来说，这是一个前端功能。此外，在前端，我们对所有 clob 字段使用相同的 RichTextEditor 组件。我只需要修复一个组件。而在后端，我们围绕这些字段使用不同的验证器有不同的业务逻辑，所有这些都需要更改，并且存在更多潜在的故障点。后端的更改与提出我自己的前端解决方案一样复杂。
如果我必须在客户端这样做，我会使用节点（如果您使用 iframe 则为 documentElement，如果您使用 contenteditable-element 则使用编辑器元素）并获取所有字体元素使用 getElementsByTagName()。我会用 span/div 替换它们，并根据例如设置 span/div 的样式。字体元素的大小属性（注意字体的大小属性不使用像素）。还有一个命令“styleWithCss”，但我猜这在IE中是不接受的。
我刚刚尝试了 styleWithCss。这并没有改变 Firefox 的行为。我会继续尝试您的其他建议。
嗯，该解决方案存在一个问题。如果我将字体标签转换为跨度标签，Firefox 将无法识别当前字体大小。例如。我有一个字体大小为 x-large 的跨度。增加大小应该将其设置为 xx-large，但 Firefox 无法识别大小已经增加，因为它正在寻找字体标签。因此，它将大小设置为 5（等于“大”）。所以，这行不通。
等待一周后，您的答案是最好的。感谢您的意见。