This is inside` `` -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: `
` `a pre tag.
This is inside` `
a pre tag.` -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 }); ``` diff --git a/_includes/configuration/browser-spellcheck.md b/_includes/configuration/browser-spellcheck.md index 8e3bc6a..d832ff1 100644 --- a/_includes/configuration/browser-spellcheck.md +++ b/_includes/configuration/browser-spellcheck.md @@ -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. diff --git a/_includes/configuration/cache-suffix.md b/_includes/configuration/cache-suffix.md index ed0982d..d412afa 100644 --- a/_includes/configuration/cache-suffix.md +++ b/_includes/configuration/cache-suffix.md @@ -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({ diff --git a/_includes/configuration/color-picker-callback.md b/_includes/configuration/color-picker-callback.md index d833d9c..a985081 100644 --- a/_includes/configuration/color-picker-callback.md +++ b/_includes/configuration/color-picker-callback.md @@ -2,6 +2,8 @@ This option enables you to provide your own color picker. +**Type:** `JavaScript Function` + **Example:** ```js diff --git a/_includes/configuration/content-css.md b/_includes/configuration/content-css.md index 8702f65..654df08 100644 --- a/_includes/configuration/content-css.md +++ b/_includes/configuration/content-css.md @@ -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. diff --git a/_includes/configuration/content-security-policy.md b/_includes/configuration/content-security-policy.md index 1c5f919..a6fa08c 100644 --- a/_includes/configuration/content-security-policy.md +++ b/_includes/configuration/content-security-policy.md @@ -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({ diff --git a/_includes/configuration/content-style.md b/_includes/configuration/content-style.md index bb698dd..2a4cff6 100644 --- a/_includes/configuration/content-style.md +++ b/_includes/configuration/content-style.md @@ -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({ diff --git a/_includes/configuration/convert-fonts-to-spans.md b/_includes/configuration/convert-fonts-to-spans.md index caac9a5..d8b050a 100644 --- a/_includes/configuration/convert-fonts-to-spans.md +++ b/_includes/configuration/convert-fonts-to-spans.md @@ -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. diff --git a/_includes/configuration/convert-urls.md b/_includes/configuration/convert-urls.md index 09f139e..271c9f6 100644 --- a/_includes/configuration/convert-urls.md +++ b/_includes/configuration/convert-urls.md @@ -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({ diff --git a/_includes/configuration/custom-elements.md b/_includes/configuration/custom-elements.md index a4bba8c..7a91362 100644 --- a/_includes/configuration/custom-elements.md +++ b/_includes/configuration/custom-elements.md @@ -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({ diff --git a/_includes/configuration/custom-undo-redo-levels.md b/_includes/configuration/custom-undo-redo-levels.md index 8b789a6..38db313 100644 --- a/_includes/configuration/custom-undo-redo-levels.md +++ b/_includes/configuration/custom-undo-redo-levels.md @@ -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({ diff --git a/_includes/configuration/directionality.md b/_includes/configuration/directionality.md index 3dd5a77..6535d81 100644 --- a/_includes/configuration/directionality.md +++ b/_includes/configuration/directionality.md @@ -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" }); ``` diff --git a/_includes/configuration/document-base-url.md b/_includes/configuration/document-base-url.md index 5805c8e..c5a8a90 100644 --- a/_includes/configuration/document-base-url.md +++ b/_includes/configuration/document-base-url.md @@ -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({ diff --git a/_includes/configuration/element-format.md b/_includes/configuration/element-format.md index 8002015..3370f66 100644 --- a/_includes/configuration/element-format.md +++ b/_includes/configuration/element-format.md @@ -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 `
something
`. 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 `something` will result in output like: `something
`. 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" }); ``` diff --git a/_includes/configuration/formats.md b/_includes/configuration/formats.md index 56a684b..8eade79 100644 --- a/_includes/configuration/formats.md +++ b/_includes/configuration/formats.md @@ -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} ] }); ``` diff --git a/_includes/configuration/gecko-spellcheck.md b/_includes/configuration/gecko-spellcheck.md index d15d87c..6107e87 100644 --- a/_includes/configuration/gecko-spellcheck.md +++ b/_includes/configuration/gecko-spellcheck.md @@ -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({ diff --git a/_includes/configuration/height.md b/_includes/configuration/height.md index bc4dcee..ad4d601 100644 --- a/_includes/configuration/height.md +++ b/_includes/configuration/height.md @@ -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 diff --git a/_includes/configuration/hidden-input.md b/_includes/configuration/hidden-input.md index bf034da..5eaa95f 100644 --- a/_includes/configuration/hidden-input.md +++ b/_includes/configuration/hidden-input.md @@ -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({ diff --git a/_includes/configuration/images-upload-base-path.md b/_includes/configuration/images-upload-base-path.md index 1da8b61..3b67157 100644 --- a/_includes/configuration/images-upload-base-path.md +++ b/_includes/configuration/images-upload-base-path.md @@ -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({ diff --git a/_includes/configuration/images-upload-credentials.md b/_includes/configuration/images-upload-credentials.md index 83ef010..5d4c342 100644 --- a/_includes/configuration/images-upload-credentials.md +++ b/_includes/configuration/images-upload-credentials.md @@ -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 }); ``` diff --git a/_includes/configuration/images-upload-handler.md b/_includes/configuration/images-upload-handler.md index f03bc18..9a48572 100644 --- a/_includes/configuration/images-upload-handler.md +++ b/_includes/configuration/images-upload-handler.md @@ -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 `` 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**.
diff --git a/_includes/configuration/object-resizing.md b/_includes/configuration/object-resizing.md
index 580f84c..9ca2f76 100644
--- a/_includes/configuration/object-resizing.md
+++ b/_includes/configuration/object-resizing.md
@@ -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({
diff --git a/_includes/configuration/plugins.md b/_includes/configuration/plugins.md
index 6a178d3..de96cf7 100644
--- a/_includes/configuration/plugins.md
+++ b/_includes/configuration/plugins.md
@@ -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/).
diff --git a/_includes/configuration/preview-styles.md b/_includes/configuration/preview-styles.md
index cf0e857..6388df1 100644
--- a/_includes/configuration/preview-styles.md
+++ b/_includes/configuration/preview-styles.md
@@ -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({
diff --git a/_includes/configuration/protect.md b/_includes/configuration/protect.md
index 9675958..c5f07f3 100644
--- a/_includes/configuration/protect.md
+++ b/_includes/configuration/protect.md
@@ -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({
diff --git a/_includes/configuration/relative-urls.md b/_includes/configuration/relative-urls.md
index 142aa30..a5cb756 100644
--- a/_includes/configuration/relative-urls.md
+++ b/_includes/configuration/relative-urls.md
@@ -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({
diff --git a/_includes/configuration/remove-script-host.md b/_includes/configuration/remove-script-host.md
index 1432be0..da5a4d7 100644
--- a/_includes/configuration/remove-script-host.md
+++ b/_includes/configuration/remove-script-host.md
@@ -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"`.
diff --git a/_includes/configuration/remove-trailing-brs.md b/_includes/configuration/remove-trailing-brs.md
index c5e31cd..53d28ea 100644
--- a/_includes/configuration/remove-trailing-brs.md
+++ b/_includes/configuration/remove-trailing-brs.md
@@ -1,8 +1,16 @@
## remove_trailing_brs
-This option allows you to disable TinyMCE's default behaviour of removing
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 `
` 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({
diff --git a/_includes/configuration/removed-menuitems.md b/_includes/configuration/removed-menuitems.md
index 5519e34..1463061 100644
--- a/_includes/configuration/removed-menuitems.md
+++ b/_includes/configuration/removed-menuitems.md
@@ -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"
});
```
diff --git a/_includes/configuration/resize.md b/_includes/configuration/resize.md
index 0a958e2..4c343a7 100644
--- a/_includes/configuration/resize.md
+++ b/_includes/configuration/resize.md
@@ -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({
diff --git a/_includes/configuration/schema.md b/_includes/configuration/schema.md
index 091725b..1367f10 100644
--- a/_includes/configuration/schema.md
+++ b/_includes/configuration/schema.md
@@ -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({
diff --git a/_includes/configuration/selector.md b/_includes/configuration/selector.md
index 33e6368..eb026c8 100644
--- a/_includes/configuration/selector.md
+++ b/_includes/configuration/selector.md
@@ -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({
diff --git a/_includes/configuration/setup.md b/_includes/configuration/setup.md
index 3284eff..bddddd0 100644
--- a/_includes/configuration/setup.md
+++ b/_includes/configuration/setup.md
@@ -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({
diff --git a/_includes/configuration/skin-url.md b/_includes/configuration/skin-url.md
index a09b168..6008543 100644
--- a/_includes/configuration/skin-url.md
+++ b/_includes/configuration/skin-url.md
@@ -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"
});
```
diff --git a/_includes/configuration/skin.md b/_includes/configuration/skin.md
index c15760f..17e5899 100644
--- a/_includes/configuration/skin.md
+++ b/_includes/configuration/skin.md
@@ -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
diff --git a/_includes/configuration/statusbar.md b/_includes/configuration/statusbar.md
index 55f249f..f8bdc95 100644
--- a/_includes/configuration/statusbar.md
+++ b/_includes/configuration/statusbar.md
@@ -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({
diff --git a/_includes/configuration/style-formats-merge.md b/_includes/configuration/style-formats-merge.md
index 446ca5f..3860d53 100644
--- a/_includes/configuration/style-formats-merge.md
+++ b/_includes/configuration/style-formats-merge.md
@@ -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({
diff --git a/_includes/configuration/style-formats.md b/_includes/configuration/style-formats.md
index 9298628..dfe8818 100644
--- a/_includes/configuration/style-formats.md
+++ b/_includes/configuration/style-formats.md
@@ -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
diff --git a/_includes/configuration/theme-url.md b/_includes/configuration/theme-url.md
index 3313bb0..cad56f7 100644
--- a/_includes/configuration/theme-url.md
+++ b/_includes/configuration/theme-url.md
@@ -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"
});
```
diff --git a/_includes/configuration/theme.md b/_includes/configuration/theme.md
index 575586b..adf5eec 100644
--- a/_includes/configuration/theme.md
+++ b/_includes/configuration/theme.md
@@ -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
diff --git a/_includes/configuration/toolbar-n.md b/_includes/configuration/toolbar-n.md
index b937927..a9358a2 100644
--- a/_includes/configuration/toolbar-n.md
+++ b/_includes/configuration/toolbar-n.md
@@ -1,10 +1,10 @@
## toolbar<N>
-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.
diff --git a/_includes/configuration/toolbar.md b/_includes/configuration/toolbar.md
index 0ca7bae..a62d0f0 100644
--- a/_includes/configuration/toolbar.md
+++ b/_includes/configuration/toolbar.md
@@ -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({
diff --git a/_includes/configuration/urlconverter-callback.md b/_includes/configuration/urlconverter-callback.md
index 3d39463..aeef287 100644
--- a/_includes/configuration/urlconverter-callback.md
+++ b/_includes/configuration/urlconverter-callback.md
@@ -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 .[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) {
diff --git a/_includes/configuration/valid-children.md b/_includes/configuration/valid-children.md
index 5521892..4f2e907 100644
--- a/_includes/configuration/valid-children.md
+++ b/_includes/configuration/valid-children.md
@@ -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.
diff --git a/_includes/configuration/valid-classes.md b/_includes/configuration/valid-classes.md
index 9956828..2e51459 100644
--- a/_includes/configuration/valid-classes.md
+++ b/_includes/configuration/valid-classes.md
@@ -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({
diff --git a/_includes/configuration/valid-elements.md b/_includes/configuration/valid-elements.md
index c38ccfe..2b5fdce 100644
--- a/_includes/configuration/valid-elements.md
+++ b/_includes/configuration/valid-elements.md
@@ -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` 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 `` 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.
diff --git a/_includes/configuration/valid-styles.md b/_includes/configuration/valid-styles.md
index 6fd5a10..30181ff 100644
--- a/_includes/configuration/valid-styles.md
+++ b/_includes/configuration/valid-styles.md
@@ -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({
diff --git a/_includes/configuration/visual-anchor-class.md b/_includes/configuration/visual-anchor-class.md
index 318b6f4..e7fdad2 100644
--- a/_includes/configuration/visual-anchor-class.md
+++ b/_includes/configuration/visual-anchor-class.md
@@ -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({
diff --git a/_includes/configuration/visual-table-class.md b/_includes/configuration/visual-table-class.md
index 4a57b80..988c7be 100644
--- a/_includes/configuration/visual-table-class.md
+++ b/_includes/configuration/visual-table-class.md
@@ -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({
diff --git a/_includes/configuration/visual.md b/_includes/configuration/visual.md
index eacc612..c5a00b6 100644
--- a/_includes/configuration/visual.md
+++ b/_includes/configuration/visual.md
@@ -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({
diff --git a/_includes/configuration/width.md b/_includes/configuration/width.md
index d389257..bdc440b 100644
--- a/_includes/configuration/width.md
+++ b/_includes/configuration/width.md
@@ -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
diff --git a/getting-started/getting-support.md b/getting-started/getting-support.md
index bf868b0..e0f2ea5 100644
--- a/getting-started/getting-support.md
+++ b/getting-started/getting-support.md
@@ -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 `` 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.
diff --git a/getting-started/spell-checking-in-tinymce.md b/getting-started/spell-checking-in-tinymce.md
index 4ec94e0..208eb80 100644
--- a/getting-started/spell-checking-in-tinymce.md
+++ b/getting-started/spell-checking-in-tinymce.md
@@ -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/).
diff --git a/getting-started/working-with-plugins.md b/getting-started/working-with-plugins.md
index ae0f400..1e0df08 100644
--- a/getting-started/working-with-plugins.md
+++ b/getting-started/working-with-plugins.md
@@ -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.