Data
/
tinymce-docs
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

review edits

pull/1021/head
Shikha 6 years ago
committed by GitHub
parent
9b5f2f990a
commit
d713125f8a
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 42
      ui-components/urldialog.md

42
ui-components/urldialog.md
View File

@ -7,7 +7,7 @@ keywords: dialog urldialog api
---
## Overview
A URL dialog is a special TinyMCE UI component which loads an external web page inside a dialog (sometimes referred to as modals). This differs to regular dialogs which use supported components to render an interactive dialog inside the application. URL dialogs are useful for very complex use cases, where the supported dialog components aren't able to be used, for example in a custom file manager.
A URL dialog is a special TinyMCE UI component which loads an external web page inside a dialog (sometimes referred to as `modals`). This differs from the regular dialogs that use supported components to render an interactive dialog inside the application. URL dialogs are useful for very complex use cases, where the supported dialog components cannot be used — for example, dialogs in a custom file manager.
The most basic configuration structure is:
@ -31,7 +31,7 @@ A URL Dialog configuration has two main parts:
| Name | Value | Requirement | Description |
| ------- | ------ | ----------- | ----------- |
| title | string | required | The title of the dialog. |
| url | string | required | The url to the external page to load. |
| url | string | required | The URL to the external page to load. |
| width | number | optional | The width of the dialog in pixels. |
| height | number | optional | The height of the dialog in pixels. |
| buttons | UrlDialogButton[] | optional | An optional array of button configurations to render in the footer. See [Footer components](#footercomponents) configuration. |
@ -58,15 +58,15 @@ var buttonConfig = {
}
```
**Name:** The name property on the button is used as an id attribute to identify the dialog component. For example, when `name: foobutton` is defined and a user clicks on that button, the dialog `onAction()` handler will fire and provide an object containing the name of the dialog component, e.g. `details.name = 'foobutton'`. This will allow developers to create a click handler for **foobutton**.
**Name:** The name property on the button is used as an ID attribute to identify the dialog component. For example, when `name: foobutton` is defined and a user clicks on that button, the dialog `onAction()` handler will fire and provide an object containing the name of the dialog component, e.g., `details.name = 'foobutton'`. This will allow developers to create a click handler for **foobutton**.
**Text:** This will be the text displayed on the button. For example, `text: ‘do magic’` will create a button with text **do magic**.
**Icon:** This will be the name of the icon to be displayed on the button, instead of any text. The name must correspond to an icon in the icon pack. Dialog buttons do not support mixing icons and text at the moment.
**Icon:** This will be the name of the icon to be displayed on the button, in place of any text. The name must correspond to an icon in the icon pack. Dialog buttons do not support mixing icons and text at the moment.
**Disabled:** (Value: Boolean; Default: False): When set to true, the button will be disabled when the dialog loads.
**Disabled:** (Value: Boolean; Default: `False`): When set to `true`, the button will be disabled when the dialog loads.
**Primary:** (Default: False): When set to true, the button will be colored to stand out. The color will depend on the chosen [skin]({{site.baseurl}}/general-configuration-guide/customize-ui/#skins).
**Primary:** (Default: `False`): When set to `true`, the button will be colored to stand out. The color will depend on the chosen [skin]({{site.baseurl}}/general-configuration-guide/customize-ui/#skins).
**Align:** (Default: 'end'): This will define the position of the button in the footer. When set to `end`, the button will be positioned on the right side of the dialog. When set to `start`, the button will be positioned on the left side of the dialog.
@ -80,7 +80,7 @@ The **Custom** button can be used to specify a custom operation.
## URL dialog instance API
When a URL dialog is created, a dialog instance API is returned. For example, `const instanceApi = editor.windowManager.openUrl(config);`
When a URL dialog is created, a dialog instance API is returned. For example, `const instanceApi = editor.windowManager.openUrl(config);`.
The instance API is a javascript object containing methods attached to the dialog instance. When the dialog is closed, the instance API is destroyed.
@ -104,27 +104,27 @@ window.parent.postMessage({
}, '*');
```
Likewise to send messages from TinyMCE back to the external page, then the `api.sendMessage()` function can be used to send messages and then in the external page an event listener can be added to receive the message:
Similarly, to send messages from TinyMCE back to the external page, the `api.sendMessage()` function can be used to send messages, and then in the external page an event listener can be added to receive the messages:
```js
window.addEventListener('message', function (event) {
var data = event.data;
// Do something with the data received here
console.log('message received from TinyMCE', data);
});
```
> Note: If possible when sending a message it's recommended to specify the target origin of where TinyMCE is running, instead of using a wildcard (`'*'`). Likewise when receiving messages also validate that `event.origin` matches the origin of where TinyMCE is running. For example if TinyMCE is running on *http://mysite.com/tinymce.html*, then if `event.origin` doesn't match `http://mysite.com` the message should be ignored.
> Note: When sending a message it is recommended to specify the target origin of where TinyMCE is running, instead of using a wildcard (`'*'`). Similarly, when receiving messages, also validate that `event.origin` matches the origin of where TinyMCE is running. For example, if TinyMCE is running on *http://mysite.com/tinymce.html*, then if `event.origin` doesn't match `http://mysite.com` the message should be ignored.
### Supported message actions
These actions are built into the URL dialog functionality and will perform an action inside the editor, based on the `mceAction` specified. The actions supported are:
These actions are built into the URL dialog functionality and will perform an action inside the editor based on the `mceAction` specified. The actions supported are:
##### insertContent
Inserts content into the editor at the current selection. The `content` property specifies what content should be inserted into the editor.
This option inserts content into the editor at the current selection. The `content` property specifies what content should be inserted into the editor.
```js
{
@ -135,7 +135,7 @@ Inserts content into the editor at the current selection. The `content` property
##### setContent
Set the editors content. The `content` property specifies what content should be set inside the editor.
This option is used to set the editors content. The `content` property specifies what content should be set inside the editor.
```js
{
@ -146,7 +146,7 @@ Set the editors content. The `content` property specifies what content should be
##### execCommand
Executes a command inside the editor. The options available for this action are:
This option executes a command inside the editor. The options available for this action are:
**cmd:** The name of the command to be executed inside the editor.
@ -164,7 +164,7 @@ Executes a command inside the editor. The options available for this action are:
##### close
Closes the open URL dialog. This is the same as using the `api.close()` function.
This option closes the open URL dialog. This is the same as using the `api.close()` function.
```js
{
@ -174,7 +174,7 @@ Closes the open URL dialog. This is the same as using the `api.close()` function
##### block
Disables the entire dialog window and shows a loading image. This is the same as using the `api.block(message)` function.
This option disables the entire dialog window and shows a loading image. This is the same as using the `api.block(message)` function.
```js
{
@ -185,7 +185,7 @@ Disables the entire dialog window and shows a loading image. This is the same as
##### unblock
Unblocks the window/dialog. This is the same as using the `api.unblock()` function.
This option unblocks the window/dialog. This is the same as using the `api.unblock()` function.
```js
{
@ -195,7 +195,7 @@ Unblocks the window/dialog. This is the same as using the `api.unblock()` functi
### Custom message actions
A custom message, is one that contains a `mceAction` not listed in the above supported actions. For example, the following snippet could be used to send a message back to TinyMCE and then be processed via the `onMessage` callback to perform custom actions inside TinyMCE.
A custom message is one that contains a `mceAction` not listed in the above-supported actions. For example, the following snippet could be used to send a message back to TinyMCE and then be processed via the `onMessage` callback to perform custom actions inside TinyMCE.
```js
{
@ -210,6 +210,8 @@ A custom message, is one that contains a `mceAction` not listed in the above sup
## Example configuration
This example shows a very basic toolbar button, that opens an external URL inside a 640x640px dialog without any footer. The dialog can be opened by clicking the `{;}` toolbar button.
This example shows a very basic toolbar button that opens an external URL inside a 640x640px dialog without any footer. The dialog can be opened by clicking the `{;}` toolbar button.
{% include codepen.html id="url-dialog" height="300" tab="js" %}
{% include codepen.html id="url-dialog" height="300" tab="js" %}
Write Preview
Loading…
Cancel
Save