Fields
Summary
General fields
yes/no
When this is yes, plugin updates the editor content to Initial content value each time the Initial content property changes.
yes/no
If enabled, the editor will be initialized in readonly mode instead of editing (design) mode. In this mode, the editor will not allow any changes to the content and the toolbar will be disabled.
number
Maximum character limit for content entry. It is a beta feature and may have limitations or not precise calculation in certain use cases. Leave empty for no limit.
dropdown
This option specifies the language used for the TinyMCE user interface, such as menu items, dialogs, and tooltips. Loading multiple element instances that have different languages is not supported. Default value: en.
Classic,Inline (dropdown)
There are two main integration modes that define how the editor looks and behaves. Default: Classic
Toolbar settings
Customize the editor's top toolbar by selecting which buttons to display. Enabling specific buttons will automatically incorporate the necessary plugins and functionalities into the editor.
yes/no
If enabled, main toolbar will be visible with buttons and settings according to the options bellow.
Floating,Sliding,Scrolling,Wrap (dropdown)
This option is used to extend the toolbar to accommodate the overflowing toolbar buttons. This option is useful for small screens or small editor frames. 'Floating' - the toolbar appears under the toolbar overflow icon in a floating shelf format when the toolbar overflow icon Drawer is clicked. 'Sliding' - the toolbar appears as a fixed toolbar under the first toolbar when the toolbar overflow icon Drawer is clicked. 'Scrolling' - the overflow toolbar buttons will remain on the toolbar, but will be hidden from view. To access the overflow toolbar buttons, scroll the toolbar. To scroll the toolbar on a touch screen, use a swiping action. To scroll on a desktop device, hold shift and scroll with a mouse. 'Wrap' - the overflow toolbar buttons will be shown on one or more toolbars below the primary toolbar.
Auto,Top,Bottom (dropdown)
The default behavior is to position the toolbar and menu bar above the content area. Setting this option to bottom positions the toolbar and menu bar below the content area. Setting this option to auto, positions the toolbar and menu bar either above the content area by default or below the content area if there is not enough space to display the toolbar and menu bar above.
yes/no
Quick insertion toolbar is shown when caret is in an empty line. It contains insert buttons according to the toolbar buttons settings below. It helps with inline content editing.
yes/no
Quick selection toolbar is intended for inline format editing and is shown when user selects a text within the editor. It contains buttons according to the toolbar buttons settings below.
Toolbar - Text formatting buttons
yes/no
Toggle to show or hide the undo and redo buttons, which let users reverse or reapply their recent edits.
yes/no
Turns on a dropdown in the toolbar for quickly changing text to headings, paragraphs, or other blocks.
yes/no
Show dropdown list with font families (as Arial or Times New Roman) to apply to selection.
yes/no
Show basic text formatting buttons like bold, italic, underline, strikethrough and remove formatting.
yes/no
Includes 2 buttons to apply subscript and superscript format to the current selection.
yes/no
Includes 2 buttons to apply foreground/text color and background color to selection.
yes/no
Includes 2 buttons that format the current selection as a bullet list or numbered list.
Toolbar - Inserting buttons
yes/no
Buttons that applies block quote/citation format to the current block level element.
yes/no
Adds an accordion element at the current location. Accordion allows for the creation of sections in a document that can be expanded or collapsed to show or hide additional content.
yes/no
Adds a button to the toolbar which on click will open a dialog box to accept raw code input. It lets a user insert and embed syntax color highlighted code snippets into the editable area.
yes/no
Creates/edits embedded media elements as audio/video. It provides users with the ability to add HTML5 video and audio content from a popular media provider, such as Youtube.
yes/no
Creates/edits table elements. It also adds table management functionality to editable area, including dialogs, context menus and context toolbars.
yes/no
Insert emoji into editable area. It also adds autocompleter for adding emoji without using the toolbar button. Adding a colon ":", followed by at least two characters will open a popup collection showing matching emoji.
Toolbar - Other buttons
yes/no
Adds directionality control buttons, enabling editor to better handle languages written from right to left.
yes/no
Adds a toolbar button that allows a user to edit the HTML code hidden by the WYSIWYG view.
yes/no
Toggles fullscreen mode. When the toolbar button is pressed the editable area will fill the browser’s viewport.
yes/no
Pressing the button opens a dialog box showing the current content in a preview mode.
yes/no
Allows a user to see block level elements in the editable area. It is similar to 'Display invisible characters' functionality, but at block level.
yes/no
Adds the ability to see invisible characters displayed in the editable area, like non-breakable space ( ).
yes/no
Opens a word count dialog showing word and character counts. It also places a word and character counter in the status bar (see status bar fields).
Status bar
If all status bar feature are disabled, the status bar in the bottom of the editor will not be shown.
yes/no
The element path shows the selected element and the parent elements in the left of the status bar. Clicking an element on the element path will select the element in the editor.
yes/no
Shows a word and character counter in the status bar in the right of the status bar. Clicking the counter in the status bar switches the display between word count and character count. See more at https://www.tiny.cloud/docs/tinymce/latest/wordcount/
Images settings
The following options modify images tool behavior. For this to work, you need to have images enabled ('Insert/edit image' in toolbar settings above).
yes/no
If this is enabled, upload feature will be added to image selection dialog. Users will be possible to choose a image from their computer. The image will be uploaded to Bubble S3 File manager.
thing
By default, uploaded image files are visible to anyone who has the link to the file (has access to the editor content). To provide an additional layer of security, set this option. If set, uploaded images will be attached to a thing, which is used to determine who has access to view the file. Only users who have the 'View attached files' permission for that thing can view the file. If this value is empty or the thing does not exist, the file will be visible to anyone who has the link.
yes/no
This options allows you disable the image dimensions input field in the image dialog.
yes/no
This option lets users enable captions for images. When this option is enabled the image dialog will have an extra checkbox called "Caption". When a user checks the checkbox the image will get wrapped in an HTML5 figure element with a figcaption inside it. The user will then be able to type caption content inside the editor.
yes/no
This option adds an "Advanced" tab to the image dialog allowing you to add custom styles, spacing and borders to images.
yes/no
This options allows you disable the image description input field in the image dialog.
Link settings
Yes,No,http,https (dropdown)
Set whether TinyMCE should prepend a http:// prefix if the supplied URL does not contain a protocol prefix. "No": Users are prompted to prepend http:// when the URL entered starts with www and does not have a protocol. Other URLs are added without prompt. "Yes": URLs are assumed to be external. Users are prompted to prepend a http:// prefix when the protocol is not specified. 'http': URLs are assumed to be external. URLs without a protocol prefix are prepended a http:// prefix. 'https': URLs are assumed to be external. URLs without a protocol prefix are prepended a https:// prefix.
yes/no
By default it is not possible to open links directly from the editor. Setting this to enabled will enable a context toolbar that will appear when the user’s cursor is within a link. This context toolbar contains fields to modify, remove and open the selected link.
Advanced settings
Some advanced settings bellow require a good understanding of TinyMCE configuration. More more info please see TinyMCE official doc
yes/no
If enabled, text selection will be tracked by states 'selected html' and 'selected text' and event 'selection changed'. If disabled, the states wont be updated and the event will not be triggered. Disabling can be useful for performance reasons when your users are selecting long text.
yes/no
Some text patterns written to editor content are automatically converted to format. E.g. "text" is converted to italic, "1. text" is converted to numbered list, "# text" is converted to H1 title. This option allows to enable/disable this pattern matching behaviour. See complete list of the patterns at https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#text_patterns
yes/no
The context menu appears when an user right clicks in the editable area. It contains items as: undo/redo, copy/paste, image, table, link. The exact list of items shown in the context menu corresponds to the toolbar buttons settings.
yes/no
This option configures editor to use the browser’s native spell checker. Disabling the context menu may be required depending on the right-click or context usability requirement.
yes/no
If enabled, editor value will update every time the user has made modifications to the contents. If not enabled, the value will update only when user clicks out of the element or presses enter. Updating the editor's value means that the 'html/text content' state is updated, autobinding value is published and 'content changed' event is triggered.
number
This field is only relevant when the previous field is set to ‘Yes.’ If this value is greater than 0 and the user modifies the contents, the update of the editor’s value is delayed by the specified number of milliseconds. This delay is useful for optimizing the performance by reducing the frequency of updates.
text
If set, toolbar settings above will be ignored and TinyMCE will be initialised with 'toolbar' property set to this value. Example: "undo redo
text
We automatically initialize TinyMCE with plugins that are required by configuration above. Using this field, you can specify more plugins that will be added in TinyMCE initialisation to the 'plugins' field (see TinyMCE doc https://www.tiny.cloud/docs/tinymce/6/plugins/#open-source-plugins). Use the following format: "plugin1,plugin2"
text
Additional options in JSON format that will be passed to tinymce.init function. Use this, if you need some specific configuration of TinyMCE editor that is not covered by any element property above.
General fields
Placeholder
Type: text
This option adds a placeholder content that will be shown when the editor is empty.
Initial content
Type: text
Default HTML content that will be set to the editor when loaded. If this property changes when the editor is already loaded, the editor content won't be updated unless the following property Update editor when 'Initial content' changes is set to YES.
Update editor when 'Initial content' changes
Type: yes/no
When this is yes, plugin updates the editor content to Initial content value each time the Initial content property changes.
Warning: Turning this on can lead to unwanted content updates if you don't know what you are doing, please use it with caution. If you don't know, set this to OFF.
Read only
Type: yes/no
If enabled, the editor will be initialized in readonly mode instead of editing (design) mode. In this mode, the editor will not allow any changes to the content and the toolbar will be disabled.
Auto focus on load
Type: yes/no
The editor input will be focused automatically when initialized.
Max text length (beta)
Type: number
Maximum character limit for content entry. It is a beta feature and may have limitations or not precise calculation in certain use cases. Leave empty for no limit.
Language
Type: dropdown
This option specifies the language used for the TinyMCE user interface, such as menu items, dialogs, and tooltips. Loading multiple element instances that have different languages is not supported. Default value: en.
Skin
Type: Light,Dark,Auto (dropdown)
Set the editor appearance. Use Auto to detect Light/Dark skin according to user system settings. Multiple editor elements with different skins in single page is not supported.
Editor mode
Type: Classic,Inline (dropdown)
There are two main integration modes:
Classic mode embeds an iframe in the page, which sandboxes the content and styles used in the content area. It displays toolbar by default.
Inline mode does not use an iframe but div element instead. It allows page styles to be used in the editor. Toolbar is shown only when content is focused. The inline editing mode is used for merging the editing and reading views of the page for a seamless editing experience and true WYSIWYG behavior.
Toolbar settings
Customize the editor's top toolbar by selecting which buttons to display. Enabling specific buttons will automatically incorporate the necessary plugins and functionalities into the editor.
Show toolbar
Type: yes/no
If enabled, main toolbar will be visible with buttons and settings according to the options bellow.
Toolbar mode
Type: Floating,Sliding,Scrolling,Wrap (dropdown)
This option is used to extend the toolbar to accommodate the overflowing toolbar buttons. This option is useful for small screens or small editor frames. 'Floating' - the toolbar appears under the toolbar overflow icon in a floating shelf format when the toolbar overflow icon Drawer is clicked. 'Sliding' - the toolbar appears as a fixed toolbar under the first toolbar when the toolbar overflow icon Drawer is clicked. 'Scrolling' - the overflow toolbar buttons will remain on the toolbar, but will be hidden from view. To access the overflow toolbar buttons, scroll the toolbar. To scroll the toolbar on a touch screen, use a swiping action. To scroll on a desktop device, hold shift and scroll with a mouse. 'Wrap' - the overflow toolbar buttons will be shown on one or more toolbars below the primary toolbar.
Toolbar location
Type: Auto,Top,Bottom (dropdown)
The default behavior is to position the toolbar and menu bar above the content area. Setting this option to bottom positions the toolbar and menu bar below the content area. Setting this option to auto, positions the toolbar and menu bar either above the content area by default or below the content area if there is not enough space to display the toolbar and menu bar above.
Enable insert toolbar
Type: yes/no
Quick insertion toolbar is shown when caret is in an empty line. It contains insert buttons according to the toolbar buttons settings below. It helps with inline content editing.
Enable selection toolbar
Type: yes/no
Quick selection toolbar is intended for inline format editing and is shown when user selects a text within the editor. It contains buttons according to the toolbar buttons settings below.
Toolbar - Text formatting buttons
Undo/Redo buttons
Type: yes/no
Toggle to show or hide the undo and redo buttons, which let users reverse or reapply their recent edits.
Blocks dropdown
Type: yes/no
Turns on a dropdown in the toolbar for quickly changing text to headings, paragraphs, or other blocks.
Font family dropdown
Type: yes/no
Show dropdown list with font families (as Arial or Times New Roman) to apply to selection.
Font size control
Type: Hide,Input,Select (dropdown)
Sets appearance of font size control.
Options:
Dropdown- Dropdown list with font sizes to apply to selection.Input- Text entry input field to change font size of selection or current insertion point. The input option also provides increase and decrease font size buttons on either side of the input field.Hide- Hides the font size toolbar option.
Basic text formatting
Type: yes/no
Show basic text formatting buttons like bold, italic, underline, strikethrough and remove formatting.
Superscript/Subscript formatting
Type: yes/no
Includes 2 buttons to apply subscript and superscript format to the current selection.
Text/background colors
Type: yes/no
Includes 2 buttons to apply foreground/text color and background color to selection.
Align
Type: yes/no
Show dropdown with options to align text left, center, right, or justified.
Line height
Type: yes/no
Dropdown list with line heights to apply to selection.
Bullet/numbered list
Type: yes/no
Includes 2 buttons that format the current selection as a bullet list or numbered list.
Indent/Outdent
Type: yes/no
Buttons to indent/outdent the current list item or block element.
Toolbar - Inserting buttons
Insert/edit quote
Type: yes/no
Buttons that applies block quote/citation format to the current block level element.
Insert/edit accordion
Type: yes/no
Adds an accordion element at the current location. Accordion allows for the creation of sections in a document that can be expanded or collapsed to show or hide additional content.
Insert/edit code sample
Type: yes/no
Adds a button to the toolbar which on click will open a dialog box to accept raw code input. It lets a user insert and embed syntax color highlighted code snippets into the editable area.
Insert/edit link
Type: yes/no
Creates/edits url links within the editor.
Insert/edit image
Type: yes/no
Creates/edits images within the editor.
Insert/edit media
Type: yes/no
Creates/edits embedded media elements as audio/video. It provides users with the ability to add HTML5 video and audio content from a popular media provider, such as Youtube.
Insert/edit Table
Type: yes/no
Creates/edits table elements. It also adds table management functionality to editable area, including dialogs, context menus and context toolbars.
Insert special character
Type: yes/no
Inserts custom characters into the editor.
Insert emojis
Type: yes/no
Insert emoji into editable area. It also adds autocompleter for adding emoji without using the toolbar button. Adding a colon ":", followed by at least two characters will open a popup collection showing matching emoji.
Insert pagebreak
Type: yes/no
Inserts a pagebreak into the editor.
Insert horizontal line
Type: yes/no
Inserts a horizontal rule into the editor.
Toolbar - Other buttons
Directionality
Type: yes/no
Adds directionality control buttons, enabling editor to better handle languages written from right to left.
Show source code
Type: yes/no
Adds a toolbar button that allows a user to edit the HTML code hidden by the WYSIWYG view.
Show in fullscreen view
Type: yes/no
Toggles fullscreen mode. When the toolbar button is pressed the editable area will fill the browser’s viewport.
Show preview
Type: yes/no
Pressing the button opens a dialog box showing the current content in a preview mode.
Print
Type: yes/no
Prints the current editor contents using system dialog.
Display blocks
Type: yes/no
Allows a user to see block level elements in the editable area. It is similar to 'Display invisible characters' functionality, but at block level.
Display invisible characters
Type: yes/no
Adds the ability to see invisible characters displayed in the editable area, like non-breakable space ( ).
Find and replace
Type: yes/no
Adds a button that Searches and/or Replaces contents within the editor.
Word/character count button
Type: yes/no
Opens a word count dialog showing word and character counts. It also places a word and character counter in the status bar (see status bar fields).
Status bar
If all status bar feature are disabled, the status bar in the bottom of the editor will not be shown.
Show element path
Type: yes/no
The element path shows the selected element and the parent elements in the left of the status bar. Clicking an element on the element path will select the element in the editor.
Show word/character count
Type: yes/no
Shows a word and character counter in the status bar in the right of the status bar. Clicking the counter in the status bar switches the display between word count and character count. See more at https://www.tiny.cloud/docs/tinymce/latest/wordcount/
Images settings
The following options modify images tool behavior. For this to work, you need to have images enabled ('Insert/edit image' in toolbar settings above).
Enable file uploads
Type: yes/no
If this is enabled, upload feature will be added to image selection dialog. Users will be possible to choose a image from their computer. The image will be uploaded to Bubble S3 File manager.
Attach this file to
Type: thing
By default, uploaded image files are visible to anyone who has the link to the file (has access to the editor content). To provide an additional layer of security, set this option. If set, uploaded images will be attached to a thing, which is used to determine who has access to view the file. Only users who have the 'View attached files' permission for that thing can view the file. If this value is empty or the thing does not exist, the file will be visible to anyone who has the link.
Image dimensions
Type: yes/no
This options allows you disable the image dimensions input field in the image dialog.
Image caption
Type: yes/no
This option lets users enable captions for images. When this option is enabled the image dialog will have an extra checkbox called "Caption". When a user checks the checkbox the image will get wrapped in an HTML5 figure element with a figcaption inside it. The user will then be able to type caption content inside the editor.
Image advanced tab
Type: yes/no
This option adds an "Advanced" tab to the image dialog allowing you to add custom styles, spacing and borders to images.
Image description
Type: yes/no
This options allows you disable the image description input field in the image dialog.
Image title
Type: yes/no
This options allows you enable the image title input field in the image dialog.
Link settings
Link assume external targets
Type: Yes,No,http,https (dropdown)
Set whether TinyMCE should prepend a http:// prefix if the supplied URL does not contain a protocol prefix. "No": Users are prompted to prepend http:// when the URL entered starts with www and does not have a protocol. Other URLs are added without prompt. "Yes": URLs are assumed to be external. Users are prompted to prepend a http:// prefix when the protocol is not specified. 'http': URLs are assumed to be external. URLs without a protocol prefix are prepended a http:// prefix. 'https': URLs are assumed to be external. URLs without a protocol prefix are prepended a https:// prefix.
Link context toolbar
Type: yes/no
By default it is not possible to open links directly from the editor. Setting this to enabled will enable a context toolbar that will appear when the user’s cursor is within a link. This context toolbar contains fields to modify, remove and open the selected link.
Advanced settings
Some advanced settings bellow require a good understanding of TinyMCE configuration. More more info please see TinyMCE official doc
Enable text selection trigger
Type: yes/no
If enabled, text selection will be tracked by states 'selected html' and 'selected text' and event 'selection changed'. If disabled, the states wont be updated and the event will not be triggered. Disabling can be useful for performance reasons when your users are selecting long text.
Enable text patterns
Type: yes/no
Some text patterns written to editor content are automatically converted to format. E.g. "text" is converted to italic, "1. text" is converted to numbered list, "# text" is converted to H1 title. This option allows to enable/disable this pattern matching behaviour. See complete list of the patterns at https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#text_patterns
Enable context menu
Type: yes/no
The context menu appears when an user right clicks in the editable area. It contains items as: undo/redo, copy/paste, image, table, link. The exact list of items shown in the context menu corresponds to the toolbar buttons settings.
Browser spell check
Type: yes/no
This option configures editor to use the browser’s native spell checker. Disabling the context menu may be required depending on the right-click or context usability requirement.
Enable autosave
Type: yes/no
If enabled, editor value will update every time the user has made modifications to the contents. If not enabled, the value will update only when user clicks out of the element or presses enter. Updating the editor's value means that the 'html/text content' state is updated, autobinding value is published and 'content changed' event is triggered.
Autosave delay (ms)
Type: number
This field is only relevant when the previous field is set to ‘Yes.’ If this value is greater than 0 and the user modifies the contents, the update of the editor’s value is delayed by the specified number of milliseconds. This delay is useful for optimizing the performance by reducing the frequency of updates.
Custom toolbar
Type: text
If set, toolbar settings above will be ignored and TinyMCE will be initialised with 'toolbar' property set to this value. Example: "undo redo | styles | bold italic" More more info, see https://www.tiny.cloud/docs/tinymce/6/available-toolbar-buttons
Custom plugins
Type: text
We automatically initialize TinyMCE with plugins that are required by configuration above. Using this field, you can specify more plugins that will be added in TinyMCE initialisation to the 'plugins' field (see TinyMCE doc https://www.tiny.cloud/docs/tinymce/6/plugins/#open-source-plugins). Use the following format: "plugin1,plugin2"
Custom additional options
Type: text
Additional options in JSON format that will be passed to tinymce.init function. Use this, if you need some specific configuration of TinyMCE editor that is not covered by any element property above.
See all available options in official TinyMCE doc.
The provided value needs to have JSON format.
Example 1:
Settings to disable default URL rewriting. It is useful if you want to display created HTML including images outside of you app (e.g. send it to your customers by email).
{
"convert_urls": false,
"relative_urls": false,
"remove_script_host": false
}Example 2:
Change styles of editor content. In this example heading color and other text color is changed.
{
"content_style": "body { color: #FFCCCC; } h1 { color: aqua; font-weight: 400; }"
}Border radius
Type: number
Leave empty for default border radius.
Border width
Type: number
Leave empty for default border width.
Border color
Type: color
Leave empty for default border color.
Last updated