tinymce · FarzadHayat · Feb 4, 2025 · Feb 4, 2025 · LewisAtTiny · Feb 5, 2025
@@ -77,7 +77,7 @@ tinymce.init({
   selector: 'textarea',  // change this value according to your HTML
   plugins: '{plugincode}',
   toolbar: '{plugincode}',
-  typography_default_lang: [ "en-US" ], // Required to set specific typography language rules.
+  typography_default_lang: 'en-US', // Required to set specific typography language rules.
 });
 ----
 

@@ -18,42 +18,30 @@ When a new sidebar is registered, a corresponding toolbar button for toggling th
 
 === Specification object
 
-[[tooltip]]
-==== `+tooltip+`
+[cols="1,1,4", options="header"]
+|===
+| Property | Type | Description
 
-The `+tooltip+` specifies a tooltip to be displayed when hovering over the sidebar toggle button.
+| `+tooltip+`
+| `+String+`
+| Specifies a tooltip to be displayed when hovering over the sidebar toggle button.
 
-*Type:* `+String+`
+| `+icon+`
+| `+String+`
+| Specifies an icon for the sidebar toggle button. The icon should be the name of an icon provided by the {productname} skin or a xref:apis/tinymce.editor.ui.registry.adoc#addIcon[custom icon].
 
-[[icon]]
-==== `+icon+`
+| `+onSetup+`
+| `+Function+`
+| Specifies a function to be called when the panel is first created. It passes in an API object and should return a callback that takes an API. The default is `+(api) => (api) => {}+`. This function runs whenever the sidebar is rendered, and the returned callback is executed when the sidebar is destroyed. Therefore, the returned function is essentially an `+onTeardown+` handler, and can be used to unbind events and callbacks.
 
-The `+icon+` specifies an icon for the sidebar toggle button. The icon should be the name of an icon provided by the {productname} skin or a xref:apis/tinymce.editor.ui.registry.adoc#addIcon[custom icon].
+| `+onShow+`
+| `+Function+`
+| Specifies a function to be called when the panel is displayed. It passes in an API object.
 
-*Type:* `+String+`
-
-[[onSetup]]
-==== `+onSetup+`
-
-The `+onSetup+` specifies a function to be called when the panel is first created. It passes in an API object and should return a callback that takes an API. The default is `+(api) => (api) => {}+`.
-
-`+onSetup+` is a complex property. It requires a function that takes the sidebar’s API and should return a callback that takes the sidebar's API and returns nothing. This occurs because `+onSetup+` runs whenever the sidebar is rendered, and the returned callback is executed when the sidebar is destroyed. Therefore the returned function is essentially an `+onTeardown+` handler, and can be used to unbind events and callbacks.
-
-*Type:* `+Function+`
-
-[[onShow]]
-==== `+onShow+`
-
-The `+onShow+` specifies a function to be called when the panel displayed. It passes in an API object.
-
-*Type:* `+Function+`
-
-[[onHide]]
-==== `+onHide+`
-
-The `+onHide+` specifies a function to be called when the panel is hidden. It passes in an API object.
-
-*Type:* `+Function+`
+| `+onHide+`
+| `+Function+`
+| Specifies a function to be called when the panel is hidden. It passes in an API object.
+|===
 
 === API Object
 
@@ -72,7 +60,8 @@ include::partial$configuration/sidebar_show.adoc[leveloffset=+1]
 [source,js]
 ----
 tinymce.init({
-  ...
+  selector: 'textarea', // change this value according to your HTML
+  sidebar_show: 'mysidebar',
   toolbar: 'mysidebar',
   setup: (editor) => {
     editor.ui.registry.addSidebar('mysidebar', {

@@ -73,7 +73,7 @@ This option sets which languages are available for applying language-specific ty
 
 A user can then select text and select from the available languages. That language’s language-specific typography rules are then applied to the selected text.
 
-*Type:* `+Object+`
+*Type:* `+Array+`
 
 === Example: Using `typography_langs`
 
@@ -161,7 +161,7 @@ tinymce.init({
 |Russian
 |ru
 
-|Servian
+|Serbian
 |sr
 
 |Slovak
@@ -203,7 +203,7 @@ tinymce.init({
   selector: 'textarea',  // change this value according to your html
   plugins: '{plugincode}',
   toolbar: '{plugincode}',
-  typography_default_lang: 'en_US', // This is required to configure the default language used by typography.
+  typography_default_lang: 'en-US', // This is required to configure the default language used by typography.
   typography_rules: [
     'common/punctuation/quote',
     'en-US/dash/main',

@@ -5,9 +5,11 @@ include::partial$misc/admon-requires-6.3v.adoc[]
 
 As part of the {productname} 6.3 release, the {pluginname} plugin includes a new option, `advcode_inline`, that allows users to open the Enhanced Code Editor within {productname}’s existing editor space instead of being displayed in a separate dialog box.
 
-Type : `boolean`,
+*Type:* `+Boolean+`
 
-Default: false
+*Possible values:* `+true+`, `+false+`
+
+*Default value:* `+false+`
 
 == Example: basic setup
 
@@ -62,9 +64,9 @@ As part of the {productname} 7.3 release, the {pluginname} plugin includes a new
 
 By default, any code rendered inside **Enhanced Coded Editor** will be formatted with correct indentation.
 
-Type : `boolean`,
+*Type:* `+Boolean+`
 
-Default: `+true+`
+*Default value:* `+true+`
 
 *Possible values:* `+true+`, `+false+`
 

@@ -3,7 +3,7 @@
 
 Lets you specify a custom name for the bottom anchor in the url type ahead drop down. To disable the bottom anchor from the drop down set it `+false+`.
 
-*Type:* `+String+`
+*Type:* `+String+` or `+false+`
 
 *Default value:* `+'#bottom'+`
 

@@ -3,7 +3,7 @@
 
 Lets you specify a custom name for the top anchor in the url type ahead drop down. To disable the to anchor from the drop down set it `+false+`.
 
-*Type:* `+String+`
+*Type:* `+String+` or `+false+`
 
 *Default value:* `+'#top'+`
 

@@ -1,11 +1,11 @@
 [[auto_focus]]
 == `+auto_focus+`
 
-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.
+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. If you set this option to `+true+`, the focus will be set to the last initialized editor instance.
 
-*Type:* `+String+`
+*Type:* `+String+` or `+true+`
 
-=== Example: using `+auto_focus+`
+=== Example: using `+auto_focus+` with custom `+id+`
 
 [source,js]
 ----
@@ -14,3 +14,13 @@ tinymce.init({
   auto_focus: 'element1'
 });
 ----
+
+=== Example: using `+auto_focus+` with `+true+`
+
+[source,js]
+----
+tinymce.init({
+  selector: 'textarea',  // change this value according to your HTML
+  auto_focus: true
+});
+----
@@ -5,6 +5,8 @@ This option allows you to specify the size of the `+padding+` at the bottom of t
 
 *Type:* `+Number+`
 
+*Default value:* `+50+`
+
 === Example: using `+autoresize_bottom_margin+`
 
 [source,js]

@@ -5,6 +5,8 @@ This option allows you to specify the size of the `+padding+` at the sides of th
 
 *Type:* `+Number+`
 
+*Default value:* `+1+`
+
 === Example: `+autoresize_overflow_padding+`
 
 [source,js]

@@ -5,7 +5,7 @@ This option allows you to set the prefix that is used for local storage keys.
 
 *Type:* `+String+`
 
-*Default value:* `+'tinymce-autosave-{path}{query}-{id}-'+`
+*Default value:* `+'tinymce-autosave-{path}{query}{hash}-{id}-'+`
 
 === Example: using `+autosave_prefix+`
 
@@ -14,6 +14,6 @@ This option allows you to set the prefix that is used for local storage keys.
 tinymce.init({
   selector: 'textarea',  // change this value according to your HTML
   plugins: 'autosave',
-  autosave_prefix: 'tinymce-autosave-{path}{query}-{id}-'
+  autosave_prefix: 'tinymce-autosave-{path}{query}{hash}-{id}-'
 });
 ----
@@ -19,4 +19,4 @@ tinymce.init({
 });
 ----
 
-For more information about spell checking in {productname}, see xref:spell-checking.adoc[this page] in the General-configuration-guide/ guide.
+For more information about spell checking in {productname}, refer to xref:spell-checking.adoc[Spell Checking in {productname}].
@@ -3,7 +3,9 @@
 
 *Type:* `+String+`
 
-*Possible values:* `'comment'`
+*Possible values:* `+'full'+`, `'comment'`
+
+*Default value:* `+'full'+`
 
 This option sets the editor to the readonly mode, while still allowing comments to be made. 
 

@@ -5,6 +5,8 @@ The `+content_css+` option loads the specified CSS files into the editable area.
 
 *Type:* `+String+`, `+Array+`
 
+*Default value:* `+['default']+` for classic mode, `+[]+` for inline mode
+
 NOTE: This option is intended for use with {productname}'s classic mode, as the editable area is sandboxed within an iframe. For inline mode editors, relevant CSS stylesheets should be loaded as part of the webpage {productname} is rendered in, not using the `+content_css+` option.
 
 include::partial$misc/shipped-content-css.adoc[]

@@ -5,7 +5,7 @@ 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.
 
-*Type:* `+String+`
+*Type:* `+String+` or `+Object+`
 
 [source,js]
 ----

@@ -7,13 +7,16 @@ Use the *custom_ui_selector* option to specify the elements that you want {produ
 
 === Example: using `+custom_ui_selector+`
 
-[source,html]
+[source,js]
 ----
 tinymce.init({
   selector: 'textarea',  // change this value according to your HTML
   custom_ui_selector: '.my-custom-button'
 });
-...
+----
+
+[source,html]
+----
 <textarea></textarea>
 <button class="my-custom-button">Button</button>
 ----
@@ -1,5 +1,5 @@
 [[streamContent]]
-== `streamContent`
+=== `streamContent`
 
 `+streamContent+` is an optional property, available to add to the `+iframe+` dialog component.
 
@@ -64,7 +64,7 @@ The recommended method for updating content in an `+iframe+` component is:
 
 [source,js]
 ----
-`onAction: (api) => api.setData({ myiframe: 'new content' })`
+onAction: (api) => api.setData({ myiframe: 'new content' })
 ----
 
 . This updates the iframe to contain the string `'new content'`. This text can be any valid html.

@@ -7,7 +7,7 @@ This option allows you to set the base direction of directionally neutral text (
 
 *Type:* `+String+`
 
-*Default value:* `+'ltr'+`
+*Default value:* `+'ltr'+` for left-to-right languages, `+'rtl'+` for right-to-left languages.
 
 *Possible values:* `+'ltr'+`, `+'rtl'+`
 

@@ -3,4 +3,21 @@
 
 Set the `+doctype+` for the editing area.
 
-WARNING: Changing the `+doctype+` can have different effects on different browsers and may introduce quirks. Use this feature only if you know what you are doing. For more information on doctypes, go to https://www.w3.org/wiki/Doctypes_and_markup_styles[this link].
+[WARNING]
+====
+Changing the `+doctype+` can have different effects on different browsers and may introduce quirks. Use this feature only if you know what you are doing. For more information on doctypes, refer to https://www.w3.org/wiki/Doctypes_and_markup_styles[W3C - Doctypes and markup styles].
+====
+
+*Type:* `+String+`
+
+*Default value:* `+'<!DOCTYPE html>'+`
+
+=== Example: using `doctype`
+
+[source,js]
+----
+tinymce.init({
+  selector: 'textarea',  // change this value according to your HTML
+  doctype: '<!DOCTYPE html>'
+});
+----
@@ -3,7 +3,7 @@
 
 This option can be used to define a custom fetch function, which provides another way to access images in complex situations. The function will be passed the HTML element of the image to be fetched and should return a `+Promise+` containing a `+Blob+` representation of the image.
 
-*Type:* `+Function+`
+*Type:* `+Function+` (Returns a https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise[Promise])
 
 === Example: using `+editimage_fetch_image+`
 

@@ -11,7 +11,7 @@ As of {productname} 7.5.0, the default value of the `exportword_converter_option
 .**Default value:**
 [source,js]
 ----
-exportword_converter_options: {
+{
   document: {
     size: 'letter'
   }

@@ -12,8 +12,8 @@ This invalid list:
     <ol>
       <li>b</li>
       <li>c</li>
-   </ol>
-    <li>e</li>
+    </ol>
+  <li>e</li>
 </ol>
 ----
 

@@ -1,15 +1,15 @@
 [[importword-converter-options]]
 == `importword_converter_options`
 
-**Type:** `String`
+**Type:** `+Object+`
 
 [NOTE]
 As of {productname} 7.5.0, the default value of the `importword_converter_options` setting has been updated to the following:
 
 .**Default value:** 
 [source,js]
 ----
-importword_converter_options: {
+{
   formatting: {
     styles: 'inline',
     resets: 'inline',

@@ -3,8 +3,6 @@
 
 This option allows specification of the indentation level for indent/outdent buttons in the UI.
 
-The *indentation* option defaults to 30px but can be any value.
-
 *Type:* `+String+`
 
 *Default value:* `+'40px'+`

@@ -2,9 +2,9 @@
 
 Determines whether it is valid for a given CSS selector to have its CSS properties inlined into the HTML content.
 
-Default: All selectors are considered valid to have their CSS inlined.
+*Default value:* All selectors are considered valid to have their CSS inlined.
 
-Type: `String` `RegExp` or `Function`
+*Type:* `+String+`, `+RegExp+` or `+Function+`
 
 [source,ts]
 ----
@@ -17,9 +17,9 @@ inlinecss_selector_filter: (selector: string): boolean => {
 
 Determines whether it is valid for a given CSS stylesheet to have its CSS inspected and inlined into the HTML content.
 
-Default: All CSS stylesheet are considered valid to have their CSS inspected and inlined.
+*Default value:* All CSS stylesheet are considered valid to have their CSS inspected and inlined.
 
-Type: `String` `RegExp` or `Function`
+*Type:* `+String+`, `+RegExp+` or `+Function+`
 
 [source,ts]
 ----
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,4 +19,4 @@ tinymce.init({ @@
     });
     ----
-    For more information about spell checking in {productname}, see xref:spell-checking.adoc[this page] in the General-configuration-guide/ guide.
+    For more information about spell checking in {productname}, refer to xref:spell-checking.adoc[Spell Checking in {productname}].