diff --git a/docs/api/config/layout-mode.md b/docs/api/config/layout-mode.md index 10b21a8..0458e9b 100644 --- a/docs/api/config/layout-mode.md +++ b/docs/api/config/layout-mode.md @@ -13,7 +13,7 @@ description: You can learn about the layoutMode config in the documentation of t ### Usage ~~~jsx {} -layoutMode: "classic" | "document"; +layoutMode?: "classic" | "document"; ~~~ The `"classic"` mode represents the edit area that fits the entire page. The `"document"` mode closely represent the real document sizes (sizes used: A4, A5, A6, A7). diff --git a/docs/api/config/menubar.md b/docs/api/config/menubar.md index 8a452f0..d6152f4 100644 --- a/docs/api/config/menubar.md +++ b/docs/api/config/menubar.md @@ -13,7 +13,13 @@ description: You can learn about the menubar config in the documentation of the ### Usage ~~~jsx {} -menubar?: boolean; +menubar?: boolean; +~~~ + +### Default config + +~~~jsx +menubar: false; ~~~ ### Example diff --git a/docs/api/config/theme.md b/docs/api/config/theme.md new file mode 100644 index 0000000..5cd6d9a --- /dev/null +++ b/docs/api/config/theme.md @@ -0,0 +1,42 @@ +--- +sidebar_label: theme +title: theme Config +description: You can learn about the theme config in the documentation of the DHTMLX JavaScript RichText library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX RichText. +--- + +# theme + +### Description + +@short: Optional. Specifies the visual theme applied to the RichText editor + +### Usage + +~~~jsx {} +theme?: { + name: string; + fonts: boolean; +}; +~~~ + +### Parameters + +- `name` - (required) the name of the theme to apply +- `fonts` - (required) defines whether to load the fonts bundled with the theme + +### Example + +~~~jsx {3-6} +// initialize RichText +new richtext.Richtext("#root", { + theme: { + name: "dark", + fonts: true + } + // other configuration properties +}); +~~~ + +**Change log:** The property was added in v2.0 + +**Related articles:** [Configuration](guides/configuration.md) diff --git a/docs/api/config/toolbar.md b/docs/api/config/toolbar.md index 79e2fe3..102a0f6 100644 --- a/docs/api/config/toolbar.md +++ b/docs/api/config/toolbar.md @@ -13,7 +13,7 @@ description: You can learn about the toolbar config in the documentation of the ### Usage ~~~jsx {} -toolbar?: boolean | Array any }>; +toolbar?: boolean | Array void }>; ~~~ #### Available buttons within Toolbar @@ -129,7 +129,7 @@ new richtext.Richtext("#root", { ### Default config ~~~jsx -const defaultToolbarButtons = { +const defaultToolbarButtons = [ "undo", "redo", "separator", @@ -162,7 +162,7 @@ const defaultToolbarButtons = { "separator", "fullscreen", "mode" -}; +]; ~~~ :::tip diff --git a/docs/api/events/export.md b/docs/api/events/export.md index 0691bd5..99b2632 100644 --- a/docs/api/events/export.md +++ b/docs/api/events/export.md @@ -27,10 +27,12 @@ interface IExportOptions { The callback of **export** event can take an object with the following parameters: -- `format` - a file format -- `url` - a base URL for file export -- `download` - allows a user to specify if he wants to download the file after receiving the response back from the server. If the property is set to "false", the file will not download, but the user will instead be able to get blob data from the event object (see the `result` prop in the event definition) -- `fileName` - a file name to be exported +- `options` - an object with export options: + - `format` - (optional) a file format: `"docx"` or `"pdf"` + - `url` - (optional) a base URL for file export + - `download` - (optional) allows a user to specify if he wants to download the file after receiving the response back from the server. If the property is set to `false`, the file will not download, but the user will instead be able to get blob data from the event object (see the `result` parameter) + - `fileName` - (optional) a file name to be exported +- `result` - (optional) the blob data returned from the server when `download` is set to `false` :::info For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) diff --git a/docs/api/events/insert-image.md b/docs/api/events/insert-image.md index 7898511..cf3146a 100644 --- a/docs/api/events/insert-image.md +++ b/docs/api/events/insert-image.md @@ -29,6 +29,20 @@ interface IImageContext { } ~~~ +### Parameters + +The callback of the **insert-image** event receives an `IImageContext` object with the following parameters: + +- `id` - the unique identifier of the image +- `value` - the image URL (src) +- `width` - the image width in pixels +- `height` - the image height in pixels +- `name` - (optional) the original file name +- `file` - (optional) the `File` object from the uploader +- `status` - (optional) the upload status string +- `selected` - a callback invoked when the image is selected; receives the `IImageContext` object +- `uploaded` - a callback invoked when the image upload completes; receives the `IImageContext` object + :::info For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: diff --git a/docs/api/events/insert-link.md b/docs/api/events/insert-link.md index 1db8b8d..1c5f7f9 100644 --- a/docs/api/events/insert-link.md +++ b/docs/api/events/insert-link.md @@ -18,7 +18,7 @@ description: You can learn about the insert-link event in the documentation of t ### Parameters -The callback of the **update-link** event can take an object with the following parameter: +The callback of the **insert-link** event can take an object with the following parameter: - `url` - the url to be inserted diff --git a/docs/api/internal/detach.md b/docs/api/internal/detach.md index 4992e37..fcdcc8a 100644 --- a/docs/api/internal/detach.md +++ b/docs/api/internal/detach.md @@ -1,6 +1,6 @@ --- sidebar_label: api.detach() -title: on Method +title: detach Method description: You can learn about the on method in the documentation of the DHTMLX JavaScript RichText library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX RichText. --- diff --git a/docs/api/internal/exec.md b/docs/api/internal/exec.md index ba0bcd0..418d3e8 100644 --- a/docs/api/internal/exec.md +++ b/docs/api/internal/exec.md @@ -22,7 +22,7 @@ api.exec( ### Parameters - `event` - (required) an event to be fired -- `config` - (required) the config object with parameters (see the event to be fired) +- `config` - (optional) the config object with parameters (see the event to be fired); omit for parameterless actions (e.g. `"undo"`, `"redo"`, `"print"`) ### Events diff --git a/docs/api/internal/get-reactive-state.md b/docs/api/internal/get-reactive-state.md index 3fc3830..d8384fd 100644 --- a/docs/api/internal/get-reactive-state.md +++ b/docs/api/internal/get-reactive-state.md @@ -25,7 +25,7 @@ The method returns an object with the following parameters: cursorState: { subscribe: any }, defaultStyles {...}, document {...}, - fullscreen {...}, + fullscreenMode {...}, history {...}, layoutMode {...}, popup {...}, diff --git a/docs/api/internal/get-state.md b/docs/api/internal/get-state.md index f666c91..14f7d73 100644 --- a/docs/api/internal/get-state.md +++ b/docs/api/internal/get-state.md @@ -25,7 +25,7 @@ The method returns an object with the following parameters: cursorState: {}, defaultStyles: {}, document: {}, - fullscreen: boolean, + fullscreenMode: boolean, history: [] layoutMode: string, popup: any, diff --git a/docs/api/internal/on.md b/docs/api/internal/on.md index 165aaa2..591844b 100644 --- a/docs/api/internal/on.md +++ b/docs/api/internal/on.md @@ -15,7 +15,8 @@ description: You can learn about the on method in the documentation of the DHTML ~~~jsx {} api.on( event: string, - handler: function + handler: function, + options?: { tag?: string } ): void; ~~~ @@ -23,6 +24,8 @@ api.on( - `event` - (required) an event to be fired - `handler` - (required) a handler to be attached (the handler arguments will depend on the event to be fired) +- `options` - (optional) an object with the following property: + - `tag` - (optional) a string label used to group handlers; pass the same tag to [`api.detach()`](api/internal/detach.md) to remove all handlers with that tag at once ### Events @@ -43,4 +46,4 @@ editor.api.on("set-font-size", (obj) => { }); ~~~ -**Change log:** The method was updated in v2.0. The `context` parameter were removed +**Change log:** The method was updated in v2.0. The `context` parameter was removed diff --git a/docs/api/methods/set-config.md b/docs/api/methods/set-config.md index d54fef0..40a40da 100644 --- a/docs/api/methods/set-config.md +++ b/docs/api/methods/set-config.md @@ -13,7 +13,7 @@ description: You can learn about the setConfig method in the documentation of th ### Usage ~~~jsx {} -setConfig(config: { [key:any]: any }): void; +setConfig(config: Partial): void; ~~~ ### Parameters diff --git a/docs/api/methods/set-locale.md b/docs/api/methods/set-locale.md index 55610c6..38afeb8 100644 --- a/docs/api/methods/set-locale.md +++ b/docs/api/methods/set-locale.md @@ -13,7 +13,7 @@ description: You can learn about the setLocale method in the documentation of th ### Usage ~~~jsx {} -setLocale(null | locale?: object): void; +setLocale(locale?: Record | null): void; ~~~ ### Parameters diff --git a/docs/api/methods/set-value.md b/docs/api/methods/set-value.md index 5d40f94..c738b2f 100644 --- a/docs/api/methods/set-value.md +++ b/docs/api/methods/set-value.md @@ -13,7 +13,7 @@ description: You can learn about the setValue method in the documentation of the ### Usage ~~~jsx {} -setValue: (value: string, encoder?: any): void; +setValue(value: string, encoder?: any): void; ~~~ ### Parameters diff --git a/docs/api/overview/event_bus_methods_overview.md b/docs/api/overview/event_bus_methods_overview.md index 367bf7d..0e084d9 100644 --- a/docs/api/overview/event_bus_methods_overview.md +++ b/docs/api/overview/event_bus_methods_overview.md @@ -11,8 +11,8 @@ These methods are designed for advanced integrations and custom behavior based o | Name | Description | | ------------------------------------------------- | -------------------------------------------- | -| [](../internal/detach.md) | @getshort(../internal/detach.md) | -| [](../internal/exec.md) | @getshort(../internal/exec.md) | -| [](../internal/intercept.md) | @getshort(../internal/intercept.md) | -| [](../internal/on.md) | @getshort(../internal/on.md) | -| [](../internal/set-next.md) | @getshort(../internal/set-next.md) | +| [](api/internal/detach.md) | @getshort(api/internal/detach.md) | +| [](api/internal/exec.md) | @getshort(api/internal/exec.md) | +| [](api/internal/intercept.md) | @getshort(api/internal/intercept.md) | +| [](api/internal/on.md) | @getshort(api/internal/on.md) | +| [](api/internal/set-next.md) | @getshort(api/internal/set-next.md) | diff --git a/docs/api/overview/events_overview.md b/docs/api/overview/events_overview.md index 12e92be..957e228 100644 --- a/docs/api/overview/events_overview.md +++ b/docs/api/overview/events_overview.md @@ -11,35 +11,35 @@ You can use these events to extend functionality, track user interaction, or tri | Name | Description | | ------------------------------------------------------ | --------------------------------------------- | -| [](../events/align.md) | @getshort(../events/align.md) | -| [](../events/clear-text-format.md) | @getshort(../events/clear-text-format.md) | -| [](../events/copy.md) | @getshort(../events/copy.md) | -| [](../events/create-new.md) | @getshort(../events/create-new.md) | -| [](../events/cut.md) | @getshort(../events/cut.md) | -| [](../events/delete-link.md) | @getshort(../events/delete-link.md) | -| [](../events/export.md) | @getshort(../events/export.md) | -| [](../events/import.md) | @getshort(../events/import.md) | -| [](../events/indent.md) | @getshort(../events/indent.md) | -| [](../events/insert-image.md) | @getshort(../events/insert-image.md) | -| [](../events/insert-line.md) | @getshort(../events/insert-line.md) | -| [](../events/insert-link.md) | @getshort(../events/insert-link.md) | -| [](../events/insert-list.md) | @getshort(../events/insert-list.md) | -| [](../events/outdent.md) | @getshort(../events/outdent.md) | -| [](../events/paste.md) | @getshort(../events/paste.md) | -| [](../events/print.md) | @getshort(../events/print.md) | -| [](../events/redo.md) | @getshort(../events/redo.md) | -| [](../events/resize-image.md) | @getshort(../events/resize-image.md) | -| [](../events/set-font-family.md) | @getshort(../events/set-font-family.md) | -| [](../events/set-font-size.md) | @getshort(../events/set-font-size.md) | -| [](../events/set-line-height.md) | @getshort(../events/set-line-height.md) | -| [](../events/set-text-color.md) | @getshort(../events/set-text-color.md) | -| [](../events/set-text-format.md) | @getshort(../events/set-text-format.md) | -| [](../events/set-text-style.md) | @getshort(../events/set-text-style.md) | -| [](../events/show-popup.md) | @getshort(../events/show-popup.md) | -| [](../events/subscript.md) | @getshort(../events/subscript.md) | -| [](../events/superscript.md) | @getshort(../events/superscript.md) | -| [](../events/toggle-fullscreen-mode.md) | @getshort(../events/toggle-fullscreen-mode.md)| -| [](../events/toggle-layout-mode.md) | @getshort(../events/toggle-layout-mode.md) | -| [](../events/toggle-shortcut-info.md) | @getshort(../events/toggle-shortcut-info.md) | -| [](../events/undo.md) | @getshort(../events/undo.md) | -| [](../events/update-link.md) | @getshort(../events/update-link.md) | +| [](api/events/align.md) | @getshort(api/events/align.md) | +| [](api/events/clear-text-format.md) | @getshort(api/events/clear-text-format.md) | +| [](api/events/copy.md) | @getshort(api/events/copy.md) | +| [](api/events/create-new.md) | @getshort(api/events/create-new.md) | +| [](api/events/cut.md) | @getshort(api/events/cut.md) | +| [](api/events/delete-link.md) | @getshort(api/events/delete-link.md) | +| [](api/events/export.md) | @getshort(api/events/export.md) | +| [](api/events/import.md) | @getshort(api/events/import.md) | +| [](api/events/indent.md) | @getshort(api/events/indent.md) | +| [](api/events/insert-image.md) | @getshort(api/events/insert-image.md) | +| [](api/events/insert-line.md) | @getshort(api/events/insert-line.md) | +| [](api/events/insert-link.md) | @getshort(api/events/insert-link.md) | +| [](api/events/insert-list.md) | @getshort(api/events/insert-list.md) | +| [](api/events/outdent.md) | @getshort(api/events/outdent.md) | +| [](api/events/paste.md) | @getshort(api/events/paste.md) | +| [](api/events/print.md) | @getshort(api/events/print.md) | +| [](api/events/redo.md) | @getshort(api/events/redo.md) | +| [](api/events/resize-image.md) | @getshort(api/events/resize-image.md) | +| [](api/events/set-font-family.md) | @getshort(api/events/set-font-family.md) | +| [](api/events/set-font-size.md) | @getshort(api/events/set-font-size.md) | +| [](api/events/set-line-height.md) | @getshort(api/events/set-line-height.md) | +| [](api/events/set-text-color.md) | @getshort(api/events/set-text-color.md) | +| [](api/events/set-text-format.md) | @getshort(api/events/set-text-format.md) | +| [](api/events/set-text-style.md) | @getshort(api/events/set-text-style.md) | +| [](api/events/show-popup.md) | @getshort(api/events/show-popup.md) | +| [](api/events/subscript.md) | @getshort(api/events/subscript.md) | +| [](api/events/superscript.md) | @getshort(api/events/superscript.md) | +| [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md)| +| [](api/events/toggle-layout-mode.md) | @getshort(api/events/toggle-layout-mode.md) | +| [](api/events/toggle-shortcut-info.md) | @getshort(api/events/toggle-shortcut-info.md) | +| [](api/events/undo.md) | @getshort(api/events/undo.md) | +| [](api/events/update-link.md) | @getshort(api/events/update-link.md) | diff --git a/docs/api/overview/main_overview.md b/docs/api/overview/main_overview.md index e9e746f..175f0e6 100644 --- a/docs/api/overview/main_overview.md +++ b/docs/api/overview/main_overview.md @@ -23,75 +23,76 @@ new richtext.RichText("#root", { | Name | Description | | ----------------------------------------------|-------------------------------------------| -| [](../methods/get-value.md) | @getshort(../methods/get-value.md) | -| [](../methods/set-value.md) | @getshort(../methods/set-value.md) | -| [](../methods/set-config.md) | @getshort(../methods/set-config.md) | -| [](../methods/set-locale.md) | @getshort(../methods/set-locale.md) | -| [](../methods/destructor.md) | @getshort(../methods/destructor.md) | +| [](api/methods/get-value.md) | @getshort(api/methods/get-value.md) | +| [](api/methods/set-value.md) | @getshort(api/methods/set-value.md) | +| [](api/methods/set-config.md) | @getshort(api/methods/set-config.md) | +| [](api/methods/set-locale.md) | @getshort(api/methods/set-locale.md) | +| [](api/methods/destructor.md) | @getshort(api/methods/destructor.md) | ## Event Bus methods | Name | Description | | ----------------------------------------------|-------------------------------------------| -| [](../internal/exec.md) | @getshort(../internal/exec.md) | -| [](../internal/intercept.md) | @getshort(../internal/intercept.md) | -| [](../internal/on.md) | @getshort(../internal/on.md) | -| [](../internal/detach.md) | @getshort(../internal/detach.md) | -| [](../internal/set-next.md) | @getshort(../internal/set-next.md) | +| [](api/internal/exec.md) | @getshort(api/internal/exec.md) | +| [](api/internal/intercept.md) | @getshort(api/internal/intercept.md) | +| [](api/internal/on.md) | @getshort(api/internal/on.md) | +| [](api/internal/detach.md) | @getshort(api/internal/detach.md) | +| [](api/internal/set-next.md) | @getshort(api/internal/set-next.md) | ## State methods | Name | Description | | ----------------------------------------------|-------------------------------------------| -| [](../internal/get-state.md) | @getshort(../internal/get-state.md) | -| [](../internal/get-reactive-state.md) | @getshort(../internal/get-reactive-state.md) | +| [](api/internal/get-state.md) | @getshort(api/internal/get-state.md) | +| [](api/internal/get-reactive-state.md) | @getshort(api/internal/get-reactive-state.md) | ## Events | Name | Description | | ----------------------------------------------|-------------------------------------------| -| [](../events/align.md) | @getshort(../events/align.md) | -| [](../events/clear-text-format.md) | @getshort(../events/clear-text-format.md) | -| [](../events/copy.md) | @getshort(../events/copy.md) | -| [](../events/create-new.md) | @getshort(../events/create-new.md) | -| [](../events/cut.md) | @getshort(../events/cut.md) | -| [](../events/delete-link.md) | @getshort(../events/delete-link.md) | -| [](../events/export.md) | @getshort(../events/export.md) | -| [](../events/import.md) | @getshort(../events/import.md) | -| [](../events/indent.md) | @getshort(../events/indent.md) | -| [](../events/insert-image.md) | @getshort(../events/insert-image.md) | -| [](../events/insert-line.md) | @getshort(../events/insert-line.md) | -| [](../events/insert-link.md) | @getshort(../events/insert-link.md) | -| [](../events/insert-list.md) | @getshort(../events/insert-list.md) | -| [](../events/outdent.md) | @getshort(../events/outdent.md) | -| [](../events/paste.md) | @getshort(../events/paste.md) | -| [](../events/print.md) | @getshort(../events/print.md) | -| [](../events/redo.md) | @getshort(../events/redo.md) | -| [](../events/resize-image.md) | @getshort(../events/resize-image.md) | -| [](../events/set-font-family.md) | @getshort(../events/set-font-family.md) | -| [](../events/set-font-size.md) | @getshort(../events/set-font-size.md) | -| [](../events/set-line-height.md) | @getshort(../events/set-line-height.md) | -| [](../events/set-text-color.md) | @getshort(../events/set-text-color.md) | -| [](../events/set-text-format.md) | @getshort(../events/set-text-format.md) | -| [](../events/set-text-style.md) | @getshort(../events/set-text-style.md) | -| [](../events/show-popup.md) | @getshort(../events/show-popup.md) | -| [](../events/subscript.md) | @getshort(../events/subscript.md) | -| [](../events/superscript.md) | @getshort(../events/superscript.md) | -| [](../events/toggle-fullscreen-mode.md) | @getshort(../events/toggle-fullscreen-mode.md) | -| [](../events/toggle-layout-mode.md) | @getshort(../events/toggle-layout-mode.md) | -| [](../events/toggle-shortcut-info.md) | @getshort(../events/toggle-shortcut-info.md) | -| [](../events/undo.md) | @getshort(../events/undo.md) | -| [](../events/update-link.md) | @getshort(../events/update-link.md) | +| [](api/events/align.md) | @getshort(api/events/align.md) | +| [](api/events/clear-text-format.md) | @getshort(api/events/clear-text-format.md) | +| [](api/events/copy.md) | @getshort(api/events/copy.md) | +| [](api/events/create-new.md) | @getshort(api/events/create-new.md) | +| [](api/events/cut.md) | @getshort(api/events/cut.md) | +| [](api/events/delete-link.md) | @getshort(api/events/delete-link.md) | +| [](api/events/export.md) | @getshort(api/events/export.md) | +| [](api/events/import.md) | @getshort(api/events/import.md) | +| [](api/events/indent.md) | @getshort(api/events/indent.md) | +| [](api/events/insert-image.md) | @getshort(api/events/insert-image.md) | +| [](api/events/insert-line.md) | @getshort(api/events/insert-line.md) | +| [](api/events/insert-link.md) | @getshort(api/events/insert-link.md) | +| [](api/events/insert-list.md) | @getshort(api/events/insert-list.md) | +| [](api/events/outdent.md) | @getshort(api/events/outdent.md) | +| [](api/events/paste.md) | @getshort(api/events/paste.md) | +| [](api/events/print.md) | @getshort(api/events/print.md) | +| [](api/events/redo.md) | @getshort(api/events/redo.md) | +| [](api/events/resize-image.md) | @getshort(api/events/resize-image.md) | +| [](api/events/set-font-family.md) | @getshort(api/events/set-font-family.md) | +| [](api/events/set-font-size.md) | @getshort(api/events/set-font-size.md) | +| [](api/events/set-line-height.md) | @getshort(api/events/set-line-height.md) | +| [](api/events/set-text-color.md) | @getshort(api/events/set-text-color.md) | +| [](api/events/set-text-format.md) | @getshort(api/events/set-text-format.md) | +| [](api/events/set-text-style.md) | @getshort(api/events/set-text-style.md) | +| [](api/events/show-popup.md) | @getshort(api/events/show-popup.md) | +| [](api/events/subscript.md) | @getshort(api/events/subscript.md) | +| [](api/events/superscript.md) | @getshort(api/events/superscript.md) | +| [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md) | +| [](api/events/toggle-layout-mode.md) | @getshort(api/events/toggle-layout-mode.md) | +| [](api/events/toggle-shortcut-info.md) | @getshort(api/events/toggle-shortcut-info.md) | +| [](api/events/undo.md) | @getshort(api/events/undo.md) | +| [](api/events/update-link.md) | @getshort(api/events/update-link.md) | ## Properties | Name | Description | | ----------------------------------------------|-------------------------------------------| -| [](../config/default-styles.md) | @getshort(../config/default-styles.md) | -| [](../config/fullscreen-mode.md) | @getshort(../config/fullscreen-mode.md) | -| [](../config/image-upload-url.md) | @getshort(../config/image-upload-url.md) | -| [](../config/layout-mode.md) | @getshort(../config/layout-mode.md) | -| [](../config/locale.md) | @getshort(../config/locale.md) | -| [](../config/menubar.md) | @getshort(../config/menubar.md) | -| [](../config/toolbar.md) | @getshort(../config/toolbar.md) | -| [](../config/value.md) | @getshort(../config/value.md) | +| [](api/config/default-styles.md) | @getshort(api/config/default-styles.md) | +| [](api/config/fullscreen-mode.md) | @getshort(api/config/fullscreen-mode.md) | +| [](api/config/image-upload-url.md) | @getshort(api/config/image-upload-url.md) | +| [](api/config/layout-mode.md) | @getshort(api/config/layout-mode.md) | +| [](api/config/locale.md) | @getshort(api/config/locale.md) | +| [](api/config/menubar.md) | @getshort(api/config/menubar.md) | +| [](api/config/theme.md) | @getshort(api/config/theme.md) | +| [](api/config/toolbar.md) | @getshort(api/config/toolbar.md) | +| [](api/config/value.md) | @getshort(api/config/value.md) | diff --git a/docs/api/overview/methods_overview.md b/docs/api/overview/methods_overview.md index a1850f7..b6b8f67 100644 --- a/docs/api/overview/methods_overview.md +++ b/docs/api/overview/methods_overview.md @@ -11,8 +11,8 @@ Use this reference to quickly navigate to detailed descriptions of each method, | Name | Description | | ------------------------------------------------------ | ----------------------------------------- | -| [](../methods/destructor.md) | @getshort(../methods/destructor.md) | -| [](../methods/get-value.md) | @getshort(../methods/get-value.md) | -| [](../methods/set-value.md) | @getshort(../methods/set-value.md) | -| [](../methods/set-config.md) | @getshort(../methods/set-config.md) | -| [](../methods/set-locale.md) | @getshort(../methods/set-locale.md) | +| [](api/methods/destructor.md) | @getshort(api/methods/destructor.md) | +| [](api/methods/get-value.md) | @getshort(api/methods/get-value.md) | +| [](api/methods/set-value.md) | @getshort(api/methods/set-value.md) | +| [](api/methods/set-config.md) | @getshort(api/methods/set-config.md) | +| [](api/methods/set-locale.md) | @getshort(api/methods/set-locale.md) | diff --git a/docs/api/overview/properties_overview.md b/docs/api/overview/properties_overview.md index 1d89cf7..1c5dae3 100644 --- a/docs/api/overview/properties_overview.md +++ b/docs/api/overview/properties_overview.md @@ -11,11 +11,12 @@ They help you control layout, toolbar, value, localization, and other aspects of | Name | Description | | --------------------------------------------------------|----------------------------------------------| -| [](../config/default-styles.md) | @getshort(../config/default-styles.md) | -| [](../config/fullscreen-mode.md) | @getshort(../config/fullscreen-mode.md) | -| [](../config/image-upload-url.md) | @getshort(../config/image-upload-url.md) | -| [](../config/layout-mode.md) | @getshort(../config/layout-mode.md) | -| [](../config/locale.md) | @getshort(../config/locale.md) | -| [](../config/menubar.md) | @getshort(../config/menubar.md) | -| [](../config/toolbar.md) | @getshort(../config/toolbar.md) | -| [](../config/value.md) | @getshort(../config/value.md) | +| [](api/config/default-styles.md) | @getshort(api/config/default-styles.md) | +| [](api/config/fullscreen-mode.md) | @getshort(api/config/fullscreen-mode.md) | +| [](api/config/image-upload-url.md) | @getshort(api/config/image-upload-url.md) | +| [](api/config/layout-mode.md) | @getshort(api/config/layout-mode.md) | +| [](api/config/locale.md) | @getshort(api/config/locale.md) | +| [](api/config/menubar.md) | @getshort(api/config/menubar.md) | +| [](api/config/theme.md) | @getshort(api/config/theme.md) | +| [](api/config/toolbar.md) | @getshort(api/config/toolbar.md) | +| [](api/config/value.md) | @getshort(api/config/value.md) | diff --git a/docs/api/overview/state_methods_overview.md b/docs/api/overview/state_methods_overview.md index 79ffabb..8b828ee 100644 --- a/docs/api/overview/state_methods_overview.md +++ b/docs/api/overview/state_methods_overview.md @@ -11,5 +11,5 @@ These methods are useful for debugging, integrating with reactive systems, or im | Name | Description | | ----------------------------------------------------------- | ------------------------------------------------ | -| [](../internal/get-reactive-state.md) | @getshort(../internal/get-reactive-state.md) | -| [](../internal/get-state.md) | @getshort(../internal/get-state.md) | +| [](api/internal/get-reactive-state.md) | @getshort(api/internal/get-reactive-state.md) | +| [](api/internal/get-state.md) | @getshort(api/internal/get-state.md) | diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index f782c3a..b443611 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -15,6 +15,8 @@ You can configure RichText appearance and functionality via the corresponding AP - Specify **initial value** using the [`value`](api/config/value.md) property - Specify **initial locale** using the [`locale`](api/config/locale.md) property - Apply **initial styles** using the [`defaultStyles`](api/config/default-styles.md) property +- Set the **image upload URL** using the [`imageUploadUrl`](api/config/image-upload-url.md) property +- Apply a visual **theme** using the [`theme`](api/config/theme.md) property ## Layout modes @@ -44,7 +46,7 @@ const editor = new richtext.Richtext("#root", { The RichText toolbar consists of several blocks of controls that can be changed according to your needs. -### Default toolbar controls +### Available toolbar controls You can specify the following buttons and controls in the RichText toolbar: @@ -127,15 +129,20 @@ new richtext.Richtext("#root", { ### Custom toolbar controls -You can also specify custom controls as objects in the [`toolbar`](api/config/toolbar.md) property with the following parameters: +You can also specify custom controls as objects in the [`toolbar`](api/config/toolbar.md) property. Custom buttons must use `type: "button"` and support the following parameters: -- `type` - (required) specifies a custom control type. The following types are available: `"button"`, `"richselect"`, `"colorpicker"` -- `id` - (optional) a custom control ID (cannot overlap with existing control ID) +- `type` - (required) must be `"button"` for custom controls +- `id` - (optional) a custom control ID (cannot overlap with existing control IDs) +- `icon` - (optional) a CSS class name for the button icon (e.g., `"wxo-help"`) - `label` - (optional) a button label (combines with icon) -- `tooltip` - (optional) a tooltip displayed on hover (if not specified, uses the value from "label") -- `css` - (optional) a css class name assigned to the control (default supported classes: wx-primary, wx-secondary) +- `tooltip` - (optional) a tooltip displayed on hover (if not specified, uses the value from `label`) +- `css` - (optional) a CSS class name assigned to the control (default supported classes: `wx-primary`, `wx-secondary`) - `handler` - (optional) a callback function that executes when the button is clicked +:::note +`"richselect"` and `"colorpicker"` are internal types used only for **predefined** controls (e.g., `mode`, `style`). They cannot be used for custom controls. +::: + ~~~jsx {6-32} new richtext.Richtext("#root", { toolbar: [ diff --git a/docs/guides/initialization.md b/docs/guides/initialization.md index a43bf9e..e1d4bec 100644 --- a/docs/guides/initialization.md +++ b/docs/guides/initialization.md @@ -40,10 +40,10 @@ Add a container for RichText and give it an ID, for example *"root"*: Initialize RichText with the `richtext.Richtext` constructor. The constructor takes two parameters: -- an HTML container (the ID of the HTML container) +- an HTML container — either a string with the ID of the HTML container or an `HTMLElement` object - an object with configuration properties. [See the full list here](#configuration-properties) -~~~jsx title="index.html" +~~~jsx title="index.js" // create RichText const editor = new richtext.Richtext("#root", { // configuration properties diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md index 5525455..ff79f1a 100644 --- a/docs/guides/integration_with_angular.md +++ b/docs/guides/integration_with_angular.md @@ -172,7 +172,7 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} export class RichTextComponent implements OnInit, OnDestroy { @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; - private _editor!: RichText; + private _editor!: Richtext; ngOnInit() { const { value } = getData(); // initialize data property @@ -207,7 +207,7 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} export class RichTextComponent implements OnInit, OnDestroy { @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; - private _editor!: RichText; + private _editor!: Richtext; ngOnInit() { const { value } = getData(); // initialize data property @@ -216,7 +216,7 @@ export class RichTextComponent implements OnInit, OnDestroy { }); // apply the data via the setValue() method - this._editor.setValue({ value }); + this._editor.setValue(value); } ngOnDestroy(): void { diff --git a/docs/guides/integration_with_svelte.md b/docs/guides/integration_with_svelte.md index db9839f..383444c 100644 --- a/docs/guides/integration_with_svelte.md +++ b/docs/guides/integration_with_svelte.md @@ -89,7 +89,7 @@ import 'dhx-richtext-package/dist/richtext.css'; ~~~ In this tutorial you can see how to configure the **trial** version of RichText. @@ -126,7 +126,7 @@ onDestroy(() => { To add data into the RichText, we need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it: -~~~jsx {} title="data.ts" +~~~jsx {} title="data.js" export function getData() { const value = `

RichText 2.0

@@ -179,7 +179,7 @@ onDestroy(() => { ~~~ -You can also use the [`setValue()`](/api/methods/set-value.md) method inside the `onMount()` method of Svelte to load data into RichText: +You can also use the [`setValue()`](api/methods/set-value.md) method inside the `onMount()` method of Svelte to load data into RichText: ~~~html {} title="Richtext.svelte"