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

Question

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

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

x必须是1到7之间的字体大小。结果是所选内容包含<font size="x" />元素。这不是很有用，因为我想创建一个字体大小超过7的下拉框，我想使用像素作为字体大小单位，所以最后我希望所选文本用像{这样的元素包装{1}}。我该怎么做？

我搜索了现有的HTML编辑器组件，但只找到了两种类型的库：像CKEditor这样的大型东西，它们能够做我想要的但是对于我的目的而言非常大而且只支持小型库这七种字体大小。

那么如何在一个可信的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