Video in RichText

Hi, I need help with the rich text. I can’t embed a video, is there a way to do that? Thanks

Hi @emiliano there is not currently a way to embed a video inside the rich text editor. There is a video component that you can add to the page along side any other text / content components.

That being said, if including videos in your rich text is critical, you can always override our rich text editor if there is a library you prefer to use! Simply follow the example of the this plugin: builder/plugin.tsx at main · BuilderIO/builder · GitHub

And register a component within your code base with the name: 'html' and use whatever RTE component you like. That will replace the builder-provided RTE with whatever editor you prefer.

Try it out and let me know if you have any issues or follow up questions!

Hi Tim, thanks for your answer! could you approach me a little more to this? I didn’t understand it very well. What should I do on the builder rich text field? if I want more than one component (eg a video, a callout and a modal), what should I do on the code with that plugin?

thanks

@emiliano of course! So I was actually offering 2 different options:

  1. With our current Rich Text Editor, there is no option to directly include a video. However, we do have a Video component available out of the box. So, theoretically, you should be able to build pages using a mixture of the Video element and Text, image, whatever other elements. You can see an example here:
    Builder.io: Drag and drop page builder and CMS

  1. However, if it is critical for you to have a Rich Text Editor that allows for video uploads, there is another option!
    We use a library called React Quill for our RTE, as you can see in our RTE plugin file in github.
    If you had another component or library that you want to use instead, you can easily replace our RTE with one of your choosing. You would just need to have a file in your app called RichText.js or whatever you like, that would contain something like:
import { Builder } from '@builder.io/sdk';
import YourRTEOfChoice from 'your-RTE-of-choice';
...
function RichTextEditor(props) {
  return (
    <YourRTEOfChoice ... />
  );
}

Builder.registerEditor({
  /**
   * Here we override the built-in richtext editor.
   */
  name: 'html',
  component: RichTextEditor,
});

Then, following this walkthrough, the RTE within Builder will be replaced by whichever component you have chosen, assuming you have the setup and integration of that component correct. It is a bit more of a technical solution but it gives you endless flexibility if there is another RTE provider that you prefer

Decide which of those options makes the most sense for you and try it out! Let us know how it goes

thanks! so I would have to replace the entire text editor for a new one? I am right? or I can just extend the existing one to accept custom components (such as a video)?

Also, that editor I’ll register, is going to be in all the richText fields all around the app? or I just can limit it to one content model.

Thanks

Hey @emiliano you would be replacing the text editor.

You can have it register only for one content model if you follow instructions in this forum post: How do I register custom components for only certain models?

Otherwise it will be all the text editors throughout the app

Thanks. And assuming I replace the richText editor, the current entries that have a richText editor field will see their content deleted? I don’t know if I’m explaining myself.
Eg: I have a model called ‘Customer’ that has one entry called ‘content’ that is a HTML editor (richtext). If I upload a new editor, will the information uploaded to those entries remain? thanks

It should not delete the content in your models, assuming it is compatible with the new editor. It will just change the actual editor interface within the visual editor, if that makes sense.

This plugins requiere to be an enterprise?
I just saw this… Creating custom types with plugins - Builder.io

Ah, yes @emiliano that is correct. It is possible to build and experiment in localhost with plugins, but when loading plugins only enterprise customers will have access to their custom plugins. Apologies for not clarifying that earlier!

I still think using videos as their own element amongst other elements text (outlined in #1 here) is a very flexible and powerful option…is there specific functionality you need that you think will only come from having video within the text editor?

But how could I explore the html text editor I’m registering from Builder?