Question

我正在使用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;
}

Answer 1

它不像你想的那样有效。 execCommand('bold')是一个事件，而不是您可以注意的持续“效果” - 它会在当前光标位置向contentEditable节点添加<b>或<strong>标记。

如果你需要在编辑过程中检查当前的样式，你会找到当前的插入位置（Get caret position in contentEditable div）并从那里向上寻找DOM以找到当前包含的位置标记（{例如{1}}。

Answer 2

虽然在这里迟到但我想添加一种可能有用的方法。 document.queryCommandState您可以使用document.queryCommandState(command)，例如： document.queryCommandState('bold）`来检查是否添加了某些命令。

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

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

Answer 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 body 标签。现在你有一个数组中的标签名称。您可以从标签名称中获取 cmds。

如何获取使用Document.execCommand（）执行的命令列表

3 个答案: