样式contentEditable列表(<li>)具有font-family,font-size和color

Question

我正在寻找一种样式列表的方法,以便他们在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.为要插入StyleSheet的样式创建规则

基于上面的尝试,我没有为内联编写样式,而是为它们创建了一个规则,为<li>节点提供了一个ID,并将规则插入到样式表中.现在规则将决定它的风格<li>,我可以使用CSSOM不断更新任何特定<li>的样式.

这似乎工作得很好(有一些bug需要解决),但是,它完全打破了contentEditable撤销堆栈.由于撤消命令仅textContent与其他格式化命令相关联,因此无法"撤消"您在样式表中设置的样式.(至少不是很直观,我已经考虑过如何做到这一点......)

3.注意<li>属性的变化并保留它们

对于这次尝试,我使用了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.

Answer 1

这里有一些有趣的 CSS 技巧。http://jsfiddle.net/GZ3cv/

它基本上依赖于在内联标签上放置一个伪元素:before（它将继承样式），然后尝试将其放置在原始列表项目符号/数字的顶部。

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

但只要尝试一下字体、大小、颜色和列表类型控件，它似乎就可以模仿您正在寻找的内容，并进行一些明显的彻底调整。

我很好奇这种技术是否合理或者只是荒谬:)就把它扔在那里..