TinyMCE - Rich Text Editor — Documentation

Setup Instructions

This are step-by-step instructions on how to get the plugin working on any Bubble App.

[ml][ol][li indent=0 align=left]Add this plugin to your application[/li][li indent=0 align=left]Go to [color=rgb(0, 102, 204)][url=https://www.tiny.cloud/auth/signup/][u]https://www.tiny.cloud/auth/signup/[/u][/url][/color] and create your user. Don't forget to [b]add an approved domain[/b] to the list. Copy your API Key and paste it in the Plugin Tab -> TinyMCE Rich Text Editor -> API KEY (Headers)[/li][li indent=0 align=left]In the Design Tab, look under Input Form for the the element [b]TinyMCE [/b]and add it to your Bubble Editor[/li][li indent=0 align=left]Set any configuration you want (e.g Initial content: This is a test)[/li][li indent=0 align=left]Run your App and that's it![/li][/ol][/ml]

Documentation

In the plugin tab, under 'TinyMCE - Rich Text Editor' you will have the property [b]API KEY.[/b] To get a FREE API Key, please visit [color=rgb(0, 102, 204)][url=https://www.tiny.cloud/auth/signup/][u]https://www.tiny.cloud/auth/signup/[/u][/url][/color][u][color=rgb(0, 102, 204)] [/color][/u] When you get your free API key, place it in the plugin tab.

The element ([b]TinyMCE[/b]) will be under "Input Form" in the Bubble Editor. This element will contain the following properties:

[ml][ul][li indent=0 align=left][b]Initial Content: [/b]Sets the specified content to the editor instance, this will cleanup the content before it gets set using the different cleanup rules options. For correct display please use HTML tags.[/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]Placeholder: [/b]This property adds placeholder content that will be shown when the editor is empty. String-based.[/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]Width: [/b]Set the width of the editor. [i]Default is 700[/i] for better display.[/li][/ul][/ml][quote][i][color=rgb(89, 89, 89)]Note: TinyMCE sets the width in pixels if a number is provided. However, if TinyMCE is provided a string it assumes the value is valid CSS and simply sets the editor’s width as the string value. This allows for alternate units such as %, em and vh.[/color][/i][/quote] [ml][ul][li indent=0 align=left][b]Height:[/b] Sets the height of the entire editor, including the menu bar, toolbars, and status bar. [i]Default is 300[/i] for better display.[/li][/ul][/ml][quote][i][color=rgb(89, 89, 89)]Note: If a number is provided, TinyMCE sets the height in pixels. If a string is provided, TinyMCE assumes the value is valid CSS and sets the editor’s height as the string value. This allows for alternate units such as %, em, and vh.[/color][/i][/quote]

When a TinyMCE Element is on display, you will have an extra action to get the content written in the text editor.

[ml][ul][li indent=0 align=left][b]Get content from A TinyMCE: [/b]Gets the content from the editor instance.[/li][/ul][/ml] [h3]Return value[/h3]

[ml][ul][li indent=0 align=left][b]Text Content[/b] - Cleaned content string, only text contents.[/li][li indent=0 align=left][b]HTML Content[/b] - Content string in HTML contents.[/li][/ul][/ml]

The element ([b]TinyMCE[/b]) will be under "Input Form" in the Bubble Editor. This element will contain the following properties:

When a TinyMCE Element is on display, you will have an extra action to get the content written in the text editor.

[ml][ul][li indent=0 align=left][b]Get content from A TinyMCE: [/b]Gets the content from the editor instance.[/li][/ul][/ml] [h3]Return value[/h3]

[ml][ul][li indent=0 align=left][b]Text Content[/b] - Cleaned content string, only text contents.[/li][li indent=0 align=left][b]HTML Content[/b] - Content string in HTML contents.[/li][/ul][/ml]