弹出模式时如何保持文本被选中/突出显示答案

【问题标题】：How to keep text selected/highlighted when a modal pops up弹出模式时如何保持文本被选中/突出显示
【发布时间】：2020-01-24 07:03:33
【问题描述】：

我正在创建文档编写器并使用document.execCommand 创建链接。我想要的是用户选择/突出显示一些文本，单击一个按钮以添加指向该文本的链接（通过模式），然后在添加该文本时将其转换为链接 - 某事就像您在 Medium 和其他博客网站上看到的那样。

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

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">

component.ts

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

}

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

【问题讨论】：

标签： javascript html angular typescript

【解决方案1】：

您可以通过在文本块周围设置一个新的 html 应答器来实现这一点，例如 <mark></mark> 带有 id 或您可以在需要时处理的区分数据。还<mark> 给你选择的方面。您可以为其添加一些样式。

希望对你有帮助

【讨论】：