用contenteditable中的链接替换文本

Question

我正在尝试在Angular 6应用程序中实现一个类似于facebook的识别系统。用户在内容可编辑的div中发表评论时，可以按“ @”键，然后按要标识的人的名字。

这是html部分：

<div contenteditable="true" (keyup)="onInputKeyUp($event)" id="commentInput"></div>
<div class="suggestion-list">
    <a *ngFor="let user of userSuggestions" (click)="selectUserSugg(user)">
        <div class="user-item">
            <div class="author-img">
                <img [src]="user.thumb" alt="author" title="author" />
            </div>
            <div class="author-name">{{user.firtName}} {{user.lastName}}</div>
        </div>
    </a>
</div>

这是角部分：

selectUserSugg(user: any){
    console.log(user);
}

现在，我可以在'@'键之后读取名称，并发送请求以查找匹配的用户。

这里是一个例子：

当用户单击“约翰·列侬”时，我想用<a href="/profile/johnlennon">John Lennon</a>替换“ @John”

如何管理？

Answer 1

您必须将变量绑定到“ innerHTML”，以便在调用selectUserSugg(user)函数时，它将在“ comments”变量中附加所需的输出。

<div contenteditable="true" (keyup)="onInputKeyUp($event)" id="commentInput" [innerHTML]="comments"></div>

变量“ comments”应该在您的.ts文件中定义。
[innerHTML]将允许模板呈现变量中的HTML代码。

这将解决您的评论部分同时包含“内容”和“链接到用户”的问题。

要通过链接替换“ @John”，您可以解析“ comments”变量并使用正则表达式。