Merge pull request #37 from tinymce/config-updates

Config updates
This commit is contained in:
Robert Collings
2015-11-08 23:12:01 -08:00
98 changed files with 785 additions and 290 deletions
@@ -2,7 +2,13 @@
This option allows you to specify whether the editor should parse and keep conditional comments.
An example of this setting is as follows:
**Type:** `Boolean`
**Default Value:** `true` // confirmation required
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
@@ -1,8 +1,14 @@
## allow_html_in_named_anchor
This option allows you to specify whether the editor should parse and keep html within named anchor tags.
This option allows you to specify whether the editor should parse and keep `html` within named `anchor` tags.
An example of this setting is as follows:
**Type:** `Boolean`
**Default Value:** `false` // confirmation required
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
+8 -2
View File
@@ -1,8 +1,14 @@
## allow_script_urls
Enabling this option will allow javascript: urls in links and images. This is disabled by default for security purposes so scripts can't be injected by pasting contents from one site to another. If you still wan't to enable this option just set it to true.
Enabling this option will allow `javascript: urls` in links and images. This is disabled by default for security purposes so scripts can't be injected by pasting contents from one site to another. If you still wan't to enable this option just set it to `true`.
Example
**Type:** `Boolean`
**Default Value:** `false`
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
+2
View File
@@ -2,6 +2,8 @@
Automatically set the focus to an editor instance. The value of this option should be an editor instance `id`. The editor instance id is the id for the original `textarea` or `div` element that got replaced.
**Type:** `String`
**Example:**
```js
+1 -1
View File
@@ -4,7 +4,7 @@ Enable or disable TinyMCE from automatically uploading local images.
**Type:** `Boolean`
**Default Value:** `true`
**Default Value:** `true` // confirmation required
**Possible Values:** `true`, `false`
+6 -4
View File
@@ -1,12 +1,14 @@
## block_formats
The enables you to specify a list of block formats for the block listbox. The format is "title=block;...".
The enables you to specify a list of block formats for the block listbox. The format is `"title=block;"`.
Example of usage
**Type:** `String`
**Example:**
```js
tinymce.init({
selector: "textarea",
block_formats: "Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3"
selector: "textarea", // change this value according to your html
block_formats: "Paragraph=p; Header 1=h1; Header 2=h2; Header 3=h3"
});
```
+4 -2
View File
@@ -2,9 +2,11 @@
This option enables you to specify a class for the body of each editor instance. This class can then be used to do TinyMCE specific overrides in your `content_css`. There is also a specific `mceForceColors` class that can be used to override the text and background colors to be black and white.
Examples of usage of the body_class option
**Type:** `String`
This will add the same class to all editors that gets created by the init call.
**Example:**
This will add the same class to all editors that gets created by the `init` call.
```js
tinymce.init({
+5 -3
View File
@@ -2,9 +2,11 @@
This option enables you to specify an id for the body of each editor instance. This id can then be used to do TinyMCE specific overrides in your `content_css`.
Examples of usage of the body_id option
**Type:** `String`
This will add the same id to all editors that gets created by the init call.
**Example:**
This will add the same id to all editors that gets created by the `init` call.
```js
tinymce.init({
@@ -18,6 +20,6 @@ This will set specific ids on the bodies of specific editors.
```js
tinymce.init({
selector: "textarea", // change this value according to your html
body_id: "elm1=my_id,elm2=my_id2"
body_id: "elm1=my_id, elm2=my_id2"
});
```
+9 -9
View File
@@ -1,27 +1,27 @@
## br_in_pre
This option allows you to disable TinyMCE's default behavior when pressing the enter key within a `pre` tag. By default, pressing enter within a `pre` tag produces a `br` tag at the insertion point.
For example:
This option allows you to disable TinyMCE's default behavior when pressing the enter key within a `pre` tag. By default, pressing enter within a `pre` tag produces a `br` tag at the insertion point. For example:
`<pre>This is inside` `<br>` `a pre tag.</pre>`
When `br_in_pre` is set to `false`, rather than inserting a `br` tag TinyMCE will split the `pre` tag.
For example:
However, when `br_in_pre` is set to `false`, rather than inserting a `br` tag TinyMCE will split the `pre` tag. For example:
`<pre>This is inside </pre>`
`<pre>a pre tag.</pre>`
When set to `false` the user would need to press `shift+enter` to insert a `br` tag.
> Note: when set to `false`, `shift+enter` will insert a `br` tag.
**Type:** `Boolean`
An example that disables this setting is as follows:
**Default Value:** `true`
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
selector: "textarea", // change this value according to your html
br_in_pre: false
});
```
@@ -1,12 +1,18 @@
## browser_spellcheck
This is a true/false value if the usage of the browser's internal spellchecker should be used.
One of the several spellchecking options developers have available is to use the browser's native spellchecker. `browser_spellcheck` handles this behavior.
**Type:** `Boolean`
**Default Value:** `false`
**Possible Values:** `true`, `false`
```js
tinymce.init({
selector: "textarea", // change this value according to your html
browser_spellcheck : true
browser_spellcheck: true
});
```
Default value is `false`.
For more information about spell checking in TinyMCE see [this page]({{ site.baseurl }}/getting-started/spell-checking-in-tinymce/) in the Getting Started guide.
+4 -2
View File
@@ -1,8 +1,10 @@
## cache_suffix
This option lets you add a custom cache buster URL part at the end of each request tinymce makes to load CSS, scripts etc. Just add the query string part you want to append to each URL request for example "?v=4.1.6"
This option lets you add a custom cache buster URL part at the end of each request `tinymce` makes to load CSS, scripts, etc. Just add the query string part you want to append to each URL request, for example "?v=4.1.6".
Example of usage
**Type:** `String`
**Example:**
```js
tinymce.init({
@@ -2,6 +2,8 @@
This option enables you to provide your own color picker.
**Type:** `JavaScript Function`
**Example:**
```js
+13 -11
View File
@@ -1,11 +1,13 @@
## content_css
This option enables you to specify a custom CSS file that extends the theme content CSS. This CSS file is the one used within the editor (the editable area). This option can also be a comma separated list of URLs.
This option enables you to specify a custom CSS file that extends the theme content CSS. This CSS file is the one used within the editor's editable area. This option can also be a comma separated list of URLs.
If you specify a relative path, it is resolved in relation to the URL of the (HTML) file that includes TinyMCE, NOT relative to TinyMCE itself.
If you specify a relative path, it is resolved in relation to the URL of the (HTML) file that includes TinyMCE, **not** relative to TinyMCE itself.
Absolute path:
**Type:** `String`
**Absolute path example:**
```js
// File: http://domain.mine/mysite/index.html
@@ -16,7 +18,7 @@ tinyMCE.init({
});
```
Relative path:
**Relative path example:**
```js
// File: http://domain.mine/mysite/index.html
@@ -27,7 +29,7 @@ tinyMCE.init({
});
```
Using multiple stylesheets:
**Using multiple stylesheets example:**
```js
tinyMCE.init({
@@ -36,20 +38,20 @@ tinyMCE.init({
});
```
Using multiple stylesheets as array:
**Using multiple stylesheets as array example:**
```js
tinyMCE.init({
selector: "textarea", // change this value according to your html
content_css : ["mycontent.css","mycontent2.css"] // includes both css files in header, ability to have CSS with , in URL
content_css : ["mycontent.css", "mycontent2.css"] // includes both css files in header, ability to have CSS with `,` in URL
});
```
Note:
#### A note regarding browser caching
Browser caching might cause TinyMCE to not read the contents of a changed CSS file. You'll see "old" colors & styles.
One solution is to manually clear the browser cache when the file for content_css or editor_css has changed. Another solution is to use an old hack which adds a bogus parameter to the URL containing a present timestamp like "myFile.css?bogus=10023561235". Possible solutions could look like this:
One solution is to manually clear the browser cache when the file for `content_css` or `editor_css` has changed. Another solution is to use an old hack which adds a bogus parameter to the URL containing a present timestamp like "myFile.css?bogus=10023561235". Possible solutions could look like this:
```js
tinymce.init({
@@ -65,6 +67,6 @@ tinymce.init({
});
```
What is this good for?
**What is this good for?**
The CSS file in this setting should be the very CSS file that controls the looks (or "layout") of all your pages! So, let's say you include a file "myLayout.css" in all your pages in order to control your site's global looks then this file must be set as your content_css option, because then the contents in the editor will also have the looks of your site.
The CSS file in this setting should be the very CSS file that controls the looks (or "layout") of all your pages! So, let's say you include a file `"myLayout.css"` in all your pages, in order to control your site's global looks then this file must be set as your `content_css` option, because then the content in the editor's editable area will also have your site's style.
@@ -2,7 +2,9 @@
This option allows you to set a custom content security policy for the editor's iframe contents.
An example of this setting is as follows:
**Type:** `String`
**Example:**
```js
tinymce.init({
+3 -1
View File
@@ -4,7 +4,9 @@ This option allows you to set custom CSS styles as a string that will be injecte
These styles are useful for previewing content as it will appear outside the editor. Since these styles are not saved with the content, it is important that they match the styles in the location that the content will appear.
An example of this setting is as follows:
**Type:** `Object`
**Example:**
```js
tinymce.init({
@@ -1,6 +1,12 @@
## convert_fonts_to_spans
If you set this option to true, TinyMCE will convert all font elements to span elements and generate span elements instead of font elements. This option should be used in order to get more W3C compatible code, since font elements are deprecated.
If you set this option to `true`, TinyMCE will convert all `font` elements to `span` elements and generate `span` elements instead of `font` elements. This option should be used in order to get more W3C compatible code, since font elements are deprecated.
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`
```js
tinymce.init({
@@ -8,5 +14,3 @@ tinymce.init({
convert_fonts_to_spans : false
});
```
This is set to **true** by default.
+6 -2
View File
@@ -1,8 +1,12 @@
## convert_urls
This option enables you to control whether TinyMCE is to be clever and restore URLs to their original values. URLs are automatically converted (messed up) by default because the built-in browser logic works this way. There is no way to get the real URL unless you store it away. If you set this option to false it will try to keep these URLs intact. This option is set to true by default, which means URLs will be forced to be either absolute or relative depending on the state of [relative_urls](#relative_urls).
This option enables you to control whether TinyMCE is to be clever and restore URLs to their original values. URLs are automatically converted (messed up) by default because the browser's built-in logic works this way. There is no way to get the real URL unless you store it away. If you set this option to `false` it will try to keep these URLs intact. This option is set to `true` by default, which means URLs will be forced to be either absolute or relative depending on the state of [relative_urls](#relative_urls).
Example of usage of the convert_urls option:
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`
```js
tinymce.init({
+3 -1
View File
@@ -4,7 +4,9 @@ This option enables you to specify non-HTML elements for the editor.
This way you can handle non-HTML elements inside an HTML editor. You can prefix the element names with a `~` if you want the element to behave as a `span` element and not a `div` element.
The default behavior is to behave like div elements.
**Type:** `String`
**Default Value:** `div` elements
```js
tinyMCE.init({
@@ -1,9 +1,13 @@
## custom_undo_redo_levels
This option should contain the number of undo levels to keep in memory. By default is set to use an unlimited number of undo levels. But this steals lots of memory so for low end systems a value of 10 may be better.
This option should contain the number of undo levels to keep in memory. By default is set to use an unlimited number of undo levels. But this **steals lots of memory**, so for low end systems a value of 10 may be better.
Example of usage of the custom_undo_redo_levels option:
**Type:** `Number`
**Default Value:** `unlimited`
**Example:**
```js
tinymce.init({
+2 -4
View File
@@ -1,6 +1,6 @@
## directionality
This option allows you to set the base direction of directionally neutral text (i.e., text that doesn't have inherent directionality as defined in Unicode) within the editor. This is similar to the use of the "dir" attribute when using content editable elements by themselves.
This option allows you to set the base direction of directionally neutral text (i.e., text that doesn't have inherent directionality as defined in Unicode) within the editor. This is similar to the use of the `"dir"` attribute when using content editable elements by themselves.
**Type:** `String`
@@ -10,11 +10,9 @@ This option allows you to set the base direction of directionally neutral text (
**Example:**
In this example we will set the editor language to `Chinese (China)` and the text direction to right-to-left.
```js
tinymce.init({
selector: "textarea", // change this value according to your html
directionality : 'ltr'
directionality : "ltr"
});
```
+6 -2
View File
@@ -1,8 +1,12 @@
## document_base_url
This option specifies the base URL for all relative URLs in the document. The default value is the directory of the current document. If a value is provided, it must specify a directory (not a document) and must end with a "/". This option also interacts with the [relative_urls](#relative_urls), [remove_script_host](#remove_script_host), and [convert_urls](#convert_urls) options to determine whether TinyMCE returns relative or absolute URLs. The FAQ contains a thorough description and an example page of working with relative/absolute URLs.
This option specifies the base URL for all relative URLs in the document. The default value is the directory of the current document. If a value is provided, it must specify a directory (not a document) and must end with a `/`.
Example of usage of the document_base_url option:
This option also interacts with the [relative_urls](#relative_urls), [remove_script_host](#remove_script_host), and [convert_urls](#convert_urls) options to determine whether TinyMCE returns relative or absolute URLs. The [FAQ]({{ site.baseurl }}/getting-started/getting-support/) contains a thorough description and examples of working with relative and absolute URLs.
**Type:** `String`
**Example:**
```js
tinymce.init({
+9 -1
View File
@@ -1,6 +1,14 @@
## element_format
This option controls whether elements are output in the HTML or XHTML mode. "**xhtml**" is the default state for this option. This means that for example `<br />` will be `<br>` if you set this option to "**html**".
This option controls whether elements are output in the HTML or XHTML mode. `xhtml` is the default state for this option. This means that for example `<br />` will be `<br>` if you set this option to `html`.
**Type:** `String`
**Default Value:** `xhtml`
**Possible Values:** `xhtml`, `html`
**Example:**
```js
// Output elements in HTML style
+7 -1
View File
@@ -2,7 +2,13 @@
This option allows you to disable the element path within the status bar at the bottom of the editor.
An example of this setting is as follows:
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
+7 -3
View File
@@ -1,12 +1,16 @@
## encoding
This option allows you to get XML escaped content out of TinyMCE. By setting this option to "xml", posted content will be converted to an XML string escaping characters such as <, >, ", and & to <, >, ", and &. This option is disabled by default.
This option allows you to get XML escaped content out of TinyMCE. By setting this option to `xml`, posted content will be converted to an XML string escaping characters such as <, >, ", and & to <, >, ", and &.
An example of this setting is as follows:
This option is disabled by default.
**Type:** `String`
**Example:**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
encoding: 'xml'
encoding: "xml"
});
```
@@ -2,7 +2,13 @@
This option allows you to to split the current container block element if the enter key is pressed inside an empty inner block element.
An example of this setting is as follows:
**Type:** `Boolean`
**Default Value:** `false` // confirmation required
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
+3 -1
View File
@@ -4,7 +4,9 @@ This option contains a comma separated list of entity names that is used instead
The base entities `<` `>` `&` `'` and `"` will always be entity encoded into their named equivalents. Though `'` and `"` will only be encoded within attribute values and `<` `>` will only be encoded within text nodes. This is correct according to the HTML and XML specifications.
Example of usage of the entities option:
**Type:** `String`
**Example:**
```js
tinyMCE.init({
+5 -1
View File
@@ -2,7 +2,7 @@
This option controls how entities/characters get processed by TinyMCE. The value can be set as shown in Encoding Types below. You can also mix named and numeric by setting this to "named+numeric" this way it will produce entity names of the ones found in the configured entities and numeric entities for other entities.
The base entities < > & ' and " will always be entity encoded into their named equivalents. Though ' and " will only be encoded within attribute values and < > will only be encoded within text nodes. This is correct according too the HTML and XML specs.
The base entities `<` `>` `&` `'` and `"` will always be entity encoded into their named equivalents. Though `'` and `"` will only be encoded within attribute values and `<` `>` will only be encoded within text nodes. This is correct according too the HTML and XML specs.
### Encoding Types
@@ -12,6 +12,10 @@ The base entities < > & ' and " will always be entity encoded into their named e
| numeric | Characters will be converted into numeric entities. For example, a non-breaking space would be encoded as &#160;. |
| raw |All characters will be stored in non-entity form except these XML default entities: &amp; &lt; &gt; &quot; |
**Type:** `String`
**Example:**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
+6 -2
View File
@@ -1,8 +1,12 @@
## event_root
Use this option enables you to specify a CSS selector for an element to be used as the event root in inline mode by default all events gets bound to the editable area but in some implementations where the DOM gets modified you want to bind these events to a container then delegate the events down to the right editor based on the element ID.
This option enables you to specify a CSS selector for an element to be used as the event root when the editor is in `inline` mode.
Example
By default all events gets bound to the editable area. But in some implementations where the DOM gets modified you want to bind these events to a container and then delegate the events down to the right editor, based on the element ID.
**Type:** `String`
**Example:**
```js
tinymce.init({
@@ -4,7 +4,11 @@ This option is very similar to [`valid_elements`]({{ site.baseurl }}/editor-conf
When adding a new attribute by specifying an existing element rule (e.g. `img`), the entire rule for that element is over-ridden so be sure to include all valid attributes not just the one you wish to add. See [`valid_elements`]({{ site.baseurl }}/editor-configuration-settings/content-filtering/#valid_elements) for default rules.
The below example replaces the current `img` rule (including the global element rules)
The below example replaces the current `img` rule (including the global element rules).
**Type:**
**Example:**
```js
tinymce.init({
+3 -1
View File
@@ -6,7 +6,9 @@ TinyMCE will attempt to load these as per regular plugins when starting up. This
This value should be set as a JavaScript object that contains a property for each TinyMCE plugin to be loaded. This property should be named after the plugin and should have a value that contains the location that the plugin that will be loaded from.
An example of this setting is as follows:
**Type:** `Object`
**Example:**
```js
tinymce.init({
@@ -1,12 +1,16 @@
## file_browser_callback_types
This option enables you to specify what types of file pickers you need by a space or comma separated list of type names. There are currently three valid types file, image and media.
This option enables you to specify what types of file pickers you need by using a space or comma separated list of type names. There are currently three valid types: `file`, `image` and `media`.
Example of usage
**Type:** `String`
**Possible Values:** `file`, `image`, `media`
**Example:**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
file_browser_callback_types: 'file image media'
file_browser_callback_types: "file image media"
});
```
@@ -1,10 +1,14 @@
## file_browser_callback
This option enables you to add your own file browser/image browser to TinyMCE. If this option is set with a value a browse button will appear in different dialogues such as "insert/edit link" or "insert/edit image". If this option hasn't got a value set (or equals to false or null) the dialogues in question won't show any browse button.
This option enables you to add your own file browser/image browser to TinyMCE.
If this option is set with a value a browse button will appear in different dialogues such as "insert/edit link" or "insert/edit image". If this option hasn't got a value set (or equals to false or null) the dialogues in question won't show any browse button.
This function is executed each time a user clicks on the "browse" buttons in various dialogues. The format of this callback function is: fileBrowser(field_name, url, type, win) where field_name is the id/name of the form element that the browser should insert its URL into. The url parameter contains the URL value that is currently inside the field. The type parameter contains what type of browser to present; this value can be file, image or flash depending on what dialogue is calling the function. The win parameter contains a reference to the dialog/window that executes the function.
Example of usage of the file_browser_callback option:
**Type:** `JavaScript Function`
**Example:**
```js
tinymce.init({
@@ -2,7 +2,9 @@
This option enables you add your own file picker for various dialog fields. This replaces the old [file_browser_callback]({{ site.baseurl }}/editor-configuration-settings/file-and-image-upload/#file_browser_callback). This new callback option has the ability to update meta data inside the dialogs.
Example of usage of the file_picker_callback option:
**Type:** `JavaScript Function`
**Example:**
```js
tinymce.init({
+7 -3
View File
@@ -1,12 +1,16 @@
## file_picker_types
This option enables you to specify what types of file pickers you need by a space or comma separated list of type names. There are currently three valid types file, image and media.
This option enables you to specify what types of file pickers you need by a space or comma separated list of type names. There are currently three valid types: `file`, `image` and `media`.
Example of usage
**Type:** `String`
**Possible Values:** `file`, `image`, `media`
**Example:**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
file_picker_types: 'file image media'
file_picker_types: "file image media"
});
```
+10 -4
View File
@@ -1,10 +1,10 @@
## fix_list_elements
This option enables you to specify that list elements UL/OL is to be converted to valid XHTML. This option is disabled by default since it causes some glitches with a few browsers.
This option enables you to specify that list elements (`ul`, `ol`) should be converted to valid XHTML. This option is disabled by default since it causes some glitches with a few browsers.
This invalid list:
```html
> ```html
<ol>
<li>a</li>
<ol>
@@ -17,7 +17,7 @@ This invalid list:
Gets converted into this valid list:
```html
> ```html
<ol>
<li>a
<ol>
@@ -29,7 +29,13 @@ Gets converted into this valid list:
</ol>
```
Example of usage of the fix_list_elements option:
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
@@ -1,8 +1,10 @@
## fixed_toolbar_container
Use this option to render the inline toolbar into a fixed positioned HTML element for example a top positioned toolbar. This option takes a CSS 3 selector for example "#mytoolbar" and renders any inline toolbars into this element.
Use this option to render the inline toolbar into a fixed positioned HTML element for example a top positioned toolbar. This option takes a CSS 3 selector for example `"#mytoolbar"` and renders any inline toolbars into this element.
Example
**Type:** `String`
**Example::**
```js
tinymce.init({
+24 -27
View File
@@ -1,8 +1,30 @@
## font_formats
This option should contain a semicolon separated list of font titles and font families separated by =. The titles are the ones that get presented to the user in the fonts drop down list and the font family name is the string that gets inserted into the font face or fontFamily CSS style.
This option lets you control the font families presented to the user in the fronts drop down list.
Example of usage of the font_formats option:
This option should contain a semicolon separated list of font titles and font families separated by `=`. The titles are the ones that get presented to the user in the fonts drop down list and the font family name is the string that gets inserted into the font face or `font-family` CSS style.
**Type:** `String`
**Default Value:** "Andale Mono=andale mono,times;"+
"Arial=arial,helvetica,sans-serif;"+
"Arial Black=arial black,avant garde;"+
"Book Antiqua=book antiqua,palatino;"+
"Comic Sans MS=comic sans ms,sans-serif;"+
"Courier New=courier new,courier;"+
"Georgia=georgia,palatino;"+
"Helvetica=helvetica;"+
"Impact=impact,chicago;"+
"Symbol=symbol;"+
"Tahoma=tahoma,arial,helvetica,sans-serif;"+
"Terminal=terminal,monaco;"+
"Times New Roman=times new roman,times;"+
"Trebuchet MS=trebuchet ms,geneva;"+
"Verdana=verdana,geneva;"+
"Webdings=webdings;"+
"Wingdings=wingdings,zapf dingbats"
**Example:**
```js
tinymce.init({
@@ -10,28 +32,3 @@ tinymce.init({
font_formats: "Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;AkrutiKndPadmini=Akpdmi-n"
});
```
The default value is:
```js
tinymce.init({
selector: "textarea", // change this value according to your html
font_formats: "Andale Mono=andale mono,times;"+
"Arial=arial,helvetica,sans-serif;"+
"Arial Black=arial black,avant garde;"+
"Book Antiqua=book antiqua,palatino;"+
"Comic Sans MS=comic sans ms,sans-serif;"+
"Courier New=courier new,courier;"+
"Georgia=georgia,palatino;"+
"Helvetica=helvetica;"+
"Impact=impact,chicago;"+
"Symbol=symbol;"+
"Tahoma=tahoma,arial,helvetica,sans-serif;"+
"Terminal=terminal,monaco;"+
"Times New Roman=times new roman,times;"+
"Trebuchet MS=trebuchet ms,geneva;"+
"Verdana=verdana,geneva;"+
"Webdings=webdings;"+
"Wingdings=wingdings,zapf dingbats"
});
```
+6 -2
View File
@@ -1,8 +1,12 @@
## fontsize_formats
This option allows you to override the font sizes displayed in the font size select box. It's a space/comma separated list of font sizes and defaults to "8pt 10pt 12pt 14pt 18pt 24pt 36pt".
This option allows you to override the font sizes displayed in the font size select box using a space or comma separated list of font sizes
Example:
**Type:** `String`
**Default Value:** `"8pt 10pt 12pt 14pt 18pt 24pt 36pt"`
**Example:**
```js
tinymce.init({
@@ -1,6 +1,14 @@
## force_hex_style_colors
This option enables you to control TinyMCE to force the color format to use hexadecimal instead of rgb strings. It converts for example "color: rgb(255, 255, 0)" to "#FFFF00". This option is set to true by default since otherwise IE and Firefox would differ in this behavior.
This option enables you to control TinyMCE to force the color format to use hexadecimal instead of rgb strings. For example, it converts `color: rgb(255, 255, 0)` to `#FFFF00`. This option is set to `true` by default since IE and Firefox would otherwise differ in this behavior.
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
+8 -2
View File
@@ -1,8 +1,14 @@
## force_p_newlines (deprecated)
**This option is deprecated as of 3.5 use `forced_root_block: false` instead to control p vs br behavior.**
**This option is deprecated as of version 3.5 use [`forced_root_block: false`](#forced_root_block) instead to control `p` vs `br` behavior.**
This option enables you to disable/enable the creation of paragraphs on return/enter in Mozilla/Firefox. The default value of this option is true.
This option enables you to disable/enable the creation of paragraphs on return/enter in Mozilla/Firefox.
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`
```js
tinymce.init({
@@ -2,6 +2,10 @@
This option enables you specify attributes for the [forced_root_block](#forced_root_block).
**Type:** `Object`
**Example:**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
+8 -4
View File
@@ -1,14 +1,18 @@
## forced_root_block
This option enables you to make sure that any non block elements or text nodes are wrapped in block elements. For example `<strong>something</strong>` will result in output like: `<p><strong>something</strong></p>`. This option is enabled by default as of 3.0a1.
This option enables you to make sure that any non block elements or text nodes are wrapped in block elements. For example `<strong>something</strong>` will result in output like: `<p><strong>something</strong></p>`. This option is enabled by default as of version 3.0a1.
**If you set this option to false it will never produce P tags on enter or automatically it will instead produce BR elements and Shift+Enter will produce a P.**
If you set this option to `false` it will never produce `p` tags on enter, or, automatically it will instead produce `br` elements and Shift+Enter will produce a `p`.
**Note that not using P elements as root block can severly cripple the functionality of the editor.**
> Note that not using `p` elements as root block can severely cripple the functionality of the editor.
**Type:** `String`
**Example:**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
forced_root_block : 'p'
forced_root_block : "p"
});
```
+33 -25
View File
@@ -1,18 +1,18 @@
## formats
This option enables you to override and add custom formats. A format is the style that get applied when you press the bold button inside the editor. TinyMCE is equipped with a text formatter engine that enables you to specify exactly what it should produce when the user clicks the bold button.
This option enables you to override and add custom "formats" to the editor.
A format is the style that get applied to text when you press, for example, the bold button inside the editor. TinyMCE is equipped with a text formatter engine that enables you to specify exactly what it should produce when the user clicks the bold button (in this example).
Check out the [custom formats example](http://www.tinymce.com/tryit/custom_formats.php) for a demonstration of this option.
### Style merging
Similar elements and styles will be merged by default to reduce the output HTML size. So for example if you select a word and select a font size and font face for it. It will merge these to styles into one span element instead of one span for each format type.
Similar elements and styles will be merged by default to reduce the output HTML size. So for example, if you select a word and select a font size and font face for it, it will merge these two styles into one `span` element instead of one `span` for **each format type**.
### Built in formats
TinyMCE has some built in formats that you can override.
These are:
TinyMCE has some built in formats that you can override. These are:
* alignleft
* aligncenter
@@ -38,7 +38,7 @@ These are:
* dt, dd
* samp
Some built in formats fontsize, fontname, forecolor, hilitecolor uses a variable in their definition named %value. This one gets replaced with the user selected item such as a color value. Check the variable substitution section below for details.
Some built in formats `fontsize`, `fontname`, `forecolor`, `hilitecolor` uses a variable in their definition named `%value`. This one gets replaced with the user selected item such as a color value. Check the variable substitution section below for details.
### Format parameters
@@ -57,24 +57,28 @@ Each format has a set of parameters that you can specify.
### Example of usage of the formats option
This example overrides some of the built in formats and tells TinyMCE to apply classes instead of inline styles. It also includes a custom format that produced h1 elements with a title attribute and a red css style.
This example overrides some of the built in formats and tells TinyMCE to apply classes instead of inline styles. It also includes a custom format that produced `h1` elements with a title attribute and a `red` css style.
**Type:** `Object`
**Example:**
```js
// Output elements in HTML style
tinymce.init({
selector: "textarea", // change this value according to your html
formats : {
alignleft : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'left'},
aligncenter : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'center'},
alignright : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'right'},
alignfull : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'full'},
bold : {inline : 'span', 'classes' : 'bold'},
italic : {inline : 'span', 'classes' : 'italic'},
underline : {inline : 'span', 'classes' : 'underline', exact : true},
strikethrough : {inline : 'del'},
forecolor : {inline : 'span', classes : 'forecolor', styles : {color : '%value'}},
hilitecolor : {inline : 'span', classes : 'hilitecolor', styles : {backgroundColor : '%value'}},
custom_format : {block : 'h1', attributes : {title : "Header"}, styles : {color : red}}
formats: {
alignleft: {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'left'},
aligncenter: {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'center'},
alignright: {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'right'},
alignfull: {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'full'},
bold: {inline : 'span', 'classes' : 'bold'},
italic: {inline : 'span', 'classes' : 'italic'},
underline: {inline : 'span', 'classes' : 'underline', exact : true},
strikethrough: {inline : 'del'},
forecolor: {inline : 'span', classes : 'forecolor', styles : {color : '%value'}},
hilitecolor: {inline : 'span', classes : 'hilitecolor', styles : {backgroundColor : '%value'}},
custom_format: {block : 'h1', attributes : {title : "Header"}, styles : {color : red}}
}
});
```
@@ -103,17 +107,21 @@ tinymce.activeEditor.formatter.register('custom_format', {inline : 'span', style
tinymce.activeEditor.formatter.apply('custom_format', {value : 'red'});
```
### Remove format
### Removing a format
The remove format behavior can be modified by setting the `removeformat` see the example below:
It is possible to remove formats via the `removeformat` option.
**Type:** `Array`
**Example:**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
removeformat : [
{selector : 'b,strong,em,i,font,u,strike', remove : 'all', split : true, expand : false, block_expand : true, deep : true},
{selector : 'span', attributes : ['style', 'class'], remove : 'empty', split : true, expand : false, deep : true},
{selector : '*', attributes : ['style', 'class'], split : false, expand : false, deep : true}
removeformat: [
{selector: 'b,strong,em,i,font,u,strike', remove : 'all', split : true, expand : false, block_expand: true, deep : true},
{selector: 'span', attributes : ['style', 'class'], remove : 'empty', split : true, expand : false, deep : true},
{selector: '*', attributes : ['style', 'class'], split : false, expand : false, deep : true}
]
});
```
+8 -2
View File
@@ -1,8 +1,14 @@
## gecko_spellcheck
This option allows you to disable gecko based browsers' internal spellchecker from being used in TinyMCE.
This option allows you to disable [Gecko](https://en.wikipedia.org/wiki/Gecko_(software)) based browsers' internal spellchecker from being used in TinyMCE.
An example of this setting is as follows:
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
+5 -1
View File
@@ -1,9 +1,13 @@
## height
Set the height of the editor in pixels.
Set the height of the editable area in pixels.
Note that this sets the height of the editable area only. It does not include the space required for the menubar, toolbars or status bar.
**Type:** `Number`
**Example:**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
+7 -1
View File
@@ -4,7 +4,13 @@ This option gives you the ability to disable the auto generation of hidden input
This can be disabled if you don't need these controls.
Example
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
@@ -2,7 +2,9 @@
This option lets you specify a `basepath` to prepend to urls returned from the configured [`images_upload_url`](images-uploads-url.md) page.
Example of usage of the images_upload_base_path option:
**Type:** `String`
**Example:**
```js
tinymce.init({
@@ -1,12 +1,18 @@
## images_upload_credentials
This option lets you specify if calls to the configured [`images_upload_url`](images-upload-url) should pass along credentials like cookies etc cross domain. This is disabled by default.
This option lets you specify if calls to the configured [`images_upload_url`](images-upload-url) should pass along credentials like cookies etc cross domain.
Example of usage of the [images_upload_credentials] option:
**Type:** `Boolean`
**Default Value:** `false`
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
...
images_upload_credentials: true
selector: "textarea", // change this value according to your html
images_upload_credentials: true
});
```
@@ -4,9 +4,11 @@ This option allows you to specify a function that will be used to replace TinyMC
The upload handler function takes three arguments: `blobInfo`, a `success` callback and a `failure` callback. When this option is not set, TinyMCE utilizes an XMLHttpRequest to upload images one at a time to the server, and calls the success callback with the location of the remote image.
Please note that when using this option, no other image uploader options are necessary. Additionally, if you would like TinyMCE to replace the `<image>` tag's src attribute with the remote location, please use the success callback defined in the image_upload_handler function with the returned JSON object's location property.
Please note that when using this option, no other image uploader options are necessary. Additionally, if you would like TinyMCE to replace the `<image>` tag's `src` attribute with the remote location, please use the success callback defined in the `image_upload_handler` function with the returned JSON object's location property.
An example of this setup is below:
**Type:** `JavaScript Function`
**Example:**
```js
tinymce.init({
@@ -22,15 +24,15 @@ tinymce.init({
var json;
if (xhr.status != 200) {
failure("HTTP Error: " + xhr.status);
return;
failure("HTTP Error: " + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != "string") {
failure("Invalid JSON: " + xhr.responseText);
return;
failure("Invalid JSON: " + xhr.responseText);
return;
}
success(json.location);
@@ -1,8 +1,10 @@
## images_upload_url
This option lets you specify a URL to where you want images to be uploaded when you call `editor.uploadImages`.
This option lets you specify a URL where you want images to be uploaded when you call `editor.uploadImages`.
Example of usage of the images_upload_url option:
**Type:** `String`
**Example:**
```js
tinymce.init({
+6
View File
@@ -4,6 +4,12 @@ This option allows specification of the indentation level for indent/outdent but
This defaults to 30px but can be any value.
**Type:** `String`
**Default Value:** `30px`
**Example:**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
@@ -1,8 +1,10 @@
## init_instance_callback
This option should contain a function name to be executed each time a editor instance is initialized. The format of this function is: initInstance(editor) where editor is the editor instance object reference.
This option should contain a function name to be executed each time a editor instance is initialized. The format of this function is `initInstance(editor)` where `editor` is the editor instance object reference.
Example of usage of the init_instance_callback option:
**Type:** `JavaScript Function`
**Example:**
```js
tinymce.init({
+7 -3
View File
@@ -3,11 +3,15 @@
This option allows you to specify whether TinyMCE should work in inline mode.
TinyMCE has two main integration modes - a "traditional" forms based mode and an inline editing mode. The inline editing mode is useful when creating user experiences where you want the editing view of the page to be merged with the reading view of the page. This creates a seamless editing experience and true WYSIWYG behavior. From a technical perspective, in inline mode, the editor does not replace the selected element with it's own iframe, but instead edits the element's content in place instead.
TinyMCE has two main integration modes - a "traditional" forms based mode and an inline editing mode. The inline editing mode is useful when creating user experiences where you want the editing view of the page to be merged with the reading view of the page. This creates a seamless editing experience and true WYSIWYG behavior. Note that when in inline mode, the editor does not replace the selected element with it's own iframe, but instead edits the element's content in-place instead.
This option is set through a boolean value, which by default is false.
**Type:** `Boolean`
An example of this setting is as follows:
**Default Value:** `false`
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
+5 -3
View File
@@ -1,8 +1,10 @@
## invalid_elements
This option should contain a comma separated list of element names to exclude from the content.
This options permits the editor to remove specific elements with TinyMCE executes a cleanup. This option should contain a comma separated list of element names to exclude from the content.
Elements in this list will be removed when TinyMCE executes a cleanup.
**Type:** `String`
**Example:**
```js
tinymce.init({
@@ -11,6 +13,6 @@ tinymce.init({
});
```
Caution: This option doesn't accept attributes in the list, only elements
> Caution: This option doesn't accept attributes in the list, only elements
Also see [valid_elements](#valid_elements) and [extended_valid_elements](#extended_valid_elements) for more configuration options.
+14 -6
View File
@@ -1,24 +1,32 @@
## invalid_styles
This option enables you to restrict the styles that are valid for specific elements. This option takes two formats one string format that is a simple list of global styles to disallow and a more complex object format where you can specify invalid styles for individual elements.
This option enables you to restrict the styles that are valid for specific elements. This option takes two formats: one string format that is a simple list of global styles to disallow, and a more complex object format where you can specify invalid styles for individual elements.
Example simple global classes
### Simple global classes
**Type:** `String`, `Object`
**Example**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
invalid_styles: 'color font-size'
invalid_styles: "color font-size"
});
```
Example of element specific classes
### Element specific classes
**Type:** `String`, `Object`
**Example**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
invalid_styles: {
'*': 'color font-size', // Global invalid styles
'a': 'background' // Link specific invalid styles
"*": "color font-size", // Global invalid styles
"a": "background" // Link specific invalid styles
}
});
```
+8 -2
View File
@@ -1,8 +1,14 @@
## keep_styles
This option enables keeping the current text style when you press enter/return. This feature is enabled by default but can be disabled by setting the value to false.
This option will keep the editor's current text style when a user presses enter/return.
Example of usage of the keep_styles option
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
+5 -3
View File
@@ -1,13 +1,15 @@
##language_url
A simple URL to where the language file to use.
When using the [`language`](#language) option to set the user interface language you may choose to place any language pack(s) in a directory other than the default. If you do this you need to provide a simple URL to where the language file is located. We recommend using a site absolute URL.
We recommend using a site absolute URL, for example:
**Type:** `String`
**Example:**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
language_url : '/languages/fi.js'
language_url : "/languages/fi.js" // site absolute URL
});
```
+6 -4
View File
@@ -1,10 +1,8 @@
## language
This option allows you to specify the language that TinyMCE's user interface will appear in.
This option allows you to specify the language that TinyMCE's user interface will appear in. That is, the toolbar buttons and menu items. By default, TinyMCE will use US English as the language of the interface.
By default, TinyMCE will use US English as the language of the interface.
If you wish to use a language other than english, please follow these steps:
If you wish to use a language other than English, please follow these steps:
1. Download the language pack you wish to use [from here](http://www.tinymce.com/i18n/index.php).
2. Unpack the language file into your `tinymce/js/langs` folder.
@@ -13,6 +11,10 @@ If you wish to use a language other than english, please follow these steps:
Please note, the language code you set in your TinyMCE configuration must match the filename of the language file. If the language file is not found, TinyMCE will not load.
**Type:** `String`
**Default Value:** `en_US`
**Example:**
In this example we will set the editor language to Swedish.
+8 -2
View File
@@ -1,8 +1,12 @@
## max_height
This option allows you to set the maximum height that TinyMCE can stretch to when using the modern theme.
This option allows you to set the maximum height that a user can stretch the entire TinyMCE interface (by grabbing the draggable area in the bottom right of the editor interface) when using the modern theme.
An example of this setting is as follows:
> Note that this behavior is different than the [`autoresize`](/plugins/autoresize) plugin, which controls the resizing of the editable area only, not the entire editor.
**Type:** `Number`
**Example:**
```js
tinymce.init({
@@ -10,3 +14,5 @@ tinymce.init({
max_height: 500
});
```
> Pro tip: if you set the option [`resize`](#resize) to `false` the resize handle will be disabled and a user will not be able to resize the editor (by manual dragging).
+8 -2
View File
@@ -1,8 +1,12 @@
## max_width
This option allows you to set the maximum width that TinyMCE can stretch to when using the modern theme.
This option allows you to set the maximum width that a user can stretch the entire TinyMCE interface (by grabbing the draggable area in the bottom right of the editor interface) when using the modern theme.
An example of this setting is as follows:
> Note that this behavior is different than the [`autoresize`](/plugins/autoresize) plugin, which controls the resizing of the editable area only, not the entire editor.
**Type:** `Number`
**Example:**
```js
tinymce.init({
@@ -10,3 +14,5 @@ tinymce.init({
max_width: 500
});
```
> Pro tip: by default the [`resize`](#resize) handle does not allow horizontal dragging and giving this key a value will not result in an observable behavior.
+8 -2
View File
@@ -2,9 +2,15 @@
This option allows you to specify which menus should appear on TinyMCE's menu bar and the items that should appear within the menus themselves.
To specify the menus that should appear on TinyMCE's menu bar, the menu option should be provided with a javascript object containing a property for each menu. These properties should contain a javascript object themselves with properties "title" and "items". The title property should contain a string with the name of the menu. The items field should contain a space seperated list of the controls that should populate the menu. If you would like to group these menu items, please insert a "|" pipe character between the menu items.
To specify the menus that should appear on TinyMCE's menu bar, the menu option should be provided with a javascript object containing a property for each menu. These properties should contain a javascript object themselves with properties `title` and `items`.
An example of this setting is as follows:
The `title` property should contain a string with the name of the `menu`. The `items` field should contain a space separated list of the controls that should populate the `menu`.
If you would like to group these menu items, please insert a `|` pipe character between the menu items.
**Type:** `Object`
**Example:**
```js
tinymce.init({
+9 -3
View File
@@ -4,7 +4,9 @@ This option allows you to specify which menus should appear and the order that t
To specify the menus that should appear on TinyMCE's menu bar, the menubar option should be provided with a space separated list of menus.
An example of this setting is as follows:
**Type:** `String`
**Example:**
```js
tinymce.init({
@@ -13,9 +15,13 @@ tinymce.init({
});
```
To disable the menu bar, the menubar option should be provided a boolean value of false.
To disable the menu bar, the menubar option should be provided a boolean value of `false`.
An example of a disabled menubar is as follows:
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`
```js
tinymce.init({
+8 -2
View File
@@ -1,8 +1,12 @@
## min_height
This option allows you to set the minimum height that TinyMCE can stretch to when using the modern theme.
This option allows you to set the minimum height that a user can stretch the entire TinyMCE interface (by grabbing the draggable area in the bottom right of the editor interface) when using the modern theme.
An example of this setting is as follows:
> Note that this behavior is different than the [`autoresize`](/plugins/autoresize) plugin, which controls the resizing of the editable area only, not the entire editor.
**Type:** `Number`
**Example:**
```js
tinymce.init({
@@ -10,3 +14,5 @@ tinymce.init({
min_height: 100
});
```
> Pro tip: if you set the option [`resize`](#resize) to `false` the resize handle will be disabled and a user will not be able to resize the editor (by manual dragging).
+8 -2
View File
@@ -1,8 +1,12 @@
## min_width
This option allows you to set the minimum width that TinyMCE can stretch to when using the modern theme.
This option allows you to set the minimum width that a user can stretch the entire TinyMCE interface (by grabbing the draggable area in the bottom right of the editor interface) when using the modern theme.
An example of this setting is as follows:
> Note that this behavior is different than the [`autoresize`](/plugins/autoresize) plugin, which controls the resizing of the editable area only, not the entire editor.
**Type:** `Number`
**Example:**
```js
tinymce.init({
@@ -10,3 +14,5 @@ tinymce.init({
min_width: 400
});
```
> Pro tip: by default the [`resize`](#resize) handle does not allow horizontal dragging and giving this key a value will not result in an observable behavior.
+6 -2
View File
@@ -2,11 +2,15 @@
This option makes the editable area behave like a `<pre>` tag, and adds a horizontal scroll instead of wrapping text.
**Type:** `Boolean`
**Default Value:** `false`
**Possible Values:** `true`, `false`
```js
tinymce.init({
selector: "textarea", // change this value according to your html
nowrap : true
});
```
Boolean value, default **false**.
+18 -2
View File
@@ -2,7 +2,15 @@
This options allows you to turn on/off the resizing handles on images, tables or media objects. This option is enabled by default and allows you to resize table and images. You can also specify a CSS3 selector of what you want to enable resizing on.
Disable all resizing of images/tables
### Disable all resizing of images/tables
**Type:** `Boolean`, `String`
**Default Value:** `true`
**Possible Values:** `true`, `false`, `img`
**Example:**
```js
tinymce.init({
@@ -11,7 +19,15 @@ tinymce.init({
});
```
Enable resizing on images only
### Enable resizing on images only
**Type:** `Boolean`, `String`
**Default Value:** `true`
**Possible Values:** `true`, `false`, `img`
**Example:**
```js
tinymce.init({
+7 -7
View File
@@ -1,14 +1,10 @@
## plugins
This option allows you to specify which plugins TinyMCE will attempt to load when starting up.
This option allows you to specify which plugins TinyMCE will attempt to load when starting up. By default, TinyMCE will not load any plugins.
By default, TinyMCE will not load any plugins.
**Type:** `String`
[Check this documentation page for a list of available plugins]({{ site.baseurl }}/plugins/).
This should be a space separated string.
An example of this setting is as follows:
**Example:**
```js
tinymce.init({
@@ -16,3 +12,7 @@ tinymce.init({
plugins : 'advlist autolink link image lists charmap print preview'
});
```
> This should be a space separated string.
[Check this documentation page for a list of available plugins]({{ site.baseurl }}/plugins/).
+8 -2
View File
@@ -1,8 +1,14 @@
## preview_styles
The enables you to turn of the preview of styles in format/style listboxes. It's turned on by default.
This option enables you to turn off the preview of styles in format/style listboxes.
Example of usage
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`
**Example:**
```js
tinyMCE.init({
+4 -2
View File
@@ -1,10 +1,12 @@
## protect
This configuration option enables you to control what contents should be protected from editing while it gets passed into the editor. This could for example be control codes in the HTML. It's recommended not to use inline control contents since it breaks the wisiwyg editing concept but sometimes they can't be avoided.
This configuration option enables you to control what contents should be protected from editing while it gets passed into the editor. This could, for example, be control codes in the HTML. It's recommended not to use inline control contents since it breaks the WYSIWYG editing concept, but sometimes they can't be avoided.
The option takes an array of regexps that it will match the contents against and these will be invisible while editing.
Example of usage:
**Type:** `Array`
**Example:**
```js
tinymce.init({
+8 -2
View File
@@ -1,8 +1,14 @@
## relative_urls
If this option is set to true, all URLs returned from the MCFileManager will be relative from the specified [document_base_url](#document_base_url). If it's set to false all URLs will be converted to absolute URLs. This option is set to true by default.
If this option is set to true, all URLs returned from the MCFileManager will be relative from the specified [document_base_url](#document_base_url). If it's set to false all URLs will be converted to absolute URLs.
Example of usage of the relative_urls option:
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
@@ -1,10 +1,14 @@
## remove_script_host
If this option is enabled the protocol and host part of the URLs returned from the MCFileManager will be removed. This option is only used if the [relative_urls](#relative_urls) option is set to false. This option is set to true by default.
If this option is enabled the protocol and host part of the URLs returned from the MCFileManager will be removed. This option is only used if the [relative_urls](#relative_urls) option is set to false.
If disabled, URLs will be returned in this format: `"http://www.example.com/somedir/somefile.htm"` instead of the default format: "/somedir/somefile.htm".
**Type:** `Boolean`
Example of usage of the remove_script_host option:
**Default Value:** `true`
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
@@ -12,3 +16,5 @@ tinymce.init({
remove_script_host: false
});
```
> If disabled, URLs will be returned in this format: `"http://www.example.com/somedir/somefile.htm"` instead of the default format: `"/somedir/somefile.htm"`.
+10 -2
View File
@@ -1,8 +1,16 @@
## remove_trailing_brs
This option allows you to disable TinyMCE's default behaviour of removing <br> tags at the end of block elements. Gecko and WebKit browsers inject these elements to make it possible to place the caret in empty blocks. This logic attempts to remove these elements while also keeping tags that were intentionally placed by the user.
This option allows you to disable TinyMCE's default behavior of removing `<br>` tags at the end of block elements.
An example of this setting is as follows:
[Gecko](https://en.wikipedia.org/wiki/Gecko_(software)) and [WebKit](https://en.wikipedia.org/wiki/WebKit) browsers inject these elements to make it possible to place the caret in empty blocks. This logic attempts to remove these elements while also keeping tags that were intentionally placed by the user.
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
+5 -3
View File
@@ -1,12 +1,14 @@
## removed_menuitems
This option allows you to remove items from TinyMCE's drop down menus.
This option allows you to remove items from TinyMCE's drop down menus. This is useful if you are using the [menubar](#menubar) option to set your menus rather than the more specific [menu](#menu) option.
An example of this setting is as follows:
**Type:** `String`
**Example:**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
removed_menuitems: "undo,redo"
removed_menuitems: "undo, redo"
});
```
+19 -3
View File
@@ -1,8 +1,16 @@
## resize
This option gives you the ability to disable the resize handle or set it to resize both horizontal and vertically. The option can be true, false or the string "both". False disables the resize, true enables vertical resizing only, "both" makes it possible to resize in both directions horizontal and vertical.
This option gives you the ability to disable the resize handle or set it to resize both horizontal and vertically. The option can be true, false or the string `"both"`. `False` disables the resize, `true` enables vertical resizing only, `"both"` makes it possible to resize in both directions horizontal and vertical.
Example of disabling the resize
### Disabling the resize
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`, `"both"`
**Example:**
```js
tinymce.init({
@@ -11,7 +19,15 @@ tinymce.init({
});
```
Example of enabling both vertical and horizontal resize
### Enabling both vertical and horizontal resize
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`, `"both"`
**Example:**
```js
tinymce.init({
+9 -3
View File
@@ -1,12 +1,18 @@
## schema
The schema option enables you to switch between the HTML4 and HTML5 schema. This controls the valid elements and attributes that can be placed in the HTML.
The `schema` option enables you to switch between the HTML4 and HTML5 schema. This controls the valid elements and attributes that can be placed in the HTML. This value can either be the default `html5`, `html4` or `html5-strict`.
This value can either be the default html5, html4 or html5-strict. The html5 schema is the full HTML5 specification including the of the older HTML4 elements for compatibility. The html5-strict will only allow the elements that are in the current HTML5 specification excluding things that where removed. The html4 schema includes the full html4 transitional specification.
The html5 schema is the full HTML5 specification including the of the older HTML4 elements for compatibility. The html5-strict will only allow the elements that are in the current HTML5 specification excluding things that where removed. The html4 schema includes the full html4 transitional specification.
Also note that all event attributes are excluded by default since it's a bad practice to use inline script handles like "onclick". You can manually add extra elements and attributes using the [extended_valid_elements](#extended_valid_elements) option.
Example of usage
**Type:** `String`
**Default Value:** `html5`
**Possible Values:** `html5`, `html4`, `html5-strict`
**Example:**
```js
tinymce.init({
+15 -3
View File
@@ -4,14 +4,22 @@ This option allows you to specify a CSS selector for the areas that TinyMCE shou
When using this option in TinyMCE's regular editing mode, the element will be replaced with an `iframe` that TinyMCE will perform all operations within.
An example of this setting that will replace all `textarea` elements on the page is as follows:
### Replace all textarea elements on the page
**Type:** `String`
**Example:**
```js
tinymce.init({
selector: "textarea" // change this value according to your html});
```
An example of this setting that will replace a `textarea` element with id "editable" on the page is as follows:
### Replace a textarea element with id "editable"
**Type:** `String`
**Example:**
```js
tinymce.init({
@@ -21,7 +29,11 @@ tinymce.init({
When using this option in TinyMCE's inline editing mode, the selector can be used on any block element and will edit the content in place instead of replacing the element with an `iframe`.
An example of this setting being used in inline editing mode on a div element with id "editable" is as follows:
### Inline editing mode on a `div` element with `id` `"editable"`
**Type:** `String`
**Example:**
```js
tinymce.init({
+4 -2
View File
@@ -2,11 +2,13 @@
This option allows you to specify an event that will be executed before the TinyMCE editor instance is rendered.
To specify a setup event, please provide the setup option with a javascript function. This function should have one argument, which is a reference to the editor that is being set up.
To specify a setup event, please provide the `setup` option with a javascript function. This function should have one argument, which is a reference to the editor that is being set up.
A common use case for this setting is to add editor events to TinyMCE. For instance, if you would like to add a click event to TinyMCE, you would add it through the setup configuration setting.
An example of this setting is as follows:
**Type:** `Javascript Function`
**Example:**
```js
tinymce.init({
+5 -3
View File
@@ -1,12 +1,14 @@
## skin_url
This option enables you to specify location of the current skin. Enables you to load TinyMCE from one URL, for example a CDN, then load a local skin on the current server.
If you are using TinyMCE skins, this option enables you to specify the location of the skin file. This is useful if you are loading TinyMCE from one URL, for example a CDN, while loading a skin on, say, a local server.
Example of usage
**Type:** `String`
**Example:**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
skin_url: '/css/mytinymceskin'
skin_url: "/css/mytinymceskin"
});
```
+2
View File
@@ -2,6 +2,8 @@
This option allows you to specify the skin that TinyMCE should use. The default skin included with TinyMCE is named "lightgray".
**Type:** `String`
The name of the skin should match the name of the folder within the skins directory of TinyMCE. If the specified skin is not found, TinyMCE will not load.
```js
+7 -3
View File
@@ -1,10 +1,14 @@
## statusbar
This option allows you to specify whether or not TinyMCE should display the statusbar at the bottom of the editor.
This option allows you to specify whether or not TinyMCE should display the status bar at the bottom of the editor. To disable the status bar, the `statusbar` option should be provided with a boolean `false` value.
To disable the statusbar, the statusbar option should be provided with a boolean false value.
**Type:** `Boolean`
An example of this setting is as follows:
**Default Value:** `true`
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
@@ -1,8 +1,10 @@
## style_formats_merge
This option allows you to set whether TinyMCE should append the styles in the style_formats setting to the default style formats or completely replace them.
This option allows you to set whether TinyMCE should append the styles in the [`style_formats`](#style_formats) setting to the default style formats or completely replace them.
An example of this setting is as follows:
**Type:** `Array`
**Example:**
```js
tinymce.init({
+24 -4
View File
@@ -1,9 +1,13 @@
## style_formats
This option enables you to add more advanced style formats for text and other elements to the editor. The value of this option will be rendered as styles in the Formats dropdown.
This option enables you to add more advanced style formats for text and other elements to the editor. The value of this option will be rendered as styles in the `Formats` dropdown.
The format of the option is very similar to the formats option the only difference is the title name that is used for presentation in the drop list.
The format of the option is very similar to the formats option, the only difference is the title name that is used for presentation in the drop list.
**Type:** `Array`
**Example:**
```js
tinymce.init({
@@ -22,6 +26,10 @@ tinymce.init({
Another example, this will add two options to the Formats dropdown, one for aligning an image left and adding a margin, one for putting it on the right side and setting a margin.
**Type:** `Array`
**Example:**
```js
tinymce.init({})
selector: "textarea", // change this value according to your html
@@ -46,9 +54,17 @@ tinymce.init({})
});
```
A live demo of this option can be found in the [Custom formats](#custom_formats) example.
A live demo of this option can be found in the [custom formats](#custom_formats) example.
If you want to merge your styles to the default styles_format, you can use the style_formats_merge settings:
If you want to merge your styles to the default `styles_format`, you can use the `style_formats_merge` settings:
**Type:** `Boolean`
**Default Value:** `false`
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
@@ -62,6 +78,10 @@ tinymce.init({
The default is very similar to the following:
**Type:** `Array`
**Example:**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
+4 -2
View File
@@ -1,12 +1,14 @@
## theme_url
This option enables you to specify location of the current theme. Enables you to load TinyMCE from one URL, for example a CDN, then load a local theme on the current server.
If you are using TinyMCE themes, this option enables you to specify the location of the theme file. This is useful if you are loading TinyMCE from one URL, for example a CDN, while loading a theme on, say, a local server.
**Type:** `String`
**Example:**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
theme_url: '/mytheme/mytheme.js'
theme_url: "/mytheme/mytheme.js"
});
```
+4
View File
@@ -4,6 +4,10 @@ This option allows you to specify the theme that TinyMCE should use. The default
The name of the theme should match the name of the folder within the themes directory of TinyMCE. If the specified theme is not found, TinyMCE will not load.
**Type:** `String`
**Example:**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
+5 -3
View File
@@ -1,10 +1,10 @@
## toolbar&lt;N&gt;
This option allows you to specify the buttons and the order that they will appear on multiple of TinyMCE's toolbars.
This option allows you to specify the buttons and the order that they will appear on instances of multiple toolbars.
Please see the [toolbar](#toolbar) configuration option for details.
**Type:** `String`
An example of this setting is as follows:
**Example:**
```js
tinymce.init({
@@ -13,3 +13,5 @@ tinymce.init({
toolbar2: "alignleft aligncenter alignright"
});
```
Please see the [toolbar](#toolbar) configuration option for details.
+21 -5
View File
@@ -2,9 +2,13 @@
This option allows you to specify the buttons and the order that they will appear on TinyMCE's toolbar.
To specify the controls that should appear on TinyMCE's toolbar, the toolbar option should be provided with a space separated list of toolbar controls. To create groups within this list, please add "|" pipe characters between the groups of controls that you would like to create.
### Grouping toolbar controls
An example of such a grouped toolbar is as follows:
To specify the controls that should appear on TinyMCE's toolbar, the `toolbar` option should be provided with a space separated list of toolbar controls. To create groups within this list, please add `|` pipe characters between the groups of controls that you would like to create.
**Type:** `String`
**Example:** grouped toolbar
```js
tinymce.init({
@@ -13,9 +17,17 @@ tinymce.init({
});
```
To disable the toolbar, the toolbar option should be provided a boolean value of false.
### Disabling the toolbar
An example of a disabled toolbar is as follows:
To disable the toolbar, the toolbar option should be provided a boolean value of `false`.
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
@@ -24,9 +36,13 @@ tinymce.init({
});
```
### Using multiple toolbars
To specify multiple toolbars, the toolbar option should be provided with an array of space separated strings.
An example of multiple toolbars is as follows:
**Type:** `Array`
**Example:**
```js
tinymce.init({
@@ -1,17 +1,19 @@
## urlconverter_callback
This option enables you to add your own URL converter logic. This option should contain a JavaScript function name. The format of this converter function is: URLConverter(url, node, on_save), where:
url = the URL string to convert,
This option enables you to add your own URL converter logic. This option should contain a JavaScript function name.
node = the element that contains the URL that is to be converted (this parameter may be set to null if there is no element for the URL), and
The format of the converter function is: `URLConverter(url, node, on_save)`, where:
on_save is always set to true.
name = the attribute name that is being set.
* url = the URL string to convert,
* node = the element that contains the URL that is to be converted (this parameter may be set to null if there is no element for the URL), and
* on_save is always set to true.
* name = the attribute name that is being set.
This function should return the converted URL as a string. This option is set to an internal TinyMCE function <editor>.[convertURL()](http://www.tinymce.com/wiki.php/API4:method.tinymce.Editor.convertURL) by default. You may call this function from your extension in order to use the built-in convert options.
Example of usage of the urlconverter_callback option:
**Type:** `Javascript Function`
**Example:**
```js
function myCustomURLConverter(url, node, on_save, name) {
+14 -8
View File
@@ -1,17 +1,23 @@
## valid_children
The valid_children enables you to control what child elements can exists within what parent elements. TinyMCE will remove/split any non HTML5 or HTML transitional contents by default. So for example a P can't be a child of another P element. The default value for this option is controlled by the current [schema]({{ site.baseurl }}/editor-configuration-settings/content-filtering/#schema).
The valid_children enables you to control what child elements can exists within specified parent elements.
TinyMCE will remove/split any non HTML5 or HTML transitional contents by default. So for example a `p` can't be a child of another `p` element. The default value for this option is controlled by the current [schema]({{ site.baseurl }}/editor-configuration-settings/content-filtering/#schema).
The syntax for this option is a comma separated list of parents with elements that should be added/removed as valid children for that element. So for example "+body[style]" would add style as a valid child of body.
Control characters:
**Control characters:**
| Name | Summary |
|--------|------------------|
| + | Adds children to the list of valid elements for the specified parent. |
| - |Removes children from the list of valid children for the specified parent. |
| Name | Summary |
|------|------------------|
| + | Adds children to the list of valid elements for the specified parent. |
| - | Removes children from the list of valid children for the specified parent. |
This example shows you how to add style as a valid child of body and remove div as a valid child. It also forces only strong and a and text contents to be valid children of P.
This example shows you how to add style as a valid child of body and remove div as a valid child. It also forces only strong and a and text contents to be valid children of `p`.
**Type:** `String`
**Example:**
```js
tinymce.init({
@@ -20,4 +26,4 @@ tinymce.init({
});
```
This is an option you shouldn't have to fiddle with, the default ruleset for this follows the HTML5 specification and some legacy elements from HTML4 you can switch between these defaults by configuring the schema option.
This is an option you shouldn't have to fiddle with, the default ruleset for this follows the HTML5 specification and some legacy elements from HTML4. You can switch between these defaults by configuring the [`schema`](#scheme) option.
+4 -2
View File
@@ -1,8 +1,10 @@
## valid_classes
This option enables you specify the available styles for each element. This means you can force ordering and only specific styles to be valid within style attribute values. Specify the element name, then it's styles or * for all elements.
This option enables you specify the available styles for each element. This means you can force ordering and only specific styles will be valid within style attribute values. Specify the element name, then it's styles or `*` for all elements.
Example of usage of the auto_focus option:
**Type:** `Object`
**Example:**
```js
tinymce.init({
+9 -5
View File
@@ -29,7 +29,7 @@ If you just want to add or change some behavior for a few items, use the [extend
Wildcards such as `*,+,?` may be used in element or attribute name matching.
### Special variables:
### Special variables
| Name |Summary |
|----------|-----------------|
@@ -39,6 +39,10 @@ Use `*[*]` to include all elements and all attributes. This can be very useful w
This example string tells TinyMCE to remove all elements that are not a "a, strong, div or br" element, convert "b" elements to "strong" elements, default "`target`" to "`_blank`" and keep the "`href`", "`target`" and "`align`" attributes of the elements.
**Type:** `String`
**Example:**
```js
tinyMCE.init({
selector: "textarea", // change this value according to your html
@@ -46,15 +50,15 @@ tinyMCE.init({
});
```
### Duplicate Attribute Warning
### Duplicate attribute warning
Be careful not to duplicate attributes in the definitions as this may cause tinyMCE to render duplicate attributes in the output. For example, if you have
Be careful not to duplicate attributes in the definitions as this may cause tinyMCE to render duplicate attributes in the output. For example, if you have:
```js
> ```js
//bad code: dir and style listed twice
"blockquote[dir|style|cite|class|dir<ltr?rtl|id|lang|onclick|ondblclick"
+"|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout"
+"|onmouseover|onmouseup|style|title]"
```
then if you happen to have a `<blockquote>` element in your code with style= or dir= attributes, the editor will cause each of those attributes to be duplicated in the output, which will result in invalid XHTML.
then if you happen to have a `<blockquote>` element in your code with `style=` or `dir=` attributes, the editor will cause each of those attributes to be duplicated in the output, which will result in invalid XHTML.
+4 -2
View File
@@ -1,8 +1,10 @@
## valid_styles
This option enables you specify the available styles for each element. This means you can force ordering and only specific styles to be valid within style attribute values. Specify the element name, then it's styles or * for all elements.
This option enables you specify the available styles for each element. This means you can force ordering and only specific styles will be valid within style attribute values. Specify the element name, then it's styles or `*` for all elements.
Example of usage of the auto_focus option:
**Type:** `Object`
**Example:**
```js
tinymce.init({
@@ -2,7 +2,9 @@
This option enables you to configure a custom class to be added to anchors with names since these are invisible by default.
Example of usage of the visual_anchor_class option:
**Type:** `String`
**Example:**
```js
tinymce.init({
@@ -1,8 +1,10 @@
## visual_table_class
This option enables you to configure a custom class to be added to tables that have a border set to 0. This class is used to add dotted borders to tables that would otherwise be invisible for the user.
This option enables you to configure a custom class to be added to tables that have a border set to `0`. This class is used to add dotted borders to tables that would otherwise be invisible for the user.
Example of usage of the visual_table_class option:
**Type:** `String`
**Example:**
```js
tinymce.init({
+8 -2
View File
@@ -1,8 +1,14 @@
## visual
This true/false option gives you the ability to turn on/off the visual aid for borderless tables. If the border of a table is set to "0", then TinyMCE adds a dotted line around the table by default.
This true/false option gives you the ability to turn on/off the visual aid for borderless tables. If the border of a table is set to `0`, then TinyMCE adds a dotted line around the table by default.
Example of usage of the visual option:
**Type:** `Boolean`
**Default Value:** `true`
**Possible Values:** `true`, `false`
**Example:**
```js
tinymce.init({
+4
View File
@@ -2,6 +2,10 @@
Set the width of the editor in pixels.
**Type:** `Number`
**Example:**
```js
tinymce.init({
selector: "textarea", // change this value according to your html
+79 -1
View File
@@ -40,6 +40,84 @@ TinyMCE 4 uses Web fonts for it's icons. Some web servers doesn't support the mi
### Q: Why do buttons/selectboxes have incorrect size?
### Q: Why do buttons/selectboxes have the incorrect size?
You are probably using an old `DOCTYPE` as of TinyMCE 4 a proper HTML5 doctype is required. All web developers should use a standards rendering mode on their web pages. So use a HTML5 doctype like `<!DOCTYPE html>` to properly render the page and the TinyMCE UI.
### Q: Is TinyMCE protected against XSS vulnerabilities?
Protection against XSS attacks needs to be done on the server since if you can submit contents in a form using TinyMCE one could as easily disable all javascript and therefore bypass TinyMCE filtering and still submit HTML code with insecure content. You need to properly filter the HTML input on the server using things like [HTMLPurifier](http://htmlpurifier.org/).
### Q: How do I convert my URLs to relative, absolute, or absolute with domain?
#### Relative URLs
This will convert all URLs within the same domain to relative URLs. The URLs will be relative from the `document_base_url`.
```js
tinymce.init({
selector: "textarea", // change this value according to your html
relative_urls : true,
document_base_url : "http://www.site.com/path1/"
});
```
**Example:**
`http://www.site.com/path1/path2/file.htm >> path2/file.htm`
#### Absolute URLs
This will convert all relative URLs to absolute URLs. The URLs will be absolute based on the `document_base_url`.
```js
tinymce.init({
selector: "textarea", // change this value according to your html
relative_urls : false,
remove_script_host : true,
document_base_url : "http://www.site.com/path1/"
});
```
**Example:**
`path2/file.htm >> /path1/path2/file.htm`
#### Domain Absolute URLs
This will convert all relative URLs to absolute URLs. The URLs will be absolute based on the `document_base_url` with domain.
```js
tinymce.init({
selector: "textarea", // change this value according to your html
relative_urls : false,
remove_script_host : false,
document_base_url : "http://www.site.com/path1/"
});
```
**Example:**
`path2/file.htm >> http://www.site.com/path1/path2/file.htm`
### Q: Where are the advanced image options?
Use the [`Style Formats`](/editor-configuration-settings/content-filtering/#style_formats) option instead, which is much more powerful.
```js
tinymce.init({
selector: "textarea", // change this value according to your html
style_formats: [
{title: 'Image Left', selector: 'img', styles: {
'float' : 'left',
'margin': '0 10px 0 10px'
}},
{title: 'Image Right', selector: 'img', styles: {
'float' : 'right',
'margin': '0 10px 0 10px'
}}
]
});
```
If you wish to align the image, you can also just use the text align buttons when having images selected.
+2 -2
View File
@@ -9,7 +9,7 @@ No-one likes bad spelling and being able to help your users create error free co
## Browser-based spell checking
The first option (and easiest to implement) is to utilize the browser's native spellcheck functionality by assigning the [`browser_spellcheck`](/editor-configuration-settings/spelling/#browser_spellcheck) configuration option the value of `true`. Depending on the right click / context behavior you want, you *may* need to enable the [`contextmenu`](/plugins/context-menu/) plugin.
The first option (and easiest to implement) is to utilize the browser's native spellcheck functionality by assigning the [`browser_spellcheck`]({{ site.baseurl }}/editor-configuration-settings/spelling/#browser_spellcheck) configuration option the value of `true`. Depending on the right click / context behavior you want, you *may* need to enable the [`contextmenu`]({{ site.baseurl }}/plugins/context-menu/) plugin.
```js
tinymce.init({
@@ -47,7 +47,7 @@ tinymce.init({
## TinyMCE Spellchecker Pro plugin
For developers requiring robust, enterprise-grade, spell check as-you-type functionality, you need the [Spellchecker Pro plugin](/plugins/tinymcespellchecker/). Spell Checker Pro requires both a client-side plugin to be configured and a server-side component to be installed and configured.
For developers requiring robust, enterprise-grade, spell check as-you-type functionality, you need the [Spellchecker Pro plugin]({{ site.baseurl }}/plugins/tinymcespellchecker/). Spell Checker Pro requires both a client-side plugin to be configured and a server-side component to be installed and configured.
Full documentation can be found in the TinyMCE Enterprise [documentation for Spelling](http://docs.ephox.com/display/TinyMCEEnterprise/Spell+Checking). Learn more about [TinyMCE Enterprise here](http://www.tinymce.com/enterprise/).
+3 -3
View File
@@ -4,7 +4,7 @@ title: Working With Plugins
description: TinyMCE is an incredibly powerful, flexible and customizable rich text editor. In this section we will show you the power of plugins.
---
The real power of TinyMCE's functionality is in its plugins. [Plugins](/plugins/) typically extend the default editor functionality or add new functionality. For example, the Advanced List (`advlist`) plugin adds extra options to the toolbar's existing list controls, while the Code (`code`) plugin adds an entirely new control.
The real power of TinyMCE's functionality is in its plugins. [Plugins]({{ site.baseurl }}/plugins/) typically extend the default editor functionality or add new functionality. For example, the Advanced List (`advlist`) plugin adds extra options to the toolbar's existing list controls, while the Code (`code`) plugin adds an entirely new control.
Because most people install TinyMCE via the CDN or by downloading a package, they mistakenly think plugins are part of the TinyMCE "core". They're not. In fact, if you use the [custom package](http://www.tinymce.com/download/custom_package.php) download option you're able to exclude all of the free plugins built by the TinyMCE team.
@@ -126,7 +126,7 @@ The `advlist` plugin has two options which provide more granular control of list
Many plugin options have more than one possible value. The `advlist_bullet_styles` option has possible values of `circle`, `disc` and `square` and `advlist_number_styles` has possible values of `lower-alpha`, `lower-greek`, `lower-roman`, `upper-alpha` and `upper-roman`.
Don't worry if you can't remember all these values. You don't need to. The [plugins section](/plugins/) goes into great detail explaining all the plugins, their options and toolbar and menu controls.
Don't worry if you can't remember all these values. You don't need to. The [plugins section]({{ site.baseurl }}/plugins/) goes into great detail explaining all the plugins, their options and toolbar and menu controls.
Let's add the Advanced List options and give them some of the available options (but not all).
@@ -143,7 +143,7 @@ tinymce.init({
So, in the above example we learned how to remove the menubar, add specific list controls to the toolbar while removing others, activate a plugin and customize the plugin's behavior by controlling which options we wanted activated. In 5 lines of code.
As we noted at the start, TinyMCE is an incredibly powerful, flexible and customizable rich text editor. Once you've finished the Getting Started guide, deep dive into the [plugins](/plugins/) and [advanced configuration settings](/editor-configuration-settings/) and become a TinyMCE developer ninja.
As we noted at the start, TinyMCE is an incredibly powerful, flexible and customizable rich text editor. Once you've finished the Getting Started guide, deep dive into the [plugins]({{ site.baseurl }}/plugins/) and [advanced configuration settings]({{ site.baseurl }}/editor-configuration-settings/) and become a TinyMCE developer ninja.