Copy with formatting Plugin

nilsklinger1 · 2025-02-27T08:59:17.021Z

Hey,

I’m in need for a plugin for Bubble.io that can copy rich text with formatting.

I know there is a plugin from Zerocode that can do this, but the problem is that it also copies the box of the rich text editor. So when I paste the copied text into Gmail for example it also pastes the invisible box.

Is there anyone out there that would create a plugin for me? Please send me a DM and tell me the price. I would need one of these two options:

1) An action that can copy text from the Bubble database, similar to the “copy from static text” action from Zerocode. But I need a plugin that can copy the rich text that was saved to the database and process it somehow that I can paste it as rich text.

2) The second option would be a similar action as the “copy with formatting” action from Zerocode but upgraded so that it can copy the text without the box.

usama4745 · 2025-02-27T11:40:59.391Z

are you already saving Rich Text in DB?

nilsklinger1 · 2025-02-27T15:08:49.387Z

@usama4745 Hey, thanks for your reply!

Yes. But rich text saved to the database looks like the following example: "Test text

I would need this text be copied and somehow processed so that I can paste it as rich text into Gmail for example.

usama4745 · 2025-02-27T15:45:06.855Z

@nilsklinger1 So you want rich text to be saved to db in someway after copying so once we extract it from db it maintain same formatting

nilsklinger1 · 2025-02-27T18:46:22.223Z

I want to save rich text to the database and then copy it from the database and paste it as rich text with the same formatting.

ZeroqodeSupport · 2025-02-28T10:02:04.094Z

Hello @nilsklinger1,

Hope you’re doing well.

We noticed your thread here after following up on the zq forum discussion: Copy to Clipboard with formatting - problem, copies everything - #32 by Stephan - Join the Bubble Community | Zeroqode Forum

How we discussed there the “invisible box” concern is caused by how Gmail’s rich text editor processes pasted content if it is HTML. When you copy the content as static text, it is not present.

Additionally, the “copy from static text” action you mentioned supports dynamic values, so you can use it now to copy values from a database or page elements. Could you please try this on your end and let us know if it works for you?

Screenshot 2025-02-28 at 12.01.411348×472 39.2 KB

Feel free to explore any other available solutions, and if you have further questions about our products, don’t hesitate to reach out.

Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble

nilsklinger1 · 2025-02-28T10:20:55.725Z

@ZeroqodeSupport Thank for your message.

Yes, I know. But it is not just for Gmail but also for other rich text editors that are similar. I’m just wondering if there is a different way to copy the text with formatting so that the problem doesn’t occur.

I need to copy rich text from Bubble.io and paste it into apps like Gmail. I would need an option to either copy the text with formatting from the element itself but without the “invisible box” or a function to somehow copy the rich text saved to the database and the paste it as rich text.

I know that you have the “copy from static text” action, but this one only copies the text as it is. (In the Database it is raw HTML) . I would need to copy the rich text from the database, process it somehow and paste it as rich text.

ZeroqodeSupport · 2025-03-04T12:06:30.886Z

Hello @nilsklinger1 ,

Thank you for your reply.

Here are a few general recommendations that might help in your use case:

Use “Copy from Static Text” with Rich Text Processing

If your rich text is stored in the database as HTML, you may need to process it before copying. Consider using a method to clean or adjust the HTML before pasting.

Use a Custom JavaScript Snippet to Copy Only Formatted Text

Instead of using Bubble’s built-in copy actions, a custom JavaScript function could extract just the formatted text, avoiding unwanted extra HTML elements. You can use the Toolbox Plugin in Bubble to run JavaScript that copies only the visible, formatted text.

Use an External API for HTML to Rich Text Conversion

Some services allow processing HTML and converting it to formatted text before copying. APIs like html2text or DOMPurify.js can help sanitize and properly format copied text before pasting.

Kindly note, that we provide general recommendations and support for our plugins, we don’t offer consultancy services or custom integration. Thank you for your understanding! Let us know if you manage to find a solution or if the above info proves helpful.

Best regards,

Support Team
Browse all Zeroqode Plugins for Bubble

nilsklinger1 · 2025-03-11T13:27:22.535Z

Thank you! God helped me to go with option 1. And it works

I use a hmtl element (ID = htmlElement) that displays the html text saved to the database from the rich text editor.

This is the java code that Chat GPT made for me (after a lot of back and forth) to copy and process it so it can be pasted in any text editor:

function bbcodeToHtml(text) {
    text = text.replace(/\[li\s+[^\]]*\](.*?)\[\/li\]/g, "<li>$1</li>");

    text = text.replace(/\[b\](.*?)\[\/b\]/g, "<strong>$1</strong>");
    text = text.replace(/\[i\](.*?)\[\/i\]/g, "<em>$1</em>");
    text = text.replace(/\[u\](.*?)\[\/u\]/g, "<u>$1</u>");
    text = text.replace(/\[s\](.*?)\[\/s\]/g, "<s>$1</s>");
    text = text.replace(/\[url=(.*?)\](.*?)\[\/url\]/g, "<a href='$1' target='_blank'>$2</a>");

    // Überschriften ohne zusätzliche Leerzeile
    text = text.replace(/\[h1\](.*?)\[\/h1\]/g, "<h1>$1</h1>");
    text = text.replace(/\[h2\](.*?)\[\/h2\]/g, "<h2>$1</h2>");
    text = text.replace(/\[h3\](.*?)\[\/h3\]/g, "<h3>$1</h3>");
    text = text.replace(/\[h4\](.*?)\[\/h4\]/g, "<h4>$1</h4>");
    text = text.replace(/\[h5\](.*?)\[\/h5\]/g, "<h5>$1</h5>");
    text = text.replace(/\[h6\](.*?)\[\/h6\]/g, "<h6>$1</h6>");

    text = text.replace(/\[ul\](.*?)\[\/ul\]/gs, function(match, content) {
        let listContent = content.replace(/\[\*\](.*?)\n/g, "<li>$1</li>");
        return "<ul>" + listContent + "</ul>";
    });

    // Zentrierten Text und rechtsausgerichteten Text konvertieren
    text = text.replace(/\[center\](.*?)\[\/center\]/g, "<div style='text-align: center;'>$1</div>");
    text = text.replace(/\[right\](.*?)\[\/right\]/g, "<div style='text-align: right;'>$1</div>");
    
    text = text.replace(/\n/g, "<br>");

    return text;
}

function copyRichText() {
    var bbcodeText = document.getElementById("htmlElement").innerText;  

    bbcodeText = bbcodeText.replace(/\[ml\]/g, "").replace(/\[\/ml\]/g, "");

    var htmlText = bbcodeToHtml(bbcodeText);

    htmlText = `<div style="font-family: Arial, sans-serif; font-size: 14px; white-space: pre-wrap;">${htmlText}</div>`;

    navigator.clipboard.write([
        new ClipboardItem({
            "text/html": new Blob([htmlText], { type: "text/html" }),
            "text/plain": new Blob([bbcodeText], { type: "text/plain" }) 
        })
    ]).catch(err => {
        console.error("Fehler beim Kopieren:", err);
    });
}

copyRichText();

ZeroqodeSupport · 2025-03-12T14:10:05.258Z

Hey @nilsklinger1,

Glad to hear that option 1 worked for you! Thanks for sharing your approach and the JavaScript snippet—it might be helpful for others with a similar use case.

If you ever need further assistance, feel free to reach out. Happy building!

Best regards,
Zeroqode Support Team

Browse all Zeroqode Plugins for Bubble