Render TinyMCE Content Outside the Editor
When using the TinyMCE - Robust Rich Text Editor in your Bubble app, you may want to display the saved HTML content while maintaining its formatting. We have built multiple solutions to help you integrate TinyMCE content seamlessly into your app while keeping the CSS styles.
Render HTML Content Using the Bubble HTML Element (Recommended)
The best way to display formatted content saved from the TinyMCE editor is by using the Bubble HTML element. This ensures that the HTML renders without the overhead of loading TinyMCE library.
Pros of Using an HTML Element
✅ No additional loading overhead. ✅ Supports external links and embedded content. ✅ Allows for full customization via CSS.
Steps to Display Content in an HTML Element:
Add an HTML element to your Bubble page.
Set its content dynamically to the saved HTML from the TinyMCE editor. See bellow.
How to apply TinyMCE CSS styles to displayed content
When displaying TinyMCE content inside the Bubble HTML element, you might notice that the styles do not always match what you see inside the editor. This is because the HTML element only renders raw HTML and does not automatically apply TinyMCE’s styles. Your app's styles are used instead.
To solve this, we have prepared three different approaches that allow you to control how TinyMCE content is displayed while ensuring CSS styles are preserved.
1️⃣ Without iFrame
You can use our CSS tinymce-scoped.css that applies TinyMCE styles inside a wrapper. It ensures that your Bubble app’s global styles do not interfere without need of using an iFrame.
The CSS includes the predefined classes to control the displayed content appearance:
.tinymce-font-family
Applies a TinyMCE default font.
.tinymce-line-height
Applies a TinyMCE default line-height.
.tinymce-margin
Applies a TinyMCE default content margin.
.tinymce-basic-styles
Enables all other TinyMCE CSS styles. For example formatting for tables, blockquotes and image captions.
.tinymce-initial-browser-styles
Resets inherited styles of your Bubble app to prevent applying your app's styles to the displayed TinyMCE content.
Steps to Implement:
Make sure the HTML element field Display as an iFrame is unchecked
Set HTML element content to the following html:
Example Code:
<div class="tinymce-initial-browser-styles tinymce-font-family tinymce-line-height tinymce-margin tinymce-basic-styles">
<style>
@import url("https://bubble-rich-text.pages.dev/rich-text-plugin/preview-css/tinymce-scoped.css");
</style>
[Dynamic Data: Your TinyMCE element's HTML content]
</div>Experiment with the predefined CSS classes to meet your needs.
Screenshot:
Why Use This Approach?
✔ Fully responsive—content resizes dynamically without any restrictions.
✔ No additional scripts or JavaScript required - The same approach can be used if you want to send the HTML content by email.
2️⃣ With iFrame
If you need the exact styling that TinyMCE applies inside the editor, an iFrame is the best option. This method completely isolates the content, ensuring that it looks identical to how it appeared in the editor. However it requires a fixed height of the HTML element (Bubble does not support automatic height adjustment for iFrames).
To set the iframe content styles, use a dedicated CSS tinymce-iframed.css, that sets all the styles globally.
Steps to Implement:
Enable the HTML element “Display as an iFrame” option.
Set HTML element content to the following html.
Example Code:
<style>
@import url('https://bubble-rich-text.pages.dev/rich-text-plugin/preview-css/tinymce-iframed.css');
</style>
[Dynamic Data: Your TinyMCE element's HTML content]Screenshot:
Why Use This Approach?
✔ Exact styling match—content inside the iFrame looks exactly like it does inside TinyMCE.
✔ No interference from Bubble’s global styles—completely isolated.
✖ Requires a fixed height—Bubble does not support automatic height adjustment for iFrames.
3️⃣ Using JavaScript & Shadow DOM (Advanced)
If you need full style isolation without an iFrame, you can use JavaScript to move the content into a Shadow DOM. This ensures that Bubble’s styles do not affect the content while allowing dynamic resizing.
Steps to Implement:
Make sure the HTML element field Display as an iFrame is unchecked
Use the following html and JavaScript to move the content into a Shadow DOM, ensuring style isolation.
Example Code:
<div class="tinymce-wrapper">
<style>
@import url("https://bubble-rich-text.pages.dev/rich-text-plugin/preview-css/tinymce-scoped.css");
</style>
[Dynamic Data: Your TinyMCE element's HTML content]
</div>
<script>
document.querySelectorAll(".tinymce-wrapper").forEach(container => {
if (!container.shadowRoot) {
const shadow = container.attachShadow({ mode: "open" });
const contentWrapper = document.createElement("div");
contentWrapper.classList.add("tinymce-font-family");
contentWrapper.classList.add("tinymce-line-height");
contentWrapper.classList.add("tinymce-margin");
contentWrapper.classList.add("tinymce-basic-styles");
while (container.firstChild) contentWrapper.appendChild(container.firstChild);
shadow.appendChild(contentWrapper);
}
});
</script>Why Use This Approach?
✔ Prevents Bubble’s global styles from interfering—fully isolated.
✔ No fixed height required—content remains fully responsive.
✖ Requires JavaScript
Which Approach Should You Use?
• Use Scoped CSS (Recommended) if you want TinyMCE content to fit seamlessly into your app while remaining responsive.
• Use iFrame if you need perfect styling but don’t mind setting a fixed height.
• Use Shadow DOM if the other two approaches do not work for you.
Alternative Approaches to Render HTML Content
Render HTML Content Using the Editor in Read-Only Mode
Alternatively, you can use the TinyMCE editor itself to display content by setting it to Read-Only Mode.
Steps to Enable Read-Only Mode
Add a TinyMCE editor element to your page.
Set the Read only field to
Yes(found in the element’s settings).Disable toolbars and unnecessary features to reduce overhead.
Set the Initial content field to dynamically load the saved HTML.
Pros of Using Read-Only Mode
✅ Ensures content appears exactly as it was created. ✅ No need to manage additional styling.
Limitations
Performance impact: Each instance of TinyMCE loads editor scripts, increasing page load time if multiple instances are used. However turning off the most editor features will load only necessary scripts automatically.
External links: Clicking external links inside the editor might not work as expected.
Embedded videos: Embedded media may not play properly.
Render HTML Content Using the Editor in Inline Mode
A third option is to configure TinyMCE in Inline Mode, which allows your app’s CSS to style the content dynamically.
Steps to Enable Inline Mode
Change the Editor mode field to
Inline.Ensure your Bubble page styles apply to the editor for a seamless look.
Disable toolbars and plugins to keep it lightweight.
Pros of Using Inline Mode
✅ Uses your app’s styling for consistency. ✅ Reduces the visual footprint of the editor.
Limitations
Similar performance concerns as Read-Only Mode.
Inline mode can still be overkill for just displaying content.
🚀 We built these solutions so you can choose what works best for you! Let us know if you need to help with a use case that is not covered. 😊🔥
Last updated