[new plugin] Blog HTML Editor/Display

Hello bubblers!

I wanted an easy an free HTML WYSIWYG editor and a way to display this content to make a blog in my app. As I didn’t find a plugin that does what I want I decided to create one, and wanted to share with everyone.

It’s free and open, so everyone can contribute with suggestions an feedback. :slightly_smiling_face:

5 Likes

This is very useful! Ill be adding this into my app so I look forward to using it. Thanks for sharing!

2 Likes

Hey @augusto.salles !

Many thanks that’s a super useful plugin for blogs. Sooo time-saving.
I would just have two questions/suggestions:

1/ I save the input from the InputPostBlogEditor as “text” in my DB (text input for the Body of the article) but still I put images directly in my HTML editor therefore the InputPostBlogContent of my article doesn’t display the images afterwards: do you have any solution to this? (I copy pasted the image from another HTML editor, maybe I need to upload the image from my desktop to avoid the HTML code in it?)
2/ For the color of the H2/H3 would that be possible to parameter this directly in the InputPostBlogEditor? Indeed then we need to change the color of H2/H3 in the editor under Format so it’s just a few clicks to add for each article. And since I have green for H2 and red for H3 I have to type the color code each time. So could be a nice improvement!

Thanks for your answer!

1 Like

Hello everyone, I’ve been working a lot on the plugin recently, but because of how bubble handles content loading, the “stretch to fit content” functionality has proven to be quite impossible for me to handle myself. Because of that, other bugs have been appearing from time to time.

So, I’ve decide to work on a completely different approach for the plugin. As of now I’m releasing a new version that has only one element: the “HTML TinyMCE Editor for Blogs”. This element will carry the “article” tag and infuse the html content with the appropriate CSS and styles in it’s value.

In this new version, to display the content, you only have to put it into a HTML element (native to bubble), as there isn’t a Blog Content Display element anymore.

I took the time and added the default colors functionality in H2/H3 tags, as suggested by @quentsb

Thanks to everyone who’s been giving feedback and using the plugin. It’s nice to feel like I’m being useful for the community. :v:

1 Like

Thanks for this, @augusto.salles. Out of curiosity, do you know of a way to insert placeholder values with this plugin? For example, I’ve seen other Rich Text editors that support inserting tags such as {{FirstName}} for a Find/Replace.

1 Like

hum… haven’t thought of that, but it’s an interesting idea. Maybe you could do that now through actions in bubble, using the “:find & replace” option with a “regex pattern” before displaying the content in the HTML element. I’m assuming you want to make it so that each user sees a different customized content, right?

I’ll put this idea on the checklist here and see whats possible in the fure. I just can’t say I’ll be able to prioritize that thought, as I’m working on this plugin as hobby and might not have much time to do so, hehe :sweat_smile:

Correct! I actually have the replacing of placeholders down pat; the problem is more how do I insert placeholders into your plugin’s editor body. :slight_smile: I’ve seen other posts that deal with this for the built-in rich text editor or text inputs (Add any text in any position within a text entry!) but was curious if someone has gotten it to work with the TinyMCE plugin.

That + this plugin would make creating rich-text content a breeze on Bubble. :slight_smile:

1 Like

Hi @augusto.salles many thanks for this new version!
Unfortunately on my side I have issues setting it up:

  • where can we select/modify color code and fonts for the H2/H3 and the text? (basically in the HTML editor now there is no option to customize colors and fonts), here i am talking about my “add an article page” so back-office)
  • how can I display images in my “article page” (blog page visible to users/visitors) with the HTML element? I mean i copy pasted an article from another website/Tiny Editor with images integrated, but then it is not displayed properly. I need to copy paste about 80 articles with pictures and texts from another website to do a migration. Thus i extremely need to be able to copy paste the whole content, else its too much work.

So basically it’s supposed to be easier, but I am now lost in the setup!

Hello there, I made a video trying to clarify a bit how the new logic works. The HTML element is part of bubble’s native elements, so is not very customizable. BUT, it works better with the “stretch to fit content” feature.

Now, all the customization options are in the “editor element”, not in the HTML element.

hey August! thanks your plugin works perfectly now. Still i have this issue with images: since the data field we save the content is “text” my pictures are not displayed in the displayed HTML element: here a screenshot. Do you have any trick to go around this? Maybe change the Body field type? The images are displayed correctly in my HTML Tiny Blog Editor of course, no issue on this.


hum… interesting. Would you send me a link to that article for me to inspect the HTML, please?

About how to insert images, if you click the “insert/edit image” button (see below), an window will open, that allows you to insert images in two ways.
image

  1. You can have the image elsewhere and put it’s link in the “Source” option (red arrow)
  2. You can click the button bellow (blue arrow), to upload from your computer (in this case, the image will be inserted as a base64 string. Not ideal, but that’s what’s possible for now)

Hi. What would you suggest for adding images to responsive pages?

I’ve added a largish image via the editor but it gets cut off when viewed on a mobile device.

Hello @gavin1 , I would consider this a small bug. Ideally, every image should be visible entirely in the screen, right? I’ve just patched this as bug fix in version 4.0.4. Now large images should respect a max-width of 100% in their container. Hope it helps in your case :+1:.

@augusto.salles that works like charm. Thanks for fixing it so quickly

1 Like

Hi Augusto, works perfect (just have to save my images on my desktop before uploading them on the editor), so my mistake. Your plugin is all fine. Many thanks for this! Now I can migrate my 150 blog articles from previous website. Take care!

@augusto.salles - is it possible to have multiple editors in a repeating group? I tried and got this result:

That would be nice, but to be honest I haven’t figured out how to do it yet. Also, I haven’t had much time to work on plugins lately, but I hope to be able to see into that again soon.

@augusto.salles - something you might consider fast tracking for a fee or if I can provide needed support? I work for an agency and this maybe an important component for an app we are building for a customer.

Sorry for the delay in the response. Wild week around here… I’ll try revisiting this issue this week and see what I can do. I’ll keep you informed.

1 Like

Update: I managed to make it partially work with Repeating Groups. I didn’t publish a new version yet because it’s not yet managing the editor values properlly. I’ll try working a bit more on that tomorrow and see if I can publish a new version.

But I’m making progress! Thanks for the push!