Can't get Emoijone ckeditor plugin to appear on WSYISYG editor

Question

I am trying to add the Emojione CKEditor plugin on a Drupal 8.3.7 site. I've created a module using the CKEditor API. I modeled it after both the youtube and smiley CKEditor plugin modules.

In my custom module, I've added the file src/Plugin/CKEditorPlugin/EmojioneCKEditorPlugin.php:

<?php

namespace Drupal\emojione\Plugin\CKEditorPlugin;

use Drupal\ckeditor\CKEditorPluginBase;
use Drupal\editor\Entity\Editor;

/**
 * Defines the "emojione" plugin.
 *
 */
class EmojionePlugin extends CKEditorPluginBase {

  /**
   * {@inheritdoc}
   */
  public function getButtons() {
    return array(
      'Emojione' => array(
        'label' => t('emojione'),
        'image' => 'libraries/emojione/icons/emojione.png',
      ),
    );
  }

  /**
   * {@inheritdoc}
   */
  public function getFile() {
    return 'libraries/emojione/plugin.js';
  }

  /**
   * {@inheritdoc}
   */
  public function isInternal() {
    return FALSE;
  }

  /**
   * {@inheritdoc}
   */
  public function getDependencies(Editor $editor) {
    return array();
  }

  /**
   * {@inheritdoc}
   */
  public function getLibraries(Editor $editor) {
    return array();
  }

  /**
   * {@inheritdoc}
   */
  public function getConfig(Editor $editor) {
    return array();
  }

}

The above is basically what both the ckeditor_youtube and ckeditor_smiley have. The relevant methods seem to be getFile() and getButtons().

I have the relevant ckeditor plugin sources under libraries/.

When I enable my module and clear the cache and go to configure text formats and editors at /admin/config/content/formats, I don't see the emojione button, but I do have buttons for smiley and youtube.

I've found this question and this answer, but in the answer, it isn't clear in what file the Template class goes. Also, the answerer mentions some custom js, but doesn't indicate where that goes either.

What am I missing?

Answer 1

You need to add annotation for ckeditor plugin (more info about annotations based plugins here).

Youtube plugin is using this:

/**
 * Defines the "Youtube Button" plugin.
 *
 * @CKEditorPlugin(
 *   id = "youtube",
 *   label = @Translation("Youtube Plugin")
 * )
 */
class YoutubePlugin extends CKEditorPluginBase {

So you will need to add an annotation like this:

 /**
  * Defines the "Emojione" plugin.
  *
  * @CKEditorPlugin(
  *   id = "emojione",
  *   label = @Translation("Emojione")
  * )
  */
 class EmojionePlugin extends CKEditorPluginBase {

EDIT (thanks @kevin): clear caches after changes.