button doesn't show on the toolbar

[LiamDawe]

What are some steps I can go through to find out why the button for it just refuses to appear on the toolbar?

No errors in the console, just nothing seems to happen.

The only dependency it requires "Widget" is also installed.

[aldatsa]

Are you using a custom toolbar? In that case you should add 'Html5audio' to the toolbar (note that the first letter is uppercase).

For example:

CKEDITOR.editorConfig = function( config ) {
    config.toolbar = [
        ...
        { name: 'insert', items: [ 'Html5audio', 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] }
        ...
    ];
};

Best regards

[LiamDawe]

I don't think it's custom, I'm using an adjusted config file, but it's mostly from what we downloaded when adjusting the default plugins and so on:

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];

    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Subscript,Superscript';

    config.contentsCss = [ '/templates/default/css/content.css', '/templates/default/css/reset.css' ];

    config.height = 500;

    config.bodyClass = 'article';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // we don't want an empty <p></p> as content
    config.ignoreEmptyParagraph = false;

    // allow these tags to accept classes
    config.extraAllowedContent = 'hr(*)';
    config.extraAllowedContent = 'audio(*)';
    config.extraAllowedContent = 'source(*)';
    config.extraAllowedContent = 'code';
    config.extraAllowedContent = 'a(*)';

    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';

    config.extraPlugins = 'widget';
    config.extraPlugins = 'widgetselection';
    config.extraPlugins = 'lineutils';
    config.extraPlugins = 'html5audio';
    config.extraPlugins = 'html5video';
    config.extraPlugins = 'youtube';
    config.removePlugins = 'about';

    config.youtube_responsive = true;
    config.youtube_related = false;
    config.youtube_privacy = true;
    config.youtube_disabled_fields = ['chkAutoplay','chkResponsive','txtWidth','txtHeight','chkRelated','chkPrivacy'];

    config.linkShowTargetTab = false
};

[LiamDawe]

From what I understand, I don't think yours works with groups? As you either set groups or set it directly with items, I'm using groups.

[aldatsa]

It's strange. I've just downloaded CKEditor and HTML5audio plugin with its dependencies. After adding these lines to the config.js file the icon showed in the 'insert' group without problems:

config.extraPlugins = 'widget';
config.extraPlugins = 'lineutils';
config.extraPlugins = 'html5audio';

Can you check the permissions of the plugin's folder (plugins/html5audio)?

[LiamDawe]

As it turns out the issue was two fold:

At some point we upgraded ckeditor and the config we made didn't include widget in the package, but the old one included it originally so the widget plugin folder was actually empty (woops).

Also, certain plugins override each other, we had it like this:

config.extraPlugins = 'widget';
config.extraPlugins = 'widgetselection';
config.extraPlugins = 'lineutils';
config.extraPlugins = 'html5audio';
config.extraPlugins = 'html5video';
config.extraPlugins = 'youtube';

Youtube would show, but the html5 audio/video plugins would not.

You need to bundle them together: config.extraPlugins = 'widget,widgetselection,lineutils,html5audio,youtube,html5video';

If you don't do it like that, whatever is last ends up overwriting previous plugins in ckeditor.

[aldatsa]

I'm glad that you found a fix for the issue. If it's not indiscreet, are you going to use our plugin in GamingOnLinux.com? It would be an honour :)

[LiamDawe]

Yup, we are indeed using it there. We used to have a podcast done by the community and this was to help us insert it.

Now I'm updating our custom media uploader to support audio files, naturally I need this plugin to show them in our ckeditor when uploaded and we hit the insert button.

Nothing major this time, just a quick sound comparison between two keyboards and noticed it wasn't working today (probably hasn't for a while due to the issues I mentioned above).

Thanks for the plugin, makes life easier :+1:

[aldatsa]

For future reference, using config.extraPlugins more than once overwrites the declaration. The extraPlugins option expects a list of comma separated plugins.

CKEditor's documentation: https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-extraPlugins

[LiamDawe]

Yup, totally my bad on that bit, live and learn eh :+1: