Question

我想在renderer2中使用与angularContents（）等效的语言

在内容可编辑的div中将插入符放置在某个位置，我希望onClick（）将前一个字符包装在一个跨度中（我假设点击时，插入符号的位置没有更改，默认值为preventdefault）

onChaining(event) {
      const caretPosition = window.getSelection().getRangeAt(0);
      const range = document.createRange();
      range.setStart(caretPosition.commonAncestorContainer, caretPosition.startOffset - 1);
      range.setEnd(caretPosition.commonAncestorContainer, caretPosition.endOffset );

      const wrap= this.renderer.createElement('span');
      range.surroundContents(wrap);

}

我想使用renderer2而不是SurroundContents并具有新的dom引用，以便我可以回滚并在需要时删除换行。

插入号的位置未知（在文本节点中），因此不存在先前的引用。

Answer 1

看来Renderer2希望父对象具有方法appendChild()。因此，您不能使用类似this.renderer.appendChild(range,wrap)和insertBefore的名称。但是仍然有可能实现不可撤销的行为。根据{{3}} surrondContents：

此方法几乎等效于newNode.appendChild(range.extractContents()); range.insertNode(newNode);，因此我们重复上述行为，并将保留范围和所选文本节点的克隆。

changes: {
  range: Range;content: Node
}[] = [];

render() {
  const caretPosition = window.getSelection().getRangeAt(0);
  const range = document.createRange();
  range.setStart(
    caretPosition.commonAncestorContainer,
    caretPosition.startOffset - 1
  );
  range.setEnd(
    caretPosition.commonAncestorContainer,
    caretPosition.endOffset
  );

  const wrap = this.renderer.createElement("span");
  this.renderer.setStyle(wrap, "background-color", "red");
  const contents = range.extractContents();

  this.changes.push({
    range: range,
    content: contents.cloneNode(true)
  });
  this.renderer.appendChild(wrap, contents);
  range.insertNode(wrap);
}

undo() {
  const action = this.changes.pop();
  const range = action.range;
  const node = range.extractContents();
  range.insertNode(action.content);
}

这是Stackblitz documentation

等效于angular2中的SurroundContents

1 个答案: