Как сделать поле ввода или текстовое поле с помощью смайлика в угловых?

Question

Новый -status.component.ts

<mat-form-field>
  <textarea matInput placeholder="Status Content" style="height: 200px;"></textarea>
  <emoji-mart title="Pick your emoji…" emoji="point_up"></emoji-mart>
</mat-form-field>

Я перехожу по этой ссылке для решения ( https://github.com/TypeCtrl/ngx-emoji-mart), теперь я хочу поместить Emoji Picker в поле ввода или текстовое поле.

Answer 1

Давайте начнем с

npm install @ctrl/ngx-emoji-mart

затем,

import { PickerModule } from '@ctrl/ngx-emoji-mart'

добавьте таблицу стилей в angular.json:

"styles": [
          "src/styles.css",
          "../node_modules/@ctrl/ngx-emoji-mart/picker.css"
        ],

добавьте модуль в массив импорта app.module.ts:

@NgModule({
...,
imports:      [ ..., PickerModule, ... ],
...
})

наконец, добавьте для тестирования, чтобы увидеть, все ли работает в app.component.html:

<emoji-mart title="Pick your emoji…" emoji="point_up"></emoji-mart>  

Это оно:-)

https://stackblitz.com/edit/angular-rxanqx?file=src%2Fapp%2Fapp.component.html

РЕДАКТИРОВАТЬ

Существует необработанный подход, который нужно стилизовать.

https://stackblitz.com/edit/angular-rxanqx

у вас есть текстовая кнопка для добавления смайлика в ваш текст.

дайте мне знать, если это хороший способ начать:-)

Answer 2

Я знаю, что уже поздно, но, может быть, кто-то еще воспользуется этим.

Я улучшил эти доступные решения. смайлики должны быть вставлены в позицию моркови, и мы должны иметь возможность отменить, повторить в окне сообщения - вот решение.

HTML

       <textarea #input [formControl]="message" (keydown.enter)="send()"> </textarea>
    
    <emoji-mart
       title="Pick your emoji…"
       (emojiSelect)="addEmoji($event)"
       [hideObsolete]="true"
       [isNative]="true">
    </emoji-mart>

TS

          addEmoji(selected: Emoji) {
            const emoji: string = (selected.emoji as any).native;
            const input = this.input.nativeElement;
            input.focus();
        
            if (document.execCommand){ // document.execCommand is absolute but it //add support for undo redo and insert emoji at carrot position
//any one has better solution ?
    
              var event = new Event('input');
              document.execCommand('insertText', false, emoji);
              return; 
            }
               // insert emoji on carrot position
            const [start, end] = [input.selectionStart, input.selectionEnd]; 
            input.setRangeText(emoji, start, end, 'end');
          }

Answer 3

npm install @ctrl/ngx-emoji-mart

затем в вашем module.ts

import { PickerModule } from '@ctrl/ngx-emoji-mart'

добавьте его стиль в свой файл styles.scss

@import '~@ctrl/ngx-emoji-mart/picker';

в вашем component.html

<form [formGroup]="emojiForm">
   <emoji-mart (emojiClick)="addEmoji($event)" emoji="point_up"></emoji-mart>
   <textarea type="text" formControlName="inputField"></textarea>
</form>

в вас component.ts

addEmoji($event){
  let data = this.emojiForm.get('inputField');
  data.patchValue(data.value + $event.emoji.native)
}

Answer 4

document.execCommand() теперь устарел.

У меня есть альтернативное решение вашей проблемы, которое учитывает текущую позицию курсора. Единственным недостатком является то, что он стирает историю отмен / повторов.

Emoji html:

      <emoji-mart *ngIf="showEmojiWindow"
            [showPreview]="false"
            (emojiClick)="addEmoji($event)"
            [isNative]="true"
            [showSingleCategory]="true"
            [emojiTooltip]="true"></emoji-mart>

Форма html:

      <form [formGroup]="sendMessageForm" (ngSubmit)="submit(sendMessageForm)">
    <input #messageInput type="text" name="message" formControlName="message" class="form-control">
</form>

Машинопись:

      @ViewChild('messageInput')
messageInput: ElementRef;
sendMessageForm: FormGroup;
private messageFormControl: FormControl;

ngOnInit(): void {
    this.buildSendMessageForm();
}

addEmoji(event: EmojiEvent): void {
    this.messageInput.nativeElement.focus();
    const selectionStart = this.messageInput.nativeElement.selectionStart;
    const currentValue = this.messageInput.nativeElement.value;
    const newValue = currentValue.substring(0, selectionStart) + event.emoji.native + currentValue.substring(selectionStart);
    this.messageFormControl.setValue(newValue);
    // the following 2 lines set the caret position behind the emoji
    this.messageInput.nativeElement.selectionStart = selectionStart + event.emoji.native.length;
    this.messageInput.nativeElement.selectionEnd = selectionStart + event.emoji.native.length;
    this.showEmojiWindow = false;
}

private buildSendMessageForm(): void {
    this.messageFormControl = new FormControl('');
    this.sendMessageForm = new FormGroup({
        message: this.messageFormControl
    });
}