Accueil / Blog / Métier / 2016 / How to create a custom dialog in TinyMCE 4

How to create a custom dialog in TinyMCE 4

Par Yann Fouillat — publié 30/03/2016
TinyMCE 4 allows the creation of custom plugins to extend its functionalities. These plugins will often need dialogs (or pop-ups). However, the documentation is lacking a lot of essential information on how to do such things. This article will describe how to create marvelous dialogs with ease.
How to create a custom dialog in TinyMCE 4

If you are in a hurry, you can look at the demo at the end.

The first thing you should do when looking at how to create a dialog is reading the documentation. You can read there that the dialog creation "was changed in TinyMCE 4 to make it easier". But nothing on how to actually do it...

So, the second way to learn more on dialog is to look at what already exists. And fortunately, TinyMCE comes with a lot of plugins. Let's take a look at an easy one: anchor.

We can actually create a dialog without writing a single line of HTML! But it isn't explained anywhere in the official doc. We will see what's available to us and how to customize it.

A basic dialog

We can create a dialog very simply:

editor.windowManager.open({
  title: 'Test Container',
  body: {type: 'textbox', name: 'my_textbox', label  : 'My textbox'},
  onsubmit: function(e) {alert(e.data.my_textbox)}
});

You can see it in action there.

We now have a textbox, but I saw a lot of other widgets in TinyMCE! What can I really do?

More customization

Well, a lot. First, you can set quite a few parameters. I know, let's take a look at the doc! That's not really helpful now, is it? If we look at the source for this widget, we can see what parameters it accepts. Yes, we can have a textarea.

But there's more! It inherits from Widget, which itself inherits from Control. To sum it up, we have these settings available on all widgets:

  • {String} style Style CSS properties to add.
  • {String} border Border box values example: 1 1 1 1
  • {String} padding Padding box values example: 1 1 1 1
  • {String} margin Margin box values example: 1 1 1 1
  • {Number} minWidth Minimal width for the control.
  • {Number} minHeight Minimal height for the control.
  • {String} classes Space separated list of classes to add.
  • {String} role WAI-ARIA role to use for control.
  • {Boolean} hidden Is the control hidden by default.
  • {Boolean} disabled Is the control disabled by default.
  • {String} name Name of the control instance.
  • {String} tooltip Tooltip text to display when hovering.
  • {Boolean} autofocus True if the control should be focused when rendered.
  • {String} text Text to display inside widget.

All the widgets

Looking through the plugins and the source, we can see all the possibilities:

  • button
  • buttongroup - use items parameters to set the different buttons.
  • checkbox
  • colorbox - A bit more complicated, look at the demo to see how to use it
  • colorpicker
  • combobox
  • label
  • listbox
  • panelbutton - A bit more complicated, look at the demo to see how to use it
  • radio - It is actually a checkbox
  • selectbox
  • textbox

But we can't really put them however we like. Or can we?

Containers

A container is a particular widget which consists of a list of other widgets and a layout. A simple example:

editor.windowManager.open({
  title: 'Container',
  body: [{
    type: 'container',
    label  : 'flow',
    layout: 'flow',
    items: [
      {type: 'label', text: 'A container'},
      {type: 'textbox', label: 'textbox', value: 'with a textbox'},
      {type: 'label', text: 'and two labels'}
    ]
  }]
});

See it in action there. The layouts available are:

Demo

You can see a demo of all of the widgets and containers layouts there.

ABONNEZ-VOUS À LA NEWSLETTER !