Migrating BBCode Content from Bubble's Default RTE

Switching from Bubble's default Rich Text Editor to TinyMCE is easy - even if you have thousands of existing documents in your database. No complex batch migrations required!

The Challenge

You've been using Bubble's default Rich Text Editor and have lots of content stored in your database. Now you want to upgrade to TinyMCE for its advanced features, but you're worried about your existing data.

What is BBCode?

Bubble's default Rich Text Editor (based on Quill) stores content in BBCode format - a markup language using square brackets like [b]bold[/b], [color=red]text[/color].

TinyMCE uses standard HTML instead. The Import BBCode action handles the conversion automatically.

Recommended Migration Approach: Lazy Migration

Instead of converting all your documents at once, use a lazy migration strategy - convert content on-the-fly as users access it:

Setup

1. Add a new field to your data type (e.g., content_html) to store the HTML version

2. Keep your existing BBCode field (e.g., content_bbcode) - don't delete it

Workflow Logic

When loading a document:

1. Check if HTML content exists - if content_html is not empty, load it directly using Set Content action

2. If HTML is empty, convert from BBCode - use Import BBCode action with content_bbcode

3. Save the converted HTML - when the user saves, store the content in content_html

This way:

• Old documents are converted automatically when first accessed

• New documents are saved directly as HTML

• No batch migration scripts needed

• Zero downtime during transition

Demo

See a live example of BBCode import in action:

Open Demo

How to Use Import BBCode Action

1. Add a workflow (e.g., on page load)

2. Add action: Import BBCode

3. Set "BBCode content" to your existing BBCode field

4. The content is converted to HTML and loaded into the editor

See: Import BBCode Action

What Gets Converted

BBCode	HTML Result
[b]text[/b]	<strong>text</strong>
[i]text[/i]	<em>text</em>
[u]text[/u]	<u>text</u>
[s]text[/s]	<s>text</s>
[color=red]text[/color]	<span style="color:red;">text</span>
[highlight=yellow]text[/highlight]	<span style="background-color:yellow;">text</span>
[size=4]text[/size]	<span style="font-size: 1.5em;">text</span>
[center]text[/center]	<p style="text-align: center;">text</p>
[h1]text[/h1]	<h1>text</h1>
[url=https://...]text[/url]	<a href="https://..." target="_blank">text</a>
[img]url[/img]	<img src="url">

Limitations

• Font family is not preserved - Quill and TinyMCE use different font sets, so [font="Open Sans"] tags are stripped (content is kept, just without font styling)