如何使用带有角度的表情符号选择器制作输入字段或文本区域？

Question

新状态.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 ），现在我想将表情符号选择器放在输入字段或文本区域中。

原文由 Dharmesh 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 的 imports 数组中添加模块：

 @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

您有一个文本区域按钮，用于向您的文本添加表情符号。

让我知道这是否是您开始的好方法:-)

原文由 Arigui Ahmed 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我知道它晚了，但也许其他人可以使用它。

我改进了那些可用的解决方案。 emoji 应该插在胡萝卜位置，我们应该可以在消息框上撤消，重做这里是解决方案。

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

原文由 hanan 发布，翻译遵循 CC BY-SA 4.0 许可协议