Jodit Editor

Dialog system

The Jodit dialog system enables the creation of modals with a title, footer, and content.
Each dialog is created as a distinct component that inherits from View.

Several basic wrappers are readily available to swiftly create fundamental windows: Alert/Confirm/Prompt

Jodit.Alert('Hello world!', () => {
  // After OK
});
Jodit.Confirm('Are you sure?', 'Confirm Dialog', yes => {
  if (yes) {
    // do something
  }
});
Jodit.Prompt('Enter your name', 'Prompt Dialog', name => {
  if (name.length < 3) {
    Jodit.Alert('The name must be at least 3 letters');
    return false;
  }
  // do something
});

Each of these wrappers returns an IDialog object, and you can expand the open window.

const dialog = Jodit.Alert('Hello world!', () => {
  // After OK
});
dialog.setContent('Buy buy world! =)');

Note that you do not need to call the Dialog.open method.

For a simpler setup, you can immediately create an instance Dialog and already fully manage its contents:

const dialog = new Jodit.modules.Dialog();
dialog.setHeader('The header!');
dialog.setContent('Content');
dialog.setFooter([
  new Jodit.modules.UIButton(dialog).onAction(() => {
    dialog.close();
  })
]);
dialog.open();

In all these examples, the dialog opens irrespective of Jodit's configurations, including the selected language and theme.
To ensure the dialog opens in the same theme as the editor, you can specify the theme in its settings, or utilize the IDlgs trait.

const dialog = new Jodit.modules.Dialog({
  theme: 'dark'
});

// or

const editor = new Jodit('#editor', {
  theme: 'dark'
});
const dialog = editor.dlg();
editor.alert('Hello world!');
editor.confirm('Hello world?', yes => {
  console.log('Ok?', yes);
});

Thanks to the trait mechanism, there's no need to create utility dialogs like Alert/Confirm/Prompt as previously described.
Simply calling the appropriate methods on the Jodit instance is sufficient. The dialog will automatically adopt the editor's theme and language settings.

const editor = new Jodit('#editor', {
  theme: 'dark'
});
editor.alert('Hello world!');
editor.confirm('Hello world?', yes => {
  console.log('Ok?', yes);
});

Classes

Alert

Alert(this, msg, title?, callback?, className?): IDialog

Show alert dialog. Work without Jodit object

Parameters

Name Type Default value
this unknown undefined
msg string | HTMLElement undefined
title? string | () => false | void undefined
callback? string | (dialog: IDialog) => false | void undefined
className string 'jodit-dialog_alert'

Returns

IDialog

Example

Jodit.Alert("File was uploaded");
Jodit.Alert("File was uploaded", "Message");
Jodit.Alert("File was uploaded", function() {
   $('form').hide();
});
Jodit.Alert("File wasn't uploaded", "Error", function() {
   $('form').hide();
});
Defined in

src/modules/dialog/alert.ts#33

Confirm

Confirm(this, msg, title, callback?): IDialog

Show confirm dialog. Work without Jodit object

Parameters

Name Type Description
this unknown -
msg string -
title undefined | string | (yes: boolean) => void Title or callback
callback? (yes: boolean) => false | void callback. The first argument is the value entered

Returns

IDialog

Example

Jodit.Confirm("Are you sure?", "Confirm Dialog", function (yes) {
    if (yes) {
        // do something
    }
});
Defined in

src/modules/dialog/confirm.ts#30

Prompt

Prompt(this, msg, title, callback, placeholder?, defaultValue?): IDialog

Show Prompt dialog. Work without Jodit object

Parameters

Name Type Description
this unknown -
msg string Dialog content
title undefined | string | () => false | void Title or callback
callback (value: string) => false | void callback. The first argument is the value entered
placeholder? string Placeholder for input
defaultValue? string -

Returns

IDialog

Example

Jodit.Prompt("Enter your name", "Prompt Dialog", function (name) {
    if (name.length < 3) {
        Jodit.Alert("The name must be at least 3 letters");
        return false;
    }
    // do something
});

Defined in

jodit/src/modules/dialog/prompt.ts:36

In this article: