在 VueJs 应用程序中实现表情符号

Question

我希望为我的聊天应用项目设置表情符号。 我真的很喜欢 slack / tweeter 中的表情符号，我想要类似的东西。

我找到了以下库：（如果有人能推荐一个更好的库，我很想听）

emojionearea

wdt-emoji-bundle

我不确定如何加载这些库并在 VueJS 应用程序中使用它们。 任何人都可以协助如何加载和使用它们吗？

我想提一下我尝试使用emoji-mart-vue 但不确定如何在运行时将组件添加到模板中。

非常感谢

Answer 1

tldr; 在JSFiddle上查看演示和代码

---

这个答案分为两部分。第一部分处理如何将import 的所有东西放到环境中，而第二部分处理如何使用 Vue。

此解决方案使用EmojiOne 作为表情符号提供程序，并使用EmojioneArea 提供表情符号自动完成行为。

---

第 1 部分：添加库

您可以通过三种方式做到这一点。

• 使用全局<script> 标签（不推荐用于任何严重的事情）：您可以按顺序为所有依赖项添加<script> 标签，然后简单地开始使用全局对象。
  按顺序添加这些<script>：

  1. https://code.jquery.com/jquery-3.3.1.min.js
  2. https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js
  3. https://cdn.jsdelivr.net/npm/emojione@3.1.6/lib/js/emojione.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/jquery.textcomplete/1.8.4/jquery.textcomplete.min.js
  5. https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.min.js

• 使用 AMD 模块（使用require.js）：您可以使用以下配置通过require.js 异步加载这些模块

  require.config({
    paths: {
      'jquery': 'https://code.jquery.com/jquery-3.3.1',
      'Vue': 'https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue',
      'emojione': 'https://cdn.jsdelivr.net/npm/emojione@3.1.6/lib/js/emojione',
      'jquery.textcomplete': 'https://cdnjs.cloudflare.com/ajax/libs/jquery.textcomplete/1.8.4/jquery.textcomplete',
      'emojionearea': 'https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea'
    },
    shim: {
      'emojione': {
        'exports': 'emojione'
      }
    }
  })
  

  然后您可以在入口点中将这些模块要求为

  require(['jquery', 'Vue', 'emojione'], function($, Vue, emojione){ /* ... */ })
  

• 使用webpack：以上所有库都可以通过npm 获得，您可以像使用任何其他库一样安装和使用它们。无需特殊配置。

奖励：将webpack 与require.js 一起使用，并将网络和缓存负载卸载到CDN！
我经常在我的项目中使用此设置，这可以提高您网站的可靠性和性能。您可以使用webpack.externals 指示webpack 不捆绑任何供应商依赖项，而是通过手动添加<script> 标签或使用require.js 自己提供它们。

首先将其添加到您的webpack.<whatever>.js

//...
output: {
  libraryTarget: 'umd'   // export app as a library
},
//...
externals: {
  'jquery': 'jquery',
  'vue': 'Vue',
  'emojione': 'emojione'
},
//...

然后，在您的 require.js 条目中，添加此

//...
map: {
  // any module requesting jquery should get shield
  "*": {
    "jquery": "jquery-shield"
  },
  // shield should get original jquery
  "jquery-shield": {
    "jquery": "jquery"
  },
  // patch plugins
  "jquery.textcomplete": {
    "jquery": "jquery"
  },
  "emojionearea": {
    "jquery": "jquery"
  }
}
//...
// define shield, require all the plugins here
define('jquery-shield', ['jquery', 'jquery-textcomplete', 'emojionearea'], function($){ return $ })

然后添加 require(...) 你的 webpack 包

---

第 2 部分：在 Vue 中使用 EmojiOne

由于 OP 提到他/她的案例是在聊天应用程序中使用表情符号，我也会解释该案例的解决方案，尽管这也可以（并且应该）针对其他用例进行修改！

解决方案侧重于两个方面。首先是简单在message组件中显示表情符号，即不需要显示表情符号选择器对话框，其次是在用户显示表情符号选择器对话框正在输入（比如说）一个文本区域。

要实现第一个目标，您可以使用消息组件，例如，

Vue.component('message', {
  props: ['content'],
  render: function(h){
    return h('div', {
      class: { 'message': true }
    }, [
      h('div', {
        class: { 'bubble': true },
        domProps: {
          innerHTML: emojione.toImage(this.content)
        }
      })
    ])
  }
})

这将创建一个 <message /> 组件，您可以将其用作

<message content="Hey :hugging:!!" />

将渲染

<div class="message">
  <div class="bubble">
    Hey <img class="emojione" alt="?" title=":hugging:" src="...">!!
  </div>
</div>

现在，要创建一个<message-box /> 组件，该组件将显示一个表情符号选择器以协助autocomplete，请执行以下操作

Vue.component('message-box', {
  template: `<div class="message-box"><textarea></textarea></div>`,
  mounted(){
    // find the input
    $(this.$el).find('textarea').emojioneArea()
  }
})

就是这样！虽然看起来很多，但解决方案的关键很简单！只需使用 emojione.toImage(str) 获取 DOM string 并将其应用于 Vue 组件（您也可以使用 v-html 来执行此操作，但 IMO render() 更时尚一点！）。对于显示选择器，您只需在安装组件后在<textarea /> 上调用$(...).emojioneArea()。

请务必在https://jsfiddle.net/riyaz_ali/5Lhex13n查看完整的代码示例