Advanced Rich Text Editor

1. Navigate to Your Account: At the top-right corner of the AWS Management Console, you'll see your account name or number. Click on it to open the dropdown menu.

2. From the dropdown, select the "Security Credentials" option.

3. Access Keys Section: Once on the Security Credentials page, expand the "Access keys (access key ID and secret access key)" section.

2. Create New Access Key:
-If you already have existing access keys, you'll see them listed here.
-To create a new access key, click the "Create New Access Key" button.

5. Open plugin settings in the Plugins tab from the Bubble.

2. Fill in the following AWS fields.

• AWS Access Key - The access key from the downloaded file.

• AWS Secret Key - The secret key from the downloaded file.

• AWS Region - In AWS (Amazon Web Services), a "Region" is a specific geographical area where AWS has data centers.

• AWS Bucket Name - The name of the bucket in AWS.

1. In the 'Block public access' area unlock public access to all for the time being.

2. In the 'Bucket Policy' area you can configure the rules for security and privacy via Bucket Policy. Take a look at the "Action", "Resource" and "Condition" fields where we grant access to reading the objects from our bucket.

javascript
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",            
            "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": "https://zeroqode-demo-02.bubbleapps.io/*"
                }
            }
        },
        {
            "Sid": "AddPerm2",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "*",
            "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
        }
    ]
}

3. In the Access Control List (ACL) area make sure that all the options look like the image below to match our configuration:

4. Use the 'Cross-origin resource sharing' area to configure the CORS policy for the S3 bucket.

javascript
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "DELETE",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ],
        "MaxAgeSeconds": 30000
    }
]

javascript
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "DELETE",
            "POST"
        ],
        "AllowedOrigins": [
            "https://yourdomain.com",
            "https://yourdomain.bubbleapps.io"
        ],
        "ExposeHeaders": [
            "ETag"
        ],
        "MaxAgeSeconds": 30000
    }
]

1. Initially, the “Micro 5” font was not available in the font list.

2. On the editor page, the “Custom Fonts Link” field is filled in with the font link from Google where is present the “Micro 5” font.

3. Additionally, the “Custom Fonts” field is filled in with the name of the desired font.

4. Finally, the “Micro 5” font was appended at the top of the list and is available to be used.

1. Import your desired fonts thru the Custom fonts.

2. The Text element uses the “Poseidonia Regular” font.

3. The same font is mentioned, in the “Custom Fonts” field for the plugin element.

4. Finally, the “Poseidonia Regular” font was appended at the top of the list and is available to be used.

1. The Text element uses the “EB Garamond” font.

2. The same font is mentioned, in the “Custom Fonts” field for the plugin element.

3. Finally, the “EB Garamond” font was appended at the top of the list and is available to be used.