Images

Insert an image by URL, upload adapter or asset picker. Edit alternative text, dimensions and related properties in the dialog. Preserve meaningful descriptions when replacing an image.

Choose alt text for the image’s purpose. Decorative and informative images need different treatment. Use real resource dimensions when configuring size.

Upload progress and temporary previews are UI state and must not become persisted HTML. Connect uploads.

Minimal content and expected behavior

export async function editImage(host: HTMLElement, trustedImageUrl: string) {
    const image = document.createElement('img');
    image.src = trustedImageUrl;
    image.alt = 'Product front view';
    return createClassicEditor(host, { data: `<p>${image.outerHTML}</p>` });
}

Pass an image URL already validated by the host. After editing image properties with contextual tools, getData() should contain the image URL, alternative text and content attributes.

Common errors

For missing images, check the URL, access permissions and content security policy. Upload and asset selection require separate adapters; a toolbar button is not an upload backend.

Next steps

Examples · Configuration · Troubleshooting