Заменить текст ссылкой в ​​contenteditable - PullRequest
Новая
       8

Заменить текст ссылкой в ​​contenteditable

0 голосов
/ 24 ноября 2018

Я пытаюсь внедрить систему идентификации, как на Facebook, в моем приложении Angular 6.Когда пользователь пишет комментарий (в contenteditable 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);
}

Сейчас я могу прочитать имя после клавиши '@' и отправить запрос, чтобы найти подходящих пользователей.

Вот пример:

enter image description here

Когда пользователь нажимает «Джон Леннон», я хотел бы заменить «@John» на <a href="/profile/johnlennon">John Lennon</a>

Как с этим справиться?

1 Ответ

0 голосов
/ 25 ноября 2018

Необходимо связать переменную с «innerHTML», чтобы при вызове функции selectUserSugg(user) она добавляла желаемый результат в переменную «comments». 

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

Переменная «comments»должен быть определен в вашем файле .ts.
[innerHTML] позволит шаблону отображать HTML-код из вашей переменной.

Это решит вашу проблему с разделом комментариев с «контентом» и «ссылкой на пользователя».

А для замены «@John» на ссылку вы можете разобрать переменную «comments» и использовать регулярное выражение.

...