如何获取使用 Document.execCommand() 执行的命令列表答案

【问题标题】：How to get list of commands executed by using Document.execCommand()如何获取使用 Document.execCommand() 执行的命令列表
【发布时间】：2016-01-23 18:43:15
【问题描述】：

我正在使用Document.execCommand() 来操作<div contentEditable = true id="#TextEditor"> 的内容。

通过单击一个按钮，我可以在我的文本编辑器中启用粗体。我用来启用粗体的代码是<button id="#ApplyBold">B</button>

$('#ApplyBold').click(function () {
    $('#TextEditor').focus();
    document.execCommand('bold', false, null);
});

这使文本编辑器启用粗体。同样，我有斜体和下划线按钮。

现在，我如何检测document.execCommand() 命令启用的样式。例如，如果我启用了粗体和斜体，我需要一个函数说GetAppliedStyles()，它可以返回由document.execCommand() 命令启用的应用样式。在这种情况下，它们是粗体和下划线。

function GetAppliedStyles()
{
   var styles = new Array();
   styles = document.execCommand().aCommandName; //which returns list of styles applies
   return styles;
}

【问题讨论】：

标签： javascript jquery

【解决方案1】：

虽然来晚了，但我想添加一种可能会有所帮助的方法。 document.queryCommandState您可以使用document.queryCommandState(command),eg: document.queryCommandState('bold)`来检查是否添加了某个命令。

对于选定的文本，您可以将一些预期的命令作为数组传递并循环检查以获取选定document 的布尔值。

我通过添加基于相同逻辑here 的类，对check 和activate 命令按钮使用了相同的功能。虽然代码在 AngularJS 中，但可以在其他库或框架中重新实现

【讨论】：

这对我帮助很大！谢谢，这应该是答案:)
@IT-Girl：谢谢 :) 非常感谢！我也修复了一个损坏的链接

【解决方案2】：

它不像你想的那样工作。 execCommand('bold') 是一个事件，而不是你可以观察到的持续的“效果”——它在当前光标位置的 contentEditable 节点上添加了一个 <b> 或 <strong> 标记..

如果您需要在编辑期间检查当前样式，您可以找到当前插入符号位置 (Get contentEditable caret index position) 并从那里在 DOM 中向上查找以查找该位置当前包含哪些标签 (.closest('b')例如）。

2020 年编辑：此答案已过时； Shashank 的回答中提到的 queryCommandState 方法目前可能是更好的选择。

【讨论】：

【解决方案3】：

queryCommandState() 已弃用，不应使用。

您可以使用 window.getSelection() 方法。这是获取应用于所选文本的标签名称的代码。假设您正在检查“斜体”：

let appliedCmds = [];
let specificTag = 'i';
let node = window.getSelection().focusNode;
while(node.tagName !== 'body') {
  if(node.tagName === specificTag){//you can add multiple checks here for the cmds or tags you wanna find.
    appliedCmds.push(node.tagName);
  }
  node = node.parentElement;
}

这段代码的作用：当您在富文本编辑器中选择文本时，它将获取选定的文本，获取它的父元素。然后它会检查'body'标签，如果不是'body'标签，它会进入循环，在这里你可以为你的标签添加检查。例如：'italic' 有 'i' 标签。您可以为要获取应用的 cmds 的 cmds 添加多项检查。然后，如果它找到标签，它会将标签名称推送到数组中。并找到它的父母。相同的过程将继续进行 unitll 身体标签被发现。现在你有一个数组中的标签名称。您可以从标签名称中获取 cmd。

【讨论】：