Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 25 additions & 2 deletions docs/api/config/image-upload-url.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,18 @@ description: You can learn about the imageUploadUrl config in the documentation

@short: Optional. Specifies the URL which will be used for image upload

When the property is set, RichText uploads each inserted image to the given endpoint (via toolbar, menubar, paste, or drag-and-drop) and inserts the URL returned by the server.

When the property is omitted or set to a falsy value (`""`, `null`, `undefined`), RichText switches to **inline mode**: the image file is read on the client and embedded directly into the content as a base64 data URL — no server is required. Inline images larger than 1024×800 are proportionally downscaled to fit within these limits.

:::note
Inline (base64) images are not preserved by the built-in DOCX / PDF [export](api/events/export.md). If you rely on export, supply an `imageUploadUrl` so that images reference an external location.
:::

:::caution
Base64 encoding increases the encoded payload by roughly one third relative to the original file. A document with several large inline images grows accordingly, which affects the size of the value returned by [`getValue()`](api/methods/get-value.md), the memory footprint of the editor, and the cost of persisting or transferring the content. Prefer a server `imageUploadUrl` for documents that contain many or large images.
:::

### Usage

~~~jsx {}
Expand All @@ -18,15 +30,26 @@ imageUploadUrl?: string;

### Example

Upload images to a server endpoint:

~~~jsx {3}
// initialize RichText
new richtext.Richtext("#root", {
imageUploadUrl: "some URL"
imageUploadUrl: "https://example.com/upload"
// other configuration properties
});
~~~

Insert images inline as base64 (no server required) — omit the property or pass an empty string:

~~~jsx {2}
new richtext.Richtext("#root", {
// imageUploadUrl is not set, images are inserted as base64 data URLs
// other configuration properties
});
~~~

**Change log:** The property was added in v2.0
**Change log:** The property was added in v2.0. Starting with v2.1, the property is fully optional: when omitted, images are inserted inline as base64 data URLs.

**Related articles:** [Configuration](guides/configuration.md)

Expand Down
6 changes: 5 additions & 1 deletion docs/api/events/insert-image.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ description: You can learn about the insert-image event in the documentation of

interface IImageContext {
id: TID;
value: string;
value: string; // image source: server URL when imageUploadUrl is set, or a base64 data URL when the image is inlined
width: number;
height: number;
// extra props from uploader ctx, not required for the actual action
Expand All @@ -29,6 +29,10 @@ interface IImageContext {
}
~~~

:::note
The `value` field holds either an external URL (when [`imageUploadUrl`](api/config/image-upload-url.md) is configured and the upload succeeds) or a base64 data URL (when `imageUploadUrl` is omitted and the image is inlined on the client). Handlers that process the source — for example, to rewrite the URL or validate the host — must account for both formats.
:::

:::info
For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
:::
Expand Down
25 changes: 23 additions & 2 deletions docs/guides/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -238,9 +238,13 @@ new richtext.Richtext("#root", {
});
~~~

## Configure the image upload URL
## Configure image insertion

Pass a URL to the [`imageUploadUrl`](api/config/image-upload-url.md) property to set the server endpoint for toolbar image uploads:
RichText supports two modes for inserting images via the toolbar, menubar, paste, or drag-and-drop. The mode is selected automatically based on the [`imageUploadUrl`](api/config/image-upload-url.md) property.

### Upload images to a server

Pass a URL to the [`imageUploadUrl`](api/config/image-upload-url.md) property to upload each inserted image to your endpoint. RichText sends the file as `multipart/form-data` (field name `upload`) and inserts the URL returned by the server:

~~~jsx {2}
new richtext.Richtext("#root", {
Expand All @@ -249,6 +253,23 @@ new richtext.Richtext("#root", {
});
~~~

### Insert images inline as base64

Omit [`imageUploadUrl`](api/config/image-upload-url.md) (or set it to an empty string) to embed images directly into the document content as base64 data URLs. No server is required:

~~~jsx {2}
new richtext.Richtext("#root", {
// imageUploadUrl is not set, images are inserted inline
// other configuration properties
});
~~~

Inline images larger than 1024×800 are proportionally downscaled to fit within these limits.

:::note
Inline (base64) images are not preserved by the built-in DOCX / PDF [export](api/events/export.md). If you rely on export, supply an `imageUploadUrl` so that images reference an external location.
:::

## Configure default styles

Use the [`defaultStyles`](api/config/default-styles.md) property to set default styles per block type.
Expand Down
2 changes: 1 addition & 1 deletion docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ description: You can have an overview of DHTMLX JavaScript RichText library in t

- Static [**menubar**](api/config/menubar.md) that can be shown or hidden

- Image uploading, rich formatting, custom styling, and full screen mode
- Image uploading with optional server [upload](api/config/image-upload-url.md) or inline base64 embedding, rich formatting, custom styling, and full screen mode

- [Full API access](api/overview/main_overview.md) for [event handling](api/overview/event_bus_methods_overview.md), [content manipulation](api/overview/methods_overview.md), and [reactive state management](api/overview/state_methods_overview.md)

Expand Down