CKEditor oEmbed Plugin Shows up in config but not in actual Editor instance

Question

The issue I'm having is very similar to this question, but the solutions here did not work for me.

The steps I took:

1. Downloaded the latest version of the oEmbed plugin from https://ckeditor.com/cke4/addon/oembed.
2. I extracted the oembed directory from the archive and placed that in a custom Drupal module that I already had. This module was used to create simple CKEditor button plugins and worked fine with them.
3. I went to the configuration page for basic_html and full_html editors and saw that the oEmbed button was one of the new options (/admin/config/content/formats/manage/basic_html).
4. I moved the oEmbed button to the "Active Toolbar" as well as some other custom plugins.
5. I went to edit some content where the WYSIWYG would show up
6. The other custom buttons showed up, but the oEmbed one did not, despite the fact that I could see it on the config page.

I've tried an older version of the oEmbed plugin from the download page, as well as clearing my cache many times with drush cr, but still no luck getting it to show up.

What's weird is that when I load the node edit page with the Chrome console open, I can see that the Javascript/CSS for the oEmbed plugin is loading and executing. The button icon though is never requested.

The Drupal Plugin looks like this

namespace Drupal\custom_ckeditor\Plugin\CKEditorPlugin;

/**
 * Defines the OEmbed plugin, with CKEditor.
 *
 * @CKEditorPlugin(
 *     id = "oembed",
 *     label = @Translation("OEmbed Plugin")
 * )
 */
class OEmbed extends extends PluginBase implements CKEditorPluginInterface, CKEditorPluginButtonsInterface
{
    protected $pluginName = 'oembed';

    public function getButtons()
    {
        $iconImage = $this->getIconPath();
        return [
            'OEmbed' => [
                'label' => t('Insert OEmbed'),
                'image' => $iconImage,
            ]
        ];
    }

    // Other required functions such as getLibraries() and getDependencies() all return an empty array or false and are omitted from this example.

}

I'm using Drupal 8, with CKEditor v4.7.2.

Answer 1

I figured it out. On the Drupal side, everything was configured correctly. The error was in the Javascript. The original plugin.js file has the following:

editor.ui.addButton('oembed', {
                    label: editor.lang.oembed.button,
                    command: 'oembed',
                    toolbar: 'insert,10'
                });

I modified this to

editor.ui.addButton('OEmbed', {
                    label: editor.lang.oembed.button,
                    command: 'oembed',
                    toolbar: 'insert,10'
                });

Note the name passed to addButton() from oembed to OEmbed. I think there was some conflict in naming it oembed, possibly from some existing functionality. Not sure, but that was the fix for me.

In addition, I should note that for the Basic Editor, I had to modify the HTML filter to allow tags that the oEmbed plugin added to the source view. Hope this helps someone.