此插件会向编辑器添加一个对话框，让用户可以在 TinyMCE 的可编辑区域中插入 emoji。可以通过工具栏按钮 emoticons 或添加为 Insert > Emojis... 的专用菜单项调用该对话框。

emoticons 插件提供了一个自动补全器，用于在不使用工具栏按钮或菜单项的情况下添加 emoji。输入冒号 :，接着输入至少两个字符，将打开一个弹出式集合，显示匹配的 emoji。

emoticons 插件不会自动将文本表情转换为图形 emoji。

基本设置

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'emoticons',
  toolbar: 'emoticons'
});

有关如何使用 module bundlers 捆绑此插件的信息，请参阅 Bundling TinyMCE - Overview。

浏览器对 emoji 的支持

默认情况下，emoticon 插件会插入 Unicode 字符代码，例如 smiley emoji 的 \ud83d\ude03。emoji 的呈现方式取决于用户的 Web 浏览器和操作系统。因此，某些 emoji 可能以黑白方式呈现，或者可能不呈现。为确保 emoji 在各种浏览器和操作系统中都能一致地呈现，Tiny 建议通过 content_css 将与 emoji 兼容的 Web 字体添加到默认 font-family 中。

HTML

<textarea id="emoticons">
  <p>To insert the 🙂 emoji, either:</p>
  <ul>
    <li>Start typing <code>:slightly_smiling_face</code>, and press <em>Enter</em> or&nbsp;<em>Return</em> to add the highlighted emoji, or click the desired emoji,</li>
    <li>Select the emoticons toolbar button and click the emoji in the emoticons dialog, or</li>
    <li>Open the <strong>Insert</strong> menu, select the <strong>Emoticons...</strong> option, and click the emoji in the emoticons dialog.</li>
  </ul>
</textarea>

JS

tinymce.init({
  selector: 'textarea#emoticons',
  height: 300,
  plugins: 'lists code emoticons',
  toolbar: 'undo redo | styles | bold italic | ' +
    'alignleft aligncenter alignright alignjustify | ' +
    'outdent indent | numlist bullist | emoticons',
  emoticons_append: {
    custom_mind_explode: {
      keywords: ['brain', 'mind', 'explode', 'blown'],
      char: '🤯'
    }
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

选项

可以通过以下选项覆盖或扩展默认的 emoji 数据库。

在内部，emoji 由一个将 emoji 名称映射到更多详细信息的对象定义，其中每个条目代表一个 emoji。这些详细信息应包含一个表示 emoji 的 Unicode 字符、可用于搜索 emoji 的关键字以及用于放置 emoji 的类别。期望以相同格式提供选项。

{
  robot: {
    keywords: [ 'computer', 'machine', 'bot' ],
    char: '🤖',
    category: 'people'
  },
  dog: {
    keywords: [ 'animal', 'friend', 'nature', 'woof', 'puppy', 'pet', 'faithful' ],
    char: '🐶',
    category: 'animals_and_nature'
  }
}

emoticons_append

此选项提供了一种将一些额外 emoji 附加到默认 emoji 数据库的方法。这应该是上面提到的格式的对象。

类型：Object

示例：使用 emoticons_append

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'emoticons',
  toolbar: 'emoticons',
  emoticons_append: {
    custom_mind_explode: {
      keywords: [ 'brain', 'mind', 'explode', 'blown' ],
      char: '🤯'
    }
  }
});

emoticons_database

此选项提供了指定在编辑器中呈现 emoji 时使用哪个内置 emoji 数据库的功能。以下是可用的内置 emoji 数据库：

  • emojis - 此数据库使用 Unicode 字符在编辑器内容中表示 emoji。

  • emojiimages - 此数据库使用 Twitter Emoji (twemoji) 项目提供的图片在编辑器内容中表示 emoji。

类型：String

默认值：'emojis'

示例：使用 emoticons_database

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'emoticons',
  toolbar: 'emoticons',
  emoticons_database: 'emojiimages'
});

emoticons_database_url

此选项提供了加载 emoji 数据库的默认位置。该数据库应该是一个外部 JavaScript 文件，该文件注册一个 tinymce.plugins.emoticons 资源。

类型：String

默认值：'${pluginUrl}/js/emojis.js'

tinymce.Resource.add('tinymce.plugins.emoticons', {
  robot: {
    keywords: [ 'computer', 'machine', 'bot' ],
    char: '🤖',
    category: 'people'
  }
});

示例：使用 emoticons_database_url

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'emoticons',
  toolbar: 'emoticons',
  emoticons_database_url: '/emojis.js'
});

emoticons_images_url

此选项设置使用 emojiimages 数据库时，用于表示 emojis 的图片的 base URL。

默认情况下，此选项从 Twemoji CDN 加载所需的图片资源。若要使用自托管的 emoji 图片，请从Twitter Emoji (Twemoji) GitHub 仓库下载图片资源。

类型： String

默认值： 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/15.1.0/72x72/'

示例：使用 emoticons_images_url

tinymce.init({
  selector: 'textarea',  // 根据需要更改此值以适配您的 HTML
  plugins: 'emoticons',
  toolbar: 'emoticons',
  emoticons_database: 'emojiimages',
  emoticons_images_url: 'http://my.server/images/emoticons/'
});

工具栏按钮

Emoticons 插件提供以下工具栏按钮：

工具栏按钮标识符描述

emoticons

打开“Emojis”对话框。

这些工具栏按钮可通过以下方式添加到编辑器中：

菜单项

Emoticons 插件提供以下菜单项：

菜单项标识符默认菜单位置描述

emoticons

插入

打开“Emojis”对话框。

这些菜单项可通过以下方式添加到编辑器中：

命令

Emoticons 插件提供以下 TinyMCE 命令。

命令描述

mceEmoticons

打开“Emojis”对话框。

示例
tinymce.activeEditor.execCommand('mceEmoticons');