Jodit Editor

Dialog

modules/dialog.Dialog

Module to generate dialog windows

Hierarchy

Implements

constructor

new Dialog(options?): Dialog

Parameters

Name Type
options Partial<IDialogOptions>

Returns

Dialog

Overrides

ViewWithToolbar.constructor

Defined in

src/modules/dialog/dialog.ts#695

STATUSES

Static STATUSES: Object = STATUSES

Type declaration

Name Type
beforeInit "beforeInit"
ready "ready"
beforeDestruct "beforeDestruct"
destructed "destructed"

Inherited from

ViewWithToolbar.STATUSES

Defined in

src/core/component/component.ts#40

async

async: IAsync

Implementation of

IDialog.async

Inherited from

ViewWithToolbar.async

Defined in

src/core/component/component.ts#44

uid

Readonly uid: string

Implementation of

IDialog.uid

Inherited from

ViewWithToolbar.uid

Defined in

src/core/component/component.ts#59

ownerWindow

ownerWindow: Window = window

The window in which jodit was created

Implementation of

IDialog.ownerWindow

Inherited from

ViewWithToolbar.ownerWindow

Defined in

src/core/component/component.ts#109

TOOLBAR

TOOLBAR: IToolbarCollection

Inherited from

ViewWithToolbar.TOOLBAR

Defined in

src/core/view/view-with-toolbar.ts#34

registeredButtons

registeredButtons: Set<IPluginButton>

Inherited from

ViewWithToolbar.registeredButtons

Defined in

src/core/view/view-with-toolbar.ts#87

isJodit

Readonly isJodit: boolean = false

Inherited from

ViewWithToolbar.isJodit

Defined in

src/core/view/view-with-toolbar.ts#164

isView

Readonly isView: true

Implementation of

IDialog.isView

Inherited from

ViewWithToolbar.isView

Defined in

src/core/view/view.ts#61

parent

parent: Nullable<IViewBased<IViewOptions>> = null

Implementation of

IDialog.parent

Inherited from

ViewWithToolbar.parent

Defined in

src/core/view/view.ts#62

mods

Readonly mods: IDictionary<null | string | boolean> = {}

Implementation of

IDialog.mods

Inherited from

ViewWithToolbar.mods

Defined in

src/core/view/view.ts#64

id

id: string

ID attribute for a source element, id add {id}_editor it's editor's id

Implementation of

IDialog.id

Inherited from

ViewWithToolbar.id

Defined in

src/core/view/view.ts#69

components

Readonly components: Set<IComponent<IViewBased<IViewOptions>>>

All created ViewComponent inside this view

Implementation of

IDialog.components

Inherited from

ViewWithToolbar.components

Defined in

src/core/view/view.ts#74

ES

Static Readonly ES: "es5" | "es2015" | "es2018" | "es2021" = ES

Inherited from

ViewWithToolbar.ES

Defined in

src/core/view/view.ts#88

version

Static Readonly version: string = APP_VERSION

Inherited from

ViewWithToolbar.version

Defined in

src/core/view/view.ts#89

esNext

Static Readonly esNext: boolean = IS_ES_NEXT

Inherited from

ViewWithToolbar.esNext

Defined in

src/core/view/view.ts#90

esModern

Static Readonly esModern: boolean = IS_ES_MODERN

Inherited from

ViewWithToolbar.esModern

Defined in

src/core/view/view.ts#91

create

Readonly create: ICreate

Implementation of

IDialog.create

Inherited from

ViewWithToolbar.create

Defined in

src/core/view/view.ts#127

events

events: IEventEmitter

Implementation of

IDialog.events

Inherited from

ViewWithToolbar.events

Defined in

src/core/view/view.ts#146

toolbar

toolbar: IToolbarCollection

Overrides

ViewWithToolbar.toolbar

Defined in

src/modules/dialog/dialog.ts#92

OPTIONS

OPTIONS: IDialogOptions

Implementation of

IDialog.OPTIONS

Overrides

ViewWithToolbar.OPTIONS

Defined in

src/modules/dialog/dialog.ts#331

dialog

Readonly dialog: HTMLElement

Implementation of

IDialog.dialog

Defined in

src/modules/dialog/dialog.ts#333

workplace

workplace: HTMLDivElement

Defined in

src/modules/dialog/dialog.ts#335

isOpened

isOpened: boolean = false

True, if dialog was opened

Implementation of

IDialog.isOpened

Defined in

src/modules/dialog/dialog.ts#626

defaultOptions

Static defaultOptions: IDialogOptions

Overrides

ViewWithToolbar.defaultOptions

Defined in

src/modules/dialog/dialog.ts#841

componentName

get componentName(): string

Returns

string

Implementation of

IDialog.componentName

Inherited from

ViewWithToolbar.componentName

Defined in

src/core/component/component.ts#46

ownerDocument

get ownerDocument(): Document

The document in which jodit was created

Returns

Document

Implementation of

IDialog.ownerDocument

Inherited from

ViewWithToolbar.ownerDocument

Defined in

src/core/component/component.ts#95

od

get od(): Document

Shortcut for this.ownerDocument

Returns

Document

Implementation of

IDialog.od

Inherited from

ViewWithToolbar.od

Defined in

src/core/component/component.ts#102

ow

get ow(): Window

Returns

Window

Implementation of

IDialog.ow

Inherited from

ViewWithToolbar.ow

Defined in

src/core/component/component.ts#110

isReady

get isReady(): boolean

Component is ready for work

Returns

boolean

Implementation of

IDialog.isReady

Inherited from

ViewWithToolbar.isReady

Defined in

src/core/component/component.ts#145

isDestructed

get isDestructed(): boolean

Component was destructed

Returns

boolean

Implementation of

IDialog.isDestructed

Inherited from

ViewWithToolbar.isDestructed

Defined in

src/core/component/component.ts#152

isInDestruct

get isInDestruct(): boolean

The component is currently undergoing destructuring or has already been destroyed.
Those. you should not the app froze new events on him now or do anything else with him.

Returns

boolean

Implementation of

IDialog.isInDestruct

Inherited from

ViewWithToolbar.isInDestruct

Defined in

src/core/component/component.ts#160

componentStatus

get componentStatus(): ComponentStatus

Current component status

Returns

ComponentStatus

Implementation of

IDialog.componentStatus

Inherited from

ViewWithToolbar.componentStatus

Defined in

src/core/component/component.ts#210

set componentStatus(componentStatus): void

Setter for current component status

Parameters

Name Type
componentStatus ComponentStatus

Returns

void

Implementation of

IDialog.componentStatus

Inherited from

ViewWithToolbar.componentStatus

Defined in

src/core/component/component.ts#217

toolbarContainer

get toolbarContainer(): HTMLElement

Container for toolbar

Returns

HTMLElement

Inherited from

ViewWithToolbar.toolbarContainer

Defined in

src/core/view/view-with-toolbar.ts#43

basePath

get basePath(): string

Get a path for loading extra staff

Returns

string

Implementation of

IDialog.basePath

Inherited from

ViewWithToolbar.basePath

Defined in

src/core/view/view.ts#79

defaultTimeout

get defaultTimeout(): number

Return a default timeout period in milliseconds for some debounce or throttle functions.
By default, {history.timeout} options

Returns

number

Implementation of

IDialog.defaultTimeout

Inherited from

ViewWithToolbar.defaultTimeout

Defined in

src/core/view/view.ts#97

buffer

get buffer(): IStorage<StorageValueType>

Some extra data inside editor

Returns

IStorage<StorageValueType>

See

copyformat plugin

Implementation of

IDialog.buffer

Inherited from

ViewWithToolbar.buffer

Defined in

src/core/view/view.ts#106

message

get message(): IMessages

Returns

IMessages

Implementation of

IDialog.message

Inherited from

ViewWithToolbar.message

Defined in

src/core/view/view.ts#111

storage

get storage(): IStorage<StorageValueType>

Container for persistent set/get value

Returns

IStorage<StorageValueType>

Implementation of

IDialog.storage

Inherited from

ViewWithToolbar.storage

Defined in

src/core/view/view.ts#123

c

get c(): this["create"]

Short alias for create

Returns

this["create"]

Implementation of

IDialog.c

Inherited from

ViewWithToolbar.c

Defined in

src/core/view/view.ts#133

container

get container(): HTMLDivElement

Returns

HTMLDivElement

Implementation of

IDialog.container

Inherited from

ViewWithToolbar.container

Defined in

src/core/view/view.ts#138

set container(container): void

Parameters

Name Type
container HTMLDivElement

Returns

void

Implementation of

IDialog.container

Inherited from

ViewWithToolbar.container

Defined in

src/core/view/view.ts#142

e

get e(): this["events"]

Short alias for events

Returns

this["events"]

Implementation of

IDialog.e

Inherited from

ViewWithToolbar.e

Defined in

src/core/view/view.ts#152

progressbar

get progressbar(): IProgressBar

progress_bar Progress bar

Returns

IProgressBar

Implementation of

IDialog.progressbar

Inherited from

ViewWithToolbar.progressbar

Defined in

src/core/view/view.ts#160

options

get options(): this["OPTIONS"]

Returns

this["OPTIONS"]

Implementation of

IDialog.options

Inherited from

ViewWithToolbar.options

Defined in

src/core/view/view.ts#166

set options(options): void

Parameters

Name Type
options this["OPTIONS"]

Returns

void

Implementation of

IDialog.options

Inherited from

ViewWithToolbar.options

Defined in

src/core/view/view.ts#170

o

get o(): this["options"]

Short alias for options

Returns

this["options"]

Implementation of

IDialog.o

Inherited from

ViewWithToolbar.o

Defined in

src/core/view/view.ts#177

isLocked

get isLocked(): boolean

View is locked

Returns

boolean

Implementation of

IDialog.isLocked

Inherited from

ViewWithToolbar.isLocked

Defined in

src/core/view/view.ts#208

isFullSize

get isFullSize(): boolean

View is in fullSize

Returns

boolean

Implementation of

IDialog.isFullSize

Inherited from

ViewWithToolbar.isFullSize

Defined in

src/core/view/view.ts#242

getFullElName

getFullElName(elementName): string

Calc BEM element class name

Parameters

Name Type Description
elementName string element name in the bem classification

Returns

string

Implementation of

IDialog.getFullElName

Inherited from

ViewWithToolbar.getFullElName

Defined in

src/core/component/component.ts#65

getFullElName(elementName, mod): string

Parameters

Name Type
elementName string
mod string

Returns

string

Implementation of

IDialog.getFullElName

Inherited from

ViewWithToolbar.getFullElName

Defined in

src/core/component/component.ts#66

getFullElName(elementName, mod, modValue): string

Parameters

Name Type
elementName string
mod string
modValue string | boolean

Returns

string

Implementation of

IDialog.getFullElName

Inherited from

ViewWithToolbar.getFullElName

Defined in

src/core/component/component.ts#67

get

get<T>(chain, obj?): Nullable<T>

Safe get any field

Type parameters

Name
T

Parameters

Name Type Description
chain string the path to be traversed in the obj object
obj? IDictionary the object in which the value is searched

Returns

Nullable<T>

Example

private a = {
  b: {
    c: {
      e: {
        g: {
          color: 'red'
        }
      }
    }
  }
}

this.get('a.b.c.e.g.color'); // Safe access to color
// instead using optionsl chaining
this?.a?.b?.c?.e?.g?.color

Implementation of

IDialog.get

Inherited from

ViewWithToolbar.get

Defined in

src/core/component/component.ts#138

bindDestruct

bindDestruct(component): this

Bind destructor to some View

Parameters

Name Type
component IComponent<IViewBased<IViewOptions>>

Returns

this

Implementation of

IDialog.bindDestruct

Inherited from

ViewWithToolbar.bindDestruct

Defined in

src/core/component/component.ts#170

setStatus

setStatus(componentStatus): void

Set component status

Parameters

Name Type Description
componentStatus ComponentStatus component status

Returns

void

See

ComponentStatus

Implementation of

IDialog.setStatus

Inherited from

ViewWithToolbar.setStatus

Defined in

src/core/component/component.ts#226

hookStatus

hookStatus(status, callback): void

Adds a handler for changing the component's status

Parameters

Name Type Description
status ComponentStatus the status at which the callback is triggered
callback (component: this) => void a function that will be called when the status is status

Returns

void

Implementation of

IDialog.hookStatus

Inherited from

ViewWithToolbar.hookStatus

Defined in

src/core/component/component.ts#265

isInstanceOf

isInstanceOf<T>(c, constructorFunc): c is T

Type parameters

Name Type
T extends Component

Parameters

Name Type
c unknown
constructorFunc Function

Returns

c is T

Inherited from

ViewWithToolbar.isInstanceOf

Defined in

src/core/component/component.ts#283

getElm

getElm<T>(this, elementName): Nullable<HTMLElement>

Return element with BEM class name

Type parameters

Name Type
T extends IComponent<IViewBased<IViewOptions>> & IContainer & IElms

Parameters

Name Type
this T
elementName string

Returns

Nullable<HTMLElement>

Implementation of

IDialog.getElm

Inherited from

ViewWithToolbar.getElm

Defined in

src/core/traits/elms.ts#18

getElms

getElms<T>(this, elementName): HTMLElement[]

Return elements with BEM class name

Type parameters

Name Type
T extends IComponent<IViewBased<IViewOptions>> & IContainer & IElms

Parameters

Name Type
this T
elementName string

Returns

HTMLElement[]

Implementation of

IDialog.getElms

Inherited from

ViewWithToolbar.getElms

Defined in

src/core/traits/elms.ts#30

afterSetMod

afterSetMod(name, value): void

Parameters

Name Type
name string
value ModType

Returns

void

Implementation of

IDialog.afterSetMod

Inherited from

ViewWithToolbar.afterSetMod

Defined in

src/core/traits/mods.ts#23

setMod

setMod<T>(this, name, value, container?): T

Set/remove BEM class modification

Type parameters

Name Type
T extends IComponent<IViewBased<IViewOptions>> & IContainer & IMods

Parameters

Name Type Description
this T -
name string -
value ModType if null, mod will be removed
container? HTMLElement -

Returns

T

Implementation of

IDialog.setMod

Inherited from

ViewWithToolbar.setMod

Defined in

src/core/traits/mods.ts#30

getMod

getMod(this, name): ModType

Get BEM class modification value

Parameters

Name Type
this IMods
name string

Returns

ModType

Implementation of

IDialog.getMod

Inherited from

ViewWithToolbar.getMod

Defined in

src/core/traits/mods.ts#64

setPanel

setPanel(element): void

Change panel container

Parameters

Name Type
element string | HTMLElement

Returns

void

Inherited from

ViewWithToolbar.setPanel

Defined in

src/core/view/view-with-toolbar.ts#63

getRegisteredButtonGroups

getRegisteredButtonGroups(): IDictionary<string[]>

Returns

IDictionary<string[]>

Inherited from

ViewWithToolbar.getRegisteredButtonGroups

Defined in

src/core/view/view-with-toolbar.ts#90

registerButton

registerButton(btn): this

Register button for a group

Parameters

Name Type
btn IPluginButton

Returns

this

Inherited from

ViewWithToolbar.registerButton

Defined in

src/core/view/view-with-toolbar.ts#97

unregisterButton

unregisterButton(btn): this

Remove button from a group

Parameters

Name Type
btn IPluginButton

Returns

this

Inherited from

ViewWithToolbar.unregisterButton

Defined in

src/core/view/view-with-toolbar.ts#117

i18n

i18n(text, ...params): string

Internationalization method. Uses Jodit.lang object

Parameters

Name Type
text string
...params (string | number)[]

Returns

string

Implementation of

IDialog.i18n

Inherited from

ViewWithToolbar.i18n

Defined in

src/core/view/view.ts#184

isLockedNotBy

isLockedNotBy(name): boolean

Parameters

Name Type
name string

Returns

boolean

Implementation of

IDialog.isLockedNotBy

Inherited from

ViewWithToolbar.isLockedNotBy

Defined in

src/core/view/view.ts#212

lock

lock(name?): boolean

Disable selecting

Parameters

Name Type Default value
name string 'any'

Returns

boolean

Implementation of

IDialog.lock

Inherited from

ViewWithToolbar.lock

Defined in

src/core/view/view.ts#218

unlock

unlock(): boolean

Enable selecting

Returns

boolean

Implementation of

IDialog.unlock

Inherited from

ViewWithToolbar.unlock

Defined in

src/core/view/view.ts#230

getVersion

getVersion(): string

Return current version

Returns

string

Implementation of

IDialog.getVersion

Inherited from

ViewWithToolbar.getVersion

Defined in

src/core/view/view.ts#249

getVersion

getVersion(): string

Returns

string

Inherited from

ViewWithToolbar.getVersion

Defined in

src/core/view/view.ts#253

getInstance

getInstance<T>(module, options?): T

Make one instance of one module

Type parameters

Name Type
T extends IComponent<IViewBased<IViewOptions>>

Parameters

Name Type
module Function
options? object

Returns

T

Implementation of

IDialog.getInstance

Inherited from

ViewWithToolbar.getInstance

Defined in

src/core/view/view.ts#306

getInstance<T>(moduleName, options?): T

Type parameters

Name Type
T extends IComponent<IViewBased<IViewOptions>>

Parameters

Name Type
moduleName string
options? object

Returns

T

Implementation of

IDialog.getInstance

Inherited from

ViewWithToolbar.getInstance

Defined in

src/core/view/view.ts#307

className

className(): string

Returns

string

Implementation of

IDialog.className

Overrides

ViewWithToolbar.className

Defined in

src/modules/dialog/dialog.ts#87

setSize

setSize(w?, h?): this

Specifies the size of the window

Parameters

Name Type Description
w? string | number The width of the window
h? string | number The height of the window

Returns

this

Implementation of

IDialog.setSize

Defined in

src/modules/dialog/dialog.ts#348

calcAutoSize

calcAutoSize(): this

Recalculate auto sizes

Returns

this

Implementation of

IDialog.calcAutoSize

Defined in

src/modules/dialog/dialog.ts#368

setPosition

setPosition(x?, y?): this

Specifies the position of the upper left corner of the window . If x and y are specified,
the window is centered on the center of the screen

Parameters

Name Type Description
x? number Position px Horizontal
y? number Position px Vertical

Returns

this

Implementation of

IDialog.setPosition

Defined in

src/modules/dialog/dialog.ts#382

setHeader

setHeader(content): this

Specifies the dialog box title . It can take a string and an array of objects

Parameters

Name Type Description
content Content A string or an HTML element , or an array of strings and elements

Returns

this

Example

var dialog = new Jodi.modules.Dialog(parent);
dialog.setHeader('Hello world');
dialog.setHeader(['Hello world', '<button>OK</button>', $('<div>some</div>')]);
dialog.open();

Implementation of

IDialog.setHeader

Defined in

src/modules/dialog/dialog.ts#422

setContent

setContent(content): this

It specifies the contents of the dialog box. It can take a string and an array of objects

Parameters

Name Type Description
content Content A string or an HTML element , or an array of strings and elements

Returns

this

Example

var dialog = new Jodi.modules.Dialog(parent);
dialog.setHeader('Hello world');
dialog.setContent('<form onsubmit="alert(1);"><input type="text" /></form>');
dialog.open();

Implementation of

IDialog.setContent

Defined in

src/modules/dialog/dialog.ts#440

setFooter

setFooter(content): this

Sets the bottom of the dialog. It can take a string and an array of objects

Parameters

Name Type Description
content Content A string or an HTML element , or an array of strings and elements

Returns

this

Example

var dialog = new Jodi.modules.Dialog(parent);
dialog.setHeader('Hello world');
dialog.setContent('<form><input id="someText" type="text" /></form>');
dialog.setFooter([
 $('<a class="jodit-button">OK</a>').click(function () {
     alert($('someText').val())
     dialog.close();
 })
]);
dialog.open();

Implementation of

IDialog.setFooter

Defined in

src/modules/dialog/dialog.ts#464

getZIndex

getZIndex(): number

Get zIndex from dialog

Returns

number

Implementation of

IDialog.getZIndex

Defined in

src/modules/dialog/dialog.ts#473

getMaxZIndexDialog

getMaxZIndexDialog(): IDialog

Get dialog instance with maximum z-index displaying it on top of all the dialog boxes

Returns

IDialog

Defined in

src/modules/dialog/dialog.ts#480

setMaxZIndex

setMaxZIndex(): void

Sets the maximum z-index dialog box, displaying it on top of all the dialog boxes

Returns

void

Defined in

src/modules/dialog/dialog.ts#502

toggleFullSize

toggleFullSize(isFullSize?): void

Expands the dialog on full browser window

Parameters

Name Type
isFullSize? boolean

Returns

void

Implementation of

IDialog.toggleFullSize

Overrides

ViewWithToolbar.toggleFullSize

Defined in

src/modules/dialog/dialog.ts#519

open

open(destroyAfterClose): this

It opens a dialog box to center it, and causes the two event.

Parameters

Name Type Description
destroyAfterClose boolean true - After closing the window , the destructor will be called.

Returns

this

See

setHeader

Implementation of

IDialog.open

Defined in

src/modules/dialog/dialog.ts#529

open(destroyAfterClose, modal): this

It opens a dialog box to center it, and causes the two event.

Parameters

Name Type Description
destroyAfterClose boolean true - After closing the window , the destructor will be called.
modal boolean true window will be opened in modal mode

Returns

this

See

setHeader

Implementation of

IDialog.open

Defined in

src/modules/dialog/dialog.ts#531

open(content?, title?, destroyAfterClose?, modal?): this

It opens a dialog box to center it, and causes the two event.

Parameters

Name Type Description
content? Content -
title? Content specifies the title of the dialog box,
destroyAfterClose? boolean true - After closing the window , the destructor will be called.
modal? boolean true window will be opened in modal mode

Returns

this

See

setHeader

Implementation of

IDialog.open

Defined in

src/modules/dialog/dialog.ts#533

setModal

setModal(modal): this

Set modal mode

Parameters

Name Type
modal undefined | boolean

Returns

this

Implementation of

IDialog.setModal

Defined in

src/modules/dialog/dialog.ts#616

close

close(): this

Closes the dialog box , if you want to call the method destruct

Returns

this

See

destroy

Example

//You can close dialog two ways
var dialog = new Jodit.modules.Dialog();
dialog.open('Hello world!', 'Title');
var $close = dialog.create.fromHTML('<a href="#" style="float:left;" class="jodit-button">
    <i class="icon icon-check"></i>&nbsp;' + Jodit.prototype.i18n('Ok') + '</a>');
$close.addEventListener('click', function () {
    dialog.close();
});
dialog.setFooter($close);
// and second way, you can close dialog from content
dialog.open('<a onclick="var event = doc.createEvent('HTMLEvents'); event.initEvent('close_dialog', true, true);
this.dispatchEvent(event)">Close</a>', 'Title');

Implementation of

IDialog.close

Defined in

src/modules/dialog/dialog.ts#649

destruct

destruct(): void

It destroys all objects created for the windows and also includes all the handlers for the window object

Returns

void

Implementation of

IDialog.destruct

Overrides

ViewWithToolbar.destruct

Defined in

jodit/src/modules/dialog/dialog.ts:818

In this article: