Not working anymore with TinyMCE 5

[nicostem]

Did somebody know how to make it work with TinyMCE 5 ? There are lots of changes...

[lincolnlemos]

I'm still looking for it. Did you find anything else that solves the issue @nicostem ?

[nicostem]

I didn't find anything either yet :(

[nicostem]

@lincolnlemos did you find anything ?

[nicostem]

I've found a solution ! it's the answer on this link, you just have to change the "onSubmit" part with the one you need :
https://stackoverflow.com/questions/55409086/creating-a-plugin-in-tinymce-5/55410379

[papaIOprog]

Here's solution for TinyMCE 5
Thanks to @nicostem

'use strict';

tinymce.PluginManager.add('accordion', function(editor, url) {
  var openDialog = function () {
    return editor.windowManager.open({
      title: 'Example plugin',
      body: {
        type: 'panel',
        items: [
          {
            type: 'input',
            name: 'count',
            label: 'Number of accordions'
          }
        ]
      },
      buttons: [
        {
          type: 'cancel',
          text: 'Close'
        },
        {
          type: 'submit',
          text: 'Save',
          primary: true
        }
      ],
      onSubmit: function (e) {
        const data = e.getData()
        var accordionSet = [];
        var curAccordion = Date.now();
        var accordionCount = parseInt(data.count);
        for (var i = 0; i < accordionCount; i++) {
          var panel = '\n                    <div class="panel panel-default">\n                      <div class="panel-heading mceNonEditable productAccordion" role="tab" id="heading' + (curAccordion + i) + '">\n                        <h4 class="panel-title">\n                          <a role="button" data-toggle="collapse" class="mceEditable collapsed" data-parent="#accordion' + curAccordion + '" href="#collapse' + (curAccordion + i) + '" aria-expanded="true" aria-controls="collapse' + (curAccordion + i) + '">\n                            Change this header!\n                          </a>\n                        </h4>\n                      </div>\n                      <div id="collapse' + (curAccordion + i) + '" class="panel-collapse collapse mceNonEditable" role="tabpanel" aria-labelledby="heading' + (curAccordion + i) + '">\n                        <div class="panel-body mceEditable">\n                          <p>Change this content</p>\n                        </div>\n                      </div>\n                    </div>\n                ';
          accordionSet.push(panel);
        }

        var accordion = '\n                    <div class="panel-group" id="accordion' + curAccordion + '" role="tablist" aria-multiselectable="true">\n                      ' + accordionSet.join('') + '\n                  </div>';
        editor.insertContent(accordion);
      }
    });
  };

  // Add a button that opens a window
  editor.ui.registry.addButton('accordion', {
    icon: 'border-width',
    tooltip: "Accordion",
    onAction: function () {
      // Open window
      openDialog();
    }
  });

  // Adds a menu item, which can then be included in any menu via the menu/menubar configuration
  editor.ui.registry.addMenuItem('accordion', {
    text: 'Add accordion',
    onAction: function() {
      // Open window
      openDialog();
    }
  });

  return {
    getMetadata: function () {
      return  {
        name: "Accordion Plugin",
        url: "https://github.com/JacobPrice/tinymce-accordion-plugin/"
      };
    }
  };
});

Add the following CSS to your assets directory

.panel-group {
  background: black;
  padding: 4px;
  border-radius: 4px;
}

.panel-heading {
  background: white;
  padding: 4px;
  border-bottom: 2px solid black;
}

.panel-collapse {
  background: white;
  padding: 4px;
  border-top: 2px solid black;
}

Then add following lines to your script

...
      plugins: 'importcss',
      content_css: '/path/to/your/file.css',
...

[iankkhoros]

Can you set this up in a working MCE Fiddle for a working example, @papaIOprog ? Thanks!