Add rich text editing to your Bubble app using the built-in Rich Text Editor element. This tutorial covers configuring toolbar options, embedding images, saving formatted content to the database, and displaying it safely with the Rich Text display element — enabling WYSIWYG content creation for blogs, CMS pages, and user-generated content.
Overview: Rich Text Editing in Bubble
Rich text editing gives users WYSIWYG formatting capabilities — bold, italic, headings, lists, images, and links — without writing HTML. This tutorial configures Bubble's Rich Text Editor for content creation and pairs it with the Rich Text display element for safe rendering.
Prerequisites
- A Bubble account with an app
- A Data Type with a text field for storing content
- Basic understanding of the Design tab
Step-by-step guide
Add the Rich Text Editor element
Add the Rich Text Editor element
Open your editor page in the Design tab. Click '+' and search for 'Rich Text Editor.' Drag it onto the page. It displays a toolbar at the top and a writing area below. This element stores its content as HTML in a text-type field.
Expected result: A rich text editor with formatting toolbar appears on the page.
Configure toolbar options
Configure toolbar options
Select the Rich Text Editor. In the Property Editor, you can customize which toolbar buttons appear. Common options: Bold, Italic, Underline, Headings (H1-H3), Bullet List, Numbered List, Link, Image, Code Block, Quote, and Alignment. Remove options your users do not need to keep the toolbar clean.
Pro tip: For user-generated content, disable the Image button to prevent inline image spam. Use a separate image uploader instead.
Expected result: The toolbar shows only the formatting options you want.
Save rich text content to the database
Save rich text content to the database
Add a Save button below the editor. Workflow: Create (or Make changes to) your content record → body field = Rich Text Editor's value. The value is stored as HTML. For editing existing content, set the Rich Text Editor's initial content to the record's body field.
Expected result: Rich text content saves to the database as HTML and loads back for editing.
Display rich text on public pages
Display rich text on public pages
On the page where you display the content, add a 'Rich Text' element (different from the editor). Set its content source to the database record's body field. The Rich Text element renders HTML safely, stripping any dangerous script tags while preserving formatting, links, and images.
Expected result: Formatted content displays correctly with all styling preserved.
Handle image embedding in rich text
Handle image embedding in rich text
If you enable the Image toolbar button, users can paste image URLs into their content. For a better experience, add a separate File Uploader for images and insert the uploaded URL into the editor. Use the Toolbox plugin's Run JavaScript action to insert HTML at the cursor position in the editor.
Expected result: Users can embed images in their rich text content using uploaded files.
Complete working example
1RICH TEXT EDITING — SETUP SUMMARY2===================================34EDITOR ELEMENT: Rich Text Editor5 Toolbar: Bold, Italic, Headings, Lists, Link, Image, Quote6 Value type: HTML (stored in text field)78SAVE WORKFLOW:9 Event: Save button clicked10 Action: Create/Modify record → body = Rich Text Editor's value1112LOAD FOR EDITING:13 Rich Text Editor's initial content = record's body field1415DISPLAY ELEMENT: Rich Text16 Content source: record's body field17 Auto-sanitizes HTML (removes scripts)18 Preserves: bold, italic, headings, lists, links, images1920IMAGE HANDLING:21 Option 1: Enable Image button in toolbar (URL paste)22 Option 2: File Uploader + JavaScript insert at cursorCommon mistakes when integrating rich text editing capabilities for content creation in Bubble.i
Why it's a problem: Using a regular Text element instead of Rich Text element for display
How to avoid: Always use the Rich Text display element to render HTML content from the database
Why it's a problem: Storing rich text in a field with character limits
How to avoid: Use a text field without enforced character limits, or set generous limits
Why it's a problem: Not sanitizing user-submitted HTML
How to avoid: The Rich Text display element automatically sanitizes HTML. Never use an HTML element to display user-submitted content.
Best practices
- Use the Rich Text display element (not HTML element) to safely render user content
- Customize the toolbar to show only needed formatting options
- Store content as HTML in text fields with generous character limits
- Disable inline images in the toolbar if you want to control image uploads separately
- Test content display across devices to ensure formatting looks good on mobile
- Add an autosave feature that saves drafts every 30 seconds
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add a WYSIWYG rich text editor to my Bubble.io blog CMS. I need toolbar customization, image embedding, and safe HTML rendering on the public site. Can you walk me through the setup?
Add a rich text editor to the content creation page. Configure the toolbar with formatting options, connect it to the Article body field, and display the formatted content on the public article page.
Frequently asked questions
Does the Rich Text Editor support code blocks?
Yes. Enable the Code Block option in the toolbar. It renders code in a monospace font with a styled background.
Can I add custom fonts to the editor?
The editor uses your app's default fonts. To add custom fonts, configure them in the Styles tab and they will be available in the editor.
Is the editor mobile-friendly?
The editor works on mobile but the toolbar can be cramped. Consider using a simplified mobile editor with fewer toolbar options.
Can I limit the formatting options for regular users?
Yes. You can have different editor configurations for admins (full toolbar) and regular users (basic toolbar) using conditional element visibility.
How do I add a character or word counter?
Display the Rich Text Editor's value :number of characters or use JavaScript to count words in the HTML-stripped text.
Can RapidDev help build a content creation platform?
Yes. RapidDev builds content platforms with advanced editing, media management, collaboration features, and publishing workflows.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation