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

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

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

你有一个 textarea 一个按钮来为你的文本添加一个表情符号。

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

Answer 2

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

\n

我已经改进了这些可用的解决方案。\nemoji 应该插入到胡萝卜位置，并且我们应该能够在消息框上撤消、重做\n这是解决方案。

\n

超文本标记语言

\n

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

\n

TS

\n

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

\n