π οΈ Full Instructions
Getting Started:
Install the plugin and drag the "SwiftWrite Free" or "SwiftWrite Pro" element onto your page.
If using Auto-binding, enable it on the element and point it to your database text field.
Use the Initial Content field to load existing data into the editor.
Handling Images:
When a user uploads an image via the toolbar, SwiftWrite automatically uploads it to your app's built-in Bubble File Manager and generates a secure HTTPS link. Use the An Image Uploaded workflow event to track when this happens!
How to Use the AI Feature:
Check "Enable AI Button" in the element properties.
Go to Workflows -> Add Event -> A SwiftWrite Pro AI Button Clicked.
In this workflow, trigger your OpenAI/Claude API call using the editor's HTML_Content or Plain_Text state.
Add the Element Action Insert Content and pass the AI's response. The text will magically appear exactly where the user left their cursor! β¨
How to Export to PDF:
Create a button in your Bubble app (e.g., "Download PDF").
In the workflow, choose Element Actions -> Export to PDF.
Pass the HTML_Content state of the editor into the action.
SwiftWrite will instantly generate a clean, professional A4 PDF without the default browser headers and footers!
π§° How to use the "Custom Toolbar"
If you select "Custom" in the Toolbar Preset field, you can build your very own layout! Just type the names of the buttons you want, separated by a space. Use a vertical bar (|) to create visual divider lines between groups.
Example of a custom layout:
undo redo | bold italic forecolor | alignleft aligncenter | bullist numlist | link image
π Master List of Available Buttons:
History & Actions: undo, redo, restoredraft (Recover Autosave), removeformat (Clears styling)
Text Formatting: bold, italic, underline, strikethrough
Fonts & Colors: blocks (Paragraph/Headings), fontfamily, fontsize, forecolor (Text color), backcolor (Highlight color)
Alignment: alignleft, aligncenter, alignright, alignjustify
Lists & Indentation: bullist (Bullets), numlist (Numbers), outdent, indent
Insert Elements: link, image, media (Video embeds), table, hr (Horizontal line)
Developer: code (View raw HTML)
(Note: The AI Button is injected automatically if enabled, you don't need to type it!)
How to get up and running in 5 minutes (CSS and Language):
Drop the SwiftWrite Editor Pro element onto your Bubble page and stretch it to 100% width/height of its parent container.
Ensure you have your standard initialization text mapped to the 'Initial Content' field.
To test your custom branding, paste a font override into 'Custom Editor CSS', such as:
body { font-family: -apple-system, sans-serif; font-size: 16px; padding: 30px !important; }
Handling Multilingual Setup (i18n):
Instead of hardcoding translations, this version loads raw language matrices dynamically. In the 'Language Code' input field, pass the exact token expected by the official TinyMCE ecosystem.
Supported language codes include:
English: en
Portuguese (Portugal): pt_PT
Portuguese (Brazil): pt_BR
Spanish: es
French: fr_FR
German: de
Italian: it
For the complete list of available language codes, visit the official TinyMCE translation directory:
https://www.tinymce.com/download/language-packages/
Built on Bubble
