Question

如果一个可信的div的内容已经是粗体，那么execCommand（＆＃34; bold＆＃34;）将删除粗体。

在正常情况下这很棒，但我有一种情况，我想循环一堆可疑的div并将任何非粗体文本设置为粗体，这种方式可以设置多个样式富文本元素一次使用正确的或者字体权重＆＃39; execCommand使用的whatevers。

我可以通过仔细审查每个div中的每个节点来做到这一点，但我想确保首先没有更简单的方法。

Answer 1

这取决于您正在制作的编辑器的复杂程度。如果您不想在粗体区域内允许普通文本，则仅测试最深的可编辑文本容器就足够了，因此每个可编辑div的一个元素。

这是一个例子，

function bold(node) {
  var selection = window.getSelection();
  var range = document.createRange();

  range.selectNodeContents(node);

  selection.removeAllRanges();
  selection.addRange(range);

  if (!isBold(getDeepestContainer(selection.anchorNode)))
    document.execCommand("bold");

  selection.removeAllRanges();
  node.blur();
}

function getDeepestContainer(node) {
  var result = node;

  while (result.childNodes.length === 1) {
    result = result.firstChild;
  }

  if (result instanceof Element)
    return result;

  return result.parentElement;
}

http://codepen.io/anon/pen/NqZQzR?editors=101

Answer 2

好吧，我找不到一个简单的方法，所以我很难做到。

我已经有了一个函数，它使用干净的CSS将单个元素的内容复制到工作空间div，然后通过该工作空间中的每个节点递归。对于每个文本节点，它将循环遍历我寻找的每个样式，并查看是否设置了该样式。如果不是，它会清除一个＆＃34;每个节点都有这种风格＆＃34;标志在运行之前设置。所以我最终得到了每个节点的每个样式集的列表。

当前任务的第一步是确定应用于所有选定元素的样式。所以我采用了这个功能并创建了一个修改后的版本，它首先将每个元素的内容添加到工作空间div中。然后它在工作空间中运行正常的递归遍历，基本上将每个单独的元素视为它们是同一复杂的富文本字符串的一部分。

这给了我每种风格的状态，比如是否所有内容都是粗体，因此粗体按钮应显示为按下。

我还为每种风格添加了一个数组。当我通过元素递归时，跟踪他们的个体＆＃34;每个节点都有这种风格＆＃34;值，我会想出一个元素列表，其中每个节点都有样式，因此execcommand（＆＃34; bold＆＃34;）将切换该元素。

所以现在，对于每个样式（比如粗体按钮），我知道它是否会切换任何元素或所有元素。如果它会切换所有元素，或者没有元素，那么这很好，因为行为是一致的。但是如果它切换了元素的子集（如果＆＃34; elements_that_would_toggle＆＃34;样式的数组长度大于零但小于total_elements计数），那么我会在第一个按钮点击时忽略那些可切换元素。

在点击处理结束时，我会为每个样式清空这些数组，从而将整个行为恢复为切换，因为现在每个元素都已设置为相同的状态。

这是一种令人恶心的方法，但它是受控且一致的，而且效果非常好。

只花了一天时间才能开始工作。

可以使用execCommand或类似的函数来设置，而不是切换，像粗体一样的简单样式？

2 个答案: