如何在AngularJS的ng-quill中使用quill emoji实现文本自动转表情

嗨，我之前在项目里刚好做过类似的需求，给你整理了一套可行的步骤，一步步来就能搞定：

1. 安装依赖包 #

首先得安装quill-emoji插件，它是Quill生态里专门处理文本转表情的扩展工具。你可以根据项目的包管理工具选择安装方式：

# npm方式
npm install quill-emoji --save

# bower方式
bower install quill-emoji --save

2. 引入必要的资源文件 #

在你的index.html里，按顺序引入这些资源（注意要放在ng-quill和Quill的资源之后）：

<!-- quill-emoji的样式文件 -->
<link href="node_modules/quill-emoji/dist/quill-emoji.css" rel="stylesheet">
<!-- quill-emoji的核心脚本 -->
<script src="node_modules/quill-emoji/dist/quill-emoji.js"></script>

如果用bower管理依赖，把路径改成bower_components/quill-emoji/...即可。

3. 在AngularJS中配置Quill插件 #

在你的AngularJS应用模块里，需要先注册quill-emoji插件，同时配置自动转换的规则：

angular.module('yourApp', ['ngQuill'])
  .run(['Quill', function(Quill) {
    // 注册emoji模块，让Quill能识别它
    Quill.register('modules/emoji', QuillEmoji);
  }])
  .config(['ngQuillConfigProvider', function(ngQuillConfigProvider) {
    // 配置ng-quill的默认参数，启用emoji自动转换
    ngQuillConfigProvider.set({
      modules: {
        // 如果你需要工具栏里的emoji按钮，可以保留这段
        toolbar: [
          ['emoji']
        ],
        emoji: {
          // 开启文本短代码自动转表情的功能
          shortname: true,
          // 自定义你需要的文本-表情映射，完全匹配你提到的需求
          customEmojis: [
            { shortname: ':)', url: 'https://cdn.jsdelivr.net/npm/quill-emoji@0.1.7/dist/img/smile.svg', alt: '微笑' },
            { shortname: ':(', url: 'https://cdn.jsdelivr.net/npm/quill-emoji@0.1.7/dist/img/sad.svg', alt: '难过' },
            { shortname: ':\'(', url: 'https://cdn.jsdelivr.net/npm/quill-emoji@0.1.7/dist/img/cry.svg', alt: '哭泣' },
            { shortname: '<3', url: 'https://cdn.jsdelivr.net/npm/quill-emoji@0.1.7/dist/img/heart.svg', alt: '爱心' }
          ]
        }
      }
    });
  }]);

这里的customEmojis可以自由扩展，用官方提供的SVG或者你自己的表情图片都可以。

4. 在页面中使用ng-quill编辑器 #

最后在模板里使用ng-quill指令，就能自动触发文本转emoji的效果了：

<ng-quill-editor ng-model="editorContent" class="custom-editor"></ng-quill-editor>

现在你输入:)、:(、:('、<3这些文本时，编辑器会自动把它们转换成对应的表情符号，和Facebook、Asana的效果一致。

小提醒 #

• 要确保quill-emoji的版本和你项目里的Quill版本兼容：如果用的是Quill 1.x，对应quill-emoji的0.x版本就可以；如果是Quill 2.x，需要找适配的高版本插件（不过AngularJS的ng-quill目前大多还是基于Quill 1.x）。
• 如果不需要工具栏里的emoji按钮，直接把toolbar配置里的['emoji']删掉，只保留shortname: true就能实现纯自动转换。

内容的提问来源于stack exchange，提问作者kevin richard