Add images, using the rich text editor

[mayyamark]

Hello,
How can I upload images from the visual editor in an input of type “richText”? I was able to add one, by manually adding an img html tag, using the “Edit as code” button; then, when I came back to the rich text editor, the image was there. My goal is NOT to use that approach and use the rich text editor only. I need the attached images to be uploaded to the CDN.

Here is my component:

Builder.registerComponent(MyComponent, {
  name: "MyComponent",
  inputs: [
    {
       name: "description",
       type: "richText",
       defaultValue: "",
    }
  ]
});

Here is how I was able to upload the image, by manually typing the img html tag:

1. I clicked on the “Edit as code” button

2. Added the following code
   <img src="https://d38b044pevnwc9.cloudfront.net/cutout-nuxt/enhancer/2.jpg" />
   

3. Clicked the “Edit as code” button again to return back to the rich text editor

4. The image was embedded in the rich text editor
   

   

Screen recoding: https://file.io/31c8h5WevuBB

[mayyamark]

Update: I was also able to drag and drop an image, but then the image was stored as a base64, which is NOT my goal. I want to upload the image to the CDN.

[Stephane]

UPDATE:
The best way to proceed is by enabling a setting in Builder.io: Visual Development Platform as per the below screenshot: