How to dynamically add options to <select> list in CKeditor dialog

Question

I am building a CKEditor plugin for Drupal 8. Currently it adds a toolbar button which triggers a modal dialog containing a select list with a few options. I've hardcoded the options in plugin.js, and everything works as expected. But those options must actually be dynamically added with php.

This is my plugin dialog definition, as per http://docs.ckeditor.com/#!/api/CKEDITOR.dialog.definition.select with hardcoded options.

This goes in the plugin.js file loaded via CKEditorPluginInterface::getFile() in my plugin class:

CKEDITOR.dialog.add('pluginDialog', function(editor) {
  return {
    title: 'Available options',
    minWidth: 300,
    minHeight: 200,
    resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
    setup: function(e) {},
    commit: function(e) {},

    contents: [{
      id: 'tab-options',
      elements: [{
        type: 'select',
        id: 'select-options',
        label: 'Select an option:',
        items: [
          ['Option 1', '<span>Option 1</span>'],
          ['Option 2', '<span>Option 2</span>'],
          ['Option 3', '<span>Option 3</span>'],
          ['Option 4', '<span>Option 4</span>']
        ]
      }]
    }]
  };
});

CKEDITOR.dialog.definition.contents.elements.items[] have to be built from PHP. Any help is appreciated.

Answer 1

You can pass data to ckeditor via the getConfig method in your plugin, e.g.:

public function getConfig(Editor $editor) {
  return [
    'pluginName_options' => $this->buildOptions()
  ];
}

And in the JS:

items: editor.config.pluginName_options