我正在寻找一种样式列表的方法，以便他们在contentEditable元素中编辑时使用用户设置的格式。具体来说，我希望能够以与<li>内容的其余部分相同的方式设置数字/项目符号的样式。
从我完成的测试开始，浏览器永远不会直接设置<li>标记（实际上控制数字/项目符号的样式），但总是放置<font>标记（或{{1} } if <span>）作为第一个子节点，使用它进行格式化。我已经尝试了一些想法来解决这个问题，但还没有找到成功：
StyleWithCSS 在这里，我尝试侦听“DOMNodeInserted”，当一个<li>标记插入DOM时，我查询了当前的<li>，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>节点提供了一个ID，并将规则插入到样式表中。现在规则将管理<li>的样式，我可以使用CSSOM不断更新任何特定的<li>样式。
这似乎工作得很好（有一些bug需要解决），但是，它完全打破了contentEditable撤销堆栈。由于撤消命令仅与<li>和其他格式化命令相关联，因此无法“撤消”您在样式表中设置的样式。 （至少不是很直观，我已经考虑过如何做到这一点......）
textContent属性的变化并保留它们对于此尝试，我使用了DOM级别4中可用的新可用MutationObserver http://www.w3.org/TR/dom/#mutationobserver。此观察者可以监视节点属性的更改，这些更改将在MutationRecord中传回。它甚至可以保存以前的属性值，包括<li>值，这样我就可以找出被删除的内容并重新应用它。
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
});
将保留其样式。
那里有什么新奇的想法？现代浏览器解决方案也受到欢迎。我知道我可以格式化我自己的HTML以用于列表，但我试图看看是否可以使用标准<li>和insertOrderedList命令来完成这些命令。
看起来没有人解决过这个问题，这里有一个JSFiddle示例，看看我在描述什么：http://jsfiddle.net/8LyZR/。只是尝试更改项目符号列表或编号列表的样式。
对于我正在进行的项目，我们正在使用我们自己的WebKit构建，因此我们能够通过本机更改来修复此问题，但我希望有一种方法（或将是一种方式）直接执行此操作使用HTML / CSS / JS。
答案 0 :(得分：1)
这是一些有趣的CSS技巧。 http://jsfiddle.net/GZ3cv/
它基本上依赖于在内联标签上放置一个伪元素:before（这将使样式固有），然后尝试将它放在原始列表项目符号/数字的顶部。
我无法决定是否将其称为解决方案，因为嵌套/内联标签（字体，u，b，span，i）的所有不同组合可能会变得不切实际。
但只是玩弄字体，大小，颜色和列表类型的控件，似乎它可以通过一些明显的彻底调整来模仿你所寻找的东西。
我很好奇这种技术是否合理或荒谬:)只是把它扔出去......