dialogs

Release 2.9.0+

Plugin can register custom dialogs by creating them with the editor and assigning them to the plugin object's dialogs property.

Register a Plugin Dialog

SynapEditor.addPlugin('customDialogPlugin', function (editor) {
  var dialogName = 'myCustomDialog';
  var customDialog = editor.createCustomDialog(dialogName);  // create dialog
  customDialog.attachEvent();                                  // attach default events
  return {
    dialogs: [customDialog],
    buttonDef: {
      label: 'Open custom dialog',
      iconSVG: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><text x="2" y="13">D</text></svg>',
      onClickFunc: function () {
        editor.execCommand('showDialog', dialogName);
      }
    }
  };
});

Result:

editor.createCustomDialog(name, options)

Returns a custom dialog.

options

title:

editor.createCustomDialog('myCustomDialog', { title: 'Dialog title' });

bodyHTML:

editor.createCustomDialog('myCustomDialog', {
  bodyHTML: '<p>Favorite fruit: <input id="favorite-fruits" style="border: 1px solid black; width: 100px;" /></p>'
          + '<p>Favorite color: <input id="favorite-colors" style="border: 1px solid black; width: 100px;" /></p>'
});

bodyClassNames:

editor.createCustomDialog('myCustomDialog', {
  bodyClassNames: ['custom-class-1', 'custom-class-2', 'custom-class-3']
});

Footer buttons

Each button supports:

• type — button type. Becomes part of the class name. e.g. confirm → se-confirm, cancel → se-cancel.
• point — true = primary (dark), false = secondary (light).
• label — button text.

editor.createCustomDialog('myCustomDialog', {
  footerButtons: [
    { type: 'confirm', point: true,  label: 'Confirm' },
    { type: 'cancel',  point: false, label: 'Cancel' }
  ]
});

customDialog.attachEvent()

Attaches default behavior:

• Close on title-bar X click
• Close on ESC
• Close on cancel-button click (footer button with type: 'cancel')

var customDialog = editor.createCustomDialog('myCustomDialog');
customDialog.attachEvent();

Example

// ./plugins/favoriteThingsPlugin.js
var pluginName = 'favoriteThingsPlugin';
var pluginGenerator = function (editor) {
  var dialogName = 'favoriteThings';
  var customDialog = editor.createCustomDialog(dialogName, {
    title: 'Favorite Things',
    bodyHTML:
      '<p>Favorite fruit: <input id="favorite-fruits" style="border: 1px solid black; width: 100px;" /></p>' +
      '<p>Favorite color: <input id="favorite-colors" style="border: 1px solid black; width: 100px;" /></p>',
    footerButtons: [
      { type: 'confirm', point: true,  label: 'Confirm' },
      { type: 'cancel',  point: false, label: 'Cancel' }
    ]
  });
  customDialog.attachEvent();

  // Reset inputs when the dialog opens
  customDialog.setShowAction(function () {
    document.getElementById('favorite-fruits').value = '';
    document.getElementById('favorite-colors').value = '';
  });

  // Insert HTML when confirmed
  customDialog.setConfirmAction(function () {
    var fruits = document.getElementById('favorite-fruits').value;
    var colors = document.getElementById('favorite-colors').value;
    editor.insertHTML('<p>Fruit: ' + fruits + '</p><p>Color: ' + colors + '</p>');
  });

  // Click confirm button → fire confirm action
  customDialog.getElement().on('click', '.se-confirm', function () {
    customDialog.confirm();
  });

  return {
    dialogs: [customDialog],
    buttonDef: {
      label: 'Enter favorite things',
      iconSVG: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><text x="2" y="13">F</text></svg>',
      onClickFunc: function () {
        editor.execCommand('showDialog', dialogName);
      }
    }
  };
};

SynapEditor.addPlugin(pluginName, pluginGenerator);

Load and register:

<script type="text/javascript" src="./plugins/favoriteThingsPlugin.js"></script>

'editor.toolbar': [ 'favoriteThingsPlugin' ]

Result: