我正在寻找一种设置列表样式的方法,以便它们在 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。
最佳答案
这里有一些有趣的 CSS 技巧。 http://jsfiddle.net/GZ3cv/
它基本上依赖于在内嵌标签上放置一个伪元素 :before
(这将继承样式),然后尝试将其放置在原始列表元素符号/数字的顶部。
我无法决定是否将此称为解决方案,因为嵌套/内联标签(font、u、b、span、i)的所有不同组合可能会变得不切实际。
但只是尝试使用字体、大小、颜色和列表类型控件,它似乎可以通过一些明显的彻底调整来模仿您正在寻找的内容。
我很好奇这种技术是合理的还是荒谬的:)把它扔在那里..
关于javascript - 使用字体系列、字体大小和颜色设置内容可编辑列表 (<li>),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10540862/