javascript - 使用字体系列、字体大小和颜色设置内容可编辑列表 ()

Question

我正在寻找一种设置列表样式的方法，以便它们在 contentEditable 元素中进行编辑时使用用户设置的格式。具体来说，我希望能够以与 <li> 的其余部分相同的方式设置数字/元素符号的样式。内容。

根据我所做的测试，浏览器从不设置样式 <li>直接标记(实际上控制数字/元素符号的样式)但始终放置 <font>标记(或 <span> 如果 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 撤消堆栈。由于撤消命令仅绑定(bind)到 textContent和其他格式化命令，无法“撤消”您在样式表中设置的样式。 (至少不是很直观，我已经考虑过如何做到这一点......)

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

对于这次尝试，我使用了新近可用的 MutationObserver http://www.w3.org/TR/dom/#mutationobserver在 DOM 级别 4 中可用。此观察者可以观察节点属性的变化，这些变化将在 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>我们将保持他们的风格。

有什么新颖的想法吗？仅限现代浏览器的解决方案也受到欢迎。我知道我可以格式化我自己的 HTML 以用于列表，但我正在尝试查看是否可以使用标准 insertOrderedList 来完成此操作。和 insertUnorderedList使用真实列表标签的命令。

** 2012 年 11 月 7 日更新 **

似乎还没有人解决过这个问题，这里有一个 JSFiddle 示例来查看我正在描述的内容:http://jsfiddle.net/8LyZR/ .只需尝试更改元素符号列表或编号列表的样式即可。

对于我正在从事的元素，我们正在使用我们自己构建的 WebKit，因此我们能够通过 native 更改来修复此问题，但我希望有一种方法(或将有一种方法)直接执行此操作使用 HTML/CSS/JS。

Answer 1

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

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

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

但只是尝试使用字体、大小、颜色和列表类型控件，它似乎可以通过一些明显的彻底调整来模仿您正在寻找的内容。

我很好奇这种技术是合理的还是荒谬的:)把它扔在那里..