html - 使用 contenteditable 了解 CSS 属性

Question

我有一个带有 contenteditable=true 的框，其中包含多个 css 样式(粗体、斜体、...)。

如果我用接近粗体的文字书写，新文字也将以粗体书写。有什么方法可以通过 Javascript 知道哪些属性将应用于文本？

编辑:

这是一个 JFiddle 的小例子:http://jsfiddle.net/WgCBZ/

如果我写在粗体文本中或之后，我会写粗体，如果我在无样式文本中或之后写，我会写无样式。

我想知道将在按键时写入的文本的样式。

$(document).keypress(function(event) { 
  // Find the style
  // If bold will be written alert "bold"
  // If italic will be written alert "italic"
  // else alert ""
});

Answer 1

您可以使用 queryCommandState 查找目标当前是否启用了特定命令，这将返回目标当前状态命令的 bool 值。

if(document.queryCommandState('bold')){
  // The target (cursor) is currently bold
}

您可以在 MDN 上的 contenteditable 中找到可用的命令，网址为 https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla