diff --git a/docs/api/config/image-upload-url.md b/docs/api/config/image-upload-url.md index 761b8c8..9a43aa3 100644 --- a/docs/api/config/image-upload-url.md +++ b/docs/api/config/image-upload-url.md @@ -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 {} @@ -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) diff --git a/docs/api/events/insert-image.md b/docs/api/events/insert-image.md index 7898511..99c5dde 100644 --- a/docs/api/events/insert-image.md +++ b/docs/api/events/insert-image.md @@ -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 @@ -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) ::: diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 855ae27..3d3d2ff 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -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", { @@ -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. diff --git a/docs/index.md b/docs/index.md index d6a84fe..25c556b 100644 --- a/docs/index.md +++ b/docs/index.md @@ -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)