0

特定のタグで「contenteditable」divから選択したテキストをラップしようとしています。以下は正常に動作しているようですが、startOffset/endOffset には HTML テキストが含まれていません。私の質問は、範囲オブジェクトが選択範囲に存在する場合、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');

他のソリューションがある場合は、それらに興味があります。

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 に答える