insert-image

Description

Fires when inserting an image (via the toolbar, menubar, clipboard paste, or drag-and-drop)

Usage

"insert-image": (IImageContext) => boolean | void;

interface IImageContext {
    id: TID;
    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
    name?: string;
    file?: File;
    status?: string;
    selected: (ctx: IImageContext) => void;
    uploaded: (ctx: IImageContext) => void;
}

note

The value field holds either an external URL (when imageUploadUrl 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

Example

// initialize RichText
const editor = new richtext.Richtext("#root", {
    // configuration properties
});
// subscribe to the "insert-image" event
editor.api.on("insert-image", (obj) => {
    console.log(obj);
    console.log("The image was inserted");
});

Change log: The event was added in v2.0