0

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

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');

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

4

1 回答 1

2

老实说，当你自己尝试为这类事情编写代码时，事情会变得非常糟糕。您需要涵盖很多情况，例如当您在多个<p>标签中选择文本时。你不需要重新发明轮子。查看像rangy这样的图书馆，他们已经处理了细节。特别针对您的情况，如果您可以使用 CSS 样式而不是使用标签元素<strong>，请查看CSS Class Applier Module，它允许您通过以下方式简单地做到这一点：

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

.someClass包含您需要应用的任何样式的 CSS 类在哪里。

于 2013-03-14T22:46:57.110 回答