Javascript 如何在模式弹出时保持选中/突出显示文本

我正在创建文档编写器，并使用

document.execCommand

创建链接。我想要的是，用户选择/突出显示一段文本，单击一个按钮添加指向该文本的链接（通过模式），然后在添加时将该文本转换为链接，就像媒体和其他博客网站中看到的那样

我的问题是，我可以突出显示一段文本，单击链接按钮，会弹出一个模式，但由于焦点在模式输入上，它会失去突出显示文本的焦点，因此我无法将链接添加到最初高亮显示的文本

component.html

<button mat-icon-button [ngClass]="linkSelected ? 'selected' : 'unselected' (click)="onClickLink()"> <mat-icon svgIcon="link"></mat-icon> </button>

<div id="article" cdkFocusInitial contentEditable="true" spellcheck="false">

}

---

如果有人对如何实现这一目标有任何想法，我将不胜感激

您可以通过在文本块周围设置一个新的html应答器（如带有id的

）来实现这一点，或者在需要时识别数据。另外，

为您提供所选的方面。你可以给它添加一些风格

希望能有所帮助

onClickLink() {

const name = '';
const link = '';

//Opens modal
const dialogRef = this.dialog.open(AddResourceComponent, {
  data: {name, link},
  maxWidth: '100vw',
  maxHeight: '100vh'
});

dialogRef.afterClosed().subscribe(result => {
  if (result) {
    document.execCommand('createLink', false, result.link);
  }
});