我正在寻找一种样式列表的方法，以便他们在 contentEditable 元素中编辑时使用用户设置的格式。具体来说，我希望能够以与其他<li>内容相同的方式设置数字/项目符号的样式。
从我所做的测试来看，浏览器从不 <li>直接设置标签的样式（实际上控制数字/项目符号的样式），但总是将<font>标签（或<span>if StyleWithCSS）作为第一个子节点，使用它进行格式化。我已经尝试了一些想法来解决这个问题，但没有成功：
1. 以<li>编程方式将样式应用于
在这里，我尝试侦听“DOMNodeInserted”，当<li>标签插入 DOM 时，我查询当前fontName的fontSize、 和foreColor命令，并将它们作为内联样式应用到<li>.
textarea.addEventListener('DOMNodeInserted', function (evt) {
if (evt.target.nodeName === 'LI') {
evt.target.style.color = queryCommandValue('foreColor');
evt.target.style.fontFamily = queryCommandValue('fontName');
evt.target.style.fontSize = queryCommandValue('fontSize');
}
}, false);
即使这样做，一旦您开始输入列表项，浏览器就会尝试“智能”并从 中删除样式<li>，将它们放入<font>（或<span>）标记中。:(
2. 为要插入样式表的样式创建规则
基于上面的尝试，我没有编写内联样式，而是为它们创建了一个规则，给<li>节点一个 ID，并将规则插入到样式表中。现在规则将管理 的样式<li>，我可以使用 CSSOM 不断更新任何特定<li>的样式。
这似乎工作得很好（需要解决一些错误），但是，它完全破坏了 contentEditable 撤消堆栈。由于撤消命令仅textContent与其他格式化命令相关联，因此无法“撤消”您在样式表中设置的样式。（至少不是很直观，我已经想过如何做到这一点......）
3. 观察<li>'s 属性的变化并保留它们
对于这次尝试，我使用了 DOM 级别 4 中新可用的 MutationObserver http://www.w3.org/TR/dom/#mutationobserver。这个观察者可以观察节点属性的变化，这些变化将被传递回到 MutationRecord 中。它甚至可以保存以前的属性值，包括style值，所以我可以找出被删除的内容并重新应用它。
var observer = new WebKitMutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.target.nodeName === 'LI') {
...
}
})
});
observer.observe(document, {
attributes: true,
subtree: true,
attributeOldValue: true
});
这仍然受到缺乏撤消支持的影响。您将撤消其他格式更改，但<li>s 将保留其样式。
有什么新奇的想法吗？仅限现代浏览器的解决方案也受到欢迎。我知道我可以格式化自己的 HTML 以用于列表，但我试图看看这是否可以使用标准insertOrderedList和insertUnorderedList使用真实列表标签的命令来完成。
** 2012 年 11 月 7 日更新 **
看起来还没有人解决这个问题，这里有一个 JSFiddle 示例，看看我在描述什么：http: //jsfiddle.net/8LyZR/。只需尝试更改项目符号列表或编号列表的样式。
对于我正在进行的项目，我们使用的是自己构建的 WebKit，因此我们能够通过本机更改来解决此问题，但我希望有一种方法（或将有一种方法）直接使用 HTML/ CSS/JS。