Javascript 设置内容样式使用字体系列、字体大小和颜色的可编辑列表（<；li>；）

我正在寻找一种设置列表样式的方法，以便在contentEditable元素中编辑时使用用户设置的格式。具体来说，我希望能够以与

内容其余部分相同的方式对数字/项目符号进行样式设置

根据我所做的测试，浏览器从不直接设置

标记的样式（实际上控制数字/项目符号的样式），而是始终将

标记（或

如果

StyleWithCSS

）作为第一个子节点，使用它进行格式化。我已经尝试了一些解决这个问题的方法，但没有成功：

1.以编程方式将样式应用于

在这里，我尝试侦听“DOMNodeInserted”，当一个

标记插入DOM时，我查询了当前的
fontName
、
fontSize
和
foreColor
命令，并将它们作为内联样式应用到
上

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);

即使在执行此操作时，只要您开始键入列表项，浏览器也会尝试“智能”并将样式从
中剥离出来，将其放入
（或
）标记中：(

2.为要插入样式表的样式创建规则
基于上述尝试，我没有内联编写样式，而是为它们创建了一个规则，为
节点提供了一个ID，并将该规则插入样式表。现在，该规则将控制
的样式，并且我可以使用CSSOM不断更新任何特定
的样式

这似乎工作得很好（有一些bug需要解决），但是，它完全破坏了contentEditable撤消堆栈。由于撤消命令仅绑定到
textContent
和其他格式化命令，因此无法“撤消”您在样式表中设置的样式。（至少不是很直观，我考虑过如何做到这一点……）

3.观察
属性中的更改并保留它们
在这次尝试中，我使用了DOM级别4中新提供的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
});

这仍然缺乏撤消支持。您将撤消其他格式更改，但
将保留其样式

有什么新奇的想法吗？也欢迎只使用浏览器的现代解决方案。我知道我可以格式化自己的HTML以用于列表，但我正在尝试使用标准的
insertOrderedList
和
insertunderedlist
命令来实现这一点，这些命令使用真正的列表标记

**更新日期：2012年11月7日**
看起来还没有人解决这个问题，下面是一个JSFIDLE示例，看看我在描述什么：。只需尝试更改项目符号或编号列表的样式

对于我正在进行的项目，我们正在使用我们自己的WebKit构建，因此我们能够通过本机更改来解决这一问题，但我希望有一种方法（或将有一种方法）可以直接使用HTML/CSS/JS实现这一点。
这里有一些有趣的CSS技巧

它基本上依赖于在内联标记上放置一个psuedo元素
：before
（这将包含样式），然后尝试将其放置在原始列表项目符号/编号的顶部

我无法决定是否将此称为解决方案，因为它可能会变得不切实际，因为所有不同的嵌套/内联标记组合（font、u、b、span、I）

但是，仅仅是玩弄字体、大小、颜色和列表类型控件，它似乎可以模仿您所寻找的内容，并进行一些明显的彻底调整

我很好奇这种技术是合理的还是荒谬的：）你能提供一些例子说明HTML页面作为图像或文本前后的样子吗？我很难想象你在说什么。我也有这个问题。contentEditable/execCommand总是想用或围绕文本节点。即使所有文本都是在中选择的。烦人！下面是一个富文本编辑器示例：您可以尝试在此处设置列表项的样式，以查看我所描述的内容。您是否尝试过前面的内容可编辑并尝试过听按键？我一直在考虑解决此问题的方法，但在“预期”中遇到了困难行为。您希望设置
li
的样式。但是，在内容可编辑的情况下，由于插入了
font
、
b
等标记，我可以设置列表中单个单词的样式。因此，我可以将第一个单词设置为粗体，第二个为蓝色，第三个为最大字体大小。但您的意思是，您希望粗体、蓝色和字体大小都相同影响整个列表项，而这可能不是用户的意图。任何解决方案都需要区分是选择了整个列表项还是仅选择了其中的一部分，这是一个额外的挑战。有趣的方法和聪明的思维。仅仅玩一段时间，我确实不幸地认为这是一个不切实际的（甚至是无限的）需要解决的案例数量，尤其是在处理多个
时，这些案例可能包含除font/span以外的其他元素。