@ -4,7 +4,7 @@ The `toolbar_drawer` option is used to add an additional toolbar to accommodate
Use the [toolbar]({{site.baseurl}}/configure/editor-appearance/#toolbar) option to specify the buttons and the order that they will appear in the extended toolbars. To create groups within this list, please add `|` pipe characters between the configured groups of controls.
This option enables you to specify the **maximum**`height` that the editor will automatically resize to when a user enters text into the editor. In other words, the editor will stop automatically resizing when the set value is reached.
This option allows you to set whether the editor will attempt to resize itself upon initialization. By default this option is set to `true`.
**Type:** `Number`
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`
##### Example
```js
tinymce.init({
selector: "textarea", // change this value according to your HTML
max_height: 500
plugins: "autoresize",
autoresize_on_init: false
});
```
### `min_height`
### `autoresize_overflow_padding`
This option enables you to specify the **minimum**`height` of the editor when it's initialized.
This option allows you to specify the size of the `padding` at the sides of the editor's `body` set on initialization.
**Type:** `Number`
@ -66,33 +71,29 @@ This option enables you to specify the **minimum** `height` of the editor when i
```js
tinymce.init({
selector: "textarea", // change this value according to your HTML
min_height: 350
plugins: "autoresize",
autoresize_overflow_padding: 50
});
```
### `autoresize_on_init`
This option allows you to set whether the editor will attempt to resize itself upon initialization. By default this option is set to `true`.
**Type:** `Boolean`
### `max_height`
**Default Value:** `true`
This option enables you to specify the **maximum**`height` that the editor will automatically resize to when a user enters text into the editor. In other words, the editor will stop automatically resizing when the set value is reached.
**Possible Values:** `true`, `false`
**Type:** `Number`
##### Example
```js
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "autoresize",
autoresize_on_init: false
max_height: 500
});
```
### `autoresize_overflow_padding`
### `min_height`
This option allows you to specify the size of the `padding` at the sides of the editor's `body` set on initialization.
This option enables you to specify the **minimum**`height` of the editor when it's initialized.
**Type:** `Number`
@ -101,7 +102,6 @@ This option allows you to specify the size of the `padding` at the sides of the
```js
tinymce.init({
selector: "textarea", // change this value according to your HTML
This option enables you to add the CSS files that should be used for populating the styles drop down. This will go through any `@import` rules and only target the specified file. This option can be either a `string`, `regexp` or a `function`. This also allows you to import styles form existing files on the currently editable page in inline mode.
If set to `false` then selectors will not be globally exclusive meaning they can exist in two separate groups. This can be useful for scenarios where you want to have a ".class" imported as a paragraph selector and as a span format selector.
**Type:** `String`
**Type:** `Boolean`
##### Example
**Default Value:** `true`
```js
tinymce.init({
selector: "textarea", // change this value according to your HTML
This option enables you to only import classes from selectors matching the filter. The filter can be a `string`, `regexp` or a `function`. See the examples below.
/* jQueryUI */
.ui-helper-hidden { display: none; }
**Type:** `String`
/* Custom Styles */
.myCustomStyleStart {display:none;}
// INCLUDE ALL MY CLASSES HERE IN THE Formats menu!
.myCustomStyleEnd {display:none;}
**Example of usage with string filter:**
/* Any other possible styles afterward ... */
```
```js
var keepSelector = false;
tinymce.init({
selector: "textarea", // change this value according to your HTML
This option enables you to add the CSS files that should be used for populating the styles drop down. This will go through any `@import` rules and only target the specified file. This option can be either a `string`, `regexp` or a `function`. This also allows you to import styles form existing files on the currently editable page in inline mode.
**Example of usage with function filter**
**Type:** `String`
##### Example
```js
tinymce.init({
@ -103,9 +104,7 @@ tinymce.init({
plugins: "importcss",
menubar: "format",
content_css: "/my-styles.css",
importcss_selector_filter: function(selector) {
return selector.indexOf('myprefix') !== -1;
}
importcss_file_filter: "/my-styles.css"
});
```
@ -167,45 +166,47 @@ tinymce.init({
});
```
### `importcss_exclusive`
### `importcss_selector_filter`
If set to `false` then selectors will not be globally exclusive meaning they can exist in two separate groups. This can be useful for scenarios where you want to have a ".class" imported as a paragraph selector and as a span format selector.
This option enables you to only import classes from selectors matching the filter. The filter can be a `string`, `regexp` or a `function`. See the examples below.
**Type:** `Boolean`
**Type:** `String`
**Default Value:** `true`
**Example of usage with string filter:**
```js
tinymce.init({
selector: "textarea", // change this value according to your HTML
@ -28,7 +28,7 @@ These settings affect the execution of the `insertdatetime` plugin. Formats for
### `insertdatetime_dateformat`
This option allows you to override the default formatting rule for date formats inserted by the `mceInsertDate` command. This defaults to `%Y-%m-%d` and where the different `%` variables get replaced with various [date format options](#dateformats).
This option allows you to override the default formatting rule for date formats inserted by the `mceInsertDate` command. This defaults to `%Y-%m-%d` and where the different `%` variables get replaced with various [date format options](#referencedatetimeformats).
##### Example
@ -44,7 +44,7 @@ tinymce.init({
### `insertdatetime_formats`
Allows you to specify a list of date/time formats to be used in the date menu or date select box. A complete list of formats is available under [date formats](#dateformats) below.
Allows you to specify a list of date/time formats to be used in the date menu or date select box. A complete list of formats is available under [date formats](#referencedatetimeformats) below.
##### Example
@ -60,7 +60,7 @@ tinymce.init({
### `insertdatetime_timeformat`
This option allows you to override the default formatting rule for times inserted by the `mceInsertTime` command. This defaults to `%H:%M:%S` and where the different `%` variables get replaced with various [date format options](#dateformats).
This option allows you to override the default formatting rule for times inserted by the `mceInsertTime` command. This defaults to `%H:%M:%S` and where the different `%` variables get replaced with various [date format options](#referencedatetimeformats).
These settings affect the execution of the `media` plugin. Namely the ability to disable parts of the media dialog box when inserting/editing media items. In addition, the user may disable the cross-site scripting sanitation filter for video/object elements here.
### `media_live_embeds`
> Available in TinyMCE version 4.3 onwards.
When you enable this option users will see a live preview of embedded video content within the editable area, rather than a placeholder image. This means that users can play a video clip, such as YouTube, within the editor.
This option is enabled by default and accepts URLs input into the source field or embed field in the dialog box by the user.
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`
##### Example
```js
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "media",
menubar: "insert",
toolbar: "media",
media_live_embeds: true
});
```
### `audio_template_callback`
This option allows you to specify the function that will return the HTML embed code of the audio media that you are attempting to insert into TinyMCE.
@ -72,42 +46,31 @@ tinymce.init({
});
```
### `media_url_resolver`
This option allows you to specify a function that will be used to replace TinyMCE's default media embed logic with your own, custom logic.
### `media_alt_source`
The media url resolver function takes three arguments: `data`, a `resolve` callback and a `reject` callback. The `data` argument will be an object with a `url` property on it. In your custom handler function you can then handle the `url` in whatever way you want and return the HTML you want to embed by calling the `resolve` callback and passing it an object with the HTML set on the `html` property, like this: `resolve({html: 'YOUR_HTML'})`.
This options allows you disable the `Alternative source` input field in the media dialog.
If you in your handler would like fall back to the default media embed logic you can simple call the `resolve` callback with an object where the `html` property is set to an empty string, like this: `resolve({html: ''})`.
**Type:** `Boolean`
If something goes wrong in your function and you want to show an error to the user you can do so by calling the `reject` callback with an object where the message you want to show the user is set under the `msg` property, like this: `reject({msg: 'YOUR_ERROR_MESSAGE'})`. The message entered will be shown in an error notification to the user.
**Default Value:** `true`
**Type:** `JavaScript Function`
**Possible Values:** `true`, `false`
##### Example
The following example simply checks if the url contains some special url and returns an iframe if it does. Otherwise it calls the `resolve` callback with an empty string, falling back to the default media embed logic.
```js
tinymce.init({
selector: "textarea.tinymce",
selector: "textarea", // change this value according to your HTML
plugins: "media",
menubar: "insert",
toolbar: "media",
media_url_resolver: function (data, resolve/*, reject*/) {
if (data.url.indexOf('YOUR_SPECIAL_VIDEO_URL') !== -1) {
var embedHtml = '<iframesrc="'+data.url+
'" width="400" height="400" ></iframe>';
resolve({html: embedHtml});
} else {
resolve({html: ''});
}
}
media_alt_source: false
});
```
### `media_alt_source`
### `media_dimensions`
This options allows you disable the `Alternative source` input field in the media dialog.
This options allows you disable the `Dimensions` input fields in the media dialog.
**Type:** `Boolean`
@ -123,13 +86,13 @@ tinymce.init({
plugins: "media",
menubar: "insert",
toolbar: "media",
media_alt_source: false
media_dimensions: false
});
```
### `media_poster`
### `media_filter_html`
This options allows you disable the `Poster` input field in the media dialog.
This option allows you disable the XSS sanitation filter for video/object elements. Scripts, conditional comments, etc, can't be used within these elements by default for security reasons. If you want to include that and have server side sanitizers or if you trust your users, then you can disable this feature.
**Type:** `Boolean`
@ -145,13 +108,17 @@ tinymce.init({
plugins: "media",
menubar: "insert",
toolbar: "media",
media_poster: false
media_filter_html: false
});
```
### `media_dimensions`
### `media_live_embeds`
This options allows you disable the `Dimensions` input fields in the media dialog.
> Available in TinyMCE version 4.3 onwards.
When you enable this option users will see a live preview of embedded video content within the editable area, rather than a placeholder image. This means that users can play a video clip, such as YouTube, within the editor.
This option is enabled by default and accepts URLs input into the source field or embed field in the dialog box by the user.
**Type:** `Boolean`
@ -167,13 +134,13 @@ tinymce.init({
plugins: "media",
menubar: "insert",
toolbar: "media",
media_dimensions: false
media_live_embeds: true
});
```
### `media_filter_html`
### `media_poster`
This option allows you disable the XSS sanitation filter for video/object elements. Scripts, conditional comments, etc, can't be used within these elements by default for security reasons. If you want to include that and have server side sanitizers or if you trust your users, then you can disable this feature.
This options allows you disable the `Poster` input field in the media dialog.
**Type:** `Boolean`
@ -189,7 +156,7 @@ tinymce.init({
plugins: "media",
menubar: "insert",
toolbar: "media",
media_filter_html: false
media_poster: false
});
```
@ -214,6 +181,39 @@ tinymce.init({
});
```
### `media_url_resolver`
This option allows you to specify a function that will be used to replace TinyMCE's default media embed logic with your own, custom logic.
The media url resolver function takes three arguments: `data`, a `resolve` callback and a `reject` callback. The `data` argument will be an object with a `url` property on it. In your custom handler function you can then handle the `url` in whatever way you want and return the HTML you want to embed by calling the `resolve` callback and passing it an object with the HTML set on the `html` property, like this: `resolve({html: 'YOUR_HTML'})`.
If you in your handler would like fall back to the default media embed logic you can simple call the `resolve` callback with an object where the `html` property is set to an empty string, like this: `resolve({html: ''})`.
If something goes wrong in your function and you want to show an error to the user you can do so by calling the `reject` callback with an object where the message you want to show the user is set under the `msg` property, like this: `reject({msg: 'YOUR_ERROR_MESSAGE'})`. The message entered will be shown in an error notification to the user.
**Type:** `JavaScript Function`
##### Example
The following example simply checks if the url contains some special url and returns an iframe if it does. Otherwise it calls the `resolve` callback with an empty string, falling back to the default media embed logic.
```js
tinymce.init({
selector: "textarea.tinymce",
plugins: "media",
toolbar: "media",
media_url_resolver: function (data, resolve/*, reject*/) {
if (data.url.indexOf('YOUR_SPECIAL_VIDEO_URL') !== -1) {
var embedHtml = '<iframesrc="'+data.url+
'" width="400" height="400" ></iframe>';
resolve({html: embedHtml});
} else {
resolve({html: ''});
}
}
});
```
### `video_template_callback`
This option allows you to specify the function that will return the HTML embed code of the video media that you are attempting to insert into TinyMCE.
@ -6,7 +6,7 @@ description: Add a custom autocompleter to TinyMCE 5.0.
keywords: autcomplete
---
## Overview and use case
## Overview
An `autocompleter` enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. It provides suggestions to insert while the user is typing into the content. For example, with the [charmap]({{site.baseurl}}/plugins/charmap/) plugin enabled, typing **:amp** should show the ampersand item in the menu. Pressing `esc` should close the autocomplete menu.
shikha
6 years ago