To upload images to the CDN instead of storing them as base64 within the rich text editor in Builder.io, you need to make sure that the images are uploaded to Builder.io’s media library. Once uploaded, the images are served via a CDN.
Steps to Ensure Images are Uploaded to the CDN
-
Upload Images to Builder.io Media Library:
- Drag and Drop Images: When you drag and drop images into the rich text editor, ensure they are uploaded to Builder.io’s media library, not embedded as base64.
- Use the Image Toolbar Feature: Use the image upload feature in the rich text editor toolbar to ensure images are uploaded to Builder.io’s media library.
-
Configure the Rich Text Editor:
- Configure the rich text editor to utilize Builder.io’s media library for images.
Example: Configuring the Rich Text Editor with CDN Upload
Here’s how you can register a component with a rich text input that uploads images to the Builder.io CDN:
import { Builder } from '@builder.io/react';
const MyComponent = (props) => {
return (
<div>
<h1>My Component</h1>
<div dangerouslySetInnerHTML={{ __html: props.description }} />
</div>
);
};
Builder.registerComponent(MyComponent, {
name: 'MyComponent',
inputs: [
{
name: 'description',
type: 'richText',
defaultValue: '',
helperText: 'Use this field to add rich text with images.',
toolbar: ['bold', 'italic', 'underline', 'image', 'link'], // Ensure the image tool is included
},
],
});
Uploading Images through the Visual Editor
-
Open the Visual Editor:
- Navigate to the Builder.io editor and select the content where you want to use
MyComponent.
-
Edit the Rich Text:
- Click on the rich text area where you want to insert the image.
-
Insert Image using the Toolbar:
- Use the toolbar provided in the rich text editor. Click the image icon to upload an image.
- Upload an image from your local machine, and it will get uploaded to Builder.io’s media library and served via the CDN.
Manually Ensuring CDN Uploads
If the drag-and-drop method still results in base64 images, follow these alternative steps:
-
Upload Image to Builder.io Media Library First:
- Before inserting the image into the rich text field, manually upload the image to the Builder.io media library.
- Go to the Builder.io dashboard and navigate to “Media”.
-
Copy the Image URL:
- After uploading the image, copy the URL of the image from the media library.
-
Embed Image Using URL in Rich Text:
- In the rich text editor, use the image insertion feature and paste the URL of the uploaded image.
Custom Code to Handle Image Uploads (Advanced)
If you need more control over the upload process, you can implement custom code to handle image uploads to the CDN. Here’s how to integrate custom image upload handling:
- Implement a Custom Image Upload Handler:
const handleImageUpload = async (file) => {
const formData = new FormData();
formData.append('file', file);
const response = await fetch('https://cdn.builder.io/api/v1/upload?apiKey=YOUR_API_KEY', {
method: 'POST',
body: formData,
});
const data = await response.json();
return data.url;
};
- Add Custom Code in the Rich Text Editor (if supported):
Builder.registerComponent(MyComponent, {
name: 'MyComponent',
inputs: [
{
name: 'description',
type: 'richText',
defaultValue: '',
helperText: 'Use this field to add rich text with images.',
toolbar: ['bold', 'italic', 'underline', 'image', 'link'],
imageHandler: handleImageUpload, // Custom handler for image uploads
},
],
});
Following these steps will ensure that images are uploaded to Builder.io’s CDN instead of being embedded as base64. The key is to use the image toolbar feature correctly and ensure the images go through Builder.io’s media upload process. This gives you optimized images served via the CDN.
