TinyMCE - Rich Text Editor

Free

TinyMCE 5 is a powerful and flexible rich text editor that can be embedded in web applications.

About

[center][h1][b]HTML WYSIWYG Editor with Easy Customization[/b][/h1][/center] This user-friendly and highly customizable HTML WYSIWYG editor is built on the robust TinyMCE platform. Whether you need a simple, lightweight text editor or a fully-featured one for your app, this plugin has you covered. The editor is sleek, intuitive, and highly customizable, running on the open-source TinyMCE 6, which is renowned for its advanced features and excellent support. [b]Key Features[/b] [ml][ul][li indent=0 align=left]✔️ Supports auto-binding[/li][li indent=0 align=left]✔️ Highly customizable with numerous fields, actions, and events[/li][li indent=0 align=left]✔️ Adjusts height to fit content[/li][li indent=0 align=left]✔️ Adjusts width to responsive[/li][li indent=0 align=left]✔️ Fast loading and lightweight[/li][li indent=0 align=left]✔️ Excellent table editing capabilities[/li][li indent=0 align=left]✔️ Fully compatible with Bubble's responsive engine[/li][li indent=0 align=left]✔️ Well-documented with support available[/li][/ul][/ml] 🔗[color=rgb(0, 102, 204)] [/color][color=rgb(0, 102, 204)][url=https://plugins.datamaticsoftware.com/tinymce][b]Demo available here[/b][/url][/color] [b]Configuration[/b] The plugin is designed to be easy to configure for most use cases, allowing you to quickly build the first version of your app. For more specific needs, advanced settings are available, which may require a good understanding of TinyMCE configuration options. If you encounter any difficulties, support is readily available. [b]Why TinyMCE?[/b] We chose TinyMCE after testing many text editor solutions due to its performance, features, and reliability. The open-source version of TinyMCE is sufficient for most use cases, but there is also a premium version available with additional features. We plan to support the premium version in the future if there is demand. Let us know if you're interested! [b]Supported Editing Features[/b] [ml][ul][li indent=0 align=left]Read-only mode[/li][li indent=0 align=left]Auto-focus on load[/li][li indent=0 align=left]Dark mode/light mode[/li][li indent=0 align=left]Image upload to Bubble S3 File manager[/li][li indent=0 align=left]Maximum text length control (beta)[/li][li indent=0 align=left]Insert toolbar, selection toolbar, and context menu for distraction-free editing[/li][li indent=0 align=left]Advanced toolbar and status bar customization[/li][li indent=0 align=left]Basic text formatting options, font family, font size, Undo/Redo[/li][li indent=0 align=left]Text alignment, foreground and background color, Indent/Outdent, Line height adjustment[/li][li indent=0 align=left]Bullet/numbered list formatting[/li][li indent=0 align=left]Quote/citation formatting[/li][li indent=0 align=left]Accordion element insertion[/li][li indent=0 align=left]Code sample insertion[/li][li indent=0 align=left]Link insertion and editing[/li][li indent=0 align=left]Image insertion and editing[/li][li indent=0 align=left]Embedding video/audio from YouTube[/li][li indent=0 align=left]Table insertion and management[/li][li indent=0 align=left]Special character and Emoji insertion[/li][li indent=0 align=left]Pagebreak insertion[/li][li indent=0 align=left]Horizontal line insertion[/li][li indent=0 align=left]HTML source code editing[/li][li indent=0 align=left]Fullscreen mode[/li][li indent=0 align=left]Print and preview mode[/li][li indent=0 align=left]Invisible characters visualization[/li][li indent=0 align=left]Find and replace tool[/li][li indent=0 align=left]Directionality control[/li][/ul][/ml]

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]

Full 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.