Rich Text Editor component with floating toolbar

Hello everyone,

I’ve created a new rich text editor component. What it brings is that you have a floating toolbar when the user selects text.


That toolbar is entirely customizable as it is a dropzone. You get access to component actions to interact with the text editor and you also have local context (to know if the selected text already has any formatting for instance)

You have the text styling configuration as you have it on the native rich text editor.

I’ve made a demo app if you want to try it out: https://rich-text-editor.jptrinh.com

The component is free to use. You can navigate to the following linkto get the link to the GitHub repo.

Let me know if you have any feedback!

Hi @jptrinh ,

This is very much what I needed for editing larger documents.

I’ve been trying for quite a while now to import your file into my project, but without any success. So if you don’t mind helping me out:

Can you please point the way to how to integrate your source.tar.gz file into my Weweb project?

Note that I think the explanation should be here, but I just can’t figure it out: Library overview | Documentation

Thanks!

Hello @thijs

Oh I though there was a clear tuto in WeWeb to import coded component, but it doesn’t seem so. I can upload a video later to show how I proceed too!

The idea is to bring the component to your own GitHub account.
You need to then link your Github account to your WeWeb workspace and you’ll be able to access import it in the Coded component tab of your project settings.

To duplicate the component to your Github:
You can follow along Matthew tuto here.
If you go with the source.tar.gz (i’ve just updated the release, so you’ll want to download the newest), you can unzip it and you’ll have the source files of your component to put in your repo.

Alternatively, you can also fork it to your workspace in GitHub directly.

Once it’s imported to your project, it will be accessible in the Add panel → coded component

Let me know how that goes. If you’re still stuck, happy to jump on a call to get you started!
Have a nice day :waving_hand:

Hi @jptrinh, thanks for your explanation!

Only for me, this is too far out of the no-code territory :slight_smile: .

That’s what it takes to push a Weweb project van good to great I suppose.

For now, I’ll put it on my wishlist.

Let me make a video to show how to bring a coded component to your project. It’s only a few steps but does involve multiple tools and navigating at specific places in WeWeb.
I’ll probably do it tomorrow, I’ll ping you back!

Hey @thijs
Here is the step-by-step on how to import coded components in your workspace. Let me know if that helps!

Thank you for this tutorial @jptrinh, you sure know how to make things look easy :man_dancing: . I just also just noticed you have a rich collection of great videos on youtube, thanks for your efforts!

I’m glad i could be of help! I plan on making newer videos, so let me now if I can assist you on checking items from your wishlist :white_check_mark: