javascript - 如何在contenteditable元素中设置CSS字体大小？

Question

我想用 JavaScript 创建一个小型 HTML 编辑器，在其中我可以将所选文本的字体大小设置为某个特定的 CSS 值。根据文档，字体大小是使用 FontSize 命令设置的，如下所示:

document.execCommand("FontSize", false, x);

x 的字体大小必须在 1 到 7 之间。结果是所选内容被 <font size="x" /> 元素包裹。这不是很有用，因为我想创建一个字体大小比 7 更多的下拉框，并且我想使用像素作为字体大小单位，所以最后我希望用 <span style="font-size:25px" /> 这样的元素包裹所选文本。我该怎么做？

我搜索了现有的 HTML 编辑器组件，但只找到了两种类型的库:像 CKEditor 这样的大型库，它们能够执行我想要的操作，但对于我的目的而言太大了，而小型库仅支持这 7 种字体大小.

那么如何在可内容编辑的 HTML 元素中设置自定义字体大小？它必须在最新的 Firefox 和 Chromium 以及 IE7-9 中工作。

Answer 1

您可以尝试使用 Rangy 来实现此目的。它是一个跨浏览器库，试图消除所有浏览器中范围/选择的错误和不一致。 http://code.google.com/p/rangy/

1. 获取选择范围
2. range.extractContents() 并存储在 var
3. 插入一个新的span节点(带有id) - range.insertNode(node)
4. jQuery 使用步骤 2 var 更新新节点，例如$("#spanid").html(docFragment)

在此处查看所有范围方法: http://code.google.com/p/rangy/wiki/RangyRange#Methods