CKEditor widgets that do not implement the editor.ui.addButton() method in the plugin.js file do not show the icon on the WYSIWYG editor

Did you read the documentation?

Thanks for your thoughtful reply!

My strongest suspicion then is ACF.

1. What tags does the widget generate?
2. Are those tags allowed by CKEditor's ACF?
3. Does your plugin specify the necessary ACF metadata?
4. To rule out that ACF is causing this, please add the Mathjax button to the Full HTML format/editor. ACF is disabled in that format/editor, precisely because anything is allowed. So, if the button does show up in that format/editor, then the root cause is definitely ACF, otherwise it's probably not.

3. You need to specify requiredContent too. allowedContent indicates HTML that this plugin/widget might generate. requiredContent indicates which HTML is the absolute minimum HTML that this plugin/widget needs to function at all. I've pinged the CKEditor guys that this needs to be documented better.
4. Hm :( https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/mathjax/plu... indeed does not call editor.ui.addButton(), but does specify a button. This is something the CKEditor team needs to answer then for sure!

Assigning to my co-maintainer, @mlewand, who works for CKSource.

Jumping into the discussion to say that I had the same experience as the op, a couple of weeks ago, with an other addon (http://ckeditor.com/addon/chart) which I added via the D8 CKEditor api. It would be great if this could get addressed by CKEditor.

Ad 3.

Actually MathJax does mark required content but witha shortcut approach, it specifies: allowedContent: 'span(!' + cls + ')', wchich becomes allowedContent: 'span(!my-math)', - in this notation exclamation mark means that given class is required for the feature to work.

An exclamation mark (!) used before an item name (e.g.: [!href]) in the property list means: "This property is required. If an element does not have it, this rule should not be applied to the element (so the element will not be validated by it)".

Ad 4.

As for adding the button in widgets, there's no need to call editor.ui.addButton() as long as you specified correctly plugin icons property, and button for widget definiton. It will happen automatically, just like mentioned in docs:

Please note the special naming convention for widget toolbar buttons. The Widget API will only be able to automatically add the button to the toolbar if the name of the icon is the same as the widget.

Could you summarize what is your suggestion for this?

Now blocked on dinarcon's feedback :)

I am facing the same issue with mathjax. Any help would be appreciated

Any news on how to fix this? Comparing this module to codesnippet which works fine, this module is missing a libraries file and doesn't have a preprocess html or .module file, just wondered if this might be a factor, gunna have a play, but would like to get this working. Any advice would be great!

I have managed to get this fully working in Drupal 8, possibly not best method but at least it works.
- added this code snippet to force the ckeditor plugin to work nice with drupal
line 19 just after the init function

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

- added a library.yml
- added a module and pre process html for cdn script insertion (frontend doesnt work as cdn isnt added to page)

Happy to provide patch.

I debugged this issue to resolve #2893184: Toolbar button missing and posted a comment on the other issue to.

I think this bug is related to the capitalize of the icon name in https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/widget/plug...

\Drupal\ckeditor\CKEditorPluginButtonsInterface::getButtons should return the capitalized names.

I'm experiencing the same behavior as OP here as well on a simple custom plugin and widget that I created.

I've developed a few custom CKEditor widgets and I've found the need to manually declare editor.addButton to make it appear on the editor, even if it shouldb't be necessary as per the official CKeditor documentation.

I encountered this problem and started debugging with the non-minified CKEditor library (checked out from latest git). I believe the problem comes from

  function addWidgetButtons( editor ) {
		var widgets = editor.widgets.registered,
			widget,
			widgetName,
			widgetButton;

		for ( widgetName in widgets ) {
			widget = widgets[ widgetName ];

			// Create button if defined.
			widgetButton = widget.button;
			if ( widgetButton && editor.ui.addButton ) {
				editor.ui.addButton( CKEDITOR.tools.capitalize( widget.name, true ), { // <- This line, 57873
					label: widgetButton,
					command: widget.name,
					toolbar: 'insert,10'
				} );
			}
		}
	}

I'm not sure why this capitalization is here, but the problems happens at line 18281:

	create: function( name ) {

		var item = this.items[ name ], // This line!
			handler = item && this._.handlers[ item.type ],
			command = item && item.command && this.editor.getCommand( item.command );

		var result = handler && handler.create.apply( this, item.args );

		this.instances[ name ] = result;

		// Add reference inside command object.
		if ( command )
			command.uiItems.push( result );

		if ( result && !result.type )
			result.type = item.type;

		return result;
	}

In the create function the lowercase name is used, and that does not match the capitalized version. So the button is removed.

CKEditor has been removed from core, CKEditor 4 is removed from Drupal Core in 10.0.0

I think this issue should be closed with Closed (works as designed)... after this behavior is documented properly. Using a capitalized string for my button fixed the issue, but contradicts CKEditor's documentation:

https://ckeditor.com/docs/ckeditor4/latest/guide/widget_sdk_tutorial_1.html