Question

我正在尝试从给定标记中的“contenteditable”div中包装选定的文本。下面似乎工作正常，但startOffset / endOffset不包含HTML文本。我的问题是如何让Range对象计算html标签，如果它们存在于选择中？

getSelectedText: function() {
  var range;
  if (window.getSelection) {
    range = window.getSelection().getRangeAt(0);
    return [range.startOffset, range.endOffset];
  }
}


toggleTagOnRange: function(range, tag, closeTag) {
  var removeExp, val;
  if (closeTag == null) {
    closeTag = tag;
  }
  val = this.get("value");
  removeExp = RegExp("<" + tag + ">(.+)</" + closeTag + ">");
  if (removeExp.test(val)) {
    this.set("value", val.replace(removeExp, function(match, $1) {
      return $1;
    }));
  } else {
    if (range.length > 1) {
      val = val.splice(range[1], "</" + closeTag + ">").splice(range[0], "<" + tag + ">");
      this.set("value", val);
    }
  }
  return this.get("val");
}

// this is called from a bold button click handler.
this.toggleTagOnSelection(this.getSelectedText(), 'strong');

如果您有其他解决方案，请对其他解决方案感兴趣。

Answer 1

老实说，在尝试自己为这类事情编写代码时，事情会变得非常糟糕。您需要涵盖很多案例，例如，当您在多个<p>代码中选择文字时。你不需要重新发明轮子。查看像rangy这样的图书馆，他们已经处理了细节问题。特别针对您的情况，如果您可以使用CSS样式而不是使用<strong>等标记元素，请查看CSS Class Applier Module，这样您只需执行以下操作即可：

var cssApplier = rangy.createCssClassApplier("someClass", {normalize: true});
cssApplier.toggleSelection();

其中.someClass是一个CSS类，包含您需要应用的任何样式。

如何获取所选html文本的startOffset / endOffset？

1 个答案: