diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index fff6ded..a9fad8e 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -6,7 +6,7 @@ name: Deploy To Site on: # Triggers the workflow on push or pull request events but only for the master branch push: - branches: [master] + branches: [master, next, text] # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: diff --git a/.gitignore b/.gitignore index e0535a6..3326af0 100644 --- a/.gitignore +++ b/.gitignore @@ -20,3 +20,7 @@ yarn-debug.log* yarn-error.log* \.idea/ +gptit.toml +.yarnrc.yml +prompts +.yarn/install-state.gz diff --git a/docs/api/config/default-styles.md b/docs/api/config/default-styles.md index f057af2..e053dd5 100644 --- a/docs/api/config/default-styles.md +++ b/docs/api/config/default-styles.md @@ -1,20 +1,20 @@ --- sidebar_label: defaultStyles title: defaultStyles Config -description: You can learn about the defaultStyles 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. +description: Explore the defaultStyles configuration in the DHTMLX JavaScript RichText library documentation. Find developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX RichText. --- # defaultStyles ### Description -@short: Optional. Specifies default style values for specific block types +@short: Optional. Defines default style settings for specific block types. ### Usage ~~~jsx {} defaultStyles?: { - "*"?: { // affects all blocks, allowing you to set common properties for all of these blocks + "*"?: { // applies to all blocks, letting you set common properties for all of them "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" color?: string; @@ -72,7 +72,7 @@ defaultStyles?: { ~~~ :::important -The `defaultStyles` property DOES NOT set the actual CSS to the affected blocks. CSS styles have to be applied separately: +The `defaultStyles` property doesn't actually apply CSS styles to the blocks. To see the styles take effect, you need to add the corresponding CSS separately: ```jsx title="index.js" new richtext.Richtext("#root", { @@ -98,7 +98,7 @@ new richtext.Richtext("#root", { ``` -In this example, all `h2` blocks are assigned to the `"Roboto"` font-family with a font-size of 28px with both the foreground and the background colors changed as well. Css styles assigned to `h2` blocks as well. +In this example, every `h2` block is set to use the `"Roboto"` font-family with a font size of 28px, along with changes to the text and background colors. The CSS styles for `h2` blocks are also applied accordingly. ::: ### Default config @@ -137,7 +137,7 @@ new richtext.Richtext("#root", { }); ~~~ -**Change log:** The property was updated in v2.0 +**Change log:** This property was updated in version 2.0 **Related articles:** [Configuration](guides/configuration.md) diff --git a/docs/api/config/fullscreen-mode.md b/docs/api/config/fullscreen-mode.md index eb8ea90..66ef301 100644 --- a/docs/api/config/fullscreen-mode.md +++ b/docs/api/config/fullscreen-mode.md @@ -1,14 +1,14 @@ --- sidebar_label: fullscreenMode title: fullscreenMode Config -description: You can learn about the fullscreenMode 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. +description: Explore the fullscreenMode config in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX RichText. --- # fullscreenMode ### Description -@short: Optional. Enables the RichText fullscreen mode +@short: Optional. Turns on the RichText fullscreen mode ### Usage @@ -32,7 +32,7 @@ new richtext.Richtext("#root", { }); ~~~ -**Change log:** The property was added in v2.0 +**Change log:** This property was introduced in v2.0 **Related articles:** [Configuration](guides/configuration.md) diff --git a/docs/api/config/image-upload-url.md b/docs/api/config/image-upload-url.md index 761b8c8..6a5a5cc 100644 --- a/docs/api/config/image-upload-url.md +++ b/docs/api/config/image-upload-url.md @@ -8,7 +8,7 @@ description: You can learn about the imageUploadUrl config in the documentation ### Description -@short: Optional. Specifies the URL which will be used for image upload +@short: Optional. Defines the URL that will be used to upload images ### Usage @@ -26,7 +26,7 @@ new richtext.Richtext("#root", { }); ~~~ -**Change log:** The property was added in v2.0 +**Change log:** This property was introduced in version 2.0 **Related articles:** [Configuration](guides/configuration.md) diff --git a/docs/api/config/layout-mode.md b/docs/api/config/layout-mode.md index 10b21a8..dd18d78 100644 --- a/docs/api/config/layout-mode.md +++ b/docs/api/config/layout-mode.md @@ -1,14 +1,14 @@ --- sidebar_label: layoutMode title: layoutMode Config -description: You can learn about the layoutMode 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. +description: Explore the layoutMode configuration in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, code samples, live demos, and download a free 30-day trial of DHTMLX RichText. --- # layoutMode ### Description -@short: Optional. Specifies the layout mode for the main editor area +@short: Optional. Defines the layout style for the main editor area. ### Usage @@ -16,7 +16,7 @@ description: You can learn about the layoutMode config in the documentation of t 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). +The `"classic"` mode makes the editing area span the entire page. The `"document"` mode simulates actual document sizes, using formats like A4, A5, A6, and A7. ### Default config @@ -29,12 +29,12 @@ layoutMode: "classic"; ~~~jsx {3} // initialize RichText new richtext.Richtext("#root", { - layoutMode: "document" // initializes RichText with "document" mode by default + layoutMode: "document" // sets RichText to use "document" mode by default // other configuration properties }); ~~~ -**Change log:** The property was added in v2.0 instead of the removed `mode` property +**Change log:** This property was introduced in v2.0, replacing the older `mode` property. **Related articles:** [Configuration](guides/configuration.md) diff --git a/docs/api/config/locale.md b/docs/api/config/locale.md index 5a9fc14..d147c40 100644 --- a/docs/api/config/locale.md +++ b/docs/api/config/locale.md @@ -1,17 +1,17 @@ --- sidebar_label: locale title: locale Config -description: You can learn about the locale 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. +description: Explore the locale config in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX RichText. --- # locale ### Description -@short: Optional. An object that includes localization labels of RichText +@short: Optional. An object containing localization labels for RichText :::info -The **locale** object needs to include all labels of RichText with the corresponding translations. +The **locale** object should have all the RichText labels along with their respective translations. ::: ### Usage @@ -22,10 +22,10 @@ locale?: object; ### Default config -By default, RichText uses the **English** locale. You can set it to the custom locale as well. +By default, RichText comes with the **English** locale. You also have the option to set a custom locale. :::tip -To change the current locale dynamically, you can use the [**setLocale()**](api/methods/set-locale.md) method of RichText +To switch the locale on the fly, use the [**setLocale()**](api/methods/set-locale.md) method of RichText ::: ### Example @@ -33,14 +33,14 @@ To change the current locale dynamically, you can use the [**setLocale()**](api/ ~~~jsx {3} // initialize RichText const editor = new richtext.RichText("#root", { - locale: richtext.locales.cn // the Chineese locale will be set initially - // locale: richtext.locales.en // the English locale will be set initially - // locale: richtext.locales.de // the Germany locale will be set initially + locale: richtext.locales.cn // the Chinese locale is set initially + // locale: richtext.locales.en // the English locale is set initially + // locale: richtext.locales.de // the German locale is set initially // other configuration properties }); ~~~ -**Change log:** The property was added in v2.0 +**Change log:** This property was introduced in v2.0 **Related articles:** [Localization](guides/localization.md) diff --git a/docs/api/config/menubar.md b/docs/api/config/menubar.md index 8a452f0..6e9d1ae 100644 --- a/docs/api/config/menubar.md +++ b/docs/api/config/menubar.md @@ -8,7 +8,7 @@ description: You can learn about the menubar config in the documentation of the ### Description -@short: Optional. Enables the top menubar of RichText +@short: Optional. Turns on the top menubar in RichText. ### Usage @@ -26,7 +26,7 @@ new richtext.Richtext("#root", { }); ~~~ -**Change log:** The property was added in v2.0 +**Change log:** This property was introduced 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..579acdc 100644 --- a/docs/api/config/toolbar.md +++ b/docs/api/config/toolbar.md @@ -1,14 +1,14 @@ --- sidebar_label: toolbar title: toolbar Config -description: You can learn about the toolbar 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. +description: Explore the toolbar configuration in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code examples and live demos, and get a free 30-day trial of DHTMLX RichText. --- # toolbar ### Description -@short: Optional. Enables toolbar and allows users to specify/configure buttons displayed within toolbar +@short: Optional. Turns on the toolbar and lets users choose and set up the buttons shown on it. ### Usage @@ -18,41 +18,41 @@ toolbar?: boolean | Array ..., // custom logic attached to this button + id: "btn1", // unique button ID for custom logic + icon: "wxo-help", // icon shown with label + css: "rounded", // CSS class for styling (default supported classes: wx-primary, wx-secondary) + label: "Custom button", // button label next to icon + tooltip: "Some tooltip", // tooltip on hover (defaults to label if missing) + handler: () => ..., // custom logic for this button } ] // other configuration properties }); ~~~ -**Change log:** The property was added in v2.0 +**Change log:** This property was introduced in v2.0 **Related articles:** [Configuration](guides/configuration.md) diff --git a/docs/api/config/value.md b/docs/api/config/value.md index 70d2c71..ee73a7f 100644 --- a/docs/api/config/value.md +++ b/docs/api/config/value.md @@ -1,17 +1,17 @@ --- sidebar_label: value title: value Config -description: You can learn about the value 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. +description: Explore the value config in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX RichText. --- # value ### Description -@short: Optional. Specifies the initial value (content) displayed within the editor area of RichText +@short: Optional. Defines the initial content shown inside the RichText editor area. :::tip -If you want to set the value (content) using custom format, use the built-in [`setValue()`](api/methods/set-value.md) method. +To set the content using a custom format, use the built-in [`setValue()`](api/methods/set-value.md) method. ::: ### Usage @@ -29,7 +29,7 @@ new richtext.Richtext("#root", { }); ~~~ -**Change log:** The property was added in v2.0 +**Change log:** This property was introduced in version 2.0 **Related articles:** [Configuration](guides/configuration.md) diff --git a/docs/api/events/align.md b/docs/api/events/align.md index c46be2f..4763561 100644 --- a/docs/api/events/align.md +++ b/docs/api/events/align.md @@ -1,14 +1,14 @@ --- sidebar_label: align title: align Event -description: You can learn about the align event 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. +description: Explore the align event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX RichText. --- # align ### Description -@short: Fires when text alignment is changed via the menubar/toolbar or Event Bus methods +@short: Triggered whenever the text alignment is updated using the menubar/toolbar or Event Bus methods. ### Usage @@ -20,12 +20,12 @@ description: You can learn about the align event in the documentation of the DHT ### Parameters -The callback of the **align** event can take an object with the following parameter: +The callback for the **align** event receives an object with the following property: -- `align` - a text alignment. You can specify one of the following values: `"left" | "center" | "right" | "justify"` +- `align` - specifies the text alignment, which can be one of these values: `"left" | "center" | "right" | "justify"` :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +Inner events can be handled using [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -35,14 +35,14 @@ For handling inner events you can use [**Event Bus methods**](api/overview/event const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "align" event +// listen for the "align" event editor.api.on("align", (obj) => { console.log(`Align to: ${obj.align}`); }); -// align the text to the left +// set the text alignment to left editor.api.exec("align", { align: "left" }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in version 2.0 diff --git a/docs/api/events/clear-text-format.md b/docs/api/events/clear-text-format.md index feda55d..6a0f9ab 100644 --- a/docs/api/events/clear-text-format.md +++ b/docs/api/events/clear-text-format.md @@ -8,7 +8,7 @@ description: You can learn about the clear-text-format event in the documentatio ### Description -@short: Fires when a text format is cleared via the menubar/toolbar or Event Bus methods +@short: Triggered whenever a text format is removed using the menubar, toolbar, or Event Bus methods. ### Usage @@ -17,7 +17,7 @@ description: You can learn about the clear-text-format event in the documentatio ~~~ :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, you can utilize the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -35,4 +35,4 @@ editor.api.on("clear-text-format", () => { editor.api.exec("clear-text-format", {}); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** The event was introduced in v2.0 diff --git a/docs/api/events/copy.md b/docs/api/events/copy.md index 5d74562..a344838 100644 --- a/docs/api/events/copy.md +++ b/docs/api/events/copy.md @@ -1,14 +1,14 @@ --- sidebar_label: copy title: copy Event -description: You can learn about the copy event 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. +description: Explore the copy event in the DHTMLX JavaScript RichText library documentation. Access developer guides, API references, try out live demos and code examples, and download a free 30-day trial of DHTMLX RichText. --- # copy ### Description -@short: Fires when copying selected text +@short: Triggered when selected text is copied ### Usage @@ -17,7 +17,7 @@ description: You can learn about the copy event in the documentation of the DHTM ~~~ :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To work with inner events, you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -27,10 +27,10 @@ For handling inner events you can use [**Event Bus methods**](api/overview/event const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "copy" event +// listen for the "copy" event editor.api.on("copy", () => { console.log("Selected text was copied"); }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/create-new.md b/docs/api/events/create-new.md index eb4676b..f5ac423 100644 --- a/docs/api/events/create-new.md +++ b/docs/api/events/create-new.md @@ -1,14 +1,14 @@ --- sidebar_label: create-new title: create-new Event -description: You can learn about the create-new event 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. +description: Discover how the create-new event works in the DHTMLX JavaScript RichText library. Explore developer guides, API references, try out code samples and live demos, and get a free 30-day trial of DHTMLX RichText. --- # create-new ### Description -@short: Fires when pressing the "New" option within the menubar or via Event Bus methods +@short: This event triggers when selecting the "New" option from the menubar or by using Event Bus methods. ### Usage @@ -18,12 +18,12 @@ description: You can learn about the create-new event in the documentation of th ### Parameters -The callback of the **create-new** event can take an object with the following parameter: +The callback for the **create-new** event accepts an object with the following property: -- `reset` - resets the history when creating a new file +- `reset` - indicates whether the history should be reset when a new file is created. :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, you can utilize the [**Event Bus methods**](api/overview/event_bus_methods_overview.md). ::: ### Example @@ -41,4 +41,4 @@ editor.api.on("create-new", ({ reset }) => { editor.api.exec("create-new", { reset: true }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/cut.md b/docs/api/events/cut.md index 54a44d3..c624133 100644 --- a/docs/api/events/cut.md +++ b/docs/api/events/cut.md @@ -1,14 +1,14 @@ --- sidebar_label: cut title: cut Event -description: You can learn about the cut event 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. +description: Explore the cut event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX RichText. --- # cut ### Description -@short: Fires when cutting selected text +@short: Triggered when selected text is cut ### Usage @@ -17,7 +17,7 @@ description: You can learn about the cut event in the documentation of the DHTML ~~~ :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) can be used. ::: ### Example @@ -33,4 +33,4 @@ editor.api.on("cut", () => { }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** The event was introduced in v2.0 diff --git a/docs/api/events/delete-link.md b/docs/api/events/delete-link.md index 9b4abb6..78d29e1 100644 --- a/docs/api/events/delete-link.md +++ b/docs/api/events/delete-link.md @@ -8,7 +8,7 @@ description: You can learn about the delete-link event in the documentation of t ### Description -@short: Fires when deleting a link +@short: Triggered whenever a link is deleted ### Usage @@ -17,7 +17,7 @@ description: You can learn about the delete-link event in the documentation of t ~~~ :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, you can refer to [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -33,4 +33,4 @@ editor.api.on("delete-link", () => { }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/export.md b/docs/api/events/export.md index 0691bd5..c82c52f 100644 --- a/docs/api/events/export.md +++ b/docs/api/events/export.md @@ -1,14 +1,14 @@ --- sidebar_label: export title: export Event -description: You can learn about the export event 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. +description: This section covers the export event in the DHTMLX JavaScript RichText library. It includes developer guides, API references, code examples, live demos, and a free 30-day trial of DHTMLX RichText. --- # export ### Description -@short: Fires after pressing the "Export" option in the menubar or via Event Bus methods +@short: Triggered after selecting the "Export" option from the menubar or through Event Bus methods. ### Usage @@ -25,15 +25,15 @@ interface IExportOptions { ### Parameters -The callback of **export** event can take an object with the following parameters: +The callback for the **export** event receives an object with these properties: -- `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 +- `format` - specifies the file format +- `url` - the base URL used for exporting the file +- `download` - indicates whether the file should be downloaded automatically after the server response. If set to "false", the file won't download automatically, but the blob data can be accessed via the `result` property in the event object +- `fileName` - the name assigned to the exported file :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +Inner events can be managed using [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -43,12 +43,12 @@ For handling inner events you can use [**Event Bus methods**](api/overview/event const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "export" event +// listen for the "export" event editor.api.on("export", (obj) => { console.log(obj); console.log("The file was exported"); }); -// export value as pdf file +// export content as a pdf file editor.api.exec("export", { format: "pdf", download: false, @@ -56,4 +56,4 @@ editor.api.exec("export", { }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/import.md b/docs/api/events/import.md index d3dd7e2..9feab06 100644 --- a/docs/api/events/import.md +++ b/docs/api/events/import.md @@ -1,14 +1,14 @@ --- sidebar_label: import title: import Event -description: You can learn about the import event 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. +description: Discover the import event in the DHTMLX JavaScript RichText library documentation. Explore developer guides, API references, try out code samples and live demos, and download a free 30-day trial of DHTMLX RichText. --- # import ### Description -@short: Fires after pressing the "Import" option in the menubar or via Event Bus methods +@short: Triggered after selecting the "Import" option from the menubar or through Event Bus methods. ### Usage @@ -18,12 +18,12 @@ description: You can learn about the import event in the documentation of the DH ### Parameters -The callback of **import** event can take an object with the following parameter: +The callback for the **import** event accepts an object with the following parameter: -- `html` - a text value in the html format +- `html` - a string containing HTML content :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -33,15 +33,15 @@ For handling inner events you can use [**Event Bus methods**](api/overview/event const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "import" event +// listen for the "import" event editor.api.on("import", (obj) => { console.log(obj.html); console.log("The new value was imported"); }); -// import new value +// perform an import editor.api.exec("import", { - html: "

some value

" // simply calls setValue + html: "

some value

" // internally calls setValue }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/indent.md b/docs/api/events/indent.md index 4d400de..eeb32b6 100644 --- a/docs/api/events/indent.md +++ b/docs/api/events/indent.md @@ -1,14 +1,14 @@ --- sidebar_label: indent title: indent Event -description: You can learn about the indent event 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. +description: Explore the indent event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, code samples, live demos, and download a free 30-day trial of DHTMLX RichText. --- # indent ### Description -@short: Fires when increasing block indention +@short: Triggered when the block indentation is increased ### Usage @@ -18,12 +18,12 @@ description: You can learn about the indent event in the documentation of the DH ### Parameters -The callback of the **indent** event can take an object with the following parameters: +The callback for the **indent** event receives an object containing the following property: -- `step` - the step by which indentation was increased +- `step` - the amount by which the indentation was increased :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, you can refer to [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -40,4 +40,4 @@ editor.api.on("indent", (obj) => { }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in version 2.0 diff --git a/docs/api/events/insert-image.md b/docs/api/events/insert-image.md index 7898511..9de00f0 100644 --- a/docs/api/events/insert-image.md +++ b/docs/api/events/insert-image.md @@ -1,14 +1,14 @@ --- sidebar_label: insert-image title: insert-image Event -description: You can learn about the insert-image event 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. +description: Explore the insert-image event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX RichText. --- # insert-image ### Description -@short: Fires when inserting image +@short: Triggered when an image is inserted ### Usage @@ -30,7 +30,7 @@ interface IImageContext { ~~~ :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, you can refer to [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -40,11 +40,11 @@ For handling inner events you can use [**Event Bus methods**](api/overview/event const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "insert-image" event +// listen for 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 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/insert-line.md b/docs/api/events/insert-line.md index ee1a518..bc0af98 100644 --- a/docs/api/events/insert-line.md +++ b/docs/api/events/insert-line.md @@ -1,14 +1,14 @@ --- sidebar_label: insert-line title: insert-line Event -description: You can learn about the insert-line event 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. +description: Find details about the insert-line event in the DHTMLX JavaScript RichText library documentation. Explore developer guides, API references, try out examples and live demos, and download a free 30-day trial of DHTMLX RichText. --- # insert-line ### Description -@short: Fires when inserting horizontal line +@short: Triggered when a horizontal line is inserted ### Usage @@ -17,7 +17,7 @@ description: You can learn about the insert-line event in the documentation of t ~~~ :::info -For handling the inner events you can use the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To work with internal events, you can use the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -27,10 +27,10 @@ For handling the inner events you can use the [**Event Bus methods**](api/overvi const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "insert-line" event +// listen for the "insert-line" event editor.api.on("insert-line", () => { console.log("The horizontal line was inserted"); }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/insert-link.md b/docs/api/events/insert-link.md index 1db8b8d..239a9d4 100644 --- a/docs/api/events/insert-link.md +++ b/docs/api/events/insert-link.md @@ -1,14 +1,14 @@ --- sidebar_label: insert-link title: insert-link Event -description: You can learn about the insert-link event 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. +description: Explore the insert-link event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try sample code and live demos, and download a free 30-day trial of DHTMLX RichText. --- # insert-link ### Description -@short: Fires when inserting link +@short: Triggered when a link is inserted ### Usage @@ -18,12 +18,12 @@ 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 for the **update-link** event receives an object with this parameter: -- `url` - the url to be inserted +- `url` - the URL being inserted :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -33,11 +33,11 @@ For handling inner events you can use [**Event Bus methods**](api/overview/event const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "insert-link" event +// listen for the "insert-link" event editor.api.on("insert-link", (obj) => { console.log(obj) console.log("The following link was inserted: " + obj.url); }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/insert-list.md b/docs/api/events/insert-list.md index 3be5f19..cd73a7a 100644 --- a/docs/api/events/insert-list.md +++ b/docs/api/events/insert-list.md @@ -1,14 +1,14 @@ --- sidebar_label: insert-list title: insert-list Event -description: You can learn about the insert-list event 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. +description: Explore the insert-list event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code samples and live demos, and get a free 30-day trial of DHTMLX RichText. --- # insert-list ### Description -@short: Fires when inserting list +@short: Triggered when a list is inserted ### Usage @@ -20,14 +20,14 @@ type TListType = "bulleted" | "numbered"; ### Parameters -The callback of the **insert-list** event can take an object with the following parameter: +The callback for the **insert-list** event receives an object with this parameter: -- `type` - the type of the inserted list. You can specify the following values: - - `"bulleted"` - bulleted list - - `"numbered"` - numbered list +- `type` - indicates the kind of list that was inserted. Possible values are: + - `"bulleted"` - a bulleted list + - `"numbered"` - a numbered list :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, you can refer to the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -37,11 +37,11 @@ For handling inner events you can use [**Event Bus methods**](api/overview/event const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "insert-list" event +// listen to the "insert-list" event editor.api.on("insert-list", (obj) => { console.log(obj.type); console.log("The list was inserted"); }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in version 2.0 diff --git a/docs/api/events/outdent.md b/docs/api/events/outdent.md index 94f6245..2d21acf 100644 --- a/docs/api/events/outdent.md +++ b/docs/api/events/outdent.md @@ -1,14 +1,14 @@ --- sidebar_label: outdent title: outdent Event -description: You can learn about the outdent event 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. +description: Explore the outdent event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, code samples, live demos, and download a free 30-day trial of DHTMLX RichText. --- # outdent ### Description -@short: Fires when decreasing block indention +@short: Triggered when the block indentation is reduced ### Usage @@ -18,12 +18,12 @@ description: You can learn about the outdent event in the documentation of the D ### Parameters -The callback of the **outdent** event can take an object with the following parameters: +The callback for the **outdent** event receives an object containing: -- `step` - the step by which indentation was decreased +- `step` - the amount by which the indentation was decreased :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To work with internal events, you can refer to [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -33,11 +33,11 @@ For handling inner events you can use [**Event Bus methods**](api/overview/event const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "outdent" event +// listen for the "outdent" event editor.api.on("outdent", (obj) => { console.log(obj); - console.log("The indention was decreased"); + console.log("The indentation was decreased"); }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/paste.md b/docs/api/events/paste.md index fcd7ca9..c4c9db9 100644 --- a/docs/api/events/paste.md +++ b/docs/api/events/paste.md @@ -1,14 +1,14 @@ --- sidebar_label: paste title: paste Event -description: You can learn about the paste event 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. +description: Explore the paste event in the DHTMLX JavaScript RichText library documentation. Access developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX RichText. --- # paste ### Description -@short: Fires when pasting content +@short: Triggered when content is pasted ### Usage @@ -17,7 +17,7 @@ description: You can learn about the paste event in the documentation of the DHT ~~~ :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, refer to the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -33,4 +33,4 @@ editor.api.on("paste", () => { }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/print.md b/docs/api/events/print.md index 21a9247..1e7d58b 100644 --- a/docs/api/events/print.md +++ b/docs/api/events/print.md @@ -1,14 +1,14 @@ --- sidebar_label: print title: print Event -description: You can learn about the print event 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. +description: Explore the print event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code examples and live demos, and get a free 30-day trial of DHTMLX RichText. --- # print ### Description -@short: Fires when printing document +@short: Triggered when the document starts printing ### Usage @@ -17,7 +17,7 @@ description: You can learn about the print event in the documentation of the DHT ~~~ :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, refer to the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -27,10 +27,10 @@ For handling inner events you can use [**Event Bus methods**](api/overview/event const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "print" event +// listen for the "print" event editor.api.on("print", () => { console.log("The document is printing"); }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/redo.md b/docs/api/events/redo.md index 06ff24b..5c70828 100644 --- a/docs/api/events/redo.md +++ b/docs/api/events/redo.md @@ -1,14 +1,14 @@ --- sidebar_label: redo title: redo Event -description: You can learn about the redo event 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. +description: Explore the redo event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, code samples, live demos, and download a free 30-day trial of DHTMLX RichText. --- # redo ### Description -@short: Fires when pressing the "Redo" button in the menubar/toolbar or via Event Bus methods +@short: Triggered when the "Redo" button is clicked in the menubar/toolbar or activated through Event Bus methods. ### Usage @@ -17,7 +17,7 @@ description: You can learn about the redo event in the documentation of the DHTM ~~~ :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -33,4 +33,4 @@ editor.api.on("redo", () => { }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in version 2.0 diff --git a/docs/api/events/resize-image.md b/docs/api/events/resize-image.md index 9db126e..544a0c6 100644 --- a/docs/api/events/resize-image.md +++ b/docs/api/events/resize-image.md @@ -8,7 +8,7 @@ description: You can learn about the resize-image event in the documentation of ### Description -@short: Fires when resizing image +@short: Triggered when an image is resized ### Usage @@ -18,14 +18,14 @@ description: You can learn about the resize-image event in the documentation of ### Parameters -The callback of the **resize-image** event can take an object with the following parameters: +The callback for the **resize-image** event receives an object with these properties: -- `id` - the image ID -- `width` - the image width -- `height` - the image height +- `id` - the image's unique identifier +- `width` - the new width of the image +- `height` - the new height of the image :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To work with internal events, you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -35,11 +35,11 @@ For handling inner events you can use [**Event Bus methods**](api/overview/event const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "resize-image" event +// listen for the "resize-image" event editor.api.on("resize-image", (obj) => { console.log(obj); console.log("The image was resized") }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/set-font-family.md b/docs/api/events/set-font-family.md index 9626bd7..1e2ce18 100644 --- a/docs/api/events/set-font-family.md +++ b/docs/api/events/set-font-family.md @@ -8,7 +8,7 @@ description: You can learn about the set-font-family event in the documentation ### Description -@short: Fires when setting a font family +@short: Triggered when the font family is being set ### Usage @@ -18,12 +18,12 @@ description: You can learn about the set-font-family event in the documentation ### Parameters -The callback of the **set-font-family** event can take an object with the following parameter: +The callback for the **set-font-family** event receives an object containing the following parameter: -- `fontFamily` - a font family to be applied. The following fonts are available: `"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"` +- `fontFamily` - the font family to apply. The available options include: `"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"` :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To handle internal events, you can use the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -33,15 +33,15 @@ For handling inner events you can use [**Event Bus methods**](api/overview/event const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "set-font-family" event +// listen for the "set-font-family" event editor.api.on("set-font-family", (obj) => { console.log(obj.fontFamily); console.log("The font family was changed"); }); -// apply new font family +// set a new font family editor.api.exec("set-font-family", { fontFamily: "Roboto" }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/set-font-size.md b/docs/api/events/set-font-size.md index 3c68fa6..ae879b4 100644 --- a/docs/api/events/set-font-size.md +++ b/docs/api/events/set-font-size.md @@ -1,14 +1,14 @@ --- sidebar_label: set-font-size title: set-font-size Event -description: You can learn about the set-font-size event 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. +description: Explore the set-font-size event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try demos, and download a free 30-day trial of DHTMLX RichText. --- # set-font-size ### Description -@short: Fires when setting a font size +@short: Triggered when the font size is set ### Usage @@ -18,12 +18,12 @@ description: You can learn about the set-font-size event in the documentation of ### Parameters -The callback of the **set-font-size** event can take an object with the following parameter: +The callback for the **set-font-size** event receives an object with this parameter: -- `fontSize` - a font size to be applied +- `fontSize` - the font size to apply :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, you can refer to [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -33,15 +33,15 @@ For handling inner events you can use [**Event Bus methods**](api/overview/event const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "set-font-size" event +// listen for the "set-font-size" event editor.api.on("set-font-size", (obj) => { console.log(obj.fontSize); console.log("The font size was changed"); }); -// apply new font size +// set a new font size editor.api.exec("set-font-size", { fontSize: "11px" }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/set-line-height.md b/docs/api/events/set-line-height.md index 0dc8832..3d9dbd2 100644 --- a/docs/api/events/set-line-height.md +++ b/docs/api/events/set-line-height.md @@ -8,7 +8,7 @@ description: You can learn about the set-line-height event in the documentation ### Description -@short: Fires when setting a line height +@short: Triggered whenever the line height is set ### Usage @@ -18,12 +18,12 @@ description: You can learn about the set-line-height event in the documentation ### Parameters -The callback of the **set-line-height** event can take an object with the following parameter: +The callback for the **set-line-height** event receives an object containing this parameter: -- `lineHeight` - a line height +- `lineHeight` - the value of the line height being set :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, you can refer to the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -33,15 +33,15 @@ For handling inner events you can use [**Event Bus methods**](api/overview/event const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "set-line-height" event +// listen for the "set-line-height" event editor.api.on("set-line-height", (obj) => { console.log(obj); console.log("The line height was changed"); }); -// apply a new line height +// set a new line height editor.api.exec("set-line-height", { lineHeight: "15px" }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** The event was introduced in v2.0 diff --git a/docs/api/events/set-text-color.md b/docs/api/events/set-text-color.md index b846db2..d3256a4 100644 --- a/docs/api/events/set-text-color.md +++ b/docs/api/events/set-text-color.md @@ -1,14 +1,14 @@ --- sidebar_label: set-text-color title: set-text-color Event -description: You can learn about the set-text-color event 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. +description: Explore the set-text-color event in the DHTMLX JavaScript RichText library documentation. Find developer guides, API references, code samples, live demos, and get a free 30-day trial of DHTMLX RichText. --- # set-text-color ### Description -@short: Fires when setting a text color and/or a background text color +@short: Triggered when a text color and/or background color is applied ### Usage @@ -23,13 +23,13 @@ interface ITextColor { ### Parameters -The callback of the **set-text-color** event can take an object with the following parameters: +The callback for the **set-text-color** event receives an object with these properties: -- `color` - a text color -- `background` - a text background color +- `color` - the text color +- `background` - the background color of the text :::info -For handling the inner events you can use the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, you can refer to the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -39,16 +39,16 @@ For handling the inner events you can use the [**Event Bus methods**](api/overvi const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "set-text-color" event +// listen for the "set-text-color" event editor.api.on("set-text-color", (obj) => { console.log(obj); - console.log("The text color and/or background text color were changed"); + console.log("Text color and/or background color have been updated"); }); -// apply text color and background +// set text color and background editor.api.exec("set-text-color", { color: "red", background: "blue" }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/set-text-format.md b/docs/api/events/set-text-format.md index f3c2cd2..4d1e633 100644 --- a/docs/api/events/set-text-format.md +++ b/docs/api/events/set-text-format.md @@ -8,7 +8,7 @@ description: You can learn about the set-text-format event in the documentation ### Description -@short: Fires when setting a text format +@short: Triggered when a text format is being applied ### Usage @@ -24,17 +24,17 @@ interface ITextFormat { ~~~ :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, you can refer to [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Parameters -The callback of the **set-text-format** event can take an object with the following parameters: +The callback for the **set-text-format** event receives an object with these optional properties: -- `bold` - a bold text format -- `italic` - an italic text format -- `strike` - a strike text format -- `underline` - an underline text format +- `bold` - indicates bold text formatting +- `italic` - indicates italic text formatting +- `strike` - indicates strikethrough text formatting +- `underline` - indicates underline text formatting ### Example @@ -43,16 +43,16 @@ The callback of the **set-text-format** event can take an object with the follow const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "set-text-format" event +// listen for the "set-text-format" event editor.api.on("set-text-format", (obj) => { console.log(obj); console.log("The text format was changed"); }); -// apply the "italic" and bold text format +// apply italic and bold formatting to the text editor.api.exec("set-text-format", { italic: true, bold: true }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in version 2.0 diff --git a/docs/api/events/set-text-style.md b/docs/api/events/set-text-style.md index 102eb5b..3f92459 100644 --- a/docs/api/events/set-text-style.md +++ b/docs/api/events/set-text-style.md @@ -1,14 +1,14 @@ --- sidebar_label: set-text-style title: set-text-style Event -description: You can learn about the set-text-style event 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. +description: Explore the set-text-style event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX RichText. --- # set-text-style ### Description -@short: Fires when setting a text style +@short: Triggered when a text style is applied ### Usage @@ -20,12 +20,12 @@ type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; ### Parameters -The callback of the **set-text-style** event can take an object with the following parameters: +The callback for the **set-text-style** event receives an object with the following property: -- `tag` - a text style +- `tag` - specifies the text style being applied :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, you can refer to the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -35,15 +35,15 @@ For handling inner events you can use [**Event Bus methods**](api/overview/event const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "set-text-style" event +// listen for the "set-text-style" event editor.api.on("set-text-style", (obj) => { console.log(obj.tag); - console.log("The text style was changed"); + console.log("Text style has been updated"); }); -// apply new text style +// change the text style editor.api.exec("set-text-style", { tag: "blockquote" }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/show-popup.md b/docs/api/events/show-popup.md index 3ecf004..1593530 100644 --- a/docs/api/events/show-popup.md +++ b/docs/api/events/show-popup.md @@ -1,14 +1,14 @@ --- sidebar_label: show-popup title: show-popup Event -description: You can learn about the show-popup event 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. +description: Explore the show-popup event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code examples, live demos, and download a free 30-day trial of DHTMLX RichText. --- # show-popup ### Description -@short: Fires when a popup is shown/hidden +@short: Triggered when a popup is displayed or hidden ### Usage @@ -23,13 +23,13 @@ interface IPopupConfig { ### Parameters -The callback of the **show-popup** event can take an object with the following parameters: +The callback for the **show-popup** event receives an object with these properties: -- `type` - a type of the popup -- `image` - provides access to additional context (is the current cursor pointing at an image or not) +- `type` - specifies the popup type +- `image` - indicates whether the current cursor is over an image or not :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage inner events, the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) can be utilized ::: ### Example @@ -50,4 +50,4 @@ editor.api.exec("show-popup", { }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/subscript.md b/docs/api/events/subscript.md index b268b3f..751aa0f 100644 --- a/docs/api/events/subscript.md +++ b/docs/api/events/subscript.md @@ -1,14 +1,14 @@ --- sidebar_label: subscript title: subscript Event -description: You can learn about the subscript event 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. +description: Explore the subscript event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX RichText. --- # subscript ### Description -@short: Fires when pressing the "Subscript" button in the menubar/toolbar or via Event Bus methods +@short: Triggered when the "Subscript" button is clicked in the menubar/toolbar or invoked through Event Bus methods ### Usage @@ -17,7 +17,7 @@ description: You can learn about the subscript event in the documentation of the ~~~ :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To work with internal events, you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -27,12 +27,12 @@ For handling inner events you can use [**Event Bus methods**](api/overview/event const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "subscript" event +// listen for the "subscript" event editor.api.on("subscript", () => { console.log("Subscript was applied"); }); -// trigger the "subscript" event +// execute the "subscript" event editor.api.exec("subscript", {}); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/superscript.md b/docs/api/events/superscript.md index ed283b4..5981680 100644 --- a/docs/api/events/superscript.md +++ b/docs/api/events/superscript.md @@ -1,14 +1,14 @@ --- sidebar_label: superscript title: superscript Event -description: You can learn about the superscript event 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. +description: Explore the superscript event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX RichText. --- # superscript ### Description -@short: Fires when pressing the "Superscript" button in the menubar/toolbar or via Event Bus methods +@short: This event triggers when the "Superscript" button is clicked in the menubar or toolbar, or when activated through Event Bus methods. ### Usage @@ -17,7 +17,7 @@ description: You can learn about the superscript event in the documentation of t ~~~ :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, refer to the [**Event Bus methods**](api/overview/event_bus_methods_overview.md). ::: ### Example @@ -35,4 +35,4 @@ editor.api.on("superscript", () => { editor.api.exec("superscript", {}); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/toggle-fullscreen-mode.md b/docs/api/events/toggle-fullscreen-mode.md index ad49e57..8b055cc 100644 --- a/docs/api/events/toggle-fullscreen-mode.md +++ b/docs/api/events/toggle-fullscreen-mode.md @@ -8,7 +8,7 @@ description: You can learn about the toggle-fullscreen-mode event in the documen ### Description -@short: Fires when toggling the full screen mode +@short: Triggered when switching the full screen mode on or off ### Usage @@ -18,12 +18,12 @@ description: You can learn about the toggle-fullscreen-mode event in the documen ### Parameters -The callback of the **toggle-fullscreen-mode** event can take an object with the following parameter: +The callback for the **toggle-fullscreen-mode** event accepts an object with the following property: -- `mode` - enables a fullscreen mode +- `mode` - indicates whether fullscreen mode is enabled :::info -For handling the inner events you can use the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, you can use the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -42,4 +42,4 @@ editor.api.on("toggle-fullscreen-mode", (obj) => { editor.api.exec("toggle-fullscreen-mode", { mode: true }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** The event was introduced in v2.0 diff --git a/docs/api/events/toggle-layout-mode.md b/docs/api/events/toggle-layout-mode.md index e71b2df..0541d2a 100644 --- a/docs/api/events/toggle-layout-mode.md +++ b/docs/api/events/toggle-layout-mode.md @@ -8,7 +8,7 @@ description: You can learn about the toggle-layout-mode event in the documentati ### Description -@short: Fires when toggling the layout mode +@short: Triggered whenever the layout mode is switched ### Usage @@ -18,12 +18,12 @@ description: You can learn about the toggle-layout-mode event in the documentati ### Parameters -The callback of the **toggle-layout-mode** event can take an object with the following parameters: +The callback for the **toggle-layout-mode** event receives an object with these parameters: -- `mode` - the layout mode. The following modes are available: `"classic" | "document"` +- `mode` - indicates the layout mode. Available options are: `"classic" | "document"` :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To handle internal events, you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -42,4 +42,4 @@ editor.api.on("toggle-layout-mode", (obj) => { editor.api.exec("toggle-layout-mode", { mode: "document" }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** The event was introduced in v2.0 diff --git a/docs/api/events/toggle-shortcut-info.md b/docs/api/events/toggle-shortcut-info.md index 4bc2ec6..d4e7749 100644 --- a/docs/api/events/toggle-shortcut-info.md +++ b/docs/api/events/toggle-shortcut-info.md @@ -8,7 +8,7 @@ description: You can learn about the toggle-shortcut-info event in the documenta ### Description -@short: Fires when toggling the shortcut info +@short: Triggered when the shortcut info is toggled ### Usage @@ -18,12 +18,12 @@ description: You can learn about the toggle-shortcut-info event in the documenta ### Parameters -The callback of the **toggle-shortcut-info** event can take an object with the following parameter: +The callback for the **toggle-shortcut-info** event receives an object with the following property: -- `mode` - enables a shortcut info; `true` to show shortcut info popup, `false` to hide shortcut info popup +- `mode` - controls the shortcut info display; `true` to show the shortcut info popup, `false` to hide it :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, you can refer to the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -42,4 +42,4 @@ editor.api.on("toggle-shortcut-info", (obj) => { editor.api.exec("toggle-shortcut-info", { mode: true }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** The event was introduced in v2.0 diff --git a/docs/api/events/undo.md b/docs/api/events/undo.md index ea701da..60da957 100644 --- a/docs/api/events/undo.md +++ b/docs/api/events/undo.md @@ -1,14 +1,14 @@ --- sidebar_label: undo title: undo Event -description: You can learn about the undo event 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. +description: Explore the undo event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX RichText. --- # undo ### Description -@short: Fires when pressing the "Undo" button in the menubar/toolbar or via Event Bus methods +@short: Triggered when the "Undo" button is clicked in the menubar/toolbar or activated through Event Bus methods. ### Usage @@ -17,7 +17,7 @@ description: You can learn about the undo event in the documentation of the DHTM ~~~ :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +Inner events can be managed using [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -27,10 +27,10 @@ For handling inner events you can use [**Event Bus methods**](api/overview/event const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "undo" event +// listen for the "undo" event editor.api.on("undo", () => { console.log("Undo operation was performed"); }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/events/update-link.md b/docs/api/events/update-link.md index 01072fb..81b6e4f 100644 --- a/docs/api/events/update-link.md +++ b/docs/api/events/update-link.md @@ -8,7 +8,7 @@ description: You can learn about the update-link event in the documentation of t ### Description -@short: Fires when updating link +@short: Triggered when a link is updated ### Usage @@ -18,13 +18,13 @@ description: You can learn about the update-link event in the documentation of t ### Parameters -The callback of the **update-link** event can take an object with the following parameters: +The callback for the **update-link** event receives an object containing the following properties: -- `id` - the link ID -- `url` - the modified url +- `id` - the identifier of the link +- `url` - the updated URL :::info -For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +To manage internal events, you can refer to the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: ### Example @@ -41,4 +41,4 @@ editor.api.on("update-link", (obj) => { }); ~~~ -**Change log:** The event was added in v2.0 +**Change log:** This event was introduced in v2.0 diff --git a/docs/api/internal/detach.md b/docs/api/internal/detach.md index 4992e37..b48917d 100644 --- a/docs/api/internal/detach.md +++ b/docs/api/internal/detach.md @@ -8,7 +8,7 @@ description: You can learn about the on method in the documentation of the DHTML ### Description -@short: Allows removing/detaching event handlers +@short: Enables the removal or detachment of event handlers ### Usage @@ -18,12 +18,12 @@ api.detach( tag: string ): void; ### Parameters -- `tag` - (required) the name of the action tag +- `tag` - (required) specifies the name of the action tag ### Events :::info -The full list of RichText internal events can be found [**here**](api/overview/events_overview.md) +A complete list of RichText internal events is available [**here**](api/overview/events_overview.md) ::: ### Example diff --git a/docs/api/internal/exec.md b/docs/api/internal/exec.md index ba0bcd0..f1bee85 100644 --- a/docs/api/internal/exec.md +++ b/docs/api/internal/exec.md @@ -8,7 +8,7 @@ description: You can learn about the exec method in the documentation of the DHT ### Description -@short: Allows triggering inner events +@short: This method enables triggering internal events within the editor. ### Usage @@ -21,13 +21,13 @@ api.exec( ### Parameters -- `event` - (required) an event to be fired -- `config` - (required) the config object with parameters (see the event to be fired) +- `event` - (required) the name of the event to trigger +- `config` - (required) an object containing parameters for the event being fired ### Events :::info -The full list of RichText internal events can be found [**here**](api/overview/events_overview.md) +You can find the complete list of internal RichText events [**here**](api/overview/events_overview.md) ::: ### Example @@ -37,10 +37,10 @@ The full list of RichText internal events can be found [**here**](api/overview/e const editor = new richtext.Richtext("#root", { // configuration properties }); -// set the text font size +// apply font size to the text editor.api.exec("set-font-size", { fontSize: "16px" }); ~~~ -**Change log:** The method was added in v2.0 +**Change log:** This method was introduced in v2.0 diff --git a/docs/api/internal/get-reactive-state.md b/docs/api/internal/get-reactive-state.md index 3fc3830..f8936e5 100644 --- a/docs/api/internal/get-reactive-state.md +++ b/docs/api/internal/get-reactive-state.md @@ -8,7 +8,7 @@ description: You can learn about the getReactiveState method in the documentatio ### Description -@short: Returns an object with the reactive properties of RichText +@short: Provides an object containing the reactive properties of RichText. ### Usage @@ -18,7 +18,7 @@ api.getReactiveState(): object; ### Returns -The method returns an object with the following parameters: +This method returns an object with the following properties: ~~~jsx {} { @@ -40,9 +40,9 @@ The method returns an object with the following parameters: const editor = new richtext.Richtext("#root", { // configuration properties }); -// get the Reactive State of RichText +// retrieve the Reactive State of RichText const reactive_state = editor.api.getReactiveState(); console.log(reactive_state) ~~~ -**Change log:** The method was added in v2.0 +**Change log:** This method was introduced in version 2.0 diff --git a/docs/api/internal/get-state.md b/docs/api/internal/get-state.md index f666c91..3720259 100644 --- a/docs/api/internal/get-state.md +++ b/docs/api/internal/get-state.md @@ -8,7 +8,7 @@ description: You can learn about the getState method in the documentation of the ### Description -@short: Returns an object with the StateStore properties of RichText +@short: Provides an object containing the current StateStore properties of RichText. ### Usage @@ -18,7 +18,7 @@ api.getState(): object; ### Returns -The method returns an object with the following parameters: +This method returns an object with the following properties: ~~~jsx {} { @@ -40,7 +40,7 @@ The method returns an object with the following parameters: const editor = new richtext.Richtext("#root", { // configuration properties }); -// get the State of RichText +// retrieve the current state of RichText const state = editor.api.getState(); console.log(state); ~~~ diff --git a/docs/api/internal/intercept.md b/docs/api/internal/intercept.md index 4700950..ed7bc97 100644 --- a/docs/api/internal/intercept.md +++ b/docs/api/internal/intercept.md @@ -8,7 +8,7 @@ description: You can learn about the intercept method in the documentation of th ### Description -@short: Allows intercepting and preventing the inner events +@short: Provides a way to catch and block internal events before they proceed. ### Usage @@ -21,13 +21,13 @@ api.intercept( ### Parameters -- `event` - (required) an event to be fired -- `callback` - (required) a callback to be performed (the callback arguments will depend on the event to be fired) +- `event` - (required) the name of the event to intercept +- `callback` - (required) a function to execute when the event occurs (arguments depend on the specific event) ### Events :::info -The full list of RichText internal events can be found [**here**](api/overview/events_overview.md) +You can find the complete list of RichText internal events [**here**](api/overview/events_overview.md) ::: ### Example @@ -37,7 +37,7 @@ The full list of RichText internal events can be found [**here**](api/overview/e const editor = new richtext.Richtext("#root", { // configuration properties }); -// forbid changing the font size +// prevent changing the font size except to "36px" editor.api.intercept("set-font-size", (obj) => { if(obj.fontSize !== "36px" ){ return false; diff --git a/docs/api/internal/on.md b/docs/api/internal/on.md index 165aaa2..20be3b1 100644 --- a/docs/api/internal/on.md +++ b/docs/api/internal/on.md @@ -8,7 +8,7 @@ description: You can learn about the on method in the documentation of the DHTML ### Description -@short: Allows attaching a handler to the inner events +@short: Lets you attach a handler to internal events ### Usage @@ -21,13 +21,13 @@ api.on( ### Parameters -- `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) +- `event` - (required) the event that will trigger the handler +- `handler` - (required) the function to be called when the event fires (the arguments depend on the event) ### Events :::info -The full list of RichText internal events can be found [**here**](api/overview/events_overview.md) +You can find the complete list of RichText internal events [**here**](api/overview/events_overview.md) ::: ### Example @@ -37,10 +37,10 @@ The full list of RichText internal events can be found [**here**](api/overview/e const editor = new richtext.Richtext("#root", { // configuration properties }); -// subscribe to the "set-font-size" event +// listen for the "set-font-size" event editor.api.on("set-font-size", (obj) => { console.log(obj.fontSize); }); ~~~ -**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/internal/set-next.md b/docs/api/internal/set-next.md index 8a4d3f1..c292c94 100644 --- a/docs/api/internal/set-next.md +++ b/docs/api/internal/set-next.md @@ -8,7 +8,7 @@ description: You can learn about the setNext method in the documentation of the ### Description -@short: Allows adding some action into the Event Bus order +@short: This method lets you add an action into the Event Bus sequence. ### Usage @@ -18,7 +18,7 @@ api.setNext(next: any): void; ### Parameters -- `next` - (required) the action to be included into the **Event Bus** order +- `next` - (required) the action to be added into the **Event Bus** sequence ### Example @@ -32,7 +32,7 @@ fetch(server + "/data").then((res) => res.json()).then((data) => { value: data }); - // Integrate someServerService into the Event Bus order of widget + // Add someServerService into the Event Bus sequence of the widget editor.api.setNext(someServerService); }); ~~~ diff --git a/docs/api/methods/destructor.md b/docs/api/methods/destructor.md index 58973c0..9de9bd2 100644 --- a/docs/api/methods/destructor.md +++ b/docs/api/methods/destructor.md @@ -8,7 +8,7 @@ description: You can learn about the destructor method in the documentation of t ### Description -@short: Removes all HTML elements of RichText, and detaches all related events +@short: Clears all HTML elements of the RichText component and detaches all associated events. ### Usage diff --git a/docs/api/methods/get-value.md b/docs/api/methods/get-value.md index 4ed50ae..27d050f 100644 --- a/docs/api/methods/get-value.md +++ b/docs/api/methods/get-value.md @@ -8,7 +8,7 @@ description: You can learn about the getValue method in the documentation of the ### Description -@short: Returns the RichText value +@short: Retrieves the current value of the RichText editor ### Usage @@ -18,9 +18,9 @@ getValue(encoder?: any): string; ### Parameters -- `encoder` - (optional) a parser used to encode the RichText's content into a custom format. The following formats are available: `html` (default) and `text` +- `encoder` - (optional) a parser that converts the RichText content into a specific format. Available options include `html` (default) and `text` -You can get the required encoder in the following way: +To obtain the desired encoder, use the following: ```jsx const toTextEncoder = richtext.text.toText; // text encoder diff --git a/docs/api/methods/set-config.md b/docs/api/methods/set-config.md index d54fef0..9bf871c 100644 --- a/docs/api/methods/set-config.md +++ b/docs/api/methods/set-config.md @@ -8,7 +8,7 @@ description: You can learn about the setConfig method in the documentation of th ### Description -@short: Applies new configuration parameters to RichText +@short: Updates the RichText editor with new configuration settings. ### Usage @@ -18,10 +18,10 @@ setConfig(config: { [key:any]: any }): void; ### Parameters -- `config` - (required) the object of RichText configuration parameters. See the full list of properties [here](api/overview/properties_overview.md) +- `config` - (required) an object containing the RichText configuration options. Check out the complete list of properties [here](api/overview/properties_overview.md) :::note -The `setConfig()` method preserves all the previously set parameters that are not explicitly provided in the `setConfig()` method call. +When using the `setConfig()` method, any previously set parameters that are not included in the new call will stay unchanged. ::: ### Example @@ -37,4 +37,4 @@ editor.setConfig({ }); ~~~ -**Change log:** The method was added in v2.0 +**Change log:** The method was introduced in v2.0 diff --git a/docs/api/methods/set-locale.md b/docs/api/methods/set-locale.md index 55610c6..497d6f9 100644 --- a/docs/api/methods/set-locale.md +++ b/docs/api/methods/set-locale.md @@ -8,7 +8,7 @@ description: You can learn about the setLocale method in the documentation of th ### Description -@short: Applies a new locale to RichText +@short: Updates the locale settings for RichText ### Usage @@ -18,11 +18,11 @@ setLocale(null | locale?: object): void; ### Parameters -- `null` - (optional) resets to the default locale (*English*) -- `locale` - (optional) the object of data of the new locale to be applied +- `null` - (optional) switches back to the default locale (*English*) +- `locale` - (optional) an object containing the new locale data to apply :::info -Use the `setLocale()` method to apply a new locale to RichText. To reset RichText to the default locale, call the `setLocale()` method without arguments (or with a *null* value). +The `setLocale()` method updates the locale used by RichText. Calling it without any arguments (or passing *null*) will revert the locale to the default setting. ::: ### Example @@ -32,10 +32,10 @@ const editor = new richtext.Richtext("#root", { // configuration properties }); -// apply the "de" locale to RichText +// set the locale of RichText to "de" editor.setLocale(de); ~~~ -**Change log:** The method was added in v2.0 +**Change log:** The method was introduced in v2.0 **Related articles:** [Localization](guides/localization.md) diff --git a/docs/api/methods/set-value.md b/docs/api/methods/set-value.md index 5d40f94..f2e1848 100644 --- a/docs/api/methods/set-value.md +++ b/docs/api/methods/set-value.md @@ -8,7 +8,7 @@ description: You can learn about the setValue method in the documentation of the ### Description -@short: Applies a new value to RichText +@short: Updates the RichText content with a new value ### Usage @@ -18,10 +18,10 @@ setValue: (value: string, encoder?: any): void; ### Parameters -- `value` - (required) a value to be inserted into the RichText -- `encoder` - (optional) a custom parser used to encode the RichText's content into a custom format. The following formats are available: `html` (default) and `text` +- `value` - (required) the content to be inserted into the RichText +- `encoder` - (optional) a custom parser to encode the RichText content into a specific format. Available formats include: `html` (default) and `text` -You can get the required encoder in the following way: +You can obtain the desired encoder as follows: ```jsx const fromTextEncoder = richtext.text.fromText; // text encoder diff --git a/docs/api/overview/event_bus_methods_overview.md b/docs/api/overview/event_bus_methods_overview.md index 367bf7d..2f03417 100644 --- a/docs/api/overview/event_bus_methods_overview.md +++ b/docs/api/overview/event_bus_methods_overview.md @@ -1,13 +1,13 @@ --- sidebar_label: Event Bus methods title: Event Bus Methods -description: You can have an Internal Event Bus methods overview of JavaScript RichText 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. +description: Here's an overview of the Internal Event Bus methods in the JavaScript RichText documentation for the DHTMLX JavaScript RichText library. Explore developer guides, API references, try code examples and live demos, and get a free 30-day trial of DHTMLX RichText. --- # Event Bus methods -This page provides a list of methods related to the internal Event Bus used by the DHTMLX RichText editor. -These methods are designed for advanced integrations and custom behavior based on the internal event system. +This section lists the methods connected to the internal Event Bus within the DHTMLX RichText editor. +These methods are intended for advanced use cases, enabling custom integrations and behaviors through the internal event system. | Name | Description | | ------------------------------------------------- | -------------------------------------------- | diff --git a/docs/api/overview/events_overview.md b/docs/api/overview/events_overview.md index 12e92be..303d8db 100644 --- a/docs/api/overview/events_overview.md +++ b/docs/api/overview/events_overview.md @@ -1,13 +1,13 @@ --- sidebar_label: Events overview title: Events Overview -description: You can have an Events overview of JavaScript RichText 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. +description: Find a complete overview of events in the DHTMLX JavaScript RichText editor documentation. Explore developer guides, API references, try code samples and live demos, and get a free 30-day evaluation of DHTMLX RichText. --- # Events overview -This page lists all events emitted by the DHTMLX RichText editor. -You can use these events to extend functionality, track user interaction, or trigger custom behavior. +Here you'll find a list of all the events triggered by the DHTMLX RichText editor. +These events allow you to enhance functionality, monitor user actions, or initiate custom responses. | Name | Description | | ------------------------------------------------------ | --------------------------------------------- | diff --git a/docs/api/overview/main_overview.md b/docs/api/overview/main_overview.md index e9e746f..eb91880 100644 --- a/docs/api/overview/main_overview.md +++ b/docs/api/overview/main_overview.md @@ -1,7 +1,7 @@ --- sidebar_label: API overview title: API Overview -description: You can have an API overview of JavaScript RichText 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. +description: Explore the JavaScript RichText API in the DHTMLX JavaScript RichText library documentation. Access developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX RichText. --- # API overview @@ -16,7 +16,7 @@ new richtext.RichText("#root", { **Parameters**: -- an HTML container (e.g., CSS selector or DOM element) +- an HTML container (such as a CSS selector or a DOM element) - a configuration object ([see properties](api/overview/properties_overview.md)) ## RichText methods diff --git a/docs/api/overview/methods_overview.md b/docs/api/overview/methods_overview.md index a1850f7..015dd28 100644 --- a/docs/api/overview/methods_overview.md +++ b/docs/api/overview/methods_overview.md @@ -1,13 +1,13 @@ --- sidebar_label: Methods overview title: Methods Overview -description: You can have a Methods overview of JavaScript RichText 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. +description: Find a summary of the JavaScript RichText methods in the DHTMLX library documentation. Explore developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX RichText. --- # Methods overview -This page provides a summary of the core methods available in the DHTMLX RichText editor. -Use this reference to quickly navigate to detailed descriptions of each method, understand their purpose, and see usage examples. +Here's a quick rundown of the main methods you'll find in the DHTMLX RichText editor. +This guide helps you get a clear idea of what each method does and points you to detailed descriptions and examples. | Name | Description | | ------------------------------------------------------ | ----------------------------------------- | diff --git a/docs/api/overview/properties_overview.md b/docs/api/overview/properties_overview.md index 1d89cf7..db3f9c2 100644 --- a/docs/api/overview/properties_overview.md +++ b/docs/api/overview/properties_overview.md @@ -1,13 +1,13 @@ --- sidebar_label: Properties overview title: Properties Overview -description: You can have a Properties overview of JavaScript RichText 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. +description: Explore the Properties overview for JavaScript RichText in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, sample code, live demos, and get a free 30-day trial of DHTMLX RichText. --- # Properties overview -This page lists all configuration properties that can be used when initializing the DHTMLX RichText editor. -They help you control layout, toolbar, value, localization, and other aspects of the editor. +Here you'll find a list of all the configuration properties available when setting up the DHTMLX RichText editor. +These options let you customize the layout, toolbar, content, localization, and more. | Name | Description | | --------------------------------------------------------|----------------------------------------------| diff --git a/docs/api/overview/state_methods_overview.md b/docs/api/overview/state_methods_overview.md index 79ffabb..18069be 100644 --- a/docs/api/overview/state_methods_overview.md +++ b/docs/api/overview/state_methods_overview.md @@ -1,13 +1,13 @@ --- sidebar_label: State methods title: State Methods -description: You can have an Internal State methods overview of JavaScript RichText 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. +description: Explore an overview of Internal State methods for JavaScript RichText in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX RichText. --- # State methods -This page lists methods for accessing and working with the internal state of the DHTMLX RichText editor. -These methods are useful for debugging, integrating with reactive systems, or implementing advanced custom logic. +Here you'll find methods to access and manage the internal state of the DHTMLX RichText editor. +These methods come in handy for debugging, working with reactive frameworks, or creating advanced custom features. | Name | Description | | ----------------------------------------------------------- | ------------------------------------------------ | diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index f782c3a..fda834d 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -6,33 +6,41 @@ description: You can learn about the configuration in the documentation of the D # Configuration -You can configure RichText appearance and functionality via the corresponding API. The available parameters will allow you to: +RichText can be set up to look and work the way you want through its API. The available options let you: -- Show/hide **menubar** using the [`menubar`](api/config/menubar.md) property -- Configure **toolbar** using the [`toolbar`](api/config/toolbar.md) property -- Enable the **fullscreen mode** using the [`fullscreenMode`](api/config/fullscreen-mode.md) property -- Toggle the **layout** between "classic" and "document" modes using the [`layoutMode`](api/config/layout-mode.md) property -- 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 +- Show or hide the **menubar** with the [`menubar`](api/config/menubar.md) property +- Set up the **toolbar** using the [`toolbar`](api/config/toolbar.md) property +- Turn on **fullscreen mode** with the [`fullscreenMode`](api/config/fullscreen-mode.md) property +- Switch the **layout** between "classic" and "document" modes using the [`layoutMode`](api/config/layout-mode.md) property +- Set an **initial value** with the [`value`](api/config/value.md) property +- Choose an **initial locale** using the [`locale`](api/config/locale.md) property +- Apply **initial styles** with the [`defaultStyles`](api/config/default-styles.md) property ## Layout modes -There are two layout modes of RichText editor between which you can select to get the best working place for creating your perfect content: +RichText editor comes with two layout modes to pick from, so you can work in the environment that suits your content: - **"classic"** -
-![Classic mode](./../assets/richtext/classic_mode.png) -
+import classic_mode from '@site/static/img/richtext/classic_mode.png'; + +Classic mode - **"document"** -
-![Document mode](./../assets/richtext/document_mode.png) -
+import document_mode from '@site/static/img/richtext/document_mode.png'; + +Document mode -To specify the desired mode, you need to define it in the [`layoutMode`](api/config/layout-mode.md) property of the RichText configuration object during initialization of the component: +To pick a mode, just set the [`layoutMode`](api/config/layout-mode.md) property in the RichText config when you initialize the component: ~~~jsx const editor = new richtext.Richtext("#root", { @@ -42,11 +50,11 @@ const editor = new richtext.Richtext("#root", { ## Toolbar -The RichText toolbar consists of several blocks of controls that can be changed according to your needs. +The RichText toolbar is made up of several groups of controls, and you can change them to match what you need. ### Default toolbar controls -You can specify the following buttons and controls in the RichText toolbar: +You can use these buttons and controls in the RichText toolbar: | Button | Description | |---------------------|-----------------------------------------------------------------------------| @@ -80,7 +88,7 @@ You can specify the following buttons and controls in the RichText toolbar: | `shortcuts` | Displays a list of available keyboard shortcuts | | `separator` | Adds a visual separator between controls | -The toolbar structure is defined using the [`toolbar`](api/config/toolbar.md) property, which is an array with strings presenting the names of controls. +The toolbar layout is set up with the [`toolbar`](api/config/toolbar.md) property, which is just an array of strings naming the controls you want. ~~~jsx {2-36} new richtext.Richtext("#root", { @@ -127,14 +135,14 @@ 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: +If you want to add your own controls, you can include objects in the [`toolbar`](api/config/toolbar.md) property with these options: -- `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) -- `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) -- `handler` - (optional) a callback function that executes when the button is clicked +- `type` - (required) sets the custom control type. You can use: `"button"`, `"richselect"`, `"colorpicker"` +- `id` - (optional) a custom control ID (shouldn't clash with built-in control IDs) +- `label` - (optional) a button label (can be used with an icon) +- `tooltip` - (optional) a tooltip shown on hover (if not set, uses the "label" value) +- `css` - (optional) a CSS class name for the control (default supported: wx-primary, wx-secondary) +- `handler` - (optional) a callback function that runs when the button is clicked ~~~jsx {6-32} new richtext.Richtext("#root", { @@ -178,7 +186,7 @@ new richtext.Richtext("#root", { ### Hide Toolbar -If you need to hide toolbar, set the [`toolbar`](api/config/toolbar.md) property to `false` as follows: +To hide the toolbar, just set the [`toolbar`](api/config/toolbar.md) property to `false` like this: ~~~jsx {2} new richtext.Richtext("#root", { @@ -189,7 +197,7 @@ new richtext.Richtext("#root", { ## Default styles -You can apply default style values for specific block types in the editor using the [`defaultStyles`](api/config/default-styles.md) property. +Default style values for certain block types in the editor can be set with the [`defaultStyles`](api/config/default-styles.md) property. ~~~jsx {} defaultStyles?: boolean | { @@ -250,7 +258,7 @@ defaultStyles?: boolean | { }; ~~~ -The `defaultStyles` property DOES NOT set the actual CSS to the affected blocks. CSS styles have to be applied separately: +The `defaultStyles` property doesn't actually apply CSS to the blocks-it just sets up the style values. You'll still need to add CSS styles separately: ```html title="index.html"
@@ -278,6 +286,6 @@ const editor = new richtext.Richtext("#root", { } ``` -In this example, all `h2` blocks are assigned to the `"Roboto"` font-family with a font-size of 28px with both the foreground and the background colors changed as well. Css styles are assigned to `h2` blocks as well. +Here, all `h2` blocks get the "Roboto" font-family, a font-size of 28px, and the foreground and background colors are updated as well. The CSS rules are applied to the `h2` blocks. **Related sample:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext) diff --git a/docs/guides/initialization.md b/docs/guides/initialization.md index a43bf9e..1b8ae96 100644 --- a/docs/guides/initialization.md +++ b/docs/guides/initialization.md @@ -6,7 +6,7 @@ description: You can learn about the initialization in the documentation of the # Initialization -This guide will give you detailed instructions on how to create RichText on a page to enrich your application with features of the RichText editor. Take the following steps to get a ready-to-use component: +Here's a simple walkthrough for setting up RichText on your page, so you can start using the RichText editor in your app. Just follow these steps to get things running: 1. [Include the RichText source files on a page](#including-source-files). 2. [Create a container for RichText](#creating-container). @@ -14,14 +14,14 @@ This guide will give you detailed instructions on how to create RichText on a pa ## Including source files -[Download the package](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml) and unpack it into a folder of your project. +First, [download the package](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml) and unpack it somewhere in your project folder. -To create RichText, you need to include 2 source files on your page: +To use RichText, add these two files to your page: - *richtext.js* - *richtext.css* -Make sure that you set correct relative paths to the source files: +Be sure to use the correct paths to where you placed these files: ~~~html title="index.html" @@ -30,7 +30,7 @@ Make sure that you set correct relative paths to the source files: ## Creating container -Add a container for RichText and give it an ID, for example *"root"*: +Next, set up a container for RichText. Give it an ID, like *"root"*: ~~~jsx title="index.html"
@@ -38,10 +38,10 @@ Add a container for RichText and give it an ID, for example *"root"*: ## Initializing RichText -Initialize RichText with the `richtext.Richtext` constructor. The constructor takes two parameters: +Now, use the `richtext.Richtext` constructor to create RichText. This constructor needs two things: -- an HTML container (the ID of the HTML container) -- an object with configuration properties. [See the full list here](#configuration-properties) +- the HTML container (use the ID you set) +- an object with configuration options. [Check out the full list here](#configuration-properties) ~~~jsx title="index.html" // create RichText @@ -53,11 +53,11 @@ const editor = new richtext.Richtext("#root", { ### Configuration properties :::note -The full list of properties to configure **RichText** can be found [**here**](api/overview/properties_overview.md). +You can see all the available properties for **RichText** [**here**](api/overview/properties_overview.md). ::: ## Example -In this snippet you can see how to initialize **RichText** with the initial data: +Here's a quick example showing how to set up **RichText** with some initial data: diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md index 5525455..7fa7228 100644 --- a/docs/guides/integration_with_angular.md +++ b/docs/guides/integration_with_angular.md @@ -7,79 +7,79 @@ description: You can learn about the integration with Angular in the documentati # Integration with Angular :::tip -You should be familiar with basic concepts and patterns of **Angular** before reading this documentation. To refresh your knowledge, please refer to the [**Angular documentation**](https://v17.angular.io/docs). +It's helpful to be familiar with the main ideas and patterns of **Angular** before jumping in here. For a quick refresher, check out the [**Angular documentation**](https://v17.angular.io/docs). ::: -DHTMLX RichText is compatible with **Angular**. We have prepared code examples on how to use DHTMLX RichText with **Angular**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/angular-richtext-demo). +DHTMLX RichText works well with **Angular**. There are code samples available showing how to use DHTMLX RichText in an **Angular** project. For more details, take a look at the [**Example on GitHub**](https://github.com/DHTMLX/angular-richtext-demo). ## Creating a project :::info -Before you start to create a new project, install [**Angular CLI**](https://v17.angular.io/cli) and [**Node.js**](https://nodejs.org/en/). +Before starting a new project, make sure [**Angular CLI**](https://v17.angular.io/cli) and [**Node.js**](https://nodejs.org/en/) are installed. ::: -Create a new **my-angular-richtext-app** project using Angular CLI. Run the following command for this purpose: +To set up a new **my-angular-richtext-app** project using Angular CLI, just run: ~~~json ng new my-angular-richtext-app ~~~ :::note -If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app! +To keep things simple while following this guide, turn off Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating your Angular app! ::: -The command above installs all the necessary tools, so you don't need to run any additional commands. +This command sets up everything needed, so there's no need for any extra installation steps. ### Installation of dependencies -Go to the new created app directory: +Move into your new app's directory: ~~~json cd my-angular-richtext-app ~~~ -Install dependencies and start the dev server. For this, use the [**yarn**](https://yarnpkg.com/) package manager: +Install the dependencies and start the development server with [**yarn**](https://yarnpkg.com/): ~~~json yarn yarn start ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app will be up and running locally (for example, at `http://localhost:3000`). ## Creating RichText -Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package. +Next, grab the DHTMLX RichText source code. Stop the app for a moment and install the RichText package. ### Step 1. Package installation -Download the [**trial RichText package**](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial RichText is available 30 days only. - +Download the [**trial RichText package**](how_to_start.md#installing-richtext-via-npm-or-yarn) and follow the steps in the README file. Just a heads-up: the trial version is good for 30 days. + ### Step 2. Component creation -Now you need to create an Angular component, to add Richtext into the application. Create the **richtext** folder in the **src/app/** directory, add a new file into it and name it **richtext.component.ts**. +To add RichText to your app, create a new Angular component. Make a **richtext** folder in **src/app/**, then add a new file called **richtext.component.ts**. #### Import source files -Open the **richtext.component.ts** file and import RichText source files. Note that: +Open **richtext.component.ts** and bring in the RichText source files. Here's how the import path should look: -- if you use PRO version and install the RichText package from a local folder, the imported path looks like this: +- For the PRO version installed from a local folder: ~~~jsx import { Richtext} from 'dhx-richtext-package'; ~~~ -- if you use the trial version of RichText, specify the following path: +- For the trial version: ~~~jsx import { Richtext} from '@dhx/trial-richtext'; ~~~ -In this tutorial you can see how to configure the **trial** version of RichText. +This guide shows how to set up the **trial** version. #### Set containers and initialize the Richtext -To display RichText on the page, you need to set a container for RichText, and initialize the component using the corresponding constructor: +To show RichText on the page, set up a container and initialize the component with its constructor: ~~~jsx {} title="richtext.component.ts" import { Richtext} from '@dhx/trial-richtext'; @@ -113,7 +113,7 @@ export class RichTextComponent implements OnInit, OnDestroy { #### Adding styles -To display RichText correctly, you need to provide the corresponding styles. For this purpose, you can create the **richtext.component.css** file in the **src/app/richtext/** directory and specify important styles for RichText and its container: +To make sure RichText looks right, add the needed styles. Create a **richtext.component.css** file in **src/app/richtext/** and include these styles for RichText and its container: ~~~css title="richtext.component.css" /* import RichText styles */ @@ -141,7 +141,7 @@ body{ #### Loading data -To add data into RichText, you need to provide a data set. You can create the **data.ts** file in the **src/app/richtext/** directory and add some data into it: +To load data into RichText, just provide a data set. Make a **data.ts** file in **src/app/richtext/** and add some sample data: ~~~jsx {} title="data.ts" export function getData() { @@ -153,7 +153,7 @@ export function getData() { } ~~~ -Then open the ***richtext.component.ts*** file. Import the file with data and specify the corresponding data properties to the configuration object of RichText within the `ngOnInit()` method, as shown below: +Next, open ***richtext.component.ts***. Import the data file and set the data properties in the RichText configuration inside the `ngOnInit()` method, like this: ~~~jsx {} title="richtext.component.ts" import { Richtext} from '@dhx/trial-richtext'; @@ -188,7 +188,7 @@ export class RichTextComponent implements OnInit, OnDestroy { } ~~~ -You can also use the [`setValue()`](api/methods/set-value.md) method inside the `ngOnInit()` method of Angular to load data into RichText. +Alternatively, you can use the [`setValue()`](api/methods/set-value.md) method in `ngOnInit()` to load data into RichText. ~~~jsx {} title="richtext.component.ts" import { Richtext} from '@dhx/trial-richtext'; @@ -225,13 +225,13 @@ export class RichTextComponent implements OnInit, OnDestroy { } ~~~ -Now the RichText component is ready to use. When the element will be added to the page, it will initialize the RichText with data. You can provide necessary configuration settings as well. Visit our [RichText API docs](api/overview/main_overview.md) to check the full list of available properties. +At this point, the RichText component is set up and ready. When it's added to the page, RichText will initialize with the provided data. You can also add any configuration options you need. For the full list of properties, check out the [RichText API docs](api/overview/main_overview.md). #### Handling events -When a user makes some action in the RichText, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md). +Whenever something happens in RichText, it fires an event. You can listen for these events to trigger your own code. The [full list of events](api/overview/events_overview.md) is available. -Open the **richtext.component.ts** file and complete the `ngOnInit()` method in the following way: +Edit the **richtext.component.ts** file and update the `ngOnInit()` method like this: ~~~jsx {} title="richtext.component.ts" // ... @@ -250,7 +250,7 @@ ngOnDestroy(): void { ### Step 3. Adding RichText into the app -To add the ***RichTextComponent*** component into your app, open the ***src/app/app.component.ts*** file and replace the default code with the following one: +To use the ***RichTextComponent*** in your app, open ***src/app/app.component.ts*** and replace the default code with: ~~~jsx {} title="app.component.ts" import { Component } from "@angular/core"; @@ -264,7 +264,7 @@ export class AppComponent { } ~~~ -Then create the ***app.module.ts*** file in the ***src/app/*** directory and specify the *RichTextComponent* as shown below: +Now, create ***app.module.ts*** in ***src/app/*** and add *RichTextComponent* as shown below: ~~~jsx {} title="app.module.ts" import { NgModule } from "@angular/core"; @@ -281,7 +281,7 @@ import { RichTextComponent } from "./richtext/richtext.component"; export class AppModule {} ~~~ -The last step is to open the ***src/main.ts*** file and replace the existing code with the following one: +The last thing to do is update ***src/main.ts*** with the following code: ~~~jsx title="main.ts" import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; @@ -291,10 +291,14 @@ platformBrowserDynamic() .catch((err) => console.error(err)); ~~~ -After that, you can start the app to see RichText loaded with data on a page. +Now you can start the app and see RichText loaded with data on the page. + +import trial_richtext from '@site/static/img/trial_richtext.png'; -
-![RichText initialization](../assets/trial_richtext.png) -
+Trial richtext -Now you know how to integrate DHTMLX RichText with Angular. You can customize the code according to your specific requirements. The final advanced example you can find on [**GitHub**](https://github.com/DHTMLX/angular-richtext-demo). +That's all it takes to get DHTMLX RichText working with Angular. Feel free to tailor the code to your own needs. A complete example can be found on [**GitHub**](https://github.com/DHTMLX/angular-richtext-demo). diff --git a/docs/guides/integration_with_react.md b/docs/guides/integration_with_react.md index 1244911..cbb856e 100644 --- a/docs/guides/integration_with_react.md +++ b/docs/guides/integration_with_react.md @@ -7,18 +7,18 @@ description: You can learn about the integration with React in the documentation # Integration with React :::tip -You should be familiar with the basic concepts and patterns of [**React**](https://react.dev) before reading this documentation. To refresh your knowledge, please refer to the [**React documentation**](https://react.dev/learn). +It's good to have some experience with [**React**](https://react.dev) before jumping into this guide. If you need a quick refresher, check out the [**React documentation**](https://react.dev/learn). ::: -DHTMLX RichText is compatible with **React**. We have prepared code examples on how to use DHTMLX RichText with **React**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/react-richtext-demo). +DHTMLX RichText works well with **React**. There are code samples showing how to use DHTMLX RichText in React apps. The [**Example on GitHub**](https://github.com/DHTMLX/react-richtext-demo) has more details. ## Creating a project :::info -Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/). +Before starting a new project, make sure you have [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/) installed. ::: -You can create a basic **React** project or use **React with Vite**. Let's name the project as **my-react-richtext-app**: +You can set up a basic **React** project or use **React with Vite**. In this example, the project is called **my-react-richtext-app**: ~~~json npx create-react-app my-react-richtext-app @@ -26,65 +26,65 @@ npx create-react-app my-react-richtext-app ### Installation of dependencies -Go to the new created app directory: +Move into your new app folder: ~~~json cd my-react-richtext-app ~~~ -Install dependencies and start the dev server. For this, use a package manager: +Next, install the dependencies and start the development server using your preferred package manager: -- if you use [**yarn**](https://yarnpkg.com/), run the following commands: +- For [**yarn**](https://yarnpkg.com/): ~~~json yarn yarn start ~~~ -- if you use [**npm**](https://www.npmjs.com/), run the following commands: +- For [**npm**](https://www.npmjs.com/): ~~~json npm install npm run dev ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app will be available on localhost (like `http://localhost:3000`). ## Creating RichText -Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package. +Now it's time to add the DHTMLX RichText code. First, stop the app and install the RichText package. ### Step 1. Package installation -Download the [**trial RichText package**](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial RichText is available 30 days only. +Download the [**trial RichText package**](how_to_start.md#installing-richtext-via-npm-or-yarn) and follow the steps in the README file. The trial version of RichText is available for 30 days. ### Step 2. Component creation -Now you need to create a React component, to add a RichText into the application. Create a new file in the ***src/*** directory and name it ***Richtext.jsx***. +Next, create a React component to add RichText to your app. In the ***src/*** directory, create a new file called ***Richtext.jsx***. #### Importing source files -Open the ***Richtext.jsx*** file and import RichText source files. Note that: +Open ***Richtext.jsx*** and import the RichText files. Keep in mind: -- if you use PRO version and install the RichText package from a local folder, the import paths look like this: +- If you have the PRO version and are installing RichText from a local folder, your imports should look like this: ~~~jsx title="Richtext.jsx" import { Richtext} from 'dhx-richtext-package'; import 'dhx-richtext-package/dist/richtext.css'; ~~~ -- if you use the trial version of RichText, specify the following paths: +- For the trial version, use these imports: ~~~jsx title="Richtext.jsx" import { Richtext} from '@dhx/trial-richtext'; import "@dhx/trial-richtext/dist/richtext.css"; ~~~ -In this tutorial you can see how to configure the **trial** version of RichText. +This guide uses the **trial** version for demonstration. #### Setting containers and adding Richtext -To display RichText on the page, you need to create container for RichText and initialize the component using the corresponding constructors: +To show RichText on the page, set up a container and initialize the component with its constructor: ~~~jsx {} title="Richtext.jsx" import { useEffect, useRef } from "react"; @@ -111,7 +111,7 @@ export default function RichTextComponent(props) { #### Adding styles -To display RichText correctly, you need to specify important styles for RichText and its container in the main css file of the project: +You'll need to add some CSS so RichText displays correctly. Update the main CSS file with these styles: ~~~css title="index.css" /* specify styles for initial page */ @@ -137,7 +137,7 @@ body, #### Loading data -To add data into the RichText, you need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it: +To load data into RichText, prepare a data set. Create a file called ***data.js*** in the ***src/*** folder and add some content: ~~~jsx {} title="data.js" export function getData() { @@ -149,7 +149,7 @@ export function getData() { } ~~~ -Then open the ***App.js*** file and import data. After this you can pass data into the new created `` components as **props**: +Next, open ***App.js*** and import the data. Pass it to your `` component as a **prop**: ~~~jsx {2,5-6} title="App.js" import RichText from "./Richtext"; @@ -163,7 +163,7 @@ function App() { export default App; ~~~ -Go to the ***Richtext.jsx*** file and apply the passed **props** to the RichText configuration object: +Now, in ***Richtext.jsx***, use the incoming **prop** in the RichText configuration: ~~~jsx {} title="Richtext.jsx" import { useEffect, useRef } from "react"; @@ -190,7 +190,7 @@ export default function RichTextComponent(props) { } ~~~ -You can also use the [`setValue()`](api/methods/set-value.md) method inside the `useEffect()` method of React to load data into RichText: +If you want, you can also use the [`setValue()`](api/methods/set-value.md) method inside `useEffect()` to load data: ~~~jsx {} title="Richtext.jsx" import { useEffect, useRef } from "react"; @@ -220,13 +220,13 @@ export default function RichTextComponent(props) { } ~~~ -Now the RichText component is ready. When the element will be added to the page, it will initialize the RichText with data. You can provide necessary configuration settings as well. Visit our [RichText API docs](api/overview/main_overview.md) to check the full list of available properties. +At this point, the RichText component is set up. When it's rendered, it will display the RichText editor with your data. You can adjust the configuration as needed. The [RichText API docs](api/overview/main_overview.md) have the full list of available options. #### Handling events -When a user makes some action in the RichText, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md). +RichText triggers events when users interact with it. You can use these events to run your own code. The [full list of events](api/overview/events_overview.md) is available in the docs. -Open ***Richtext.jsx*** and complete the `useEffect()` method in the following way: +To handle an event, update ***Richtext.jsx*** like this: ~~~jsx {} title="Richtext.jsx" // ... @@ -244,10 +244,14 @@ useEffect(() => { // ... ~~~ -After that, you can start the app to see RichText loaded with data on a page. +Now, you can start the app to see RichText with your data on the page. -
-![RichText initialization](../assets/trial_richtext.png) -
+import trial_richtext from '@site/static/img/trial_richtext.png'; -Now you know how to integrate DHTMLX RichText with React. You can customize the code according to your specific requirements. The final advanced example you can find on [**GitHub**](https://github.com/DHTMLX/react-richtext-demo). +Trial richtext + +That's it for integrating DHTMLX RichText with React. You can tweak the code to fit your needs. For a more advanced example, check out [**GitHub**](https://github.com/DHTMLX/react-richtext-demo). diff --git a/docs/guides/integration_with_svelte.md b/docs/guides/integration_with_svelte.md index db9839f..3c568f4 100644 --- a/docs/guides/integration_with_svelte.md +++ b/docs/guides/integration_with_svelte.md @@ -7,74 +7,74 @@ description: You can learn about the integration with Svelte in the documentatio # Integration with Svelte :::tip -You should be familiar with the basic concepts and patterns of **Svelte** before reading this documentation. To refresh your knowledge, please refer to the [**Svelte documentation**](https://svelte.dev/). +It's helpful to already know the basics of **Svelte** for this guide. If you need a quick refresher, check out the [**Svelte documentation**](https://svelte.dev/). ::: -DHTMLX RichText is compatible with **Svelte**. We have prepared code examples on how to use DHTMLX RichText with **Svelte**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/svelte-richtext-demo). +DHTMLX RichText works well with **Svelte**. There are some handy code examples showing how to use DHTMLX RichText in Svelte apps. More details and examples are available in the [**Example on GitHub**](https://github.com/DHTMLX/svelte-richtext-demo). ## Creating a project :::info -Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/). +Before starting a new project, make sure you have [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/) installed. ::: -There are several ways of creating a **Svelte** project: +There are a couple of ways to set up a **Svelte** project: -- you can use the [**SvelteKit**](https://kit.svelte.dev/) +- Use [**SvelteKit**](https://kit.svelte.dev/) or -- you can also use **Svelte with Vite** (but without SvelteKit): +- Go with **Svelte and Vite** (without SvelteKit): ~~~json npm create vite@latest ~~~ -Check the details in the [related article](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit). +You can find more details in this [related article](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit). ### Installation of dependencies -Let's name the project as **my-svelte-richtext-app** and go to the app directory: +Let's call the project **my-svelte-richtext-app** and move into its directory: ~~~json cd my-svelte-richtext-app ~~~ -Install dependencies and start the dev server. For this, use a package manager: +Next, install the dependencies and start the development server using your package manager of choice: -- if you use [**yarn**](https://yarnpkg.com/), run the following commands: +- For [**yarn**](https://yarnpkg.com/): ~~~json yarn yarn start ~~~ -- if you use [**npm**](https://www.npmjs.com/), run the following commands: +- For [**npm**](https://www.npmjs.com/): ~~~json npm install npm run dev ~~~ -The app should run on a localhost (for instance `http://localhost:3000`). +The app should now be running locally (for example, at `http://localhost:3000`). ## Creating RichText -Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package. +You'll need the DHTMLX RichText source code. Before going further, stop the app and install the RichText package. ### Step 1. Package installation -Download the [**trial RichText package**](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial RichText is available 30 days only. +Download the [**trial RichText package**](how_to_start.md#installing-richtext-via-npm-or-yarn) and follow the steps in the README file. The trial version works for 30 days. ### Step 2. Component creation -Now you need to create a Svelte component, to add a RichText into the application. Let's create a new file in the ***src/*** directory and name it ***Richtext.svelte***. +Now it's time to make a Svelte component for RichText. In the ***src/*** directory, create a new file called ***Richtext.svelte***. #### Importing source files -Open the ***Richtext.svelte*** file and import RichText source files. Note that: +In ***Richtext.svelte***, import the RichText source files. Here's how the imports look depending on your version: -- if you use PRO version and install the RichText package from a local folder, the import paths look like this: +- For the PRO version installed locally, use these paths: ~~~html title="Richtext.svelte" ~~~ -- if you use the trial version of RichText, specify the following paths: +- For the trial version, use these imports: ~~~html title="Richtext.svelte" @@ -124,7 +124,7 @@ onDestroy(() => { #### Loading data -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: +To load data into RichText, you'll need a data set. Create a ***data.js*** file in the ***src/*** directory and add some sample data: ~~~jsx {} title="data.ts" export function getData() { @@ -136,7 +136,7 @@ export function getData() { } ~~~ -Then open the ***App.svelte*** file, import data, and pass it into the new created `` components as **props**: +Then, in ***App.svelte***, import the data and pass it as a prop to your `` component: ~~~html {} title="App.svelte" ~~~ -- if you use the trial version of RichText, specify the following paths: +- For the trial version, the imports are: ~~~html title="Richtext.vue" ~~~ -In this tutorial you can see how to configure the **trial** version of RichText. +This tutorial shows how to set up the **trial** version of RichText. #### Setting containers and adding Richtext -To display Richtext on the page, you need to create a container for RichText and initialize the component using the corresponding constructor: +To show RichText on the page, set up a container and initialize the component with its constructor: ~~~html {} title="Richtext.vue" + +~~~ + +## Erstellen eines Containers + +Richten Sie als Nächstes einen Container für RichText ein. Geben Sie ihm eine ID, zum Beispiel *"root"*: + +~~~jsx title="index.html" +
+~~~ + +## Initialisieren von RichText + +Nun verwenden Sie den Konstruktor `richtext.Richtext`, um RichText zu erstellen. Dieser Konstruktor benötigt zwei Dinge: + +- den HTML-Container (verwenden Sie die vergebene ID) +- ein Objekt mit Konfigurationsoptionen. [Hier finden Sie die vollständige Liste](#konfigurationseigenschaften) + +~~~jsx title="index.html" +// create RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +~~~ + +### Konfigurationseigenschaften + +:::note +Alle verfügbaren Eigenschaften für **RichText** finden Sie [**hier**](api/overview/properties_overview.md). +::: + +## Beispiel + +Hier sehen Sie ein kurzes Beispiel, wie Sie **RichText** mit einigen Anfangsdaten einrichten können: + + diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md new file mode 100644 index 0000000..74d722c --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md @@ -0,0 +1,304 @@ +--- +sidebar_label: Integration mit Angular +title: Integration mit Angular +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die Integration mit Angular. Durchstöbern Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-tägige Testversion von DHTMLX RichText herunter. +--- + +# Integration mit Angular + +:::tip +Es ist hilfreich, mit den grundlegenden Konzepten und Mustern von **Angular** vertraut zu sein, bevor Sie hier einsteigen. Für eine schnelle Auffrischung schauen Sie in die [**Angular-Dokumentation**](https://v17.angular.io/docs). +::: + +DHTMLX RichText funktioniert problemlos mit **Angular**. Es stehen Codebeispiele zur Verfügung, die zeigen, wie DHTMLX RichText in einem **Angular**-Projekt verwendet wird. Weitere Informationen finden Sie im [**Beispiel auf GitHub**](https://github.com/DHTMLX/angular-richtext-demo). + +## Projekt erstellen + +:::info +Bevor Sie ein neues Projekt starten, stellen Sie sicher, dass [**Angular CLI**](https://v17.angular.io/cli) und [**Node.js**](https://nodejs.org/en/) installiert sind. +::: + +Um ein neues **my-angular-richtext-app**-Projekt mit Angular CLI einzurichten, führen Sie einfach folgenden Befehl aus: + +~~~json +ng new my-angular-richtext-app +~~~ + +:::note +Um es während dieser Anleitung einfach zu halten, deaktivieren Sie Server-Side Rendering (SSR) und Static Site Generation (SSG/Prerendering) bei der Erstellung Ihrer Angular-App! +::: + +Dieser Befehl richtet alles Notwendige ein, sodass keine weiteren Installationsschritte erforderlich sind. + +### Installation der Abhängigkeiten + +Wechseln Sie in das Verzeichnis Ihrer neuen App: + +~~~json +cd my-angular-richtext-app +~~~ + +Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver mit [**yarn**](https://yarnpkg.com/): + +~~~json +yarn +yarn start +~~~ + +Die App läuft dann lokal (zum Beispiel unter `http://localhost:3000`). + +## RichText erstellen + +Als nächstes laden Sie den Quellcode von DHTMLX RichText herunter. Stoppen Sie die App kurz und installieren Sie das RichText-Paket. + +### Schritt 1. Paketinstallation + +Laden Sie das [**Testpaket von RichText**](how_to_start.md#installation-von-richtext-via-npm-oder-yarn) herunter und folgen Sie den Schritten in der README-Datei. Hinweis: Die Testversion ist 30 Tage lang gültig. + +### Schritt 2. Komponente erstellen + +Um RichText zu Ihrer App hinzuzufügen, erstellen Sie eine neue Angular-Komponente. Legen Sie einen **richtext**-Ordner in **src/app/** an und fügen Sie eine neue Datei mit dem Namen **richtext.component.ts** hinzu. + +#### Quelldateien importieren + +Öffnen Sie **richtext.component.ts** und importieren Sie die RichText-Quelldateien. Der Importpfad sieht wie folgt aus: + +- Für die PRO-Version, die aus einem lokalen Ordner installiert wurde: + +~~~jsx +import { Richtext} from 'dhx-richtext-package'; +~~~ + +- Für die Testversion: + +~~~jsx +import { Richtext} from '@dhx/trial-richtext'; +~~~ + +Diese Anleitung zeigt die Einrichtung der **Testversion**. + +#### Container definieren und Richtext initialisieren + +Um RichText auf der Seite anzuzeigen, richten Sie einen Container ein und initialisieren Sie die Komponente mit dem Konstruktor: + +~~~jsx {} title="richtext.component.ts" +import { Richtext} from '@dhx/trial-richtext'; +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", // ein Template-Name, der in der Datei "app.component.ts" als verwendet wird + styleUrls: ["./richtext.component.css"], // CSS-Datei einbinden + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + // Container für RichText initialisieren + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: Richtext; + + ngOnInit() { + // Die RichText-Komponente initialisieren + this._editor = new Richtext(this.richtext_container.nativeElement, {}); + } + + ngOnDestroy(): void { + this._editor.destructor(); // RichText zerstören + } +} +~~~ + +#### Styles hinzufügen + +Damit RichText korrekt dargestellt wird, fügen Sie die benötigten Styles hinzu. Erstellen Sie eine **richtext.component.css**-Datei in **src/app/richtext/** und fügen Sie folgende Styles für RichText und dessen Container ein: + +~~~css title="richtext.component.css" +/* RichText-Styles importieren */ +@import "@dhx/trial-richtext/dist/richtext.css"; + +/* Styles für die Startseite */ +html, +body{ + height: 100%; + padding: 0; + margin: 0; +} + +/* Styles für den RichText-Container */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* Styles für das RichText-Widget */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### Daten laden + +Um Daten in RichText zu laden, geben Sie einfach einen Datensatz an. Erstellen Sie eine **data.ts**-Datei in **src/app/richtext/** und fügen Sie Beispieldaten hinzu: + +~~~jsx {} title="data.ts" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +Öffnen Sie anschließend ***richtext.component.ts***. Importieren Sie die Datei mit den Daten und setzen Sie die Daten-Eigenschaften in der RichText-Konfiguration innerhalb der `ngOnInit()`-Methode wie folgt: + +~~~jsx {} title="richtext.component.ts" +import { Richtext} from '@dhx/trial-richtext'; +import { getData } from "./data"; // Daten importieren +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", + styleUrls: ["./richtext.component.css"], + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: RichText; + + ngOnInit() { + const { value } = getData(); // Daten-Eigenschaft initialisieren + this._editor = new Richtext(this.richtext_container.nativeElement, { + value + // weitere Konfigurationseigenschaften + }); + } + + ngOnDestroy(): void { + this._editor.destructor(); + } +} +~~~ + +Alternativ können Sie die [`setValue()`](api/methods/set-value.md)-Methode in `ngOnInit()` verwenden, um Daten in RichText zu laden. + +~~~jsx {} title="richtext.component.ts" +import { Richtext} from '@dhx/trial-richtext'; +import { getData } from "./data"; // Daten importieren +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", + styleUrls: ["./richtext.component.css"], + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: RichText; + + ngOnInit() { + const { value } = getData(); // Daten-Eigenschaft initialisieren + this._editor = new Richtext(this.richtext_container.nativeElement, { + // weitere Konfigurationseigenschaften + }); + + // Daten über die setValue()-Methode anwenden + this._editor.setValue({ value }); + } + + ngOnDestroy(): void { + this._editor.destructor(); + } +} +~~~ + +Damit ist die RichText-Komponente eingerichtet und einsatzbereit. Sobald sie auf der Seite eingebunden wird, initialisiert sich RichText mit den bereitgestellten Daten. Sie können außerdem beliebige Konfigurationsoptionen hinzufügen. Die vollständige Liste der Eigenschaften finden Sie in der [RichText API-Dokumentation](api/overview/main_overview.md). + +#### Ereignisse behandeln + +Immer wenn in RichText etwas passiert, wird ein Ereignis ausgelöst. Sie können auf diese Ereignisse reagieren, um eigenen Code auszuführen. Die [vollständige Liste der Ereignisse](api/overview/events_overview.md) ist verfügbar. + +Bearbeiten Sie die Datei **richtext.component.ts** und aktualisieren Sie die `ngOnInit()`-Methode wie folgt: + +~~~jsx {} title="richtext.component.ts" +// ... +ngOnInit() { + this._editor = new Richtext(this.richtext_container.nativeElement, {}); + + this._editor.api.on("print", () => { + console.log("Das Dokument wird gedruckt"); + }); +} + +ngOnDestroy(): void { + this._editor.destructor(); +} +~~~ + +### Schritt 3. RichText in die App einbinden + +Um die ***RichTextComponent*** in Ihrer App zu verwenden, öffnen Sie ***src/app/app.component.ts*** und ersetzen Sie den Standardcode durch: + +~~~jsx {} title="app.component.ts" +import { Component } from "@angular/core"; + +@Component({ + selector: "app-root", + template: `` +}) +export class AppComponent { + name = ""; +} +~~~ + +Erstellen Sie nun ***app.module.ts*** in ***src/app/*** und fügen Sie *RichTextComponent* wie unten gezeigt hinzu: + +~~~jsx {} title="app.module.ts" +import { NgModule } from "@angular/core"; +import { BrowserModule } from "@angular/platform-browser"; + +import { AppComponent } from "./app.component"; +import { RichTextComponent } from "./richtext/richtext.component"; + +@NgModule({ + declarations: [AppComponent, RichTextComponent], + imports: [BrowserModule], + bootstrap: [AppComponent] +}) +export class AppModule {} +~~~ + +Als letzten Schritt aktualisieren Sie ***src/main.ts*** mit folgendem Code: + +~~~jsx title="main.ts" +import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; +import { AppModule } from "./app/app.module"; +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); +~~~ + +Jetzt können Sie die App starten und sehen, wie RichText mit Daten auf der Seite geladen wird. + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +Das ist alles, was nötig ist, um DHTMLX RichText mit Angular zu verwenden. Sie können den Code gerne an Ihre eigenen Bedürfnisse anpassen. Ein vollständiges Beispiel finden Sie auf [**GitHub**](https://github.com/DHTMLX/angular-richtext-demo). diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_react.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_react.md new file mode 100644 index 0000000..d18b6d2 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_react.md @@ -0,0 +1,257 @@ +--- +sidebar_label: Integration mit React +title: Integration mit React +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die Integration mit React. Durchstöbern Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# Integration mit React + +:::tip +Es ist hilfreich, bereits etwas Erfahrung mit [**React**](https://react.dev) zu haben, bevor Sie mit dieser Anleitung beginnen. Falls Sie eine kurze Auffrischung benötigen, schauen Sie in die [**React-Dokumentation**](https://react.dev/learn). +::: + +DHTMLX RichText funktioniert problemlos mit **React**. Es gibt Codebeispiele, die zeigen, wie DHTMLX RichText in React-Anwendungen verwendet wird. Im [**Beispiel auf GitHub**](https://github.com/DHTMLX/react-richtext-demo) finden Sie weitere Details. + +## Projekt erstellen + +:::info +Bevor Sie ein neues Projekt starten, stellen Sie sicher, dass [**Vite**](https://vite.dev/) (optional) und [**Node.js**](https://nodejs.org/en/) installiert sind. +::: + +Sie können ein einfaches **React**-Projekt einrichten oder **React mit Vite** nutzen. In diesem Beispiel heißt das Projekt **my-react-richtext-app**: + +~~~json +npx create-react-app my-react-richtext-app +~~~ + +### Installation der Abhängigkeiten + +Wechseln Sie in das neu erstellte App-Verzeichnis: + +~~~json +cd my-react-richtext-app +~~~ + +Installieren Sie anschließend die Abhängigkeiten und starten Sie den Entwicklungsserver mit Ihrem bevorzugten Paketmanager: + +- Für [**yarn**](https://yarnpkg.com/): + +~~~json +yarn +yarn start +~~~ + +- Für [**npm**](https://www.npmjs.com/): + +~~~json +npm install +npm run dev +~~~ + +Die App ist dann lokal erreichbar (z. B. unter `http://localhost:3000`). + +## RichText erstellen + +Nun können Sie den DHTMLX RichText-Code hinzufügen. Stoppen Sie zunächst die App und installieren Sie das RichText-Paket. + +### Schritt 1. Paketinstallation + +Laden Sie das [**Test-RichText-Paket**](how_to_start.md#installation-von-richtext-via-npm-oder-yarn) herunter und folgen Sie den Schritten in der README-Datei. Die Testversion von RichText ist 30 Tage lang verfügbar. + +### Schritt 2. Komponentenerstellung + +Erstellen Sie nun eine React-Komponente, um RichText zu Ihrer App hinzuzufügen. Legen Sie im Verzeichnis ***src/*** eine neue Datei namens ***Richtext.jsx*** an. + +#### Importieren der Quelldateien + +Öffnen Sie ***Richtext.jsx*** und importieren Sie die RichText-Dateien. Beachten Sie dabei: + +- Wenn Sie die PRO-Version besitzen und RichText aus einem lokalen Ordner installieren, sollten Ihre Imports folgendermaßen aussehen: + +~~~jsx title="Richtext.jsx" +import { Richtext} from 'dhx-richtext-package'; +import 'dhx-richtext-package/dist/richtext.css'; +~~~ + +- Für die Testversion verwenden Sie diese Imports: + +~~~jsx title="Richtext.jsx" +import { Richtext} from '@dhx/trial-richtext'; +import "@dhx/trial-richtext/dist/richtext.css"; +~~~ + +In dieser Anleitung wird die **Testversion** verwendet. + +#### Container setzen und Richtext hinzufügen + +Um RichText auf der Seite anzuzeigen, richten Sie einen Container ein und initialisieren Sie die Komponente mit ihrem Konstruktor: + +~~~jsx {} title="Richtext.jsx" +import { useEffect, useRef } from "react"; +import { Richtext} from '@dhx/trial-richtext'; +import '@dhx/trial-richtext/dist/richtext.css'; // RichText-Styles einbinden + +export default function RichTextComponent(props) { + let richtext_container = useRef(); // Container für RichText initialisieren + + useEffect(() => { + // RichText-Komponente initialisieren + const editor = new Richtext(richtext_container.current, {}); + + return () => { + editor.destructor(); // RichText zerstören + }; + }, []); + + return
+
+
+} +~~~ + +#### Styles hinzufügen + +Sie müssen etwas CSS hinzufügen, damit RichText korrekt angezeigt wird. Ergänzen Sie die Haupt-CSS-Datei mit diesen Styles: + +~~~css title="index.css" +/* Styles für die Startseite */ +html, +body, +#root { + height: 100%; + padding: 0; + margin: 0; +} + +/* Styles für RichText-Container */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* Styles für RichText-Widget */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### Daten laden + +Um Daten in RichText zu laden, bereiten Sie einen Datensatz vor. Erstellen Sie eine Datei namens ***data.js*** im ***src/***-Verzeichnis und fügen Sie etwas Inhalt hinzu: + +~~~jsx {} title="data.js" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +Öffnen Sie danach ***App.js*** und importieren Sie die Daten. Übergeben Sie sie als **Prop** an Ihre ``-Komponente: + +~~~jsx {2,5-6} title="App.js" +import RichText from "./Richtext"; +import { getData } from "./data"; + +function App() { + const { value } = getData(); + return ; +} + +export default App; +~~~ + +Nutzen Sie nun in ***Richtext.jsx*** die übergebene **Prop** in der RichText-Konfiguration: + +~~~jsx {} title="Richtext.jsx" +import { useEffect, useRef } from "react"; +import { Richtext} from "@dhx/trial-richtext"; +import "@dhx/trial-richtext/dist/richtext.css"; + +export default function RichTextComponent(props) { + let richtext_container = useRef(); + + useEffect(() => { + const editor = new Richtext(richtext_container.current, { + value: props.value, // Wert anwenden + // weitere Konfigurationseigenschaften + }); + + return () => { + editor.destructor(); + }; + }, []); + + return
+
+
+} +~~~ + +Falls gewünscht, können Sie auch die [`setValue()`](api/methods/set-value.md)-Methode innerhalb von `useEffect()` nutzen, um Daten zu laden: + +~~~jsx {} title="Richtext.jsx" +import { useEffect, useRef } from "react"; +import { Richtext} from "@dhx/trial-richtext"; +import "@dhx/trial-richtext/dist/richtext.css"; + +export default function RichTextComponent(props) { + let richtext_container = useRef(); + + let value = props.value; + + useEffect(() => { + const editor = new Richtext(richtext_container.current, { + // Konfigurationseigenschaften + }); + + editor.setValue(value); + + return () => { + editor.destructor(); + }; + }, []); + + return
+
+
+} +~~~ + +Damit ist die RichText-Komponente eingerichtet. Beim Rendern wird der RichText-Editor mit Ihren Daten angezeigt. Sie können die Konfiguration nach Bedarf anpassen. Die [RichText API-Dokumentation](api/overview/main_overview.md) enthält die vollständige Liste aller Optionen. + +#### Ereignisse behandeln + +RichText löst Ereignisse aus, wenn Benutzer mit dem Editor interagieren. Sie können diese Ereignisse nutzen, um eigenen Code auszuführen. Die [vollständige Liste der Ereignisse](api/overview/events_overview.md) finden Sie in der Dokumentation. + +Um ein Ereignis zu behandeln, passen Sie ***Richtext.jsx*** wie folgt an: + +~~~jsx {} title="Richtext.jsx" +// ... +useEffect(() => { + const editor = new Richtext(richtext_container.current, {}); + + editor.api.on("print", () => { + console.log("The document is printing"); + }); + + return () => { + editor.destructor(); + }; +}, []); +// ... +~~~ + +Jetzt können Sie die App starten, um RichText mit Ihren Daten auf der Seite zu sehen. + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +Das war's zur Integration von DHTMLX RichText mit React. Sie können den Code an Ihre Anforderungen anpassen. Ein fortgeschritteneres Beispiel finden Sie auf [**GitHub**](https://github.com/DHTMLX/react-richtext-demo). diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md new file mode 100644 index 0000000..366fc6c --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md @@ -0,0 +1,267 @@ +--- +sidebar_label: Integration mit Svelte +title: Integration mit Svelte +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die Integration mit Svelte. Durchstöbern Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-tägige Testversion von DHTMLX RichText herunter. +--- + +# Integration mit Svelte + +:::tip +Es ist hilfreich, bereits Grundkenntnisse in **Svelte** zu haben, um diesem Leitfaden zu folgen. Falls Sie eine kurze Auffrischung benötigen, schauen Sie in die [**Svelte-Dokumentation**](https://svelte.dev/). +::: + +DHTMLX RichText funktioniert problemlos mit **Svelte**. Es gibt einige praktische Codebeispiele, die zeigen, wie DHTMLX RichText in Svelte-Anwendungen verwendet werden kann. Weitere Details und Beispiele finden Sie im [**Beispiel auf GitHub**](https://github.com/DHTMLX/svelte-richtext-demo). + +## Ein Projekt erstellen + +:::info +Bevor Sie ein neues Projekt starten, stellen Sie sicher, dass [**Vite**](https://vite.dev/) (optional) und [**Node.js**](https://nodejs.org/en/) installiert sind. +::: + +Es gibt mehrere Möglichkeiten, ein **Svelte**-Projekt einzurichten: + +- Verwenden Sie [**SvelteKit**](https://kit.svelte.dev/) + +oder + +- Nutzen Sie **Svelte und Vite** (ohne SvelteKit): + +~~~json +npm create vite@latest +~~~ + +Weitere Informationen finden Sie in diesem [verwandten Artikel](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit). + +### Installation der Abhängigkeiten + +Nennen wir das Projekt **my-svelte-richtext-app** und wechseln in dessen Verzeichnis: + +~~~json +cd my-svelte-richtext-app +~~~ + +Installieren Sie anschließend die Abhängigkeiten und starten Sie den Entwicklungsserver mit dem Paketmanager Ihrer Wahl: + +- Für [**yarn**](https://yarnpkg.com/): + +~~~json +yarn +yarn start +~~~ + +- Für [**npm**](https://www.npmjs.com/): + +~~~json +npm install +npm run dev +~~~ + +Die App sollte nun lokal laufen (zum Beispiel unter `http://localhost:3000`). + +## RichText erstellen + +Sie benötigen den Quellcode von DHTMLX RichText. Bevor Sie fortfahren, stoppen Sie die App und installieren Sie das RichText-Paket. + +### Schritt 1. Paketinstallation + +Laden Sie das [**Testpaket von RichText**](how_to_start.md#installation-von-richtext-via-npm-oder-yarn) herunter und folgen Sie den Schritten in der README-Datei. Die Testversion ist 30 Tage lang nutzbar. + +### Schritt 2. Komponentenerstellung + +Nun ist es Zeit, eine Svelte-Komponente für RichText zu erstellen. Legen Sie im Verzeichnis ***src/*** eine neue Datei mit dem Namen ***Richtext.svelte*** an. + +#### Quellcode importieren + +Importieren Sie in ***Richtext.svelte*** die RichText-Quellcodedateien. Je nach verwendeter Version sehen die Importe so aus: + +- Für die lokal installierte PRO-Version verwenden Sie diese Pfade: + +~~~html title="Richtext.svelte" + +~~~ + +- Für die Testversion verwenden Sie diese Importe: + +~~~html title="Richtext.svelte" + + +
+
+
+~~~ + +#### Daten laden + +Um Daten in RichText zu laden, benötigen Sie einen Datensatz. Erstellen Sie eine Datei ***data.js*** im Verzeichnis ***src/*** und fügen Sie Beispieldaten hinzu: + +~~~jsx {} title="data.ts" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +Importieren Sie dann in ***App.svelte*** die Daten und übergeben Sie sie als Prop an Ihre ``-Komponente: + +~~~html {} title="App.svelte" + + + +~~~ + +Aktualisieren Sie nun ***Richtext.svelte***, um die übergebenen **props** in der RichText-Konfiguration zu verwenden: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +Alternativ können Sie die Methode [`setValue()`](api/methods/set-value.md) innerhalb von Sveltes `onMount()` verwenden, um die Daten zu laden: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +An diesem Punkt ist die RichText-Komponente eingerichtet und lädt Ihre Daten beim Hinzufügen zur Seite. Sie können die Konfiguration nach Bedarf anpassen. Weitere Optionen finden Sie in der [RichText API-Dokumentation](api/overview/main_overview.md). + +#### Ereignisse verarbeiten + +RichText löst Ereignisse aus, wenn Aktionen stattfinden. Sie können diese abfangen, um eigenen Code auszuführen. Die [vollständige Liste der Ereignisse](api/overview/events_overview.md) steht als Referenz zur Verfügung. + +Um Ereignisse zu verarbeiten, aktualisieren Sie ***Richtext.svelte*** wie folgt in der `onMount()`-Methode: + +~~~html {} title="Richtext.svelte" + + +// ... +~~~ + +### Schritt 3. RichText zur App hinzufügen + +Um die Komponente in Ihrer App zu verwenden, öffnen Sie **App.svelte** und ersetzen Sie den Standardinhalt durch: + +~~~html title="App.svelte" + + + +~~~ + +Starten Sie nun die App, und Sie sehen RichText mit Ihren Daten auf der Seite geladen. + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +Das ist alles, was für die Integration von DHTMLX RichText mit Svelte nötig ist. Sie können den Code gerne an Ihre Anforderungen anpassen. Wenn Sie ein fortgeschritteneres Beispiel sehen möchten, finden Sie dieses auf [**GitHub**](https://github.com/DHTMLX/svelte-richtext-demo). diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md new file mode 100644 index 0000000..d5b336e --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md @@ -0,0 +1,283 @@ +--- +sidebar_label: Integration mit Vue +title: Integration mit Vue +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die Integration mit Vue. Durchstöbern Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# Integration mit Vue + +:::tip +Es ist hilfreich, ein grundlegendes Verständnis von [**Vue**](https://vuejs.org/) zu haben, bevor Sie mit dieser Dokumentation beginnen. Falls Sie eine Auffrischung benötigen, schauen Sie in die [**Vue 3 Dokumentation**](https://vuejs.org/guide/introduction.html#getting-started). +::: + +DHTMLX RichText funktioniert problemlos mit **Vue**. Es stehen Codebeispiele zur Verfügung, die zeigen, wie DHTMLX RichText mit **Vue 3** verwendet wird. Weitere Details finden Sie im [**Beispiel auf GitHub**](https://github.com/DHTMLX/vue-richtext-demo). + +## Erstellen eines Projekts + +:::info +Stellen Sie sicher, dass [**Node.js**](https://nodejs.org/en/) installiert ist, bevor Sie ein neues Projekt starten. +::: + +Um ein **Vue**-Projekt einzurichten, verwenden Sie folgenden Befehl: + +~~~json +npm create vue@latest +~~~ + +Damit wird `create-vue` ausgeführt, das offizielle Tool zum Generieren von **Vue**-Projekten. Weitere Informationen finden Sie im [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application). + +Für diese Anleitung wird das Projekt **my-vue-richtext-app** genannt. + +### Installation der Abhängigkeiten + +Wechseln Sie in das App-Verzeichnis: + +~~~json +cd my-vue-richtext-app +~~~ + +Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver mit Ihrem bevorzugten Paketmanager: + +- Für [**yarn**](https://yarnpkg.com/): + +~~~jsx +yarn +yarn start // oder yarn dev +~~~ + +- Für [**npm**](https://www.npmjs.com/): + +~~~json +npm install +npm run dev +~~~ + +Die App sollte nun auf Ihrem localhost verfügbar sein (zum Beispiel `http://localhost:3000`). + +## RichText erstellen + +Als Nächstes benötigen Sie den DHTMLX RichText-Quellcode. Stoppen Sie die App vorerst und installieren Sie das RichText-Paket. + +### Schritt 1. Paketinstallation + +Laden Sie das [**Testpaket von RichText**](how_to_start.md#installation-von-richtext-via-npm-oder-yarn) herunter und folgen Sie den Anweisungen in der README-Datei. Die Testversion ist für 30 Tage verfügbar. + +### Schritt 2. Komponentenerstellung + +Erstellen Sie eine Vue-Komponente, um RichText zu Ihrer App hinzuzufügen. Legen Sie eine neue Datei im Verzeichnis ***src/components/*** an und nennen Sie sie ***Richtext.vue***. + +#### Quell-Dateien importieren + +Öffnen Sie ***Richtext.vue*** und importieren Sie die RichText-Quelldateien. Beachten Sie dabei: + +- Wenn Sie die PRO-Version verwenden und RichText aus einem lokalen Ordner installiert haben, sollten Ihre Importe wie folgt aussehen: + +~~~html title="Richtext.vue" + +~~~ + +- Für die Testversion lauten die Importe: + +~~~html title="Richtext.vue" + +~~~ + +Dieses Tutorial zeigt, wie Sie die **Testversion** von RichText einrichten. + +#### Container einrichten und Richtext hinzufügen + +Um RichText auf der Seite anzuzeigen, richten Sie einen Container ein und initialisieren Sie die Komponente mit deren Konstruktor: + +~~~html {} title="Richtext.vue" + + + +~~~ + +#### Styles hinzufügen + +Damit RichText korrekt angezeigt wird, fügen Sie einige wichtige Styles für RichText und dessen Container in Ihre Haupt-CSS-Datei ein: + +~~~css title="main.css" +/* Styles für die Startseite */ +html, +body, +#app { /* Stellen Sie sicher, dass Sie den #app Root-Container verwenden */ + height: 100%; + padding: 0; + margin: 0; +} + +/* Styles für den RichText-Container */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* Styles für das RichText-Widget */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### Daten laden + +Um Daten in RichText zu laden, erstellen Sie einen Datensatz. Sie können zum Beispiel eine Datei ***data.js*** im Verzeichnis ***src/*** anlegen mit folgendem Inhalt: + +~~~jsx {} title="data.ts" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +Importieren Sie dann in ***App.vue*** die Daten und initialisieren Sie diese mit der Methode `data()`. Übergeben Sie die Daten als **props** an die ``-Komponente: + +~~~html {} title="App.vue" + + + +~~~ + +Gehen Sie nun zurück zu ***Richtext.vue*** und verwenden Sie die **props** in der RichText-Konfiguration: + +~~~html {} title="Richtext.vue" + + + +~~~ + +Alternativ können Sie die [`setValue()`](api/methods/set-value.md)-Methode im `mounted()`-Hook verwenden, um Daten in RichText zu laden: + +~~~html {} title="Richtext.vue" + + + +~~~ + +An diesem Punkt ist die RichText-Komponente eingerichtet und einsatzbereit. Wenn sie zur Seite hinzugefügt wird, initialisiert sie RichText mit Ihren Daten. Sie können die Konfiguration nach Bedarf anpassen. Die vollständige Liste der verfügbaren Eigenschaften finden Sie in der [RichText API-Dokumentation](api/overview/main_overview.md). + +#### Ereignisse behandeln + +Wenn Aktionen in RichText ausgeführt werden, werden Ereignisse ausgelöst. Diese sind nützlich, um eigenen Code als Reaktion darauf auszuführen. Die [vollständige Liste der Ereignisse](api/overview/events_overview.md) enthält weitere Details. + +In ***Richtext.vue*** können Sie die Methode `mounted()` aktualisieren, um Ereignisse zu behandeln: + +~~~html {} title="Richtext.vue" + + +// ... +~~~ + +Starten Sie nun die App, und Sie sehen RichText mit Ihren Daten auf der Seite. + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +So kann DHTMLX RichText in Vue integriert werden. Passen Sie den Code gerne an Ihre Bedürfnisse an. Für ein fortgeschritteneres Beispiel schauen Sie auf [**GitHub**](https://github.com/DHTMLX/vue-richtext-demo) vorbei. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/localization.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/localization.md new file mode 100644 index 0000000..251f97a --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/localization.md @@ -0,0 +1,474 @@ +--- +sidebar_label: Lokalisierung +title: Lokalisierung +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die Lokalisierung. Durchstöbern Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-tägige Testversion von DHTMLX RichText herunter. +--- + +# Lokalisierung + +Alle Beschriftungen in der JavaScript RichText-Oberfläche können lokalisiert werden. Dazu können Sie entweder eine neue Locale erstellen oder eine bestehende anpassen und diese dann für RichText festlegen. + +## Standard-Locale + +Standardmäßig verwendet die Oberfläche die **Englisch**-Locale: + +~~~jsx +const en = { + richtext: { + // buttons/actions + Undo: "Undo", + Redo: "Redo", + Style: "Style", + "Font family": "Font family", + "Font size": "Font size", + Bold: "Bold", + Italic: "Italic", + Underline: "Underline", + Strikethrough: "Strikethrough", + Subscript: "Subscript", + Superscript: "Superscript", + "Text color": "Text color", + "Background color": "Background color", + "Left align": "Left align", + "Center align": "Center align", + "Right align": "Right align", + Justify: "Justify", + "Line height": "Line height", + Outdent: "Outdent", + Indent: "Indent", + "Insert link": "Insert link", + "Insert image": "Insert image", + "Insert horizontal line": "Insert horizontal line", + "Clear formatting": "Clear formatting", + Print: "Print", + "Fullscreen mode": "Fullscreen mode", + "Layout mode": "Layout mode", + "Classic mode": "Classic mode", + "Document mode": "Document mode", + + // menubar exclusive options + File: "File", + Import: "Import", + Export: "Export", + Edit: "Edit", + Cut: "Cut", + Copy: "Copy", + Paste: "Paste", + View: "View", + Insert: "Insert", + Format: "Format", + Help: "Help", + New: "New", + Link: "Link", + Image: "Image", + "Horizontal line": "Horizontal line", + Text: "Text", + "Heading 1": "Heading 1", + "Heading 2": "Heading 2", + "Heading 3": "Heading 3", + "Heading 4": "Heading 4", + "Heading 5": "Heading 5", + "Heading 6": "Heading 6", + Align: "Align", + Left: "Left", + Center: "Center", + Right: "Right", + Justified: "Justified", + "Keyboard shortcuts": "Keyboard shortcuts", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "Operation failed. Please check your browser's clipboard permissions.", + + // block style dropdown + Heading: "Heading", + Quote: "Quote", + Paragraph: "Paragraph", + "Text style": "Text style", + Lists: "Lists", + + normal: "normal", + default: "default", + + // lists + "Bulleted list": "Bulleted list", + "Numbered list": "Numbered list", + + // links + "Enter text to display": "Enter text to display", + "Paste link": "Paste link", + "Link copied to clipboard": "Link copied to clipboard", + + // shortcut groups + "Text formatting": "Text formatting", + Editing: "Editing", + "Special actions": "Special actions", + + // colors + Black: "Black", + Gray: "Gray", + White: "White", + Red: "Red", + Orange: "Orange", + Yellow: "Yellow", + Lime: "Lime", + Green: "Green", + Teal: "Teal", + Cyan: "Cyan", + Blue: "Blue", + Indigo: "Indigo", + Magenta: "Magenta", + + // shades + "Light gray": "Light gray", + "Medium gray": "Medium gray", + "Dark gray": "Dark gray", + "Light red": "Light red", + "Medium red": "Medium red", + "Dark red": "Dark red", + "Light orange": "Light orange", + "Medium orange": "Medium orange", + "Dark orange": "Dark orange", + "Light yellow": "Light yellow", + "Medium yellow": "Medium yellow", + "Dark yellow": "Dark yellow", + "Light lime": "Light lime", + "Medium lime": "Medium lime", + "Dark lime": "Dark lime", + "Light green": "Light green", + "Medium green": "Medium green", + "Dark green": "Dark green", + "Light teal": "Light teal", + "Medium teal": "Medium teal", + "Dark teal": "Dark teal", + "Light cyan": "Light cyan", + "Medium cyan": "Medium cyan", + "Dark cyan": "Dark cyan", + "Light blue": "Light blue", + "Medium blue": "Medium blue", + "Dark blue": "Dark blue", + "Light indigo": "Light indigo", + "Medium indigo": "Medium indigo", + "Dark indigo": "Dark indigo", + "Light magenta": "Light magenta", + "Medium magenta": "Medium magenta", + "Dark magenta": "Dark magenta" + } +}; +~~~ + +:::info +Zusätzlich zur Standard-***en***-Locale (*Englisch*) enthält RichText auch die integrierten ***de*** (*Deutsch*) und ***cn*** (*Chinesisch*) Locales. +::: + +
+de Locale + +~~~jsx +const de = { + richtext: { + // buttons/actions + Undo: "Rückgängig", + Redo: "Wiederholen", + Style: "Stil", + "Font family": "Schriftart", + "Font size": "Schriftgröße", + Bold: "Fett", + Italic: "Kursiv", + Underline: "Unterstrichen", + Strikethrough: "Durchgestrichen", + Subscript: "Tiefgestellt", + Superscript: "Hochgestellt", + "Text color": "Textfarbe", + "Background color": "Hintergrundfarbe", + "Left align": "Linksbündig", + "Center align": "Zentriert", + "Right align": "Rechtsbündig", + Justify: "Blocksatz", + "Line height": "Zeilenhöhe", + Outdent: "Einzug verringern", + Indent: "Einzug erhöhen", + "Insert link": "Link einfügen", + "Insert image": "Bild einfügen", + "Insert horizontal line": "Horizontale Linie einfügen", + "Clear formatting": "Formatierung löschen", + Print: "Drucken", + "Fullscreen mode": "Vollbildmodus", + "Layout mode": "Layout-Modus", + "Classic mode": "Klassischer Modus", + "Document mode": "Dokumentenmodus", + + // menubar exclusive options + File: "Datei", + Import: "Importieren", + Export: "Exportieren", + Edit: "Bearbeiten", + Cut: "Ausschneiden", + Copy: "Kopieren", + Paste: "Einfügen", + View: "Ansicht", + Insert: "Einfügen", + Format: "Format", + Help: "Hilfe", + New: "Neu", + Link: "Link", + Image: "Bild", + "Horizontal line": "Horizontale Linie", + Text: "Text", + "Heading 1": "Überschrift 1", + "Heading 2": "Überschrift 2", + "Heading 3": "Überschrift 3", + "Heading 4": "Überschrift 4", + "Heading 5": "Überschrift 5", + "Heading 6": "Überschrift 6", + Align: "Ausrichten", + Left: "Links", + Center: "Zentriert", + Right: "Rechts", + Justified: "Blocksatz", + "Keyboard shortcuts": "Tastenkürzel", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "Operation fehlgeschlagen. Bitte überprüfen Sie die Berechtigungen für die Zwischenablage Ihres Browsers.", + + // block style dropdown + Heading: "Überschrift", + Quote: "Zitat", + Paragraph: "Absatz", + "Text style": "Textstil", + Lists: "Listen", + + normal: "normal", + default: "standard", + + // lists + "Bulleted list": "Liste mit Aufzählungszeichen", + "Numbered list": "Nummerierte Liste", + + // links + "Enter text to display": "Text zum Anzeigen eingeben", + "Paste link": "Link einfügen", + "Link copied to clipboard": "Link in die Zwischenablage kopiert", + + // shortcut groups + "Text formatting": "Textformatierung", + Editing: "Bearbeitung", + "Special actions": "Spezielle Aktionen", + + // colors + Black: "Schwarz", + Gray: "Grau", + White: "Weiß", + Red: "Rot", + Orange: "Orange", + Yellow: "Gelb", + Lime: "Limette", + Green: "Grün", + Teal: "Türkis", + Cyan: "Cyan", + Blue: "Blau", + Indigo: "Indigo", + Magenta: "Magenta", + + // shades + "Light gray": "Hellgrau", + "Medium gray": "Mittelgrau", + "Dark gray": "Dunkelgrau", + "Light red": "Hellrot", + "Medium red": "Mittelrot", + "Dark red": "Dunkelrot", + "Light orange": "Hellorange", + "Medium orange": "Mittelorange", + "Dark orange": "Dunkelorange", + "Light yellow": "Hellgelb", + "Medium yellow": "Mittleres Gelb", + "Dark yellow": "Dunkelgelb", + "Light lime": "Hellgrün", + "Medium lime": "Mittleres Grün", + "Dark lime": "Dunkelgrün", + "Light green": "Hellgrün", + "Medium green": "Mittleres Grün", + "Dark green": "Dunkelgrün", + "Light teal": "Hellblau", + "Medium teal": "Mittelblau", + "Dark teal": "Dunkelblau", + "Light cyan": "Hellcyan", + "Medium cyan": "Mittleres Cyan", + "Dark cyan": "Dunkelcyan", + "Light blue": "Hellblau", + "Medium blue": "Mittelblau", + "Dark blue": "Dunkelblau", + "Light indigo": "Hellindigo", + "Medium indigo": "Mittelindigo", + "Dark indigo": "Dunkelindigo", + "Light magenta": "Hellmagenta", + "Medium magenta": "Mittleres Magenta", + "Dark magenta": "Dunkelmagenta" + } +}; +~~~ +
+ +
+cn Locale + +~~~jsx +const cn = { + richtext: { + // buttons/actions, + Undo: "撤销", + Redo: "重做", + Style: "样式", + "Font family": "字体", + "Font size": "字体大小", + Bold: "粗体", + Italic: "斜体", + Underline: "下划线", + Strikethrough: "删除线", + Subscript: "下标", + Superscript: "上标", + "Text color": "文本颜色", + "Background color": "背景颜色", + "Left align": "左对齐", + "Center align": "居中对齐", + "Right align": "右对齐", + Justify: "两端对齐", + "Line height": "行高", + Outdent: "减少缩进", + Indent: "增加缩进", + "Insert link": "插入链接", + "Insert image": "插入图片", + "Insert horizontal line": "插入水平线", + "Clear formatting": "清除格式", + Print: "打印", + "Fullscreen mode": "全屏模式", + "Layout mode": "布局模式", + "Classic mode": "经典模式", + "Document mode": "文档模式", + + // menubar exclusive options + File: "文件", + Import: "导入", + Export: "导出", + Edit: "编辑", + Cut: "剪切", + Copy: "复制", + Paste: "粘贴", + View: "视图", + Insert: "插入", + Format: "格式", + Help: "帮助", + New: "新建", + Link: "链接", + Image: "图片", + "Horizontal line": "水平线", + Text: "文本", + "Heading 1": "标题 1", + "Heading 2": "标题 2", + "Heading 3": "标题 3", + "Heading 4": "标题 4", + "Heading 5": "标题 5", + "Heading 6": "标题 6", + Align: "对齐", + Left: "左", + Center: "居中", + Right: "右", + Justified: "两端对齐", + "Keyboard shortcuts": "键盘快捷键", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "操作失败。请检查浏览器的剪贴板权限。", + + // block style dropdown + Heading: "标题", + Quote: "引用", + Paragraph: "段落", + "Text style": "文本样式", + Lists: "列表", + + normal: "普通的", + default: "默认", + + // lists + "Bulleted list": "项目符号列表", + "Numbered list": "编号列表", + + // links + "Enter text to display": "输入要显示的文本", + "Paste link": "粘贴链接", + "Link copied to clipboard": "链接已复制到剪贴板", + + // shortcut groups + "Text formatting": "文本格式化", + Editing: "编辑", + "Special actions": "特殊操作", + + // colors + Black: "黑色", + Gray: "灰色", + White: "白色", + Red: "红色", + Orange: "橙色", + Yellow: "黄色", + Lime: "酸橙色", + Green: "绿色", + Teal: "水鸭色", + Cyan: "青色", + Blue: "蓝色", + Indigo: "靛蓝色", + Magenta: "洋红色", + + // shades + "Light gray": "浅灰色", + "Medium gray": "中灰色", + "Dark gray": "深灰色", + "Light red": "浅红色", + "Medium red": "中红色", + "Dark red": "深红色", + "Light orange": "浅橙色", + "Medium orange": "中橙色", + "Dark orange": "深橙色", + "Light yellow": "浅黄色", + "Medium yellow": "中黄色", + "Dark yellow": "深黄色", + "Light lime": "浅酸橙色", + "Medium lime": "中酸橙色", + "Dark lime": "深酸橙色", + "Light green": "浅绿色", + "Medium green": "中绿色", + "Dark green": "深绿色", + "Light teal": "浅水鸭色", + "Medium teal": "中水鸭色", + "Dark teal": "深水鸭色", + "Light cyan": "浅青色", + "Medium cyan": "中青色", + "Dark cyan": "深青色", + "Light blue": "浅蓝色", + "Medium blue": "中蓝色", + "Dark blue": "深蓝色", + "Light indigo": "浅靛蓝色", + "Medium indigo": "中靛蓝色", + "Dark indigo": "深靛蓝色", + "Light magenta": "浅洋红色", + "Medium magenta": "中洋红色", + "Dark magenta": "深洋红色" + } +}; +~~~ +
+ +## Benutzerdefinierte Locale + +So verwenden Sie eine benutzerdefinierte Locale: + +- Erstellen Sie eine eigene Locale (oder passen Sie die Standard-Locale an) und fügen Sie Übersetzungen für alle benötigten Beschriftungen hinzu (jede Sprache ist möglich) + +- Legen Sie diese Locale für **RichText** mithilfe der [`locale`](api/config/locale.md)-Eigenschaft oder der [`setLocale()`](api/methods/set-locale.md)-Methode fest + +## Beispiel + +Hier sehen Sie ein Beispiel, wie Sie zwischen verschiedenen Locales wechseln können: + + diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/stylization.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/stylization.md new file mode 100644 index 0000000..1b1634d --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/stylization.md @@ -0,0 +1,89 @@ +--- +title: Styling +sidebar_label: Styling +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das Styling. Durchstöbern Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# Styling + +DHTMLX RichText kann mithilfe von CSS-Variablen oder durch gezieltes Ansprechen bestimmter Widget-Bereiche mit eigenen Styles individuell gestaltet werden. + +Hier finden Sie eine kurze Anleitung, wie Sie ein **Dark Theme** einrichten und Klassennamen nutzen, um verschiedene Bereiche des Editors wie Menüleiste, Toolbar, Popup und Inhaltsbereich zu stylen. + +## Standardstruktur und Klassennamen + +RichText verwendet folgende Hauptklassen für das UI-Layout: + +| Klassenname | Beschreibung | +|--------------------------|------------------------------------------------| +| `.wx-richtext` | Wurzelcontainer des RichText-Widgets | +| `.wx-richtext-menubar` | Container für die Menüleiste | +| `.wx-richtext-menu` | Container für das Dropdown-Menü der Menüleiste | +| `.wx-richtext-toolbar` | Container für die Toolbar | +| `.wx-editor-area` | Container für den Haupt-Inhaltsbereich | + +Diese Klassen können in Ihrem CSS verwendet werden, um das Erscheinungsbild des RichText-Editors anzupassen. + +## Standard-Styles überschreiben + +Um RichText ein individuelles Aussehen zu geben, aktualisieren Sie einfach die CSS-Variablen am `#root`-Container oder an bestimmten Unterelementen: + +```html +
+ + +``` + +:::note +Diese Konfiguration sorgt für einen dunklen Hintergrund, aktualisiert Button- und Icon-Farben und verbessert die Lesbarkeit im Dark-UI. +::: + +## Liste der unterstützten CSS-Variablen + +| Variablenname | Beschreibung | +|----------------------------- |----------------------------------------------| +| `--wx-background` | Hintergrundfarbe des Editors und Popups | +| `--wx-background-alt` | Alternative Hintergrundfarbe für die Menüleiste| +| `--wx-color-primary` | Akzentfarbe für Links, Blockzitate und Rahmen von skalierbaren Bildern | +| `--wx-color-font` | Hauptschriftfarbe (für Editor, Menüleiste und Toolbar)| +| `--wx-color-font-alt` | Alternative Schriftfarbe | +| `--wx-color-font-disabled` | Deaktivierte Schriftfarbe (für Menüleisten- und Toolbarelemente)| +| `--wx-border` | Rahmenstil im gesamten Editor | +| `--wx-color-secondary-hover` | Hintergrundfarbe im Hover-Zustand für Buttons in Menüleiste und Toolbar| +| `--wx-button-active` | Hintergrundfarbe im aktiven Zustand für Buttons in Menüleiste und Toolbar| +| `--wx-icon-color` | Farbe für Toolbar-Pfeilicons in Dropdowns | +| `--wx-popup-border` | Rahmen für Popup-Elemente | + +## Best Practices + +* Die Eigenschaft `color-scheme: dark` sorgt dafür, dass native Eingabefelder im Dark Mode korrekt dargestellt werden +* Sie sollten layoutbezogene CSS-Eigenschaften (wie `display` oder `position`) nur ändern, wenn es wirklich notwendig ist + +## Live-Demo + +Hier ein kurzes Beispiel, wie eigene Styles für RichText hinzugefügt werden können: + + + +**Verwandte Artikel:** [Customization](guides/configuration.md) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/typescript_support.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/typescript_support.md new file mode 100644 index 0000000..19497c2 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/typescript_support.md @@ -0,0 +1,19 @@ +--- +sidebar_label: TypeScript-Unterstützung +title: TypeScript-Unterstützung +description: In der Dokumentation erfahren Sie, wie Sie TypeScript mit der DHTMLX JavaScript RichText-Bibliothek verwenden. Stöbern Sie in Entwicklerhandbüchern und der API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# TypeScript-Unterstützung + +Seit Version 2.0 verfügt DHTMLX RichText über integrierte TypeScript-Definitionen, sodass TypeScript direkt ohne zusätzliche Einrichtung funktioniert. + +:::note +Das Snippet Tool steht zum Ausprobieren zur Verfügung. +::: + +## Vorteile der Verwendung von TypeScript + +Die Nutzung von DHTMLX RichText mit TypeScript bietet einige praktische Vorteile. + +TypeScript erleichtert den Entwicklungsprozess und macht ihn zuverlässiger. Typüberprüfung und Autovervollständigung helfen, Fehler frühzeitig zu erkennen und die Entwicklung zu beschleunigen. Außerdem liefert TypeScript klare Informationen darüber, welche Datentypen bei der Arbeit mit der DHTMLX RichText API verwendet werden sollten. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/de/docusaurus-plugin-content-docs/current/how_to_start.md new file mode 100644 index 0000000..3e16276 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/how_to_start.md @@ -0,0 +1,113 @@ +--- +sidebar_label: Erste Schritte +title: Erste Schritte +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie, wie Sie mit DHTMLX RichText arbeiten. Durchstöbern Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-tägige Testversion von DHTMLX RichText herunter. +--- + +# Erste Schritte + +Hier finden Sie eine einfache Anleitung, wie Sie RichText auf einer Seite einbinden und nutzen können. + +import classic_mode from '@site/static/img/richtext/classic_mode.png'; + +Klassischer Modus + +## Schritt 1. Einbinden der Quelldateien + +Erstellen Sie zunächst eine HTML-Datei mit dem Namen *index.html*. Fügen Sie die RichText-Quelldateien in diese Datei ein. + +Sie benötigen zwei Dateien: + +- die JS-Datei für RichText +- die CSS-Datei für RichText + +~~~html {5-6} title="index.html" + + + + How to Start with RichText + + + + + + + +~~~ + +### Installation von RichText via npm oder yarn + +RichText kann Ihrem Projekt mit **yarn** oder **npm** hinzugefügt werden. + +#### Installation der Testversion von RichText via npm oder yarn + +:::info +Um die Testversion von RichText zu nutzen, laden Sie das [**trial RichText package**](https://dhtmlx.com/docs/products/dhtmlxRichtext/download.shtml) herunter und folgen Sie den Schritten in der *README*-Datei. Hinweis: Die Testversion ist 30 Tage lang gültig. +::: + +#### Installation der PRO-Version von RichText via npm oder yarn + +:::info +Für die PRO-Version besuchen Sie den [Client's Area](https://dhtmlx.com/clients/) und generieren Sie Ihr Login sowie Passwort für das private DHTMLX-**npm**. Dort finden Sie auch eine ausführliche Installationsanleitung. Der Zugriff auf das private **npm** ist solange möglich, wie Ihre proprietäre RichText-Lizenz aktiv ist. +::: + +## Schritt 2. RichText erstellen + +Jetzt können Sie RichText auf der Seite hinzufügen. Beginnen Sie damit, einen `
`-Container für RichText zu erstellen. Gehen Sie wie folgt vor: + +- Fügen Sie einen DIV-Container in die *index.html*-Datei ein +- Initialisieren Sie RichText mit dem `richtext.Richtext`-Konstruktor + +Der Konstruktor akzeptiert jeden gültigen CSS-Selektor für den HTML-Container, in dem RichText angezeigt werden soll, sowie beliebige Konfigurationsobjekte. + +~~~html {9,12-14} title="index.html" + + + + How to Start with RichText + + + + +
+ + + + +~~~ + +## Schritt 3. RichText konfigurieren + +Jetzt können Sie die gewünschten Konfigurationsoptionen einstellen, die RichText beim Start verwenden soll. + +Um zu beginnen, setzen Sie die Anfangsdaten für den Editor mit der [`value`](api/config/value.md)-Eigenschaft. Sie können außerdem die [**menubar**](api/config/menubar.md) aktivieren, die [**toolbar**](api/config/toolbar.md) anpassen, [**fullscreen**](api/config/fullscreen-mode.md)- und [**layout**](api/config/layout-mode.md)-Modi einstellen, eine andere [**locale**](api/config/locale.md) wählen und [**default styles**](api/config/default-styles.md) anwenden. + +~~~jsx {2-12} +const editor = new richtext.Richtext("#root", { + menubar: true, + toolbar: false, + fullscreenMode: true, + layoutMode: "document", + locale: richtext.locales.cn + defaultStyles: { + h4: { + "font-family": "Roboto" + }, + // other settings + } +}); +~~~ + +## Was kommt als Nächstes? + +Das war's! Mit diesen drei Schritten ist RichText bereit, Inhalte zu bearbeiten. Sie können direkt loslegen oder sich weiter umsehen, um zu entdecken, was JavaScript RichText noch alles kann. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/index.md b/i18n/de/docusaurus-plugin-content-docs/current/index.md new file mode 100644 index 0000000..6d94c56 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/index.md @@ -0,0 +1,154 @@ +--- +sidebar_label: RichText Übersicht +title: RichText Übersicht +slug: / +description: In der Dokumentation erhalten Sie einen Überblick über die DHTMLX JavaScript RichText-Bibliothek. Durchstöbern Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# RichText Übersicht + +**DHTMLX RichText** ist ein leichtgewichtiger und flexibler WYSIWYG-Editor auf JavaScript-Basis. Er wurde entwickelt, um das Bearbeiten in modernen Webanwendungen einfach zu machen - mit einer übersichtlichen Oberfläche, zahlreichen Formatierungswerkzeugen und vollständiger Kontrolle über die Anzeige der Inhalte. Ob für ein CMS, ein Admin-Dashboard oder einen eingebetteten Dokumenteneditor: RichText lässt sich in verschiedenste Projekte integrieren und anpassen. + +**DHTMLX RichText** bietet folgende Funktionen: + +- Zwei [**Layout-Modi**](api/config/layout-mode.md) + +- Inhalte können als Klartext oder HTML gespeichert werden + +- Eine [**Toolbar**](api/config/toolbar.md), die sich mit integrierten und eigenen Buttons konfigurieren lässt + +- Eine [**Menüleiste**](api/config/menubar.md), die statisch ist und ein- oder ausgeblendet werden kann + +- Unterstützung für das Hochladen von Bildern, umfangreiche Formatierungen, eigene Styles und Bearbeitung im Vollbildmodus + +- [Voller API-Zugriff](api/overview/main_overview.md) für [Event-Handling](api/overview/event_bus_methods_overview.md), [Inhaltsänderungen](api/overview/methods_overview.md) und [reaktives State-Management](api/overview/state_methods_overview.md) + +RichText funktioniert mit jedem Framework und kann mit [React](guides/integration_with_react.md), [Angular](guides/integration_with_angular.md), [Vue](guides/integration_with_vue.md) oder [Svelte](guides/integration_with_svelte.md) verwendet werden. Damit passt es in alle gängigen Frontend-Setups. + +Diese Dokumentation behandelt Installation, Einrichtung, Verwendung und Anpassungsmöglichkeiten. Es gibt Beispiele für typische Aufgaben, [vollständige API-Dokumentation](api/overview/main_overview.md) und Tipps zur Integration von RichText in verschiedene Anwendungen. + +## RichText Aufbau + +### Menüleiste + +Die RichText-Menüleiste bietet schnellen Zugriff auf Bearbeitungsaktionen wie das Erstellen eines neuen Dokuments, Drucken, Importieren oder Exportieren und mehr. Standardmäßig ist sie ausgeblendet. + +Mit der Eigenschaft [`menubar`](api/config/menubar.md) wird gesteuert, ob die Menüleiste sichtbar ist oder nicht. Sie können die Menüleiste ein- oder ausschalten; die einzelnen Elemente können derzeit jedoch nicht geändert werden. + +import menubar from '@site/static/img/richtext/menubar.png'; + +Menüleiste + +### Toolbar + +Mit der RichText-Toolbar können Nutzer Text schnell formatieren und die Struktur bearbeiten. Standardmäßig ist die [Toolbar](api/config/toolbar.md#standardkonfiguration) aktiviert und zeigt eine Auswahl gängiger Steuerelemente wie Fett, Kursiv, Schriftarteinstellungen, Listen und mehr. + +Über die Eigenschaft [`toolbar`](api/config/toolbar.md) können Sie festlegen, welche Steuerelemente angezeigt werden und wie sie angeordnet sind. Sie können die Toolbar ein- oder ausschalten, die Standardbuttons umsortieren oder ein eigenes Set aus integrierten und benutzerdefinierten Buttons zusammenstellen. + +import toolbar from '@site/static/img/richtext/toolbar.png'; + +Toolbar + +### Editor + +Das Herzstück von RichText ist der Editor, in dem alle Inhalte erstellt und formatiert werden. Aussehen und Verhalten des Editors können Sie mit Optionen wie [`value`](api/config/value.md), [`layoutMode`](api/config/layout-mode.md) und [`defaultStyles`](api/config/default-styles.md) anpassen. RichText ermöglicht eigene Styles, das Einfügen von Bildern und eine flexible Anpassung des Layouts an verschiedene Bildschirme und Anforderungen. + +#### Zwei Arbeitsmodi + +DHTMLX RichText bietet zwei Darstellungsarten für Inhalte: "Klassisch" und "Dokument"-Modus. Wählen Sie die Variante, die am besten zu Ihrem Bearbeitungsstil passt. Umgeschaltet wird über die Eigenschaft [`layoutMode`](api/config/layout-mode.md). + +- **"klassisch"** + +import classic_mode from '@site/static/img/richtext/classic_mode.png'; + +Klassischer Modus + +- **"dokument"** + +import document_mode from '@site/static/img/richtext/document_mode.png'; + +Dokumentenmodus + +## Unterstützte Formate + +RichText kann Inhalte sowohl als **HTML** als auch als Klartext [einlesen](api/methods/set-value.md) und [speichern](api/methods/get-value.md). + +#### HTML-Format + +import html_format from '@site/static/img/richtext/html_format.png'; + +HTML-Format + +#### Textformat + +import text_format from '@site/static/img/richtext/text_format.png'; + +Textformat + +## Tastenkombinationen + +RichText unterstützt zahlreiche Standard-Tastenkombinationen für schnelleres Bearbeiten und Formatieren. Die Shortcuts entsprechen den gängigen Konventionen der jeweiligen Plattform und funktionieren sowohl unter **Windows/Linux** (`Ctrl`) als auch unter **macOS** (`⌘`). + +### Textformatierung + +| Aktion | Windows/Linux | macOS | +|----------------|----------------|---------------| +| Fett* | `Ctrl+B` | `⌘B` | +| Kursiv | `Ctrl+I` | `⌘I` | +| Unterstrichen | `Ctrl+U` | `⌘U` | +| Durchgestrichen| `Ctrl+Shift+X` | `⌘⇧X` | + +### Bearbeitung + +| Aktion | Windows/Linux | macOS | +|----------|--------------------------|---------------| +| Rückgängig| `Ctrl+Z` | `⌘Z` | +| Wiederholen| `Ctrl+Y` / `Ctrl+Shift+Z`| `⌘Y` / `⌘⇧Z` | +| Ausschneiden| `Ctrl+X` | `⌘X` | +| Kopieren | `Ctrl+C` | `⌘C` | +| Einfügen | `Ctrl+V` | `⌘V` | + +### Spezielle Aktionen + +| Aktion | Windows/Linux | macOS | +|---------------|---------------|-------| +| Link einfügen | `Ctrl+K` | `⌘K` | +| Drucken | `Ctrl+P` | `⌘P` | + +:::info +Weitere Tastenkombinationen könnten in zukünftigen Updates hinzukommen. +::: + +Für eine vollständige Liste der RichText-Tastenkombinationen klicken Sie einfach auf **Hilfe** und wählen **Tastenkombinationen**: + +import shortcut_reference from '@site/static/img/richtext/shortcut_reference.png'; + +Shortcut-Referenz diff --git a/i18n/de/docusaurus-plugin-content-docs/current/news/migration.md b/i18n/de/docusaurus-plugin-content-docs/current/news/migration.md new file mode 100644 index 0000000..d8afdd9 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/news/migration.md @@ -0,0 +1,167 @@ +--- +sidebar_label: Migration zu neueren Versionen +title: Migration zu neueren Versionen +description: Informationen zur Migration zu neueren Versionen finden Sie in der Dokumentation der DHTMLX JavaScript RichTExt Bibliothek. Durchstöbern Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-tägige Testversion von DHTMLX RichTExt herunter. +--- + +# Migration zu neueren Versionen + +## 1.2 -> 2.0 + +### Migration der Eigenschaften + +| Veraltete Eigenschaft | Ersetzt durch | Hinweise | +| --------------------- | ---------------------------- | --------------------------------------------- | +| `customStats` | *(Entfernt)* | In Version 2.0 nicht mehr verfügbar | +| `toolbarBlocks` | `toolbar` | Unterstützt jetzt detaillierte Toolbar-Struktur | +| `defaultStyles` | `defaultStyles` (aktualisiert) | Struktur jetzt blockbasiert und CSS-basiert | +| `mode` | `layoutMode` | Ersetzt durch strengere Enum-basierte Einstellung | + +### - `customStats` + +Die Eigenschaft `customStats` ist in der neuesten RichText-Version nicht mehr enthalten. Das bedeutet, dass die integrierte Unterstützung für benutzerdefinierte Statistiken wie Zeichen-, Wort- oder Satzanzahl nicht mehr verfügbar ist. + +Um Textmetriken zu verarbeiten, holen Sie sich einfach den Editor-Inhalt und verarbeiten ihn nach Bedarf: + +```jsx +const content = editor.getValue(); +const wordCount = content.split(/\s+/).length; +``` + +### - `toolbarBlocks` → [`toolbar`](api/config/toolbar.md) + +Vor **2.0** konnten nur Blöcke von Steuerelementen festgelegt werden: +```jsx{2} title="Vor 2.0" +new dhx.RichText("#root", { + toolbarBlocks: ["undo", "style", "decoration", "colors", "align", "link"] +}); +``` + +Ab **2.0** und höher können einzelne Steuerelemente nach Bedarf aufgelistet werden: +```jsx{2-4} title="Ab 2.0" +new richtext.Richtext("#root", { + toolbar: [ + "undo", "style", "bold", "italic", "underline", "text-color", + "align", "link" + ] +}); +``` + +### - [`defaultStyles`](api/config/default-styles.md) + +Vor **2.0** sahen die Standardwerte für die Auswahlsteuerelemente der Toolbar so aus: +```jsx title="Vor 2.0" +defaultStyles: { + "font-family": "Tahoma", + "font-size": "14px" +} +``` + +Ab **2.0** können Standardstilwerte für bestimmte Blocktypen festgelegt werden: +```jsx title="Ab 2.0" +defaultStyles: { + "*": { + "font-family": "Tahoma", + "font-size": "14px" + }, + h1: { + "font-size": "32px", + "color": "#333" + } +} +``` + +:::note +Der Schlüssel `*` legt die Basis-Standards für alles fest, und jedes spezifische Element (wie p, h1 oder blockquote) kann zusätzlich angepasst werden. +::: + +### - `mode` → [`layoutMode`](api/config/layout-mode.md) + +```jsx{2} title="Vor 2.0" +new dhx.RichText("#root", { + mode: "document" +}); +``` + +```jsx{2} title="Ab 2.0" +new Richtext("#root", { + layoutMode: "document" // oder "classic" +}); +``` + +Jetzt akzeptiert [`layoutMode`](api/config/layout-mode.md) nur noch `"classic"` oder `"document"`. + +### Migration der Methoden + +| Veraltete Methode | Neues Äquivalent | Hinweise | +| ------------------------- | --------------------------------------- | ------------------------------------------------------------- | +| `getValue(mode)` | `getValue(encoder)` | Encoder ersetzen String-Modi; separater Import für Encoder nötig | +| `setValue(value, mode)` | `setValue(value, encoder)` | Encoder ersetzen String-Modi; separater Import für Encoder nötig | +| `getStats()` | *Entfernt* | Kein Ersatz; manuelle Logik erforderlich | +| `getEditorAPI()` | *Entfernt* | Intern; stattdessen öffentliche API verwenden | +| `fire()` | *Entfernt* | Ersetzt durch `exec()` und `intercept()` | +| `on()`, `detach()` | ✅ Erhalten (`api.on`, `api.detach`) | Jetzt über `richtext.api` zugänglich | +| `fullScreen()` | *Entfernt* | Verwenden Sie die Eigenschaft `fullscreenMode` | +| `exitFullScreen()` | *Entfernt* | Verwenden Sie die Eigenschaft `fullscreenMode` | +| `paint()` | *Entfernt* | Nicht mehr benötigt | +| `destructor()` | ✅ Weiterhin verfügbar | Unverändert | +| `setConfig()` | ✅ Neu | Ermöglicht Live-Konfigurationsaktualisierungen | +| `setLocale()` | ✅ Neu | Erlaubt dynamisches Umschalten der Sprache | +| `getReactiveState()` | ✅ Neu | Ermöglicht reaktives Status-Tracking | +| `getState()` | ✅ Neu | Gibt aktuellen statischen Konfigurationsstatus zurück | +| `intercept()` | ✅ Neu | Interne Aktionen abfangen | +| `exec()` | ✅ Neu | Interne Aktionen ausführen | + +### - [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md) + +```jsx title="Vor 2.0" +... +editor.setValue("

Hello

", "html"); +editor.getValue("text"); +``` + +```jsx title="Ab 2.0" +const fromTextEncoder = richtext.text.fromText; +const fromHTMLEncoder = richtext.html.fromHTML; + +const toTextEncoder = richtext.text.toText; +const toHTMLEncoder = richtext.html.toHTML; +... +editor.setValue("

Hello

", fromHTMLEncoder); +editor.getValue(toTextEncoder); +``` + +:::note +Es ist auch möglich, `getValue()` und `setValue()` ohne Encoder aufzurufen; standardmäßig wird dann HTML verwendet. +::: + +### - [`on`](api/internal/on.md) / [`detach`](api/internal/detach.md) + +```jsx title="Vor 2.0" +editor.events.on("Change", function(action, canUndo, canRedo){ + // Ihr Code hier +}); + +editor.events.detach("Change"); +``` + +```jsx title="Ab 2.0" +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}, { tag: "track" }); + +editor.api.detach("track"); +``` + +### - `fire()` → Nutzung von [`exec()`](api/internal/exec.md) und [`intercept()`](api/internal/intercept.md) + +```jsx title="Vor 2.0" +editor.events.fire("some-event", [data]); +``` + +```jsx title="Ab 2.0" +editor.api.exec("some-event", obj); + +// Ausführung verhindern +editor.api.intercept("some-event", (obj) => false); +``` diff --git a/i18n/de/docusaurus-plugin-content-docs/current/news/whats_new.md b/i18n/de/docusaurus-plugin-content-docs/current/news/whats_new.md new file mode 100644 index 0000000..301a755 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/news/whats_new.md @@ -0,0 +1,168 @@ +--- +sidebar_label: Was ist neu +title: Was ist neu +description: Entdecken Sie die neuesten Updates in DHTMLX RichText und sehen Sie sich den Release-Verlauf direkt hier in der Dokumentation zur DHTMLX JavaScript UI-Bibliothek an. Sie finden hier Leitfäden, API-Referenzen, Codebeispiele, Live-Demos und einen kostenlosen 30-Tage-Testdownload für DHTMLX RichText. +--- + +## Version 2.0.4 + +Veröffentlicht am 15. Oktober 2025 + +### Fehlerbehebungen + +- Die Auswahl von Absatzbereichen funktionierte nicht immer richtig +- Link-Popups wurden nicht angezeigt, wenn sie sich neben verlinkten Bildern befanden +- Die Toolbar-Werte beim Start entsprachen nicht immer dem tatsächlichen Inhalt + +## Version 2.0.3 + +Veröffentlicht am 27. August 2025 + +### Fehlerbehebungen + +- Das Klicken auf eine horizontale Linie konnte einen Skriptfehler auslösen +- Die Standard-Zeilenhöhe wurde nicht korrekt gesetzt +- Einige Inhaltsstile hatten doppelte Selektoren +- Plain-Text-Blöcke übernahmen beim Parsen von HTML keine Stiländerungen +- Der Parser übersprang in HTML maskierte Schriftartnamen +- Der Parser ignorierte `margin-left` und `line-height` in HTML + +## Version 2.0.2 + +Veröffentlicht am 4. August 2025 + +### Fehlerbehebungen + +- Der Paketinhalt wurde aktualisiert + +## Version 2.0.1 + +Veröffentlicht am 30. Juli 2025 + +### Fehlerbehebungen + +- Typdefinitionen für die Eigenschaft `defaultStyles` wurden aktualisiert + +## Version 2.0 + +Veröffentlicht am 30. Juli 2025 + +:::note +Die v1.2 API ist nicht mit v2.0 kompatibel. Weitere Details finden Sie im [**Migrationsleitfaden**](news/migration.md). +::: + +### Neue Funktionen + +- **Next-Gen-Text-Rendering** + Die neue Engine sorgt für ein flüssigeres, schnelleres und präziseres Text-Rendering + +- **Granulare Toolbar-Konfiguration** + Die Toolbar ist jetzt vollständig anpassbar: + - Wählen Sie [einzelne Toolbar-Elemente](guides/configuration.md#default-toolbar-controls) aus und legen Sie deren Reihenfolge fest + - Fügen Sie eigene [benutzerdefinierte Elemente](guides/configuration.md#custom-toolbar-controls) hinzu + +- **Optionale [Menüleiste](api/config/menubar.md)** + Sie können eine klassische Menü-Oberfläche am oberen Rand des Editors hinzufügen + +- **Verbesserter [Dokumentenmodus](guides/configuration.md#layout-modes)** + Unterstützt jetzt verschiedene Dokumentgrößen + +- **Bildunterstützung** + - Bilder mit [Upload-Funktionen](api/config/image-upload-url.md) einfügen + - [Bilder direkt im Editor](api/events/resize-image.md) skalieren + +- **Verbesserte Link-Erfahrung** + Link-[Popup-Interaktionen](api/events/show-popup.md) wurden für eine einfachere Nutzung neu gestaltet + +- **Neue Formatierungswerkzeuge** + - Textausrichtung: **Blocksatz** + - [Horizontale Linien](api/events/insert-line.md) einfügen + - [Einrücken](api/events/indent.md) / [Ausrücken](api/events/outdent.md) + - [Zeilenhöhe](api/events/set-line-height.md) festlegen + - [Tiefgestellt](api/events/subscript.md) / [Hochgestellt](api/events/superscript.md) verwenden + +- **Listenverwaltung** + Es ist jetzt einfach, [Listen einzufügen und zu verwalten](api/events/insert-list.md) + +- **Import/Export & Drucken** + - [DOCX importieren](api/events/import.md) + - [Exportieren](api/events/export.md) nach DOCX oder PDF + - [Drucken](api/events/print.md) direkt aus dem Editor heraus + +- **Tastenkombinationen** + Mehr gängige Formatierungs- und Bearbeitungskürzel werden unterstützt + +### Neue API + +#### Neue Eigenschaften + +- [`fullscreenMode`](api/config/fullscreen-mode.md) +- [`imageUploadUrl`](api/config/image-upload-url.md) +- [`layoutMode`](api/config/layout-mode.md) +- [`locale`](api/config/locale.md) +- [`menubar`](api/config/menubar.md) +- [`toolbar`](api/config/toolbar.md) +- [`value`](api/config/value.md) + +#### Neue Methoden + +- [`setConfig()`](api/methods/set-config.md) - Konfiguration zur Laufzeit aktualisieren +- [`setLocale()`](api/methods/set-locale.md) - Spracheinstellung sofort ändern + +#### Neue interne Methoden + +- [`api.exec()`](api/internal/exec.md) +- [`api.intercept()`](api/internal/intercept.md) +- [`api.getReactiveState()`](api/internal/get-reactive-state.md) +- [`api.getState()`](api/internal/get-state.md) + +#### Neue Events + +Eine vollständige Liste der neuen Events finden Sie [hier](api/overview/events_overview.md) + +### Aktualisierte API + +#### Aktualisierte Eigenschaften + +- [`defaultStyles`](api/config/default-styles.md) + +#### Aktualisierte Methoden + +- [`setValue()`](api/methods/set-value.md) +- [`getValue()`](api/methods/get-value.md) + +#### Aktualisierte interne Methoden + +- [`api.detach()`](api/internal/detach.md) +- [`api.on()`](api/internal/on.md) + +## Entfernte API + +:::warning +Verwenden Sie die entfernte API nicht in Ihren Projekten!
Weitere Details finden Sie unter [Migration](news/migration.md). +::: + +### [Entfernte Eigenschaften](news/migration.md#properties-migration) + +- [`customStats`](news/migration.md#--customstats) +- [`mode`](news/migration.md#--mode--layoutmode) +- [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar) + +### [Entfernte Methoden](news/migration.md#methods-migration) + +- `exitFullScreen()` +- `fullScreen()` +- `getEditorAPI()` +- `getStats()` +- `paint()` + +### Entfernte interne Methoden + +- [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept) + +### Entfernte Events + +- `Action` +- `Change` +- `selectionChange` +- `selectionRefresh` diff --git a/i18n/de/docusaurus-theme-classic/footer.json b/i18n/de/docusaurus-theme-classic/footer.json new file mode 100644 index 0000000..0a1c632 --- /dev/null +++ b/i18n/de/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "Entwicklungszentrum", + "description": "Der Titel der Fußzeilen-Linkspalte mit dem Titel=Entwicklungszentrum in der Fußzeile" + }, + "link.title.Community": { + "message": "Community", + "description": "Der Titel der Fußzeilen-Linkspalte mit dem Titel=Community in der Fußzeile" + }, + "link.title.Company": { + "message": "Unternehmen", + "description": "Der Titel der Fußzeilen-Linkspalte mit dem Titel=Unternehmen in der Fußzeile" + }, + "link.item.label.Download RichText": { + "message": "RichText herunterladen", + "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=Download RichText, der auf https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml verweist" + }, + "link.item.label.Examples": { + "message": "Beispiele", + "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=Beispiele, der auf https://snippet.dhtmlx.com/t55alxiy?tag=richtext verweist" + }, + "link.item.label.Blog": { + "message": "Blog", + "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=Blog, der auf https://dhtmlx.com/blog/tag/richtext/ verweist" + }, + "link.item.label.Forum": { + "message": "Forum", + "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=Forum, der auf https://forum.dhtmlx.com/c/richtext/ verweist" + }, + "link.item.label.GitHub": { + "message": "GitHub", + "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=GitHub, der auf https://github.com/DHTMLX verweist" + }, + "link.item.label.Youtube": { + "message": "Youtube", + "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=Youtube, der auf https://www.youtube.com/user/dhtmlx verweist" + }, + "link.item.label.Facebook": { + "message": "Facebook", + "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=Facebook, der auf https://www.facebook.com/dhtmlx verweist" + }, + "link.item.label.Twitter": { + "message": "Twitter", + "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=Twitter, der auf https://twitter.com/dhtmlx verweist" + }, + "link.item.label.Linkedin": { + "message": "Linkedin", + "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=Linkedin, der auf https://www.linkedin.com/groups/3345009/ verweist" + }, + "link.item.label.About us": { + "message": "Über uns", + "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=Über uns, der auf https://dhtmlx.com/docs/company.shtml verweist" + }, + "link.item.label.Contact us": { + "message": "Kontaktieren Sie uns", + "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=Kontaktieren Sie uns, der auf https://dhtmlx.com/docs/contact.shtml verweist" + }, + "link.item.label.Licensing": { + "message": "Lizenzierung", + "description": "Die Bezeichnung des Fußzeilen-Links mit der Bezeichnung=Lizenzierung, der auf https://dhtmlx.com/docs/products/dhtmlxRichText/#editions-licenses verweist" + } +} \ No newline at end of file diff --git a/i18n/de/docusaurus-theme-classic/navbar.json b/i18n/de/docusaurus-theme-classic/navbar.json new file mode 100644 index 0000000..2a21319 --- /dev/null +++ b/i18n/de/docusaurus-theme-classic/navbar.json @@ -0,0 +1,26 @@ +{ + "title": { + "message": "JavaScript RichText Dokumentation", + "description": "Der Titel in der Navigationsleiste" + }, + "logo.alt": { + "message": "DHTMLX RichText Dokumentation", + "description": "Der Alt-Text des Logos in der Navigationsleiste" + }, + "item.label.Examples": { + "message": "Beispiele", + "description": "Navigationsleisten-Element mit der Bezeichnung Beispiele" + }, + "item.label.Forum": { + "message": "Forum", + "description": "Navigationsleisten-Element mit der Bezeichnung Forum" + }, + "item.label.Support": { + "message": "Support", + "description": "Navigationsleisten-Element mit der Bezeichnung Support" + }, + "item.label.Download": { + "message": "Herunterladen", + "description": "Navigationsleisten-Element mit der Bezeichnung Herunterladen" + } +} \ No newline at end of file diff --git a/i18n/en/code.json b/i18n/en/code.json new file mode 100644 index 0000000..fe21325 --- /dev/null +++ b/i18n/en/code.json @@ -0,0 +1,560 @@ +{ + "theme.ErrorPageContent.title": { + "message": "This page crashed.", + "description": "The title of the fallback page when the page crashed" + }, + "theme.BackToTopButton.buttonAriaLabel": { + "message": "Scroll back to top", + "description": "The ARIA label for the back to top button" + }, + "theme.blog.archive.title": { + "message": "Archive", + "description": "The page & hero title of the blog archive page" + }, + "theme.blog.archive.description": { + "message": "Archive", + "description": "The page & hero description of the blog archive page" + }, + "theme.blog.paginator.navAriaLabel": { + "message": "Blog list page navigation", + "description": "The ARIA label for the blog pagination" + }, + "theme.blog.paginator.newerEntries": { + "message": "Newer entries", + "description": "The label used to navigate to the newer blog posts page (previous page)" + }, + "theme.blog.paginator.olderEntries": { + "message": "Older entries", + "description": "The label used to navigate to the older blog posts page (next page)" + }, + "theme.blog.post.paginator.navAriaLabel": { + "message": "Blog post page navigation", + "description": "The ARIA label for the blog posts pagination" + }, + "theme.blog.post.paginator.newerPost": { + "message": "Newer post", + "description": "The blog post button label to navigate to the newer/previous post" + }, + "theme.blog.post.paginator.olderPost": { + "message": "Older post", + "description": "The blog post button label to navigate to the older/next post" + }, + "theme.tags.tagsPageLink": { + "message": "View all tags", + "description": "The label of the link targeting the tag list page" + }, + "theme.colorToggle.ariaLabel.mode.system": { + "message": "system mode", + "description": "The name for the system color mode" + }, + "theme.colorToggle.ariaLabel.mode.light": { + "message": "light mode", + "description": "The name for the light color mode" + }, + "theme.colorToggle.ariaLabel.mode.dark": { + "message": "dark mode", + "description": "The name for the dark color mode" + }, + "theme.colorToggle.ariaLabel": { + "message": "Switch between dark and light mode (currently {mode})", + "description": "The ARIA label for the color mode toggle" + }, + "theme.docs.breadcrumbs.navAriaLabel": { + "message": "Breadcrumbs", + "description": "The ARIA label for the breadcrumbs" + }, + "theme.docs.DocCard.categoryDescription.plurals": { + "message": "1 item|{count} items", + "description": "The default description for a category card in the generated index about how many items this category includes" + }, + "theme.docs.paginator.navAriaLabel": { + "message": "Docs pages", + "description": "The ARIA label for the docs pagination" + }, + "theme.docs.paginator.previous": { + "message": "Previous", + "description": "The label used to navigate to the previous doc" + }, + "theme.docs.paginator.next": { + "message": "Next", + "description": "The label used to navigate to the next doc" + }, + "theme.docs.tagDocListPageTitle.nDocsTagged": { + "message": "One doc tagged|{count} docs tagged", + "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.docs.tagDocListPageTitle": { + "message": "{nDocsTagged} with \"{tagName}\"", + "description": "The title of the page for a docs tag" + }, + "theme.docs.versionBadge.label": { + "message": "Version: {versionLabel}" + }, + "theme.docs.versions.unreleasedVersionLabel": { + "message": "This is unreleased documentation for {siteTitle} {versionLabel} version.", + "description": "The label used to tell the user that he's browsing an unreleased doc version" + }, + "theme.docs.versions.unmaintainedVersionLabel": { + "message": "This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.", + "description": "The label used to tell the user that he's browsing an unmaintained doc version" + }, + "theme.docs.versions.latestVersionSuggestionLabel": { + "message": "For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).", + "description": "The label used to tell the user to check the latest version" + }, + "theme.docs.versions.latestVersionLinkLabel": { + "message": "latest version", + "description": "The label used for the latest version suggestion link label" + }, + "theme.common.editThisPage": { + "message": "Edit this page", + "description": "The link label to edit the current page" + }, + "theme.common.headingLinkTitle": { + "message": "Direct link to {heading}", + "description": "Title for link to heading" + }, + "theme.lastUpdated.atDate": { + "message": " on {date}", + "description": "The words used to describe on which date a page has been last updated" + }, + "theme.lastUpdated.byUser": { + "message": " by {user}", + "description": "The words used to describe by who the page has been last updated" + }, + "theme.lastUpdated.lastUpdatedAtBy": { + "message": "Last updated{atDate}{byUser}", + "description": "The sentence used to display when a page has been last updated, and by who" + }, + "theme.navbar.mobileVersionsDropdown.label": { + "message": "Versions", + "description": "The label for the navbar versions dropdown on mobile view" + }, + "theme.NotFound.title": { + "message": "Page Not Found", + "description": "The title of the 404 page" + }, + "theme.tags.tagsListLabel": { + "message": "Tags:", + "description": "The label alongside a tag list" + }, + "theme.admonition.caution": { + "message": "caution", + "description": "The default label used for the Caution admonition (:::caution)" + }, + "theme.admonition.danger": { + "message": "danger", + "description": "The default label used for the Danger admonition (:::danger)" + }, + "theme.admonition.info": { + "message": "info", + "description": "The default label used for the Info admonition (:::info)" + }, + "theme.admonition.note": { + "message": "note", + "description": "The default label used for the Note admonition (:::note)" + }, + "theme.admonition.tip": { + "message": "tip", + "description": "The default label used for the Tip admonition (:::tip)" + }, + "theme.admonition.warning": { + "message": "warning", + "description": "The default label used for the Warning admonition (:::warning)" + }, + "theme.AnnouncementBar.closeButtonAriaLabel": { + "message": "Close", + "description": "The ARIA label for close button of announcement bar" + }, + "theme.blog.sidebar.navAriaLabel": { + "message": "Blog recent posts navigation", + "description": "The ARIA label for recent posts in the blog sidebar" + }, + "theme.DocSidebarItem.expandCategoryAriaLabel": { + "message": "Expand sidebar category '{label}'", + "description": "The ARIA label to expand the sidebar category" + }, + "theme.DocSidebarItem.collapseCategoryAriaLabel": { + "message": "Collapse sidebar category '{label}'", + "description": "The ARIA label to collapse the sidebar category" + }, + "theme.IconExternalLink.ariaLabel": { + "message": "(opens in new tab)", + "description": "The ARIA label for the external link icon" + }, + "theme.NotFound.p1": { + "message": "We could not find what you were looking for.", + "description": "The first paragraph of the 404 page" + }, + "theme.NotFound.p2": { + "message": "Please contact the owner of the site that linked you to the original URL and let them know their link is broken.", + "description": "The 2nd paragraph of the 404 page" + }, + "theme.NavBar.navAriaLabel": { + "message": "Main", + "description": "The ARIA label for the main navigation" + }, + "theme.navbar.mobileLanguageDropdown.label": { + "message": "Languages", + "description": "The label for the mobile language switcher dropdown" + }, + "theme.TOCCollapsible.toggleButtonLabel": { + "message": "On this page", + "description": "The label used by the button on the collapsible TOC component" + }, + "theme.blog.post.readMore": { + "message": "Read more", + "description": "The label used in blog post item excerpts to link to full blog posts" + }, + "theme.blog.post.readMoreLabel": { + "message": "Read more about {title}", + "description": "The ARIA label for the link to full blog posts from excerpts" + }, + "theme.blog.post.readingTime.plurals": { + "message": "One min read|{readingTime} min read", + "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.CodeBlock.copy": { + "message": "Copy", + "description": "The copy button label on code blocks" + }, + "theme.CodeBlock.copied": { + "message": "Copied", + "description": "The copied button label on code blocks" + }, + "theme.CodeBlock.copyButtonAriaLabel": { + "message": "Copy code to clipboard", + "description": "The ARIA label for copy code blocks button" + }, + "theme.CodeBlock.wordWrapToggle": { + "message": "Toggle word wrap", + "description": "The title attribute for toggle word wrapping button of code block lines" + }, + "theme.docs.breadcrumbs.home": { + "message": "Home page", + "description": "The ARIA label for the home page in the breadcrumbs" + }, + "theme.docs.sidebar.collapseButtonTitle": { + "message": "Collapse sidebar", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.collapseButtonAriaLabel": { + "message": "Collapse sidebar", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.navAriaLabel": { + "message": "Docs sidebar", + "description": "The ARIA label for the sidebar navigation" + }, + "theme.docs.sidebar.closeSidebarButtonAriaLabel": { + "message": "Close navigation bar", + "description": "The ARIA label for close button of mobile sidebar" + }, + "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": { + "message": "Expand the dropdown", + "description": "The ARIA label of the button to expand the mobile dropdown navbar item" + }, + "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": { + "message": "Collapse the dropdown", + "description": "The ARIA label of the button to collapse the mobile dropdown navbar item" + }, + "theme.docs.sidebar.expandButtonTitle": { + "message": "Expand sidebar", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.docs.sidebar.expandButtonAriaLabel": { + "message": "Expand sidebar", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { + "message": "← Back to main menu", + "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)" + }, + "theme.docs.sidebar.toggleSidebarButtonAriaLabel": { + "message": "Toggle navigation bar", + "description": "The ARIA label for hamburger menu button of mobile navigation" + }, + "theme.SearchBar.seeAll": { + "message": "See all {count} results" + }, + "theme.SearchPage.documentsFound.plurals": { + "message": "One document found|{count} documents found", + "description": "Pluralized label for \"{count} documents found\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.SearchPage.existingResultsTitle": { + "message": "Search results for \"{query}\"", + "description": "The search page title for non-empty query" + }, + "theme.SearchPage.emptyResultsTitle": { + "message": "Search the documentation", + "description": "The search page title for empty query" + }, + "theme.SearchPage.inputPlaceholder": { + "message": "Type your search here", + "description": "The placeholder for search page input" + }, + "theme.SearchPage.inputLabel": { + "message": "Search", + "description": "The ARIA label for search page input" + }, + "theme.SearchPage.algoliaLabel": { + "message": "Powered by Algolia", + "description": "The description label for Algolia mention" + }, + "theme.SearchPage.noResultsText": { + "message": "No results were found", + "description": "The paragraph for empty search result" + }, + "theme.SearchPage.fetchingNewResults": { + "message": "Fetching new results...", + "description": "The paragraph for fetching new search results" + }, + "theme.SearchBar.label": { + "message": "Search", + "description": "The ARIA label and placeholder for search button" + }, + "theme.SearchModal.searchBox.resetButtonTitle": { + "message": "Clear the query", + "description": "The label and ARIA label for search box reset button" + }, + "theme.SearchModal.searchBox.cancelButtonText": { + "message": "Cancel", + "description": "The label and ARIA label for search box cancel button" + }, + "theme.SearchModal.searchBox.placeholderText": { + "message": "Search docs", + "description": "The placeholder text for the main search input field" + }, + "theme.SearchModal.searchBox.placeholderTextAskAi": { + "message": "Ask another question...", + "description": "The placeholder text when in AI question mode" + }, + "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": { + "message": "Answering...", + "description": "The placeholder text for search box when AI is streaming an answer" + }, + "theme.SearchModal.searchBox.enterKeyHint": { + "message": "search", + "description": "The hint for the search box enter key text" + }, + "theme.SearchModal.searchBox.enterKeyHintAskAi": { + "message": "enter", + "description": "The hint for the Ask AI search box enter key text" + }, + "theme.SearchModal.searchBox.searchInputLabel": { + "message": "Search", + "description": "The ARIA label for search input" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonText": { + "message": "Back to keyword search", + "description": "The text for back to keyword search button" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": { + "message": "Back to keyword search", + "description": "The ARIA label for back to keyword search button" + }, + "theme.SearchModal.startScreen.recentSearchesTitle": { + "message": "Recent", + "description": "The title for recent searches" + }, + "theme.SearchModal.startScreen.noRecentSearchesText": { + "message": "No recent searches", + "description": "The text when there are no recent searches" + }, + "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": { + "message": "Save this search", + "description": "The title for save recent search button" + }, + "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": { + "message": "Remove this search from history", + "description": "The title for remove recent search button" + }, + "theme.SearchModal.startScreen.favoriteSearchesTitle": { + "message": "Favorite", + "description": "The title for favorite searches" + }, + "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": { + "message": "Remove this search from favorites", + "description": "The title for remove favorite search button" + }, + "theme.SearchModal.startScreen.recentConversationsTitle": { + "message": "Recent conversations", + "description": "The title for recent conversations" + }, + "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": { + "message": "Remove this conversation from history", + "description": "The title for remove recent conversation button" + }, + "theme.SearchModal.errorScreen.titleText": { + "message": "Unable to fetch results", + "description": "The title for error screen" + }, + "theme.SearchModal.errorScreen.helpText": { + "message": "You might want to check your network connection.", + "description": "The help text for error screen" + }, + "theme.SearchModal.resultsScreen.askAiPlaceholder": { + "message": "Ask AI: ", + "description": "The placeholder text for Ask AI input" + }, + "theme.SearchModal.askAiScreen.disclaimerText": { + "message": "Answers are generated with AI which can make mistakes. Verify responses.", + "description": "The disclaimer text for AI answers" + }, + "theme.SearchModal.askAiScreen.relatedSourcesText": { + "message": "Related sources", + "description": "The text for related sources" + }, + "theme.SearchModal.askAiScreen.thinkingText": { + "message": "Thinking...", + "description": "The text when AI is thinking" + }, + "theme.SearchModal.askAiScreen.copyButtonText": { + "message": "Copy", + "description": "The text for copy button" + }, + "theme.SearchModal.askAiScreen.copyButtonCopiedText": { + "message": "Copied!", + "description": "The text for copy button when copied" + }, + "theme.SearchModal.askAiScreen.copyButtonTitle": { + "message": "Copy", + "description": "The title for copy button" + }, + "theme.SearchModal.askAiScreen.likeButtonTitle": { + "message": "Like", + "description": "The title for like button" + }, + "theme.SearchModal.askAiScreen.dislikeButtonTitle": { + "message": "Dislike", + "description": "The title for dislike button" + }, + "theme.SearchModal.askAiScreen.thanksForFeedbackText": { + "message": "Thanks for your feedback!", + "description": "The text for thanks for feedback" + }, + "theme.SearchModal.askAiScreen.preToolCallText": { + "message": "Searching...", + "description": "The text before tool call" + }, + "theme.SearchModal.askAiScreen.duringToolCallText": { + "message": "Searching for ", + "description": "The text during tool call" + }, + "theme.SearchModal.askAiScreen.afterToolCallText": { + "message": "Searched for", + "description": "The text after tool call" + }, + "theme.SearchModal.footer.selectText": { + "message": "Select", + "description": "The select text for footer" + }, + "theme.SearchModal.footer.submitQuestionText": { + "message": "Submit question", + "description": "The submit question text for footer" + }, + "theme.SearchModal.footer.selectKeyAriaLabel": { + "message": "Enter key", + "description": "The ARIA label for select key in footer" + }, + "theme.SearchModal.footer.navigateText": { + "message": "Navigate", + "description": "The navigate text for footer" + }, + "theme.SearchModal.footer.navigateUpKeyAriaLabel": { + "message": "Arrow up", + "description": "The ARIA label for navigate up key in footer" + }, + "theme.SearchModal.footer.navigateDownKeyAriaLabel": { + "message": "Arrow down", + "description": "The ARIA label for navigate down key in footer" + }, + "theme.SearchModal.footer.closeText": { + "message": "Close", + "description": "The close text for footer" + }, + "theme.SearchModal.footer.closeKeyAriaLabel": { + "message": "Escape key", + "description": "The ARIA label for close key in footer" + }, + "theme.SearchModal.footer.searchByText": { + "message": "Powered by", + "description": "The 'Powered by' text for footer" + }, + "theme.SearchModal.footer.backToSearchText": { + "message": "Back to search", + "description": "The back to search text for footer" + }, + "theme.SearchModal.noResultsScreen.noResultsText": { + "message": "No results found for", + "description": "The text when there are no results" + }, + "theme.SearchModal.noResultsScreen.suggestedQueryText": { + "message": "Try searching for", + "description": "The text for suggested query" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsText": { + "message": "Believe this query should return results?", + "description": "The text for reporting missing results" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": { + "message": "Let us know.", + "description": "The link text for reporting missing results" + }, + "theme.SearchModal.placeholder": { + "message": "Search docs", + "description": "The placeholder of the input of the DocSearch pop-up modal" + }, + "theme.blog.post.plurals": { + "message": "One post|{count} posts", + "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.blog.tagTitle": { + "message": "{nPosts} tagged with \"{tagName}\"", + "description": "The title of the page for a blog tag" + }, + "theme.blog.author.pageTitle": { + "message": "{authorName} - {nPosts}", + "description": "The title of the page for a blog author" + }, + "theme.blog.authorsList.pageTitle": { + "message": "Authors", + "description": "The title of the authors page" + }, + "theme.blog.authorsList.viewAll": { + "message": "View all authors", + "description": "The label of the link targeting the blog authors page" + }, + "theme.blog.author.noPosts": { + "message": "This author has not written any posts yet.", + "description": "The text for authors with 0 blog post" + }, + "theme.contentVisibility.unlistedBanner.title": { + "message": "Unlisted page", + "description": "The unlisted content banner title" + }, + "theme.contentVisibility.unlistedBanner.message": { + "message": "This page is unlisted. Search engines will not index it, and only users having a direct link can access it.", + "description": "The unlisted content banner message" + }, + "theme.contentVisibility.draftBanner.title": { + "message": "Draft page", + "description": "The draft content banner title" + }, + "theme.contentVisibility.draftBanner.message": { + "message": "This page is a draft. It will only be visible in dev and be excluded from the production build.", + "description": "The draft content banner message" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "Try again", + "description": "The label of the button to try again rendering when the React error boundary captures an error" + }, + "theme.common.skipToMainContent": { + "message": "Skip to main content", + "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation" + }, + "theme.tags.tagsPageTitle": { + "message": "Tags", + "description": "The title of the tag list page" + } +} diff --git a/i18n/en/docusaurus-plugin-content-blog/options.json b/i18n/en/docusaurus-plugin-content-blog/options.json new file mode 100644 index 0000000..9239ff7 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-blog/options.json @@ -0,0 +1,14 @@ +{ + "title": { + "message": "Blog", + "description": "The title for the blog used in SEO" + }, + "description": { + "message": "Blog", + "description": "The description for the blog used in SEO" + }, + "sidebar.title": { + "message": "Recent posts", + "description": "The label for the left sidebar" + } +} diff --git a/i18n/en/docusaurus-plugin-content-docs/current.json b/i18n/en/docusaurus-plugin-content-docs/current.json new file mode 100644 index 0000000..1293cbd --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current.json @@ -0,0 +1,62 @@ +{ + "version.label": { + "message": "Next", + "description": "The label for version current" + }, + "sidebar.docs.category.What's new and migration": { + "message": "What's new and migration", + "description": "The label for category 'What's new and migration' in sidebar 'docs'" + }, + "sidebar.docs.category.What's new and migration.link.generated-index.title": { + "message": "What's new and migration", + "description": "The generated-index page title for category 'What's new and migration' in sidebar 'docs'" + }, + "sidebar.docs.category.API": { + "message": "API", + "description": "The label for category 'API' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText methods": { + "message": "RichText methods", + "description": "The label for category 'RichText methods' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText internal API": { + "message": "RichText internal API", + "description": "The label for category 'RichText internal API' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText internal API.link.generated-index.title": { + "message": "Internal API overview", + "description": "The generated-index page title for category 'RichText internal API' in sidebar 'docs'" + }, + "sidebar.docs.category.Event Bus methods": { + "message": "Event Bus methods", + "description": "The label for category 'Event Bus methods' in sidebar 'docs'" + }, + "sidebar.docs.category.State methods": { + "message": "State methods", + "description": "The label for category 'State methods' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText events": { + "message": "RichText events", + "description": "The label for category 'RichText events' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText properties": { + "message": "RichText properties", + "description": "The label for category 'RichText properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Integration with frameworks": { + "message": "Integration with frameworks", + "description": "The label for category 'Integration with frameworks' in sidebar 'docs'" + }, + "sidebar.docs.category.Integration with frameworks.link.generated-index.title": { + "message": "Integration with frameworks", + "description": "The generated-index page title for category 'Integration with frameworks' in sidebar 'docs'" + }, + "sidebar.docs.category.Guides": { + "message": "Guides", + "description": "The label for category 'Guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Guides.link.generated-index.title": { + "message": "Guides", + "description": "The generated-index page title for category 'Guides' in sidebar 'docs'" + } +} diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/default-styles.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/default-styles.md new file mode 100644 index 0000000..557c1f9 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/config/default-styles.md @@ -0,0 +1,144 @@ +--- +sidebar_label: defaultStyles +title: defaultStyles Config +description: Explore the defaultStyles configuration in the DHTMLX JavaScript RichText library documentation. Find developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# defaultStyles + +### Description + +@short: Optional. Defines default style settings for specific block types. + +### Usage + +~~~jsx {} +defaultStyles?: { + "*"?: { // applies to all blocks, letting you set common properties for all of them + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + p?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + blockquote?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h1?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h2?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h3?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h4?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h5?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h6?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + } +}; +~~~ + +:::important +The `defaultStyles` property doesn't actually apply CSS styles to the blocks. To see the styles take effect, you need to add the corresponding CSS separately: + +```jsx title="index.js" +new richtext.Richtext("#root", { + defaultStyles: { + h2: { + "font-family": "Roboto", + "font-size": "28px", + color: "purple", + background: "#FFC0CB" + } + } +}); +``` + +```css title="index.css" + +``` + +In this example, every `h2` block is set to use the `"Roboto"` font-family with a font size of 28px, along with changes to the text and background colors. The CSS styles for `h2` blocks are also applied accordingly. +::: + +### Default config + +~~~jsx +const defaultStyles = { + "*": { "font-family": "Arial" }, + p: { "font-size": "14px" }, + blockquote: { "font-size": "14px" }, + h1: { "font-size": "32px" }, + h2: { "font-size": "24px" }, + h3: { "font-size": "18px" }, + h4: { "font-size": "16px" }, + h5: { "font-size": "14px" }, + h6: { "font-size": "12px" } +}; +~~~ + +### Example + +~~~jsx {3-13} +// initialize RichText +new richtext.Richtext("#root", { + defaultStyles: { + h4: { + "font-family": "Roboto" + }, + h5: { + "font-family": "Roboto" + }, + h6: { + "font-family": "Roboto" + } + }, + // other configuration properties +}); +~~~ + +**Change log:** This property was updated in version 2.0 + +**Related articles:** [Configuration](guides/configuration.md) + +**Related sample:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md new file mode 100644 index 0000000..050bfde --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md @@ -0,0 +1,39 @@ +--- +sidebar_label: fullscreenMode +title: fullscreenMode Config +description: Explore the fullscreenMode config in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# fullscreenMode + +### Description + +@short: Optional. Turns on the RichText fullscreen mode + +### Usage + +~~~jsx {} +fullscreenMode?: boolean; +~~~ + +### Default config + +~~~jsx +fullscreenMode: false; +~~~ + +### Example + +~~~jsx {3} +// initialize RichText +new richtext.Richtext("#root", { + fullscreenMode: true + // other configuration properties +}); +~~~ + +**Change log:** This property was introduced in v2.0 + +**Related articles:** [Configuration](guides/configuration.md) + +**Related sample:** [RichText. Full toolbar](https://snippet.dhtmlx.com/ziynafp7?tag=richtext) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md new file mode 100644 index 0000000..542d77e --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md @@ -0,0 +1,33 @@ +--- +sidebar_label: imageUploadUrl +title: imageUploadUrl Config +description: You can learn about the imageUploadUrl 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. +--- + +# imageUploadUrl + +### Description + +@short: Optional. Defines the URL that will be used to upload images + +### Usage + +~~~jsx {} +imageUploadUrl?: string; +~~~ + +### Example + +~~~jsx {3} +// initialize RichText +new richtext.Richtext("#root", { + imageUploadUrl: "some URL" + // other configuration properties +}); +~~~ + +**Change log:** This property was introduced in version 2.0 + +**Related articles:** [Configuration](guides/configuration.md) + +**Related sample:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/layout-mode.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/layout-mode.md new file mode 100644 index 0000000..9bcbad4 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/config/layout-mode.md @@ -0,0 +1,41 @@ +--- +sidebar_label: layoutMode +title: layoutMode Config +description: Explore the layoutMode configuration in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, code samples, live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# layoutMode + +### Description + +@short: Optional. Defines the layout style for the main editor area. + +### Usage + +~~~jsx {} +layoutMode: "classic" | "document"; +~~~ + +The `"classic"` mode makes the editing area span the entire page. The `"document"` mode simulates actual document sizes, using formats like A4, A5, A6, and A7. + +### Default config + +~~~jsx +layoutMode: "classic"; +~~~ + +### Example + +~~~jsx {3} +// initialize RichText +new richtext.Richtext("#root", { + layoutMode: "document" // sets RichText to use "document" mode by default + // other configuration properties +}); +~~~ + +**Change log:** This property was introduced in v2.0, replacing the older `mode` property. + +**Related articles:** [Configuration](guides/configuration.md) + +**Related sample:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/locale.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/locale.md new file mode 100644 index 0000000..218f775 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/config/locale.md @@ -0,0 +1,47 @@ +--- +sidebar_label: locale +title: locale Config +description: Explore the locale config in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# locale + +### Description + +@short: Optional. An object containing localization labels for RichText + +:::info +The **locale** object should have all the RichText labels along with their respective translations. +::: + +### Usage + +~~~jsx {} +locale?: object; +~~~ + +### Default config + +By default, RichText comes with the **English** locale. You also have the option to set a custom locale. + +:::tip +To switch the locale on the fly, use the [**setLocale()**](api/methods/set-locale.md) method of RichText +::: + +### Example + +~~~jsx {3} +// initialize RichText +const editor = new richtext.RichText("#root", { + locale: richtext.locales.cn // the Chinese locale is set initially + // locale: richtext.locales.en // the English locale is set initially + // locale: richtext.locales.de // the German locale is set initially + // other configuration properties +}); +~~~ + +**Change log:** This property was introduced in v2.0 + +**Related articles:** [Localization](guides/localization.md) + +**Related sample:** [RichText. Localization](https://snippet.dhtmlx.com/zxjrin3i?tag=richtext) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/menubar.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/menubar.md new file mode 100644 index 0000000..0154bbb --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/config/menubar.md @@ -0,0 +1,33 @@ +--- +sidebar_label: menubar +title: menubar Config +description: You can learn about the menubar 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. +--- + +# menubar + +### Description + +@short: Optional. Turns on the top menubar in RichText. + +### Usage + +~~~jsx {} +menubar?: boolean; +~~~ + +### Example + +~~~jsx {3} +// initialize RichText +new richtext.Richtext("#root", { + menubar: true + // other configuration properties +}); +~~~ + +**Change log:** This property was introduced in v2.0 + +**Related articles:** [Configuration](guides/configuration.md) + +**Related sample:** [RichText. Initialization with menubar](https://snippet.dhtmlx.com/tjryzka7?tag=richtext) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/toolbar.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/toolbar.md new file mode 100644 index 0000000..7bed61b --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/config/toolbar.md @@ -0,0 +1,219 @@ +--- +sidebar_label: toolbar +title: toolbar Config +description: Explore the toolbar configuration in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code examples and live demos, and get a free 30-day trial of DHTMLX RichText. +--- + +# toolbar + +### Description + +@short: Optional. Turns on the toolbar and lets users choose and set up the buttons shown on it. + +### Usage + +~~~jsx {} +toolbar?: boolean | Array any }>; +~~~ + +#### Available buttons within Toolbar + +Here are the buttons you can add to the RichText toolbar: + +| Button | Description | +|---------------------|-----------------------------------------------------------------------------| +| `undo` | Reverses the last user action. | +| `redo` | Reapplies the action that was undone before. | +| `style` | Lets you pick text styles like headings or paragraphs. | +| `font-family` | Changes the font of the selected text. | +| `font-size` | Changes the size of the selected text. | +| `bold` | Makes the selected text bold. | +| `italic` | Italicizes the selected text. | +| `underline` | Underlines the selected text. | +| `strike` | Adds a strikethrough effect. | +| `subscript` | Formats text as subscript. | +| `superscript` | Formats text as superscript. | +| `text-color` | Changes the text color. | +| `background-color` | Changes the background highlight color of the text. | +| `align` | Sets text alignment: left, center, right, or justified. | +| `indent` | Increases indentation of text blocks. | +| `outdent` | Decreases paragraph indentation. | +| `line-height` | Adjusts line spacing. | +| `quote` | Formats text as a blockquote. | +| `bulleted-list` | Creates a bulleted list. | +| `numbered-list` | Creates a numbered list. | +| `link` | Inserts a hyperlink. | +| `image` | Inserts an image. | +| `line` | Inserts a horizontal line. | +| `clear` | Removes all formatting from the selected text. | +| `print` | Opens the print dialog. | +| `fullscreen` | Toggles fullscreen mode. | +| `mode` | Switches between [layout modes](api/config/layout-mode.md) (classic/document).| +| `shortcuts` | Shows a list of keyboard shortcuts. | +| `separator` | Adds a visual separator between toolbar groups. | + +You can use these strings to set up toolbar buttons like this: + +~~~jsx {2-7} +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // other buttons + ], + // other configuration properties +}); +~~~ + +#### Custom buttons within Toolbar + +Custom buttons can be set up as objects with these options: + +- `type` - (required) defines the control type. Options are `"button"`, `"richselect"`, `"colorpicker"`. +- `id` - (optional) a unique control ID (shouldn’t clash with existing IDs). +- `label` - (optional) text label for the button (appears alongside the icon). +- `tooltip` - (optional) text shown on hover (defaults to the label if not set). +- `css` - (optional) CSS class for the control (default classes include wx-primary, wx-secondary). +- `handler` - (optional) function that runs when the button is clicked. + +~~~jsx {6-32} +new richtext.Richtext("#root", { + toolbar: [ + // buttons (strings represent buttons only) + "bold", + "italic", + // predefined buttons (users can’t add extra options like labels or tooltips here, only ({ type: "button", id: string }) + { + type: "button", + id: "fullscreen", + }, + // users must specify the right type for predefined controls (e.g. richselect/colorpicker) + // controls with wrong types won’t be added + { + type: "richselect", // type: "button" - would be ignored + id: "mode", + }, + // custom buttons (only these options are supported) + // currently, only custom buttons are allowed (no richselect/colorpicker support) + { + type: "button", + id: "some", + label: "Some", + handler: () => {/* custom logic */} + }, + { + type: "button", + id: "other", + icon: "wxo-help", + label: "Other", + tooltip: "Some tooltip", + handler: () => {/* custom logic */} + } + ], + // other configuration properties +}); +~~~ + +#### Hide Toolbar + +To hide the toolbar, just set the `toolbar` property to `false` like this: + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false + // other configuration properties +}); +~~~ + +### Default config + +~~~jsx +const defaultToolbarButtons = { + "undo", + "redo", + "separator", + "style", + "separator", + "font-family", + "font-size", + "separator", + "bold", + "italic", + "underline", + "strike", + "separator", + "text-color", + "background-color", + "separator", + "align", + "line-height", + "outdent", + "indent", + "separator", + "bulleted-list", + "numbered-list", + "quote", + "separator", + "link", + "image", + "separator", + "clear", + "separator", + "fullscreen", + "mode" +}; +~~~ + +:::tip +The default toolbar controls come with the RichText widget and can be accessed via `richtext.defaultToolbarButtons`. + +```jsx{4} +// initialize RichText +new richtext.Richtext("#root", { + toolbar: [ + ...richtext.defaultToolbarButtons, + { + type: "button", + id: "btn1", // unique button ID for custom logic + icon: "wxo-help", // icon shown with label + css: "rounded", // CSS class for styling (default supported classes: wx-primary, wx-secondary) + label: "Custom button", // button label next to icon + tooltip: "Some tooltip", // tooltip on hover (defaults to label if missing) + } + ] + // other configuration properties +}); +``` +::: + +### Example + +~~~jsx {3-18} +// initialize RichText +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // custom buttons (all supported options shown here) + // currently, only custom buttons are supported (no richselect/colorpicker) + { + type: "button", + id: "btn1", // unique button ID for custom logic + icon: "wxo-help", // icon shown with label + css: "rounded", // CSS class for styling (default supported classes: wx-primary, wx-secondary) + label: "Custom button", // button label next to icon + tooltip: "Some tooltip", // tooltip on hover (defaults to label if missing) + handler: () => ..., // custom logic for this button + } + ] + // other configuration properties +}); +~~~ + +**Change log:** This property was introduced in v2.0 + +**Related articles:** [Configuration](guides/configuration.md) + +**Related sample:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/config/value.md b/i18n/en/docusaurus-plugin-content-docs/current/api/config/value.md new file mode 100644 index 0000000..5fd7b2b --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/config/value.md @@ -0,0 +1,36 @@ +--- +sidebar_label: value +title: value Config +description: Explore the value config in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# value + +### Description + +@short: Optional. Defines the initial content shown inside the RichText editor area. + +:::tip +To set the content using a custom format, use the built-in [`setValue()`](api/methods/set-value.md) method. +::: + +### Usage + +~~~jsx {} +value?: string; +~~~ + +### Example + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" // sets the default value (HTML format) + // other configuration properties +}); +~~~ + +**Change log:** This property was introduced in version 2.0 + +**Related articles:** [Configuration](guides/configuration.md) + +**Related sample:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/align.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/align.md new file mode 100644 index 0000000..2dd2d0f --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/align.md @@ -0,0 +1,48 @@ +--- +sidebar_label: align +title: align Event +description: Explore the align event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# align + +### Description + +@short: Triggered whenever the text alignment is updated using the menubar/toolbar or Event Bus methods. + +### Usage + +~~~jsx {} +"align": ({ + align: "left" | "center" | "right" | "justify" +}) => boolean | void; +~~~ + +### Parameters + +The callback for the **align** event receives an object with the following property: + +- `align` - specifies the text alignment, which can be one of these values: `"left" | "center" | "right" | "justify"` + +:::info +Inner events can be handled using [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-12} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// listen for the "align" event +editor.api.on("align", (obj) => { + console.log(`Align to: ${obj.align}`); +}); +// set the text alignment to left +editor.api.exec("align", { + align: "left" +}); +~~~ + +**Change log:** This event was introduced in version 2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md new file mode 100644 index 0000000..37b71de --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md @@ -0,0 +1,38 @@ +--- +sidebar_label: clear-text-format +title: clear-text-format Event +description: You can learn about the clear-text-format event 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. +--- + +# clear-text-format + +### Description + +@short: Triggered whenever a text format is removed using the menubar, toolbar, or Event Bus methods. + +### Usage + +~~~jsx {} +"clear-text-format": () => boolean | void; +~~~ + +:::info +To manage internal events, you can utilize the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-10} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// subscribe to the "clear-text-format" event +editor.api.on("clear-text-format", () => { + console.log("Text format was cleared"); +}); +// clear text format +editor.api.exec("clear-text-format", {}); +~~~ + +**Change log:** The event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/copy.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/copy.md new file mode 100644 index 0000000..83d942e --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/copy.md @@ -0,0 +1,36 @@ +--- +sidebar_label: copy +title: copy Event +description: Explore the copy event in the DHTMLX JavaScript RichText library documentation. Access developer guides, API references, try out live demos and code examples, and download a free 30-day trial of DHTMLX RichText. +--- + +# copy + +### Description + +@short: Triggered when selected text is copied + +### Usage + +~~~jsx {} +"copy": () => boolean | void; +~~~ + +:::info +To work with inner events, you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-8} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// listen for the "copy" event +editor.api.on("copy", () => { + console.log("Selected text was copied"); +}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/create-new.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/create-new.md new file mode 100644 index 0000000..6752175 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/create-new.md @@ -0,0 +1,44 @@ +--- +sidebar_label: create-new +title: create-new Event +description: Discover how the create-new event works in the DHTMLX JavaScript RichText library. Explore developer guides, API references, try out code samples and live demos, and get a free 30-day trial of DHTMLX RichText. +--- + +# create-new + +### Description + +@short: This event triggers when selecting the "New" option from the menubar or by using Event Bus methods. + +### Usage + +~~~jsx {} +"create-new": ({ reset?: boolean }) => boolean | void; +~~~ + +### Parameters + +The callback for the **create-new** event accepts an object with the following property: + +- `reset` - indicates whether the history should be reset when a new file is created. + +:::info +To manage internal events, you can utilize the [**Event Bus methods**](api/overview/event_bus_methods_overview.md). +::: + +### Example + +~~~jsx {5-10} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// subscribe to the "create-new" event +editor.api.on("create-new", ({ reset }) => { + console.log(`Document has been cleared. History has ${reset ? "" : "not"} been reset.`); +}); +// create new file and reset the history +editor.api.exec("create-new", { reset: true }); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/cut.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/cut.md new file mode 100644 index 0000000..540ee40 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/cut.md @@ -0,0 +1,36 @@ +--- +sidebar_label: cut +title: cut Event +description: Explore the cut event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# cut + +### Description + +@short: Triggered when selected text is cut + +### Usage + +~~~jsx {} +"cut": () => boolean | void; +~~~ + +:::info +To manage internal events, the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) can be used. +::: + +### Example + +~~~jsx {5-8} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// subscribe to the "cut" event +editor.api.on("cut", () => { + console.log("Selected text was cut"); +}); +~~~ + +**Change log:** The event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/delete-link.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/delete-link.md new file mode 100644 index 0000000..b690a36 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/delete-link.md @@ -0,0 +1,36 @@ +--- +sidebar_label: delete-link +title: delete-link Event +description: You can learn about the delete-link event 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. +--- + +# delete-link + +### Description + +@short: Triggered whenever a link is deleted + +### Usage + +~~~jsx {} +"delete-link": () => boolean | void; +~~~ + +:::info +To manage internal events, you can refer to [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-8} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// subscribe to the "delete-link" event +editor.api.on("delete-link", () => { + console.log("The link was deleted"); +}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/export.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/export.md new file mode 100644 index 0000000..edf87bc --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/export.md @@ -0,0 +1,59 @@ +--- +sidebar_label: export +title: export Event +description: This section covers the export event in the DHTMLX JavaScript RichText library. It includes developer guides, API references, code examples, live demos, and a free 30-day trial of DHTMLX RichText. +--- + +# export + +### Description + +@short: Triggered after selecting the "Export" option from the menubar or through Event Bus methods. + +### Usage + +~~~jsx {} +"export": ({ options: IExportOptions; result?: any }) => boolean | void; + +interface IExportOptions { + format?: "docx" | "pdf"; + url?: string; + download?: boolean; + fileName?: string; +} +~~~ + +### Parameters + +The callback for the **export** event receives an object with these properties: + +- `format` - specifies the file format +- `url` - the base URL used for exporting the file +- `download` - indicates whether the file should be downloaded automatically after the server response. If set to "false", the file won’t download automatically, but the blob data can be accessed via the `result` property in the event object +- `fileName` - the name assigned to the exported file + +:::info +Inner events can be managed using [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-15} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// listen for the "export" event +editor.api.on("export", (obj) => { + console.log(obj); + console.log("The file was exported"); +}); +// export content as a pdf file +editor.api.exec("export", { + format: "pdf", + download: false, + fileName: "some file" +}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/import.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/import.md new file mode 100644 index 0000000..4144e35 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/import.md @@ -0,0 +1,47 @@ +--- +sidebar_label: import +title: import Event +description: Discover the import event in the DHTMLX JavaScript RichText library documentation. Explore developer guides, API references, try out code samples and live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# import + +### Description + +@short: Triggered after selecting the "Import" option from the menubar or through Event Bus methods. + +### Usage + +~~~jsx {} +"import": ({ html?: string }) => boolean | void; +~~~ + +### Parameters + +The callback for the **import** event accepts an object with the following parameter: + +- `html` - a string containing HTML content + +:::info +To manage internal events, you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-13} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// listen for the "import" event +editor.api.on("import", (obj) => { + console.log(obj.html); + console.log("The new value was imported"); +}); +// perform an import +editor.api.exec("import", { + html: "

some value

" // internally calls setValue +}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/indent.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/indent.md new file mode 100644 index 0000000..b1dc648 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/indent.md @@ -0,0 +1,43 @@ +--- +sidebar_label: indent +title: indent Event +description: Explore the indent event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, code samples, live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# indent + +### Description + +@short: Triggered when the block indentation is increased + +### Usage + +~~~jsx {} +"indent": ({ step: number }) => boolean | void; +~~~ + +### Parameters + +The callback for the **indent** event receives an object containing the following property: + +- `step` - the amount by which the indentation was increased + +:::info +To manage internal events, you can refer to [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-9} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// subscribe to the "indent" event +editor.api.on("indent", (obj) => { + console.log(obj); + console.log("The indention was increased"); +}); +~~~ + +**Change log:** This event was introduced in version 2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/insert-image.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/insert-image.md new file mode 100644 index 0000000..4d96196 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/insert-image.md @@ -0,0 +1,50 @@ +--- +sidebar_label: insert-image +title: insert-image Event +description: Explore the insert-image event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# insert-image + +### Description + +@short: Triggered when an image is inserted + +### Usage + +~~~jsx {} +"insert-image": (IImageContext) => boolean | void; + +interface IImageContext { + id: TID; + value: string; + 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; +} +~~~ + +:::info +To manage internal events, you can refer to [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-9} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// listen for the "insert-image" event +editor.api.on("insert-image", (obj) => { + console.log(obj); + console.log("The image was inserted"); +}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/insert-line.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/insert-line.md new file mode 100644 index 0000000..f14c403 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/insert-line.md @@ -0,0 +1,36 @@ +--- +sidebar_label: insert-line +title: insert-line Event +description: Find details about the insert-line event in the DHTMLX JavaScript RichText library documentation. Explore developer guides, API references, try out examples and live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# insert-line + +### Description + +@short: Triggered when a horizontal line is inserted + +### Usage + +~~~jsx {} +"insert-line": () => boolean | void; +~~~ + +:::info +To work with internal events, you can use the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-8} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// listen for the "insert-line" event +editor.api.on("insert-line", () => { + console.log("The horizontal line was inserted"); +}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/insert-link.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/insert-link.md new file mode 100644 index 0000000..dc27300 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/insert-link.md @@ -0,0 +1,43 @@ +--- +sidebar_label: insert-link +title: insert-link Event +description: Explore the insert-link event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try sample code and live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# insert-link + +### Description + +@short: Triggered when a link is inserted + +### Usage + +~~~jsx {} +"insert-link": ({ url: string }) => boolean | void; +~~~ + +### Parameters + +The callback for the **update-link** event receives an object with this parameter: + +- `url` - the URL being inserted + +:::info +To manage internal events, you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-9} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// listen for the "insert-link" event +editor.api.on("insert-link", (obj) => { + console.log(obj) + console.log("The following link was inserted: " + obj.url); +}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/insert-list.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/insert-list.md new file mode 100644 index 0000000..ec78542 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/insert-list.md @@ -0,0 +1,47 @@ +--- +sidebar_label: insert-list +title: insert-list Event +description: Explore the insert-list event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code samples and live demos, and get a free 30-day trial of DHTMLX RichText. +--- + +# insert-list + +### Description + +@short: Triggered when a list is inserted + +### Usage + +~~~jsx {} +"insert-list": ({ type: TListType }) => boolean | void; + +type TListType = "bulleted" | "numbered"; +~~~ + +### Parameters + +The callback for the **insert-list** event receives an object with this parameter: + +- `type` - indicates the kind of list that was inserted. Possible values are: + - `"bulleted"` - a bulleted list + - `"numbered"` - a numbered list + +:::info +To manage internal events, you can refer to the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-9} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// listen to the "insert-list" event +editor.api.on("insert-list", (obj) => { + console.log(obj.type); + console.log("The list was inserted"); +}); +~~~ + +**Change log:** This event was introduced in version 2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/outdent.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/outdent.md new file mode 100644 index 0000000..11499da --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/outdent.md @@ -0,0 +1,43 @@ +--- +sidebar_label: outdent +title: outdent Event +description: Explore the outdent event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, code samples, live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# outdent + +### Description + +@short: Triggered when the block indentation is reduced + +### Usage + +~~~jsx {} +"outdent": ({ step: number }) => boolean | void; +~~~ + +### Parameters + +The callback for the **outdent** event receives an object containing: + +- `step` - the amount by which the indentation was decreased + +:::info +To work with internal events, you can refer to [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-9} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// listen for the "outdent" event +editor.api.on("outdent", (obj) => { + console.log(obj); + console.log("The indentation was decreased"); +}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/paste.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/paste.md new file mode 100644 index 0000000..bf15c07 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/paste.md @@ -0,0 +1,36 @@ +--- +sidebar_label: paste +title: paste Event +description: Explore the paste event in the DHTMLX JavaScript RichText library documentation. Access developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# paste + +### Description + +@short: Triggered when content is pasted + +### Usage + +~~~jsx {} +"paste": () => boolean | void; +~~~ + +:::info +To manage internal events, refer to the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-8} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// subscribe to the "paste" event +editor.api.on("paste", () => { + console.log("Content was pasted"); +}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/print.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/print.md new file mode 100644 index 0000000..e26e329 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/print.md @@ -0,0 +1,36 @@ +--- +sidebar_label: print +title: print Event +description: Explore the print event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code examples and live demos, and get a free 30-day trial of DHTMLX RichText. +--- + +# print + +### Description + +@short: Triggered when the document starts printing + +### Usage + +~~~jsx {} +"print": () => boolean | void; +~~~ + +:::info +To manage internal events, refer to the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-8} +// initialize RichText +const editor = new richtext.Richtext("#root", { +// configuration properties +}); +// listen for the "print" event +editor.api.on("print", () => { + console.log("The document is printing"); +}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/redo.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/redo.md new file mode 100644 index 0000000..145c9de --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/redo.md @@ -0,0 +1,36 @@ +--- +sidebar_label: redo +title: redo Event +description: Explore the redo event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, code samples, live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# redo + +### Description + +@short: Triggered when the "Redo" button is clicked in the menubar/toolbar or activated through Event Bus methods. + +### Usage + +~~~jsx {} +"redo": () => boolean | void; +~~~ + +:::info +To manage internal events, you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-8} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// subscribe to the "redo" event +editor.api.on("redo", () => { + console.log("Redo operation was performed"); +}); +~~~ + +**Change log:** This event was introduced in version 2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/resize-image.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/resize-image.md new file mode 100644 index 0000000..02d0201 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/resize-image.md @@ -0,0 +1,45 @@ +--- +sidebar_label: resize-image +title: resize-image Event +description: You can learn about the resize-image event 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. +--- + +# resize-image + +### Description + +@short: Triggered when an image is resized + +### Usage + +~~~jsx {} +"resize-image": ({ id: number, width: number, height: number }) => boolean | void; +~~~ + +### Parameters + +The callback for the **resize-image** event receives an object with these properties: + +- `id` - the image's unique identifier +- `width` - the new width of the image +- `height` - the new height of the image + +:::info +To work with internal events, you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-9} +// initialize RichText +const editor = new richtext.Richtext("#root", { +// configuration properties +}); +// listen for the "resize-image" event +editor.api.on("resize-image", (obj) => { + console.log(obj); + console.log("The image was resized") +}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/set-font-family.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/set-font-family.md new file mode 100644 index 0000000..589543a --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/set-font-family.md @@ -0,0 +1,47 @@ +--- +sidebar_label: set-font-family +title: set-font-family Event +description: You can learn about the set-font-family event 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. +--- + +# set-font-family + +### Description + +@short: Triggered when the font family is being set + +### Usage + +~~~jsx {} +"set-font-family": ({ fontFamily: string }) => boolean | void; +~~~ + +### Parameters + +The callback for the **set-font-family** event receives an object containing the following parameter: + +- `fontFamily` - the font family to apply. The available options include: `"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"` + +:::info +To handle internal events, you can use the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-13} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// listen for the "set-font-family" event +editor.api.on("set-font-family", (obj) => { + console.log(obj.fontFamily); + console.log("The font family was changed"); +}); +// set a new font family +editor.api.exec("set-font-family", { + fontFamily: "Roboto" +}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/set-font-size.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/set-font-size.md new file mode 100644 index 0000000..7951c3a --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/set-font-size.md @@ -0,0 +1,47 @@ +--- +sidebar_label: set-font-size +title: set-font-size Event +description: Explore the set-font-size event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# set-font-size + +### Description + +@short: Triggered when the font size is set + +### Usage + +~~~jsx {} +"set-font-size": ({ fontSize: string }) => boolean | void; +~~~ + +### Parameters + +The callback for the **set-font-size** event receives an object with this parameter: + +- `fontSize` - the font size to apply + +:::info +To manage internal events, you can refer to [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-13} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// listen for the "set-font-size" event +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); + console.log("The font size was changed"); +}); +// set a new font size +editor.api.exec("set-font-size", { + fontSize: "11px" +}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/set-line-height.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/set-line-height.md new file mode 100644 index 0000000..fb325e3 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/set-line-height.md @@ -0,0 +1,47 @@ +--- +sidebar_label: set-line-height +title: set-line-height Event +description: You can learn about the set-line-height event 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. +--- + +# set-line-height + +### Description + +@short: Triggered whenever the line height is set + +### Usage + +~~~jsx {} +"set-line-height": ({ lineHeight: string }) => boolean | void; +~~~ + +### Parameters + +The callback for the **set-line-height** event receives an object containing this parameter: + +- `lineHeight` - the value of the line height being set + +:::info +To manage internal events, you can refer to the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-13} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// listen for the "set-line-height" event +editor.api.on("set-line-height", (obj) => { + console.log(obj); + console.log("The line height was changed"); +}); +// set a new line height +editor.api.exec("set-line-height", { + lineHeight: "15px" +}); +~~~ + +**Change log:** The event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/set-text-color.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/set-text-color.md new file mode 100644 index 0000000..71c1d20 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/set-text-color.md @@ -0,0 +1,54 @@ +--- +sidebar_label: set-text-color +title: set-text-color Event +description: Explore the set-text-color event in the DHTMLX JavaScript RichText library documentation. Find developer guides, API references, code samples, live demos, and get a free 30-day trial of DHTMLX RichText. +--- + +# set-text-color + +### Description + +@short: Triggered when a text color and/or background color is applied + +### Usage + +~~~jsx {} +"set-text-color": (ITextColor) => boolean | void; + +interface ITextColor { + color?: string; + background?: string; +} +~~~ + +### Parameters + +The callback for the **set-text-color** event receives an object with these properties: + +- `color` - the text color +- `background` - the background color of the text + +:::info +To manage internal events, you can refer to the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-14} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// listen for the "set-text-color" event +editor.api.on("set-text-color", (obj) => { + console.log(obj); + console.log("Text color and/or background color have been updated"); +}); +// set text color and background +editor.api.exec("set-text-color", { + color: "red", + background: "blue" +}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/set-text-format.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/set-text-format.md new file mode 100644 index 0000000..ae9905a --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/set-text-format.md @@ -0,0 +1,58 @@ +--- +sidebar_label: set-text-format +title: set-text-format Event +description: You can learn about the set-text-format event 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. +--- + +# set-text-format + +### Description + +@short: Triggered when a text format is being applied + +### Usage + +~~~jsx {} +"set-text-format": (ITextFormat) => boolean | void; + +interface ITextFormat { + bold?: boolean; + italic?: boolean; + strike?: boolean; + underline?: boolean; +} +~~~ + +:::info +To manage internal events, you can refer to [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Parameters + +The callback for the **set-text-format** event receives an object with these optional properties: + +- `bold` - indicates bold text formatting +- `italic` - indicates italic text formatting +- `strike` - indicates strikethrough text formatting +- `underline` - indicates underline text formatting + +### Example + +~~~jsx {5-14} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// listen for the "set-text-format" event +editor.api.on("set-text-format", (obj) => { + console.log(obj); + console.log("The text format was changed"); +}); +// apply italic and bold formatting to the text +editor.api.exec("set-text-format", { + italic: true, + bold: true +}); +~~~ + +**Change log:** This event was introduced in version 2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/set-text-style.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/set-text-style.md new file mode 100644 index 0000000..b9932fc --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/set-text-style.md @@ -0,0 +1,49 @@ +--- +sidebar_label: set-text-style +title: set-text-style Event +description: Explore the set-text-style event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# set-text-style + +### Description + +@short: Triggered when a text style is applied + +### Usage + +~~~jsx {} +"set-text-style": ({ tag: TBlockType }) => boolean | void; + +type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; +~~~ + +### Parameters + +The callback for the **set-text-style** event receives an object with the following property: + +- `tag` - specifies the text style being applied + +:::info +To manage internal events, you can refer to the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-13} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// listen for the "set-text-style" event +editor.api.on("set-text-style", (obj) => { + console.log(obj.tag); + console.log("Text style has been updated"); +}); +// change the text style +editor.api.exec("set-text-style", { + tag: "blockquote" +}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/show-popup.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/show-popup.md new file mode 100644 index 0000000..b01abe7 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/show-popup.md @@ -0,0 +1,53 @@ +--- +sidebar_label: show-popup +title: show-popup Event +description: Explore the show-popup event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code examples, live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# show-popup + +### Description + +@short: Triggered when a popup is displayed or hidden + +### Usage + +~~~jsx {} +"show-popup": (IPopupConfig) => boolean | void; + +interface IPopupConfig { + type: "link" | null; + image?: boolean; +} +~~~ + +### Parameters + +The callback for the **show-popup** event receives an object with these properties: + +- `type` - specifies the popup type +- `image` - indicates whether the current cursor is over an image or not + +:::info +To manage inner events, the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) can be utilized +::: + +### Example + +~~~jsx {5-13} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// subscribe to the "show-popup" event +editor.api.on("show-popup", (obj) => { + console.log(obj); + console.log("The popup was shown/hidden"); +}); +// show-popup the text to the left +editor.api.exec("show-popup", { + type: "link" +}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/subscript.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/subscript.md new file mode 100644 index 0000000..6c7f356 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/subscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: subscript +title: subscript Event +description: Explore the subscript event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# subscript + +### Description + +@short: Triggered when the "Subscript" button is clicked in the menubar/toolbar or invoked through Event Bus methods + +### Usage + +~~~jsx {} +"subscript": () => boolean | void; +~~~ + +:::info +To work with internal events, you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-10} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// listen for the "subscript" event +editor.api.on("subscript", () => { + console.log("Subscript was applied"); +}); +// execute the "subscript" event +editor.api.exec("subscript", {}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/superscript.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/superscript.md new file mode 100644 index 0000000..661e4af --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/superscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: superscript +title: superscript Event +description: Explore the superscript event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# superscript + +### Description + +@short: This event triggers when the "Superscript" button is clicked in the menubar or toolbar, or when activated through Event Bus methods. + +### Usage + +~~~jsx {} +"superscript": () => boolean | void; +~~~ + +:::info +To manage internal events, refer to the [**Event Bus methods**](api/overview/event_bus_methods_overview.md). +::: + +### Example + +~~~jsx {5-9} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// subscribe to the "superscript" event +editor.api.on("superscript", () => { + console.log("Superscript was applied"); +}); +// trigger the "superscript" event +editor.api.exec("superscript", {}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md new file mode 100644 index 0000000..7ebbaa3 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md @@ -0,0 +1,45 @@ +--- +sidebar_label: toggle-fullscreen-mode +title: toggle-fullscreen-mode Event +description: You can learn about the toggle-fullscreen-mode event 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. +--- + +# toggle-fullscreen-mode + +### Description + +@short: Triggered when switching the full screen mode on or off + +### Usage + +~~~jsx {} +"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void; +~~~ + +### Parameters + +The callback for the **toggle-fullscreen-mode** event accepts an object with the following property: + +- `mode` - indicates whether fullscreen mode is enabled + +:::info +To manage internal events, you can use the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-9} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// subscribe to the "toggle-fullscreen-mode" event +editor.api.on("toggle-fullscreen-mode", (obj) => { + console.log(obj); + console.log("The full screen mode was changed"); +}); +// enable the full screen mode +editor.api.exec("toggle-fullscreen-mode", { mode: true }); +~~~ + +**Change log:** The event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md new file mode 100644 index 0000000..19a1be9 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md @@ -0,0 +1,45 @@ +--- +sidebar_label: toggle-layout-mode +title: toggle-layout-mode Event +description: You can learn about the toggle-layout-mode event 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. +--- + +# toggle-layout-mode + +### Description + +@short: Triggered whenever the layout mode is switched + +### Usage + +~~~jsx {} +"toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void; +~~~ + +### Parameters + +The callback for the **toggle-layout-mode** event receives an object with these parameters: + +- `mode` - indicates the layout mode. Available options are: `"classic" | "document"` + +:::info +To handle internal events, you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-11} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// subscribe to the "toggle-layout-mode" event +editor.api.on("toggle-layout-mode", (obj) => { + console.log(obj); + console.log("The layout mode was changed"); +}); +// set the "document" layout mode +editor.api.exec("toggle-layout-mode", { mode: "document" }); +~~~ + +**Change log:** The event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md new file mode 100644 index 0000000..ee83763 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md @@ -0,0 +1,45 @@ +--- +sidebar_label: toggle-shortcut-info +title: toggle-shortcut-info Event +description: You can learn about the toggle-shortcut-info event 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. +--- + +# toggle-shortcut-info + +### Description + +@short: Triggered when the shortcut info is toggled + +### Usage + +~~~jsx {} +"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void; +~~~ + +### Parameters + +The callback for the **toggle-shortcut-info** event receives an object with the following property: + +- `mode` - controls the shortcut info display; `true` to show the shortcut info popup, `false` to hide it + +:::info +To manage internal events, you can refer to the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-9} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// subscribe to the "toggle-shortcut-info" event +editor.api.on("toggle-shortcut-info", (obj) => { + console.log(obj); + console.log("The shortcut info was shown"); +}); +// enable the shortcut info +editor.api.exec("toggle-shortcut-info", { mode: true }); +~~~ + +**Change log:** The event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/undo.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/undo.md new file mode 100644 index 0000000..6404c5a --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/undo.md @@ -0,0 +1,36 @@ +--- +sidebar_label: undo +title: undo Event +description: Explore the undo event in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# undo + +### Description + +@short: Triggered when the "Undo" button is clicked in the menubar/toolbar or activated through Event Bus methods. + +### Usage + +~~~jsx {} +"undo": () => boolean | void; +~~~ + +:::info +Inner events can be managed using [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-8} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// listen for the "undo" event +editor.api.on("undo", () => { + console.log("Undo operation was performed"); +}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/events/update-link.md b/i18n/en/docusaurus-plugin-content-docs/current/api/events/update-link.md new file mode 100644 index 0000000..738bba3 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/events/update-link.md @@ -0,0 +1,44 @@ +--- +sidebar_label: update-link +title: update-link Event +description: You can learn about the update-link event 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. +--- + +# update-link + +### Description + +@short: Triggered when a link is updated + +### Usage + +~~~jsx {} +"update-link": ({ id: number, url: string }) => boolean | void; +~~~ + +### Parameters + +The callback for the **update-link** event receives an object containing the following properties: + +- `id` - the identifier of the link +- `url` - the updated URL + +:::info +To manage internal events, you can refer to the [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Example + +~~~jsx {5-9} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// subscribe to the "update-link" event +editor.api.on("update-link", (obj) => { + console.log(obj); + console.log("The following link was updated:" + obj.url); +}); +~~~ + +**Change log:** This event was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/detach.md b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/detach.md new file mode 100644 index 0000000..e63dc00 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/detach.md @@ -0,0 +1,44 @@ +--- +sidebar_label: api.detach() +title: on 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. +--- + +# api.detach() + +### Description + +@short: Enables the removal or detachment of event handlers + +### Usage + +~~~jsx {} +api.detach( tag: string ): void; +~~~ + +### Parameters + +- `tag` - (required) specifies the name of the action tag + +### Events + +:::info +A complete list of RichText internal events is available [**here**](api/overview/events_overview.md) +::: + +### Example + +~~~jsx {6-8,10} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); + +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}, { tag: "track" }); + +editor.api.detach("track"); +~~~ + +**Change log:** The method was updated in v2.0. The `name` and `context` parameters were removed \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/exec.md b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/exec.md new file mode 100644 index 0000000..b769c93 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/exec.md @@ -0,0 +1,46 @@ +--- +sidebar_label: api.exec() +title: exec Method +description: You can learn about the exec 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. +--- + +# api.exec() + +### Description + +@short: This method enables triggering internal events within the editor. + +### Usage + +~~~jsx {} +api.exec( + event: string, + config: object +): void; +~~~ + +### Parameters + +- `event` - (required) the name of the event to trigger +- `config` - (required) an object containing parameters for the event being fired + +### Events + +:::info +You can find the complete list of internal RichText events [**here**](api/overview/events_overview.md) +::: + +### Example + +~~~jsx {5-8} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// apply font size to the text +editor.api.exec("set-font-size", { + fontSize: "16px" +}); +~~~ + +**Change log:** This method was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md new file mode 100644 index 0000000..6ac2ad9 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.getReactiveState() +title: getReactiveState Method +description: You can learn about the getReactiveState 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. +--- + +# api.getReactiveState() + +### Description + +@short: Provides an object containing the reactive properties of RichText. + +### Usage + +~~~jsx {} +api.getReactiveState(): object; +~~~ + +### Returns + +This method returns an object with the following properties: + +~~~jsx {} +{ + cursorState: { subscribe: any }, + defaultStyles {...}, + document {...}, + fullscreen {...}, + history {...}, + layoutMode {...}, + popup {...}, + selection {...} +} +~~~ + +### Example + +~~~jsx {5-7} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// retrieve the Reactive State of RichText +const reactive_state = editor.api.getReactiveState(); +console.log(reactive_state) +~~~ + +**Change log:** This method was introduced in version 2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/get-state.md b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/get-state.md new file mode 100644 index 0000000..9eaab50 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/get-state.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.getState() +title: getState Method +description: You can learn about the getState 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. +--- + +# api.getState() + +### Description + +@short: Provides an object containing the current StateStore properties of RichText. + +### Usage + +~~~jsx {} +api.getState(): object; +~~~ + +### Returns + +This method returns an object with the following properties: + +~~~jsx {} +{ + cursorState: {}, + defaultStyles: {}, + document: {}, + fullscreen: boolean, + history: [] + layoutMode: string, + popup: any, + selection: {} +} +~~~ + +### Example + +~~~jsx {5-7} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// retrieve the current state of RichText +const state = editor.api.getState(); +console.log(state); +~~~ + +**Change log:** The method was added in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/intercept.md b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/intercept.md new file mode 100644 index 0000000..7043390 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/intercept.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.intercept() +title: intercept Method +description: You can learn about the intercept 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. +--- + +# api.intercept() + +### Description + +@short: Provides a way to catch and block internal events before they proceed. + +### Usage + +~~~jsx {} +api.intercept( + event: string, + callback: function +): void; +~~~ + +### Parameters + +- `event` - (required) the name of the event to intercept +- `callback` - (required) a function to execute when the event occurs (arguments depend on the specific event) + +### Events + +:::info +You can find the complete list of RichText internal events [**here**](api/overview/events_overview.md) +::: + +### Example + +~~~jsx {5-10} +// create RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// prevent changing the font size except to "36px" +editor.api.intercept("set-font-size", (obj) => { + if(obj.fontSize !== "36px" ){ + return false; + } +}); +~~~ + +**Change log:** The method was added in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/on.md b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/on.md new file mode 100644 index 0000000..baf63fe --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/on.md @@ -0,0 +1,46 @@ +--- +sidebar_label: api.on() +title: on 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. +--- + +# api.on() + +### Description + +@short: Lets you attach a handler to internal events + +### Usage + +~~~jsx {} +api.on( + event: string, + handler: function +): void; +~~~ + +### Parameters + +- `event` - (required) the event that will trigger the handler +- `handler` - (required) the function to be called when the event fires (the arguments depend on the event) + +### Events + +:::info +You can find the complete list of RichText internal events [**here**](api/overview/events_overview.md) +::: + +### Example + +~~~jsx {5-8} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// listen for the "set-font-size" event +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}); +~~~ + +**Change log:** The method was updated in v2.0. The `context` parameter was removed \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/internal/set-next.md b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/set-next.md new file mode 100644 index 0000000..05a40cf --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/internal/set-next.md @@ -0,0 +1,40 @@ +--- +sidebar_label: api.setNext() +title: setNext Method +description: You can learn about the setNext 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. +--- + +# api.setNext() + +### Description + +@short: This method lets you add an action into the Event Bus sequence. + +### Usage + +~~~jsx {} +api.setNext(next: any): void; +~~~ + +### Parameters + +- `next` - (required) the action to be added into the **Event Bus** sequence + +### Example + +~~~jsx {10-11} +const server = "https://some-backend-url"; +// Assume that you have a custom server service class named someServerService +const someServerService = new ServerDataService(server); + +fetch(server + "/data").then((res) => res.json()).then((data) => { + const editor = new richtext.Richtext("#root", { + value: data + }); + + // Add someServerService into the Event Bus sequence of the widget + editor.api.setNext(someServerService); +}); +~~~ + +**Change log:** The method was added in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/destructor.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/destructor.md new file mode 100644 index 0000000..3a3c4d2 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/destructor.md @@ -0,0 +1,28 @@ +--- +sidebar_label: destructor() +title: destructor Method +description: You can learn about the destructor 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. +--- + +# destructor() + +### Description + +@short: Clears all HTML elements of the RichText component and detaches all associated events. + +### Usage + +~~~jsx {} +destructor(): void; +~~~ + +### Example + +~~~jsx {5-6} +const editor = new richtext.Richtext("#root", { + // configuration properties +}); + +// remove RichText +editor.destructor(); +~~~ \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/get-value.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/get-value.md new file mode 100644 index 0000000..8635baf --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/get-value.md @@ -0,0 +1,43 @@ +--- +sidebar_label: getValue() +title: getValue Method +description: You can learn about the getValue 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. +--- + +# getValue() + +### Description + +@short: Retrieves the current value of the RichText editor + +### Usage + +~~~jsx {} +getValue(encoder?: any): string; +~~~ + +### Parameters + +- `encoder` - (optional) a parser that converts the RichText content into a specific format. Available options include `html` (default) and `text` + +To obtain the desired encoder, use the following: + +```jsx +const toTextEncoder = richtext.text.toText; // text encoder +const toHTMLEncoder = richtext.html.toHTML; // html encoder +``` + +### Example + +~~~jsx {6-8} +const editor = new richtext.Richtext("#root", { + value: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." // sets the default value (HTML format) + // other configuration properties +}); + +const toTextEncoder = richtext.text.toText; +const editor_value = editor.getValue(toTextEncoder); +console.log(editor_value); +~~~ + +**Change log:** The method was updated in v2.0. The `mode` parameter was removed. The `encoder` parameter was added \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/set-config.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/set-config.md new file mode 100644 index 0000000..55fc71b --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/set-config.md @@ -0,0 +1,40 @@ +--- +sidebar_label: setConfig() +title: setConfig Method +description: You can learn about the setConfig 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. +--- + +# setConfig() + +### Description + +@short: Updates the RichText editor with new configuration settings. + +### Usage + +~~~jsx {} +setConfig(config: { [key:any]: any }): void; +~~~ + +### Parameters + +- `config` - (required) an object containing the RichText configuration options. Check out the complete list of properties [here](api/overview/properties_overview.md) + +:::note +When using the `setConfig()` method, any previously set parameters that are not included in the new call will stay unchanged. +::: + +### Example + +~~~jsx {6-8} +const editor = new richtext.Richtext("#root", { + value: "

Some text

", + // other configuration properties +}); + +editor.setConfig({ + layoutMode: "document" +}); +~~~ + +**Change log:** The method was introduced in v2.0 \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/set-locale.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/set-locale.md new file mode 100644 index 0000000..10a81e3 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/set-locale.md @@ -0,0 +1,41 @@ +--- +sidebar_label: setLocale() +title: setLocale Method +description: You can learn about the setLocale 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. +--- + +# setLocale() + +### Description + +@short: Updates the locale settings for RichText + +### Usage + +~~~jsx {} +setLocale(null | locale?: object): void; +~~~ + +### Parameters + +- `null` - (optional) switches back to the default locale (*English*) +- `locale` - (optional) an object containing the new locale data to apply + +:::info +The `setLocale()` method updates the locale used by RichText. Calling it without any arguments (or passing *null*) will revert the locale to the default setting. +::: + +### Example + +~~~jsx {5-6} +const editor = new richtext.Richtext("#root", { + // configuration properties +}); + +// set the locale of RichText to "de" +editor.setLocale(de); +~~~ + +**Change log:** The method was introduced in v2.0 + +**Related articles:** [Localization](guides/localization.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/methods/set-value.md b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/set-value.md new file mode 100644 index 0000000..dc3d98d --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/methods/set-value.md @@ -0,0 +1,44 @@ +--- +sidebar_label: setValue() +title: setValue Method +description: You can learn about the setValue 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. +--- + +# setValue() + +### Description + +@short: Updates the RichText content with a new value + +### Usage + +~~~jsx {} +setValue: (value: string, encoder?: any): void; +~~~ + +### Parameters + +- `value` - (required) the content to be inserted into the RichText +- `encoder` - (optional) a custom parser to encode the RichText content into a specific format. Available formats include: `html` (default) and `text` + +You can obtain the desired encoder as follows: + +```jsx +const fromTextEncoder = richtext.text.fromText; // text encoder +const fromHTMLEncoder = richtext.html.fromHTML; // html encoder +``` + +### Example + +~~~jsx {7-8} +const editor = new richtext.Richtext("#root", { + // configuration properties +}); + +const editor_value = "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." + +const fromTextEncoder = richtext.text.fromText; +editor.setValue(editor_value, fromTextEncoder); +~~~ + +**Change log:** The method was updated in v2.0. The `mode` parameter was removed. The `encoder` parameter was added \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md new file mode 100644 index 0000000..36c5cca --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md @@ -0,0 +1,18 @@ +--- +sidebar_label: Event Bus methods +title: Event Bus Methods +description: Here's an overview of the Internal Event Bus methods in the JavaScript RichText documentation for the DHTMLX JavaScript RichText library. Explore developer guides, API references, try code examples and live demos, and get a free 30-day trial of DHTMLX RichText. +--- + +# Event Bus methods + +This section lists the methods connected to the internal Event Bus within the DHTMLX RichText editor. +These methods are intended for advanced use cases, enabling custom integrations and behaviors through the internal event system. + +| 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) | \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/events_overview.md b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/events_overview.md new file mode 100644 index 0000000..2ce4c92 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/events_overview.md @@ -0,0 +1,45 @@ +--- +sidebar_label: Events overview +title: Events Overview +description: Find a complete overview of events in the DHTMLX JavaScript RichText editor documentation. Explore developer guides, API references, try code samples and live demos, and get a free 30-day evaluation of DHTMLX RichText. +--- + +# Events overview + +Here you'll find a list of all the events triggered by the DHTMLX RichText editor. +These events allow you to enhance functionality, monitor user actions, or initiate custom responses. + +| 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) | \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/main_overview.md b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/main_overview.md new file mode 100644 index 0000000..3e76ca8 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/main_overview.md @@ -0,0 +1,97 @@ +--- +sidebar_label: API overview +title: API Overview +description: Explore the JavaScript RichText API in the DHTMLX JavaScript RichText library documentation. Access developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# API overview + +## RichText constructor + +~~~js +new richtext.RichText("#root", { + // configuration parameters +}); +~~~ + +**Parameters**: + +- an HTML container (such as a CSS selector or a DOM element) +- a configuration object ([see properties](api/overview/properties_overview.md)) + +## RichText methods + +| 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) | + +## 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) | + +## State methods + +| Name | Description | +| ----------------------------------------------|-------------------------------------------| +| [](../internal/get-state.md) | @getshort(../internal/get-state.md) | +| [](../internal/get-reactive-state.md) | @getshort(../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) | + +## 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) | \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md new file mode 100644 index 0000000..eded656 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md @@ -0,0 +1,18 @@ +--- +sidebar_label: Methods overview +title: Methods Overview +description: Find a summary of the JavaScript RichText methods in the DHTMLX library documentation. Explore developer guides, API references, try code examples and live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# Methods overview + +Here’s a quick rundown of the main methods you’ll find in the DHTMLX RichText editor. +This guide helps you get a clear idea of what each method does and points you to detailed descriptions and examples. + +| 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) | \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md new file mode 100644 index 0000000..84f2a4e --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md @@ -0,0 +1,21 @@ +--- +sidebar_label: Properties overview +title: Properties Overview +description: Explore the Properties overview for JavaScript RichText in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, sample code, live demos, and get a free 30-day trial of DHTMLX RichText. +--- + +# Properties overview + +Here you'll find a list of all the configuration properties available when setting up the DHTMLX RichText editor. +These options let you customize the layout, toolbar, content, localization, and more. + +| 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) | \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md new file mode 100644 index 0000000..81c5166 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md @@ -0,0 +1,15 @@ +--- +sidebar_label: State methods +title: State Methods +description: Explore an overview of Internal State methods for JavaScript RichText in the DHTMLX JavaScript RichText library documentation. Check out developer guides, API references, try code samples and live demos, and download a free 30-day trial of DHTMLX RichText. +--- + +# State methods + +Here you'll find methods to access and manage the internal state of the DHTMLX RichText editor. +These methods come in handy for debugging, working with reactive frameworks, or creating advanced custom features. + +| Name | Description | +| ----------------------------------------------------------- | ------------------------------------------------ | +| [](../internal/get-reactive-state.md) | @getshort(../internal/get-reactive-state.md) | +| [](../internal/get-state.md) | @getshort(../internal/get-state.md) | \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/configuration.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/configuration.md new file mode 100644 index 0000000..337000c --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/guides/configuration.md @@ -0,0 +1,291 @@ +--- +sidebar_label: Configuration +title: Configuration +description: You can learn about the configuration 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. +--- + +# Configuration + +RichText can be set up to look and work the way you want through its API. The available options let you: + +- Show or hide the **menubar** with the [`menubar`](api/config/menubar.md) property +- Set up the **toolbar** using the [`toolbar`](api/config/toolbar.md) property +- Turn on **fullscreen mode** with the [`fullscreenMode`](api/config/fullscreen-mode.md) property +- Switch the **layout** between "classic" and "document" modes using the [`layoutMode`](api/config/layout-mode.md) property +- Set an **initial value** with the [`value`](api/config/value.md) property +- Choose an **initial locale** using the [`locale`](api/config/locale.md) property +- Apply **initial styles** with the [`defaultStyles`](api/config/default-styles.md) property + +## Layout modes + +RichText editor comes with two layout modes to pick from, so you can work in the environment that suits your content: + +- **"classic"** + +import classic_mode from '@site/static/img/richtext/classic_mode.png'; + +Classic mode + +- **"document"** + +import document_mode from '@site/static/img/richtext/document_mode.png'; + +Document mode + +To pick a mode, just set the [`layoutMode`](api/config/layout-mode.md) property in the RichText config when you initialize the component: + +~~~jsx +const editor = new richtext.Richtext("#root", { + layoutMode: "document" +}); +~~~ + +## Toolbar + +The RichText toolbar is made up of several groups of controls, and you can change them to match what you need. + +### Default toolbar controls + +You can use these buttons and controls in the RichText toolbar: + +| Button | Description | +|---------------------|-----------------------------------------------------------------------------| +| `undo` | Reverts the most recent user action | +| `redo` | Reapplies the previously undone action | +| `style` | Allows selection of text styles (e.g., headings, paragraph, etc.) | +| `font-family` | Changes the font of the selected text | +| `font-size` | Adjusts the size of the selected text | +| `bold` | Applies bold formatting to the selected text | +| `italic` | Applies italic formatting to the selected text | +| `underline` | Underlines the selected text | +| `strike` | Applies strikethrough formatting | +| `subscript` | Formats the text as subscript | +| `superscript` | Formats the text as superscript | +| `text-color` | Changes the text color | +| `background-color` | Changes the background (highlight) color of the text | +| `align` | Sets text alignment (left, center, right, justified) | +| `indent` | Increases paragraph indentation | +| `outdent` | Decreases paragraph indentation | +| `line-height` | Adjusts the line spacing (line height) | +| `quote` | Formats the text as a blockquote | +| `bulleted-list` | Creates a bulleted list | +| `numbered-list` | Creates a numbered list | +| `link` | Inserts or edits a hyperlink | +| `image` | Inserts an image | +| `line` | Inserts a horizontal line | +| `clear` | Removes all formatting from the selected text | +| `print` | Opens the print dialog | +| `fullscreen` | Toggles fullscreen mode | +| `mode` | Switches between 2 view modes: Classic/ Document | +| `shortcuts` | Displays a list of available keyboard shortcuts | +| `separator` | Adds a visual separator between controls | + +The toolbar layout is set up with the [`toolbar`](api/config/toolbar.md) property, which is just an array of strings naming the controls you want. + +~~~jsx {2-36} +new richtext.Richtext("#root", { + toolbar: [ + "undo", + "redo", + "separator", + "style", + "separator", + "font-family", + "font-size", + "separator", + "bold", + "italic", + "underline", + "strike", + "separator", + "text-color", + "background-color", + "separator", + "align", + "line-height", + "outdent", + "indent", + "separator", + "bulleted-list", + "numbered-list", + "quote", + "separator", + "link", + "image", + "separator", + "clear", + "separator", + "fullscreen", + "mode" + // other buttons + ], + // other configuration properties +}); +~~~ + +**Related sample:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### Custom toolbar controls + +If you want to add your own controls, you can include objects in the [`toolbar`](api/config/toolbar.md) property with these options: + +- `type` - (required) sets the custom control type. You can use: `"button"`, `"richselect"`, `"colorpicker"` +- `id` - (optional) a custom control ID (shouldn’t clash with built-in control IDs) +- `label` - (optional) a button label (can be used with an icon) +- `tooltip` - (optional) a tooltip shown on hover (if not set, uses the "label" value) +- `css` - (optional) a CSS class name for the control (default supported: wx-primary, wx-secondary) +- `handler` - (optional) a callback function that runs when the button is clicked + +~~~jsx {6-32} +new richtext.Richtext("#root", { + toolbar: [ + // buttons (strings represent buttons only) + "bold", + "italic", + // predefined buttons (user cannot define any other options for these (no labels, tooltips, options, etc.), so only ({ type: "button", id: string }) + { + type: "button", + id: "fullscreen", + }, + // user must specify the correct type if they want to use a predefined control (e.g. richselect/colorpicker) + // non-matching types will be ignored (not added to the toolbar) + { + type: "richselect", // type: "button" - incorrect, will be ignored + id: "mode", + }, + // custom buttons (supported options are below) + // user can only define custom buttons (no richselect/colorpicker support atm) + { + type: "button", + id: "some", + label: "Some", + handler: () => {/* custom logic */} + }, + { + type: "button", + id: "other", + icon: "wxo-help", + label: "Other", + tooltip: "Some tooltip", + handler: () => {/* custom logic */} + } + ], + // other configuration properties +}); +~~~ + +**Related sample:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### Hide Toolbar + +To hide the toolbar, just set the [`toolbar`](api/config/toolbar.md) property to `false` like this: + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false, + // other configuration properties +}); +~~~ + +## Default styles + +Default style values for certain block types in the editor can be set with the [`defaultStyles`](api/config/default-styles.md) property. + +~~~jsx {} +defaultStyles?: boolean | { + "*"?: { // affects all blocks, allowing you to set common properties for all of these blocks + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + p?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + blockquote?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h1?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h2?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h3?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h4?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h5?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h6?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + } +}; +~~~ + +The `defaultStyles` property doesn’t actually apply CSS to the blocks—it just sets up the style values. You’ll still need to add CSS styles separately: + +```html title="index.html" +
+``` + +```jsx {2-9} title="index.js" +const editor = new richtext.Richtext("#root", { + defaultStyles: { + h2: { + "font-family": "Roboto", + "font-size": "28px", + color: "purple", + background: "#FFC0CB" + } + } +}); +``` + +```css title="index.css" +#root h2 { + font-family: Roboto; + font-size: 28px; + color: purple; + background: #FFC0CB; +} +``` + +Here, all `h2` blocks get the "Roboto" font-family, a font-size of 28px, and the foreground and background colors are updated as well. The CSS rules are applied to the `h2` blocks. + +**Related sample:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/initialization.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/initialization.md new file mode 100644 index 0000000..f0d148b --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/guides/initialization.md @@ -0,0 +1,63 @@ +--- +sidebar_label: Initialization +title: Initialization +description: You can learn about the initialization 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. +--- + +# Initialization + +Here's a simple walkthrough for setting up RichText on your page, so you can start using the RichText editor in your app. Just follow these steps to get things running: + +1. [Include the RichText source files on a page](#including-source-files). +2. [Create a container for RichText](#creating-container). +3. [Initialize RichText with the object constructor](#initializing-richtext). + +## Including source files + +First, [download the package](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml) and unpack it somewhere in your project folder. + +To use RichText, add these two files to your page: + +- *richtext.js* +- *richtext.css* + +Be sure to use the correct paths to where you placed these files: + +~~~html title="index.html" + + +~~~ + +## Creating container + +Next, set up a container for RichText. Give it an ID, like *"root"*: + +~~~jsx title="index.html" +
+~~~ + +## Initializing RichText + +Now, use the `richtext.Richtext` constructor to create RichText. This constructor needs two things: + +- the HTML container (use the ID you set) +- an object with configuration options. [Check out the full list here](#configuration-properties) + +~~~jsx title="index.html" +// create RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +~~~ + +### Configuration properties + +:::note +You can see all the available properties for **RichText** [**here**](api/overview/properties_overview.md). +::: + +## Example + +Here's a quick example showing how to set up **RichText** with some initial data: + + \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md new file mode 100644 index 0000000..db91556 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md @@ -0,0 +1,304 @@ +--- +sidebar_label: Integration with Angular +title: Integration with Angular +description: You can learn about the integration with Angular 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. +--- + +# Integration with Angular + +:::tip +It's helpful to be familiar with the main ideas and patterns of **Angular** before jumping in here. For a quick refresher, check out the [**Angular documentation**](https://v17.angular.io/docs). +::: + +DHTMLX RichText works well with **Angular**. There are code samples available showing how to use DHTMLX RichText in an **Angular** project. For more details, take a look at the [**Example on GitHub**](https://github.com/DHTMLX/angular-richtext-demo). + +## Creating a project + +:::info +Before starting a new project, make sure [**Angular CLI**](https://v17.angular.io/cli) and [**Node.js**](https://nodejs.org/en/) are installed. +::: + +To set up a new **my-angular-richtext-app** project using Angular CLI, just run: + +~~~json +ng new my-angular-richtext-app +~~~ + +:::note +To keep things simple while following this guide, turn off Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating your Angular app! +::: + +This command sets up everything needed, so there’s no need for any extra installation steps. + +### Installation of dependencies + +Move into your new app’s directory: + +~~~json +cd my-angular-richtext-app +~~~ + +Install the dependencies and start the development server with [**yarn**](https://yarnpkg.com/): + +~~~json +yarn +yarn start +~~~ + +The app will be up and running locally (for example, at `http://localhost:3000`). + +## Creating RichText + +Next, grab the DHTMLX RichText source code. Stop the app for a moment and install the RichText package. + +### Step 1. Package installation + +Download the [**trial RichText package**](how_to_start.md#installing-richtext-via-npm-or-yarn) and follow the steps in the README file. Just a heads-up: the trial version is good for 30 days. + +### Step 2. Component creation + +To add RichText to your app, create a new Angular component. Make a **richtext** folder in **src/app/**, then add a new file called **richtext.component.ts**. + +#### Import source files + +Open **richtext.component.ts** and bring in the RichText source files. Here’s how the import path should look: + +- For the PRO version installed from a local folder: + +~~~jsx +import { Richtext} from 'dhx-richtext-package'; +~~~ + +- For the trial version: + +~~~jsx +import { Richtext} from '@dhx/trial-richtext'; +~~~ + +This guide shows how to set up the **trial** version. + +#### Set containers and initialize the Richtext + +To show RichText on the page, set up a container and initialize the component with its constructor: + +~~~jsx {} title="richtext.component.ts" +import { Richtext} from '@dhx/trial-richtext'; +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", // a template name used in the "app.component.ts" file as + styleUrls: ["./richtext.component.css"], // include the css file + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + // initialize container for RichText + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: Richtext; + + ngOnInit() { + // initialize the RichText component + this._editor = new Richtext(this.richtext_container.nativeElement, {}); + } + + ngOnDestroy(): void { + this._editor.destructor(); // destruct RichText + } +} +~~~ + +#### Adding styles + +To make sure RichText looks right, add the needed styles. Create a **richtext.component.css** file in **src/app/richtext/** and include these styles for RichText and its container: + +~~~css title="richtext.component.css" +/* import RichText styles */ +@import "@dhx/trial-richtext/dist/richtext.css"; + +/* specify styles for initial page */ +html, +body{ + height: 100%; + padding: 0; + margin: 0; +} + +/* specify styles for RichText container */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* specify styles for RichText widget */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### Loading data + +To load data into RichText, just provide a data set. Make a **data.ts** file in **src/app/richtext/** and add some sample data: + +~~~jsx {} title="data.ts" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +Next, open ***richtext.component.ts***. Import the data file and set the data properties in the RichText configuration inside the `ngOnInit()` method, like this: + +~~~jsx {} title="richtext.component.ts" +import { Richtext} from '@dhx/trial-richtext'; +import { getData } from "./data"; // import data +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", + styleUrls: ["./richtext.component.css"], + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: RichText; + + ngOnInit() { + const { value } = getData(); // initialize data property + this._editor = new Richtext(this.richtext_container.nativeElement, { + value + // other configuration properties + }); + } + + ngOnDestroy(): void { + this._editor.destructor(); + } +} +~~~ + +Alternatively, you can use the [`setValue()`](api/methods/set-value.md) method in `ngOnInit()` to load data into RichText. + +~~~jsx {} title="richtext.component.ts" +import { Richtext} from '@dhx/trial-richtext'; +import { getData } from "./data"; // import data +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", + styleUrls: ["./richtext.component.css"], + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: RichText; + + ngOnInit() { + const { value } = getData(); // initialize data property + this._editor = new Richtext(this.richtext_container.nativeElement, { + // other configuration properties + }); + + // apply the data via the setValue() method + this._editor.setValue({ value }); + } + + ngOnDestroy(): void { + this._editor.destructor(); + } +} +~~~ + +At this point, the RichText component is set up and ready. When it’s added to the page, RichText will initialize with the provided data. You can also add any configuration options you need. For the full list of properties, check out the [RichText API docs](api/overview/main_overview.md). + +#### Handling events + +Whenever something happens in RichText, it fires an event. You can listen for these events to trigger your own code. The [full list of events](api/overview/events_overview.md) is available. + +Edit the **richtext.component.ts** file and update the `ngOnInit()` method like this: + +~~~jsx {} title="richtext.component.ts" +// ... +ngOnInit() { + this._editor = new Richtext(this.richtext_container.nativeElement, {}); + + this._editor.api.on("print", () => { + console.log("The document is printing"); + }); +} + +ngOnDestroy(): void { + this._editor.destructor(); +} +~~~ + +### Step 3. Adding RichText into the app + +To use the ***RichTextComponent*** in your app, open ***src/app/app.component.ts*** and replace the default code with: + +~~~jsx {} title="app.component.ts" +import { Component } from "@angular/core"; + +@Component({ + selector: "app-root", + template: `` +}) +export class AppComponent { + name = ""; +} +~~~ + +Now, create ***app.module.ts*** in ***src/app/*** and add *RichTextComponent* as shown below: + +~~~jsx {} title="app.module.ts" +import { NgModule } from "@angular/core"; +import { BrowserModule } from "@angular/platform-browser"; + +import { AppComponent } from "./app.component"; +import { RichTextComponent } from "./richtext/richtext.component"; + +@NgModule({ + declarations: [AppComponent, RichTextComponent], + imports: [BrowserModule], + bootstrap: [AppComponent] +}) +export class AppModule {} +~~~ + +The last thing to do is update ***src/main.ts*** with the following code: + +~~~jsx title="main.ts" +import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; +import { AppModule } from "./app/app.module"; +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); +~~~ + +Now you can start the app and see RichText loaded with data on the page. + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +That's all it takes to get DHTMLX RichText working with Angular. Feel free to tailor the code to your own needs. A complete example can be found on [**GitHub**](https://github.com/DHTMLX/angular-richtext-demo). diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_react.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_react.md new file mode 100644 index 0000000..aafc539 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_react.md @@ -0,0 +1,257 @@ +--- +sidebar_label: Integration with React +title: Integration with React +description: You can learn about the integration with React 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. +--- + +# Integration with React + +:::tip +It's good to have some experience with [**React**](https://react.dev) before jumping into this guide. If you need a quick refresher, check out the [**React documentation**](https://react.dev/learn). +::: + +DHTMLX RichText works well with **React**. There are code samples showing how to use DHTMLX RichText in React apps. The [**Example on GitHub**](https://github.com/DHTMLX/react-richtext-demo) has more details. + +## Creating a project + +:::info +Before starting a new project, make sure you have [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/) installed. +::: + +You can set up a basic **React** project or use **React with Vite**. In this example, the project is called **my-react-richtext-app**: + +~~~json +npx create-react-app my-react-richtext-app +~~~ + +### Installation of dependencies + +Move into your new app folder: + +~~~json +cd my-react-richtext-app +~~~ + +Next, install the dependencies and start the development server using your preferred package manager: + +- For [**yarn**](https://yarnpkg.com/): + +~~~json +yarn +yarn start +~~~ + +- For [**npm**](https://www.npmjs.com/): + +~~~json +npm install +npm run dev +~~~ + +The app will be available on localhost (like `http://localhost:3000`). + +## Creating RichText + +Now it's time to add the DHTMLX RichText code. First, stop the app and install the RichText package. + +### Step 1. Package installation + +Download the [**trial RichText package**](how_to_start.md#installing-richtext-via-npm-or-yarn) and follow the steps in the README file. The trial version of RichText is available for 30 days. + +### Step 2. Component creation + +Next, create a React component to add RichText to your app. In the ***src/*** directory, create a new file called ***Richtext.jsx***. + +#### Importing source files + +Open ***Richtext.jsx*** and import the RichText files. Keep in mind: + +- If you have the PRO version and are installing RichText from a local folder, your imports should look like this: + +~~~jsx title="Richtext.jsx" +import { Richtext} from 'dhx-richtext-package'; +import 'dhx-richtext-package/dist/richtext.css'; +~~~ + +- For the trial version, use these imports: + +~~~jsx title="Richtext.jsx" +import { Richtext} from '@dhx/trial-richtext'; +import "@dhx/trial-richtext/dist/richtext.css"; +~~~ + +This guide uses the **trial** version for demonstration. + +#### Setting containers and adding Richtext + +To show RichText on the page, set up a container and initialize the component with its constructor: + +~~~jsx {} title="Richtext.jsx" +import { useEffect, useRef } from "react"; +import { Richtext} from '@dhx/trial-richtext'; +import '@dhx/trial-richtext/dist/richtext.css'; // include RichText styles + +export default function RichTextComponent(props) { + let richtext_container = useRef(); // initialize container for RichText + + useEffect(() => { + // initialize the RichText component + const editor = new Richtext(richtext_container.current, {}); + + return () => { + editor.destructor(); // destruct RichText + }; + }, []); + + return
+
+
+} +~~~ + +#### Adding styles + +You'll need to add some CSS so RichText displays correctly. Update the main CSS file with these styles: + +~~~css title="index.css" +/* specify styles for initial page */ +html, +body, +#root { + height: 100%; + padding: 0; + margin: 0; +} + +/* specify styles for RichText container */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* specify styles for RichText widget */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### Loading data + +To load data into RichText, prepare a data set. Create a file called ***data.js*** in the ***src/*** folder and add some content: + +~~~jsx {} title="data.js" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +Next, open ***App.js*** and import the data. Pass it to your `` component as a **prop**: + +~~~jsx {2,5-6} title="App.js" +import RichText from "./Richtext"; +import { getData } from "./data"; + +function App() { + const { value } = getData(); + return ; +} + +export default App; +~~~ + +Now, in ***Richtext.jsx***, use the incoming **prop** in the RichText configuration: + +~~~jsx {} title="Richtext.jsx" +import { useEffect, useRef } from "react"; +import { Richtext} from "@dhx/trial-richtext"; +import "@dhx/trial-richtext/dist/richtext.css"; + +export default function RichTextComponent(props) { + let richtext_container = useRef(); + + useEffect(() => { + const editor = new Richtext(richtext_container.current, { + value: props.value, // apply value + // other configuration properties + }); + + return () => { + editor.destructor(); + }; + }, []); + + return
+
+
+} +~~~ + +If you want, you can also use the [`setValue()`](api/methods/set-value.md) method inside `useEffect()` to load data: + +~~~jsx {} title="Richtext.jsx" +import { useEffect, useRef } from "react"; +import { Richtext} from "@dhx/trial-richtext"; +import "@dhx/trial-richtext/dist/richtext.css"; + +export default function RichTextComponent(props) { + let richtext_container = useRef(); + + let value = props.value; + + useEffect(() => { + const editor = new Richtext(richtext_container.current, { + // configuration properties + }); + + editor.setValue(value); + + return () => { + editor.destructor(); + }; + }, []); + + return
+
+
+} +~~~ + +At this point, the RichText component is set up. When it's rendered, it will display the RichText editor with your data. You can adjust the configuration as needed. The [RichText API docs](api/overview/main_overview.md) have the full list of available options. + +#### Handling events + +RichText triggers events when users interact with it. You can use these events to run your own code. The [full list of events](api/overview/events_overview.md) is available in the docs. + +To handle an event, update ***Richtext.jsx*** like this: + +~~~jsx {} title="Richtext.jsx" +// ... +useEffect(() => { + const editor = new Richtext(richtext_container.current, {}); + + editor.api.on("print", () => { + console.log("The document is printing"); + }); + + return () => { + editor.destructor(); + }; +}, []); +// ... +~~~ + +Now, you can start the app to see RichText with your data on the page. + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +That's it for integrating DHTMLX RichText with React. You can tweak the code to fit your needs. For a more advanced example, check out [**GitHub**](https://github.com/DHTMLX/react-richtext-demo). diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md new file mode 100644 index 0000000..b0207aa --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md @@ -0,0 +1,267 @@ +--- +sidebar_label: Integration with Svelte +title: Integration with Svelte +description: You can learn about the integration with Svelte 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. +--- + +# Integration with Svelte + +:::tip +It's helpful to already know the basics of **Svelte** for this guide. If you need a quick refresher, check out the [**Svelte documentation**](https://svelte.dev/). +::: + +DHTMLX RichText works well with **Svelte**. There are some handy code examples showing how to use DHTMLX RichText in Svelte apps. More details and examples are available in the [**Example on GitHub**](https://github.com/DHTMLX/svelte-richtext-demo). + +## Creating a project + +:::info +Before starting a new project, make sure you have [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/) installed. +::: + +There are a couple of ways to set up a **Svelte** project: + +- Use [**SvelteKit**](https://kit.svelte.dev/) + +or + +- Go with **Svelte and Vite** (without SvelteKit): + +~~~json +npm create vite@latest +~~~ + +You can find more details in this [related article](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit). + +### Installation of dependencies + +Let's call the project **my-svelte-richtext-app** and move into its directory: + +~~~json +cd my-svelte-richtext-app +~~~ + +Next, install the dependencies and start the development server using your package manager of choice: + +- For [**yarn**](https://yarnpkg.com/): + +~~~json +yarn +yarn start +~~~ + +- For [**npm**](https://www.npmjs.com/): + +~~~json +npm install +npm run dev +~~~ + +The app should now be running locally (for example, at `http://localhost:3000`). + +## Creating RichText + +You'll need the DHTMLX RichText source code. Before going further, stop the app and install the RichText package. + +### Step 1. Package installation + +Download the [**trial RichText package**](how_to_start.md#installing-richtext-via-npm-or-yarn) and follow the steps in the README file. The trial version works for 30 days. + +### Step 2. Component creation + +Now it's time to make a Svelte component for RichText. In the ***src/*** directory, create a new file called ***Richtext.svelte***. + +#### Importing source files + +In ***Richtext.svelte***, import the RichText source files. Here’s how the imports look depending on your version: + +- For the PRO version installed locally, use these paths: + +~~~html title="Richtext.svelte" + +~~~ + +- For the trial version, use these imports: + +~~~html title="Richtext.svelte" + + +
+
+
+~~~ + +#### Loading data + +To load data into RichText, you'll need a data set. Create a ***data.js*** file in the ***src/*** directory and add some sample data: + +~~~jsx {} title="data.ts" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +Then, in ***App.svelte***, import the data and pass it as a prop to your `` component: + +~~~html {} title="App.svelte" + + + +~~~ + +Now, update ***Richtext.svelte*** to use the passed **props** in the RichText configuration: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +Alternatively, you can use the [`setValue()`](api/methods/set-value.md) method within Svelte’s `onMount()` to load the data: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +At this point, the RichText component is set up and will load with your data when added to the page. You can tweak the configuration as needed. For more options, check out the [RichText API docs](api/overview/main_overview.md). + +#### Handling events + +RichText emits events when actions happen, and you can listen to these to run your own code. The [full list of events](api/overview/events_overview.md) is available for reference. + +To handle events, update ***Richtext.svelte*** like this in the `onMount()` method: + +~~~html {} title="Richtext.svelte" + + +// ... +~~~ + +### Step 3. Adding RichText into the app + +To use the component in your app, open **App.svelte** and replace the default content with: + +~~~html title="App.svelte" + + + +~~~ + +Now, start up the app and you’ll see RichText loaded with your data on the page. + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +That’s all there is to integrating DHTMLX RichText with Svelte. Feel free to adjust the code to fit your needs. If you want to check out a more advanced example, it’s available on [**GitHub**](https://github.com/DHTMLX/svelte-richtext-demo). diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md new file mode 100644 index 0000000..ffb3335 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md @@ -0,0 +1,283 @@ +--- +sidebar_label: Integration with Vue +title: Integration with Vue +description: You can learn about the integration with Vue 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. +--- + +# Integration with Vue + +:::tip +It's helpful to have a basic understanding of [**Vue**](https://vuejs.org/) before diving into this documentation. If you need a refresher, check out the [**Vue 3 documentation**](https://vuejs.org/guide/introduction.html#getting-started). +::: + +DHTMLX RichText works well with **Vue**. There are code samples available that show how to use DHTMLX RichText with **Vue 3**. For more details, take a look at the [**Example on GitHub**](https://github.com/DHTMLX/vue-richtext-demo). + +## Creating a project + +:::info +Before starting a new project, make sure [**Node.js**](https://nodejs.org/en/) is installed. +::: + +To set up a **Vue** project, use this command: + +~~~json +npm create vue@latest +~~~ + +This runs `create-vue`, the official tool for scaffolding **Vue** projects. More info is available in the [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application). + +For this guide, the project will be called **my-vue-richtext-app**. + +### Installation of dependencies + +Switch into the app directory: + +~~~json +cd my-vue-richtext-app +~~~ + +Install dependencies and start the development server using your preferred package manager: + +- For [**yarn**](https://yarnpkg.com/): + +~~~jsx +yarn +yarn start // or yarn dev +~~~ + +- For [**npm**](https://www.npmjs.com/): + +~~~json +npm install +npm run dev +~~~ + +The app should be available on your localhost (for example, `http://localhost:3000`). + +## Creating RichText + +Next, you'll need the DHTMLX RichText source code. Stop the app for now and install the RichText package. + +### Step 1. Package installation + +Download the [**trial RichText package**](how_to_start.md#installing-richtext-via-npm-or-yarn) and follow the instructions in the README file. The trial version is available for 30 days. + +### Step 2. Component creation + +Create a Vue component to add RichText to your app. Make a new file in the ***src/components/*** directory and name it ***Richtext.vue***. + +#### Import source files + +Open ***Richtext.vue*** and import the RichText source files. Keep in mind: + +- If you're using the PRO version and installed RichText from a local folder, your imports should look like this: + +~~~html title="Richtext.vue" + +~~~ + +- For the trial version, the imports are: + +~~~html title="Richtext.vue" + +~~~ + +This tutorial shows how to set up the **trial** version of RichText. + +#### Setting containers and adding Richtext + +To show RichText on the page, set up a container and initialize the component with its constructor: + +~~~html {} title="Richtext.vue" + + + +~~~ + +#### Adding styles + +To make sure RichText displays properly, add some key styles for RichText and its container in your main CSS file: + +~~~css title="main.css" +/* specify styles for initial page */ +html, +body, +#app { /* make sure that you use the #app root container */ + height: 100%; + padding: 0; + margin: 0; +} + +/* specify styles for RichText container */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* specify styles for RichText widget */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### Loading data + +To load data into RichText, create a data set. You can add a ***data.js*** file in the ***src/*** directory with something like: + +~~~jsx {} title="data.ts" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +Then, in ***App.vue***, import the data and initialize it with the `data()` method. Pass the data to the `` component as **props**: + +~~~html {} title="App.vue" + + + +~~~ + +Now, go back to ***Richtext.vue*** and use the **props** in the RichText configuration: + +~~~html {} title="Richtext.vue" + + + +~~~ + +Alternatively, you can use the [`setValue()`](api/methods/set-value.md) method inside the `mounted()` hook to load data into RichText: + +~~~html {} title="Richtext.vue" + + + +~~~ + +At this point, the RichText component is set up and ready. When it's added to the page, it will initialize RichText with your data. You can adjust the configuration as needed. The full list of available properties is in the [RichText API docs](api/overview/main_overview.md). + +#### Handling events + +When actions happen in RichText, events are triggered. These are useful for running custom code in response. The [full list of events](api/overview/events_overview.md) has more details. + +In ***Richtext.vue***, you can update the `mounted()` method to handle events: + +~~~html {} title="Richtext.vue" + + +// ... +~~~ + +Now, start the app and you'll see RichText with your data on the page. + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +That's how DHTMLX RichText can be integrated with Vue. Feel free to tweak the code to fit your needs. For a more advanced example, check out [**GitHub**](https://github.com/DHTMLX/vue-richtext-demo). diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/localization.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/localization.md new file mode 100644 index 0000000..8b046a8 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/guides/localization.md @@ -0,0 +1,474 @@ +--- +sidebar_label: Localization +title: Localization +description: You can learn about the localization 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. +--- + +# Localization + +All labels in the JavaScript RichText interface can be localized. To do this, it's possible to create a new locale or tweak an existing one, then set it for RichText. + +## Default locale + +By default, the interface uses the **English** locale: + +~~~jsx +const en = { + richtext: { + // buttons/actions + Undo: "Undo", + Redo: "Redo", + Style: "Style", + "Font family": "Font family", + "Font size": "Font size", + Bold: "Bold", + Italic: "Italic", + Underline: "Underline", + Strikethrough: "Strikethrough", + Subscript: "Subscript", + Superscript: "Superscript", + "Text color": "Text color", + "Background color": "Background color", + "Left align": "Left align", + "Center align": "Center align", + "Right align": "Right align", + Justify: "Justify", + "Line height": "Line height", + Outdent: "Outdent", + Indent: "Indent", + "Insert link": "Insert link", + "Insert image": "Insert image", + "Insert horizontal line": "Insert horizontal line", + "Clear formatting": "Clear formatting", + Print: "Print", + "Fullscreen mode": "Fullscreen mode", + "Layout mode": "Layout mode", + "Classic mode": "Classic mode", + "Document mode": "Document mode", + + // menubar exclusive options + File: "File", + Import: "Import", + Export: "Export", + Edit: "Edit", + Cut: "Cut", + Copy: "Copy", + Paste: "Paste", + View: "View", + Insert: "Insert", + Format: "Format", + Help: "Help", + New: "New", + Link: "Link", + Image: "Image", + "Horizontal line": "Horizontal line", + Text: "Text", + "Heading 1": "Heading 1", + "Heading 2": "Heading 2", + "Heading 3": "Heading 3", + "Heading 4": "Heading 4", + "Heading 5": "Heading 5", + "Heading 6": "Heading 6", + Align: "Align", + Left: "Left", + Center: "Center", + Right: "Right", + Justified: "Justified", + "Keyboard shortcuts": "Keyboard shortcuts", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "Operation failed. Please check your browser's clipboard permissions.", + + // block style dropdown + Heading: "Heading", + Quote: "Quote", + Paragraph: "Paragraph", + "Text style": "Text style", + Lists: "Lists", + + normal: "normal", + default: "default", + + // lists + "Bulleted list": "Bulleted list", + "Numbered list": "Numbered list", + + // links + "Enter text to display": "Enter text to display", + "Paste link": "Paste link", + "Link copied to clipboard": "Link copied to clipboard", + + // shortcut groups + "Text formatting": "Text formatting", + Editing: "Editing", + "Special actions": "Special actions", + + // colors + Black: "Black", + Gray: "Gray", + White: "White", + Red: "Red", + Orange: "Orange", + Yellow: "Yellow", + Lime: "Lime", + Green: "Green", + Teal: "Teal", + Cyan: "Cyan", + Blue: "Blue", + Indigo: "Indigo", + Magenta: "Magenta", + + // shades + "Light gray": "Light gray", + "Medium gray": "Medium gray", + "Dark gray": "Dark gray", + "Light red": "Light red", + "Medium red": "Medium red", + "Dark red": "Dark red", + "Light orange": "Light orange", + "Medium orange": "Medium orange", + "Dark orange": "Dark orange", + "Light yellow": "Light yellow", + "Medium yellow": "Medium yellow", + "Dark yellow": "Dark yellow", + "Light lime": "Light lime", + "Medium lime": "Medium lime", + "Dark lime": "Dark lime", + "Light green": "Light green", + "Medium green": "Medium green", + "Dark green": "Dark green", + "Light teal": "Light teal", + "Medium teal": "Medium teal", + "Dark teal": "Dark teal", + "Light cyan": "Light cyan", + "Medium cyan": "Medium cyan", + "Dark cyan": "Dark cyan", + "Light blue": "Light blue", + "Medium blue": "Medium blue", + "Dark blue": "Dark blue", + "Light indigo": "Light indigo", + "Medium indigo": "Medium indigo", + "Dark indigo": "Dark indigo", + "Light magenta": "Light magenta", + "Medium magenta": "Medium magenta", + "Dark magenta": "Dark magenta" + } +}; +~~~ + +:::info +Along with the default ***en*** locale (*English*), RichText also comes with built-in ***de*** (*German*) and ***cn*** (*Chinese*) locales. +::: + +
+de locale + +~~~jsx +const de = { + richtext: { + // buttons/actions + Undo: "Rückgängig", + Redo: "Wiederholen", + Style: "Stil", + "Font family": "Schriftart", + "Font size": "Schriftgröße", + Bold: "Fett", + Italic: "Kursiv", + Underline: "Unterstrichen", + Strikethrough: "Durchgestrichen", + Subscript: "Tiefgestellt", + Superscript: "Hochgestellt", + "Text color": "Textfarbe", + "Background color": "Hintergrundfarbe", + "Left align": "Linksbündig", + "Center align": "Zentriert", + "Right align": "Rechtsbündig", + Justify: "Blocksatz", + "Line height": "Zeilenhöhe", + Outdent: "Einzug verringern", + Indent: "Einzug erhöhen", + "Insert link": "Link einfügen", + "Insert image": "Bild einfügen", + "Insert horizontal line": "Horizontale Linie einfügen", + "Clear formatting": "Formatierung löschen", + Print: "Drucken", + "Fullscreen mode": "Vollbildmodus", + "Layout mode": "Layout-Modus", + "Classic mode": "Klassischer Modus", + "Document mode": "Dokumentenmodus", + + // menubar exclusive options + File: "Datei", + Import: "Importieren", + Export: "Exportieren", + Edit: "Bearbeiten", + Cut: "Ausschneiden", + Copy: "Kopieren", + Paste: "Einfügen", + View: "Ansicht", + Insert: "Einfügen", + Format: "Format", + Help: "Hilfe", + New: "Neu", + Link: "Link", + Image: "Bild", + "Horizontal line": "Horizontale Linie", + Text: "Text", + "Heading 1": "Überschrift 1", + "Heading 2": "Überschrift 2", + "Heading 3": "Überschrift 3", + "Heading 4": "Überschrift 4", + "Heading 5": "Überschrift 5", + "Heading 6": "Überschrift 6", + Align: "Ausrichten", + Left: "Links", + Center: "Zentriert", + Right: "Rechts", + Justified: "Blocksatz", + "Keyboard shortcuts": "Tastenkürzel", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "Operation fehlgeschlagen. Bitte überprüfen Sie die Berechtigungen für die Zwischenablage Ihres Browsers.", + + // block style dropdown + Heading: "Überschrift", + Quote: "Zitat", + Paragraph: "Absatz", + "Text style": "Textstil", + Lists: "Listen", + + normal: "normal", + default: "standard", + + // lists + "Bulleted list": "Liste mit Aufzählungszeichen", + "Numbered list": "Nummerierte Liste", + + // links + "Enter text to display": "Text zum Anzeigen eingeben", + "Paste link": "Link einfügen", + "Link copied to clipboard": "Link in die Zwischenablage kopiert", + + // shortcut groups + "Text formatting": "Textformatierung", + Editing: "Bearbeitung", + "Special actions": "Spezielle Aktionen", + + // colors + Black: "Schwarz", + Gray: "Grau", + White: "Weiß", + Red: "Rot", + Orange: "Orange", + Yellow: "Gelb", + Lime: "Limette", + Green: "Grün", + Teal: "Türkis", + Cyan: "Cyan", + Blue: "Blau", + Indigo: "Indigo", + Magenta: "Magenta", + + // shades + "Light gray": "Hellgrau", + "Medium gray": "Mittelgrau", + "Dark gray": "Dunkelgrau", + "Light red": "Hellrot", + "Medium red": "Mittelrot", + "Dark red": "Dunkelrot", + "Light orange": "Hellorange", + "Medium orange": "Mittelorange", + "Dark orange": "Dunkelorange", + "Light yellow": "Hellgelb", + "Medium yellow": "Mittleres Gelb", + "Dark yellow": "Dunkelgelb", + "Light lime": "Hellgrün", + "Medium lime": "Mittleres Grün", + "Dark lime": "Dunkelgrün", + "Light green": "Hellgrün", + "Medium green": "Mittleres Grün", + "Dark green": "Dunkelgrün", + "Light teal": "Hellblau", + "Medium teal": "Mittelblau", + "Dark teal": "Dunkelblau", + "Light cyan": "Hellcyan", + "Medium cyan": "Mittleres Cyan", + "Dark cyan": "Dunkelcyan", + "Light blue": "Hellblau", + "Medium blue": "Mittelblau", + "Dark blue": "Dunkelblau", + "Light indigo": "Hellindigo", + "Medium indigo": "Mittelindigo", + "Dark indigo": "Dunkelindigo", + "Light magenta": "Hellmagenta", + "Medium magenta": "Mittleres Magenta", + "Dark magenta": "Dunkelmagenta" + } +}; +~~~ +
+ +
+cn locale + +~~~jsx +const cn = { + richtext: { + // buttons/actions, + Undo: "撤销", + Redo: "重做", + Style: "样式", + "Font family": "字体", + "Font size": "字体大小", + Bold: "粗体", + Italic: "斜体", + Underline: "下划线", + Strikethrough: "删除线", + Subscript: "下标", + Superscript: "上标", + "Text color": "文本颜色", + "Background color": "背景颜色", + "Left align": "左对齐", + "Center align": "居中对齐", + "Right align": "右对齐", + Justify: "两端对齐", + "Line height": "行高", + Outdent: "减少缩进", + Indent: "增加缩进", + "Insert link": "插入链接", + "Insert image": "插入图片", + "Insert horizontal line": "插入水平线", + "Clear formatting": "清除格式", + Print: "打印", + "Fullscreen mode": "全屏模式", + "Layout mode": "布局模式", + "Classic mode": "经典模式", + "Document mode": "文档模式", + + // menubar exclusive options + File: "文件", + Import: "导入", + Export: "导出", + Edit: "编辑", + Cut: "剪切", + Copy: "复制", + Paste: "粘贴", + View: "视图", + Insert: "插入", + Format: "格式", + Help: "帮助", + New: "新建", + Link: "链接", + Image: "图片", + "Horizontal line": "水平线", + Text: "文本", + "Heading 1": "标题 1", + "Heading 2": "标题 2", + "Heading 3": "标题 3", + "Heading 4": "标题 4", + "Heading 5": "标题 5", + "Heading 6": "标题 6", + Align: "对齐", + Left: "左", + Center: "居中", + Right: "右", + Justified: "两端对齐", + "Keyboard shortcuts": "键盘快捷键", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "操作失败。请检查浏览器的剪贴板权限。", + + // block style dropdown + Heading: "标题", + Quote: "引用", + Paragraph: "段落", + "Text style": "文本样式", + Lists: "列表", + + normal: "普通的", + default: "默认", + + // lists + "Bulleted list": "项目符号列表", + "Numbered list": "编号列表", + + // links + "Enter text to display": "输入要显示的文本", + "Paste link": "粘贴链接", + "Link copied to clipboard": "链接已复制到剪贴板", + + // shortcut groups + "Text formatting": "文本格式化", + Editing: "编辑", + "Special actions": "特殊操作", + + // colors + Black: "黑色", + Gray: "灰色", + White: "白色", + Red: "红色", + Orange: "橙色", + Yellow: "黄色", + Lime: "酸橙色", + Green: "绿色", + Teal: "水鸭色", + Cyan: "青色", + Blue: "蓝色", + Indigo: "靛蓝色", + Magenta: "洋红色", + + // shades + "Light gray": "浅灰色", + "Medium gray": "中灰色", + "Dark gray": "深灰色", + "Light red": "浅红色", + "Medium red": "中红色", + "Dark red": "深红色", + "Light orange": "浅橙色", + "Medium orange": "中橙色", + "Dark orange": "深橙色", + "Light yellow": "浅黄色", + "Medium yellow": "中黄色", + "Dark yellow": "深黄色", + "Light lime": "浅酸橙色", + "Medium lime": "中酸橙色", + "Dark lime": "深酸橙色", + "Light green": "浅绿色", + "Medium green": "中绿色", + "Dark green": "深绿色", + "Light teal": "浅水鸭色", + "Medium teal": "中水鸭色", + "Dark teal": "深水鸭色", + "Light cyan": "浅青色", + "Medium cyan": "中青色", + "Dark cyan": "深青色", + "Light blue": "浅蓝色", + "Medium blue": "中蓝色", + "Dark blue": "深蓝色", + "Light indigo": "浅靛蓝色", + "Medium indigo": "中靛蓝色", + "Dark indigo": "深靛蓝色", + "Light magenta": "浅洋红色", + "Medium magenta": "中洋红色", + "Dark magenta": "深洋红色" + } +}; +~~~ +
+ +## Custom locale + +To use a custom locale: + +- Make a custom locale (or update the default one) and add translations for all the labels you need (any language works) + +- Set this locale for **RichText** using the [`locale`](api/config/locale.md) property or the [`setLocale()`](api/methods/set-locale.md) method + +## Example + +Here's a snippet that shows how to switch between different locales: + + \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/stylization.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/stylization.md new file mode 100644 index 0000000..6bd5a18 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/guides/stylization.md @@ -0,0 +1,89 @@ +--- +title: Styling +sidebar_label: Styling +description: You can learn about the styling 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. +--- + +# Styling + +DHTMLX RichText can be styled to fit any look by using CSS variables or targeting specific widget parts with custom styles. + +Here’s a quick walkthrough for setting up a **dark theme** and using class names to style different parts of the editor, like the menubar, toolbar, popup, and content area. + +## Default structure and class names + +RichText relies on these main classes for its UI layout: + +| Class name | Description | +|------------------------|---------------------------------------------| +| `.wx-richtext` | Root container of the RichText widget | +| `.wx-richtext-menubar` | Container for menubar | +| `.wx-richtext-menu` | Container for menubar dropdown menu | +| `.wx-richtext-toolbar` | Container for toolbar | +| `.wx-editor-area` | Container for main editable content area | + +These classes can be used in your CSS to tweak how the RichText editor looks. + +## Overriding default styles + +To give RichText a custom look, just update the CSS variables on the `#root` container or on specific sub-elements: + +```html +
+ + +``` + +:::note +This setup gives the editor a dark background, updates button and icon colors, and makes things easier to see in a dark UI. +::: + +## List of supported CSS variables + +| Variable name | Description | +| ---------------------------- | ------------------------------------ | +| `--wx-background` | Background color of editor and popup | +| `--wx-background-alt` | Alternate background for menubar | +| `--wx-color-primary` | Accent color for links, blockquotes, and borders of resizing pictures | +| `--wx-color-font` | Main font color (for editor, menubar, and toolbar)| +| `--wx-color-font-alt` | Alternate font color | +| `--wx-color-font-disabled` | Disabled text color (for menubar and toolbar elements)| +| `--wx-border` | Border style used across the editor | +| `--wx-color-secondary-hover` | Hover state background for buttons within menubar and toolbar | +| `--wx-button-active` | Active state background for buttons within menubar and toolbar | +| `--wx-icon-color` | Color for toolbar arrow icons used for dropdown | +| `--wx-popup-border` | Border for popup elements | + +## Best practices + +* The `color-scheme: dark` property helps native inputs look right in dark mode +* It’s best not to change layout-related CSS properties (like `display` or `position`) unless there’s a good reason + +## Live demo + +Here’s a quick example showing how custom styles can be added to RichText: + + + +**Related articles:** [Customization](guides/configuration.md) \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/guides/typescript_support.md b/i18n/en/docusaurus-plugin-content-docs/current/guides/typescript_support.md new file mode 100644 index 0000000..e6c0655 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/guides/typescript_support.md @@ -0,0 +1,19 @@ +--- +sidebar_label: TypeScript support +title: TypeScript support +description: You can learn about using typescript with the DHTMLX JavaScript RichText library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX RichText. +--- + +# TypeScript support + +Since version 2.0, DHTMLX RichText comes with built-in TypeScript definitions, so TypeScript works right out of the box. + +:::note +The Snippet Tool is available for trying things out. +::: + +## Advantages of using TypeScript + +Using DHTMLX RichText with TypeScript brings a few nice perks. + +TypeScript helps make the development process smoother and more reliable. Type checking and autocompletion help catch mistakes early and speed things up. Plus, TypeScript gives clear info about what data types to use when working with the DHTMLX RichText API. \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/en/docusaurus-plugin-content-docs/current/how_to_start.md new file mode 100644 index 0000000..84e30b9 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/how_to_start.md @@ -0,0 +1,113 @@ +--- +sidebar_label: How to start +title: How to start +description: You can explore how to start working with DHTMLX RichText 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. +--- + +# How to start + +Here’s a simple walkthrough for getting RichText up and running on a page. + +import classic_mode from '@site/static/img/richtext/classic_mode.png'; + +Classic mode + +## Step 1. Including source files + +First, create an HTML file named *index.html*. Add the RichText source files to this file. + +You’ll need two files: + +- the JS file for RichText +- the CSS file for RichText + +~~~html {5-6} title="index.html" + + + + How to Start with RichText + + + + + + + +~~~ + +### Installing RichText via npm or yarn + +RichText can be added to your project using **yarn** or **npm**. + +#### Installing trial RichText via npm or yarn + +:::info +To use the trial version of RichText, grab the [**trial RichText package**](https://dhtmlx.com/docs/products/dhtmlxRichtext/download.shtml) and check out the steps in the *README* file. Just a heads up, the trial runs for 30 days. +::: + +#### Installing PRO RichText via npm or yarn + +:::info +To get the PRO version, head to the [Client's Area](https://dhtmlx.com/clients/) and generate your login and password for the DHTMLX private **npm**. There’s a detailed installation guide there too. Access to the private **npm** is available as long as your proprietary RichText license is active. +::: + +## Step 2. Creating RichText + +Now it’s time to add RichText to the page. Start by creating a `
` container for RichText. Here’s what to do: + +- Add a DIV container in the *index.html* file +- Initialize RichText using the `richtext.Richtext` constructor + +The constructor takes any valid CSS selector for the HTML container where RichText will appear, plus any configuration objects you want to include. + +~~~html {9,12-14} title="index.html" + + + + How to Start with RichText + + + + +
+ + + + +~~~ + +## Step 3. Configuring RichText + +Now you can set up the configuration options you’d like RichText to use when it starts. + +To get going, set the initial data for the editor with the [`value`](api/config/value.md) property. You can also turn on the [**menubar**](api/config/menubar.md), tweak the [**toolbar**](api/config/toolbar.md), set [**fullscreen**](api/config/fullscreen-mode.md) and [**layout**](api/config/layout-mode.md) modes, pick a new [**locale**](api/config/locale.md), and apply [**default styles**](api/config/default-styles.md). + +~~~jsx {2-12} +const editor = new richtext.Richtext("#root", { + menubar: true, + toolbar: false, + fullscreenMode: true, + layoutMode: "document", + locale: richtext.locales.cn + defaultStyles: { + h4: { + "font-family": "Roboto" + }, + // other settings + } +}); +~~~ + +## What's next + +That’s it! With these three steps, RichText is ready for editing content. Feel free to start working or look around to see what else JavaScript RichText can do. \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/index.md b/i18n/en/docusaurus-plugin-content-docs/current/index.md new file mode 100644 index 0000000..6897f0b --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/index.md @@ -0,0 +1,154 @@ +--- +sidebar_label: RichText overview +title: RichText overview +slug: / +description: You can have an overview of DHTMLX JavaScript RichText library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX RichText. +--- + +# RichText overview + +**DHTMLX RichText** is a lightweight and flexible WYSIWYG editor made with JavaScript. It’s designed to make editing easy in modern web apps, with a simple interface, plenty of formatting tools, and full control over how content is displayed. Whether it’s for a CMS, an admin dashboard, or an embedded doc editor, RichText can be added and adjusted to fit different projects. + +**DHTMLX RichText** comes with these features: + +- Two [**layout modes**](api/config/layout-mode.md) + +- Content can be saved as plain text or HTML + +- A [**toolbar**](api/config/toolbar.md) that can be configured with built-in and custom buttons + +- A [**menubar**](api/config/menubar.md) that’s static and can be shown or hidden + +- Support for image uploads, rich formatting, custom styles, and fullscreen editing + +- [Full API access](api/overview/main_overview.md) for [event handling](api/overview/event_bus_methods_overview.md), [content changes](api/overview/methods_overview.md), and [reactive state management](api/overview/state_methods_overview.md) + +RichText works with any framework and can be used with [React](guides/integration_with_react.md), [Angular](guides/integration_with_angular.md), [Vue](guides/integration_with_vue.md), or [Svelte](guides/integration_with_svelte.md), so it fits into all sorts of front-end setups. + +This documentation covers installation, setup, usage, and how to tweak things. There are examples for common tasks, [full API docs](api/overview/main_overview.md), and tips for adding RichText to different apps. + +## RichText structure + +### Menubar + +The RichText menubar gives quick access to editing actions like making a new document, printing, importing or exporting, and more. By default, it’s hidden. + +The [`menubar`](api/config/menubar.md) property controls if it’s visible or not. You can turn the menubar on or off, but right now, its items can’t be changed. + +import menubar from '@site/static/img/richtext/menubar.png'; + +Menubar + +### Toolbar + +The RichText toolbar lets users quickly format text and edit structure. By default, the [toolbar](api/config/toolbar.md#default-config) is on and shows a set of common controls like bold, italic, font settings, lists, and more. + +The [`toolbar`](api/config/toolbar.md) property lets you change which controls show up and how they’re arranged. You can turn the toolbar on or off, rearrange the default buttons, or create your own setup with built-in and custom buttons. + +import toolbar from '@site/static/img/richtext/toolbar.png'; + +Toolbar + +### Editor + +The main part of RichText is the editor, where all content is created and formatted. You can change how the editor looks and works using options like [`value`](api/config/value.md), [`layoutMode`](api/config/layout-mode.md), and [`defaultStyles`](api/config/default-styles.md). RichText allows for custom styles, adding images, and making the layout adjust to different screens and needs. + +#### Two working modes + +DHTMLX RichText has two ways to show content: "classic" and "document" modes. Pick the one that feels best for your editing style. Switch between them using the [`layoutMode`](api/config/layout-mode.md) property. + +- **"classic"** + +import classic_mode from '@site/static/img/richtext/classic_mode.png'; + +Classic mode + +- **"document"** + +import document_mode from '@site/static/img/richtext/document_mode.png'; + +Document mode + +## Supported formats + +RichText can [read](api/methods/set-value.md) and [save](api/methods/get-value.md) content as either **HTML** or plain text. + +#### HTML format + +import html_format from '@site/static/img/richtext/html_format.png'; + +HTML format + +#### Text format + +import text_format from '@site/static/img/richtext/text_format.png'; + +Text format + +## Keyboard shortcuts + +RichText supports a bunch of standard keyboard shortcuts for faster editing and formatting. The shortcuts match what’s common on each platform and work on both **Windows/Linux** (`Ctrl`) and **macOS** (`⌘`). + +### Text formatting + +| Action | Windows/Linux | macOS | +|-----------------|-----------------|---------------| +| Bold* | `Ctrl+B` | `⌘B` | +| Italic | `Ctrl+I` | `⌘I` | +| Underline | `Ctrl+U` | `⌘U` | +| Strikethrough | `Ctrl+Shift+X` | `⌘⇧X` | + +### Editing + +| Action | Windows/Linux | macOS | +|----------|--------------------------|---------------| +| Undo | `Ctrl+Z` | `⌘Z` | +| Redo | `Ctrl+Y` / `Ctrl+Shift+Z`| `⌘Y` / `⌘⇧Z` | +| Cut | `Ctrl+X` | `⌘X` | +| Copy | `Ctrl+C` | `⌘C` | +| Paste | `Ctrl+V` | `⌘V` | + +### Special actions + +| Action | Windows/Linux | macOS | +|--------------|---------------|-------| +| Insert link | `Ctrl+K` | `⌘K` | +| Print | `Ctrl+P` | `⌘P` | + +:::info +More shortcuts could be added in future updates. +::: + +For a full list of RichText keyboard shortcuts, just click **Help** and choose **Keyboard shortcuts**: + +import shortcut_reference from '@site/static/img/richtext/shortcut_reference.png'; + +Shortcut reference diff --git a/i18n/en/docusaurus-plugin-content-docs/current/news/migration.md b/i18n/en/docusaurus-plugin-content-docs/current/news/migration.md new file mode 100644 index 0000000..c589708 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/news/migration.md @@ -0,0 +1,167 @@ +--- +sidebar_label: Migration to newer versions +title: Migration to Newer Versions +description: You can learn about the Migration to Newer Versions 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. +--- + +# Migration to newer versions + +## 1.2 -> 2.0 + +### Properties migration + +| Legacy property | Replaced by | Notes | +| --------------- | ------------------------- | ----------------------------------------- | +| `customStats` | *(Removed)* | Not available in the new version 2.0 | +| `toolbarBlocks` | `toolbar` | Now supports detailed toolbar structure | +| `defaultStyles` | `defaultStyles` (updated) | Structure is now per-block and CSS-based | +| `mode` | `layoutMode` | Replaced with stricter enum-based setting | + +### - `customStats` + +The `customStats` property isn’t part of the latest RichText version. This means built-in support for custom statistics like character, word, or sentence counts isn’t available anymore. + +To handle text metrics, just grab the editor content and process it however you want: + +```jsx +const content = editor.getValue(); +const wordCount = content.split(/\s+/).length; +``` + +### - `toolbarBlocks` → [`toolbar`](api/config/toolbar.md) + +Before **2.0**, only blocks of controls could be set: +```jsx{2} title="Before 2.0" +new dhx.RichText("#root", { + toolbarBlocks: ["undo", "style", "decoration", "colors", "align", "link"] +}); +``` + +With **2.0** and later, individual controls can be listed as needed: +```jsx{2-4} title="From 2.0" +new richtext.Richtext("#root", { + toolbar: [ + "undo", "style", "bold", "italic", "underline", "text-color", + "align", "link" + ] +}); +``` + +### - [`defaultStyles`](api/config/default-styles.md) + +Before **2.0**, default values for toolbar selection controls looked like this: +```jsx title="Before 2.0" +defaultStyles: { + "font-family": "Tahoma", + "font-size": "14px" +} +``` + +From **2.0** on, default style values can be set up for specific block types: +```jsx title="From 2.0" +defaultStyles: { + "*": { + "font-family": "Tahoma", + "font-size": "14px" + }, + h1: { + "font-size": "32px", + "color": "#333" + } +} +``` + +:::note +The `*` key sets base defaults for everything, and any specific element (like p, h1, or blockquote) can be customized on top. +::: + +### - `mode` → [`layoutMode`](api/config/layout-mode.md) + +```jsx{2} title="Before 2.0" +new dhx.RichText("#root", { + mode: "document" +}); +``` + +```jsx{2} title="From 2.0" +new Richtext("#root", { + layoutMode: "document" // or "classic" +}); +``` + +Now, [`layoutMode`](api/config/layout-mode.md) only accepts `"classic"` or `"document"`. + +### Methods migration + +| Legacy method | New equivalent | Notes | +| ----------------------- | ------------------------------------ | ----------------------------------------------------- | +| `getValue(mode)` | `getValue(encoder)` | Encoders replace string modes; separate import needed for encoders | +| `setValue(value, mode)` | `setValue(value, encoder)` | Encoders replace string modes; separate import needed for encoders | +| `getStats()` | *Removed* | No replacement; manual logic required | +| `getEditorAPI()` | *Removed* | Internal; use public API instead | +| `fire()` | *Removed* | Replaced by `exec()` and `intercept()` | +| `on()`, `detach()` | ✅ Preserved (`api.on`, `api.detach`)| Now accessed via `richtext.api` | +| `fullScreen()` | *Removed* | Use `fullscreenMode` config property | +| `exitFullScreen()` | *Removed* | Use `fullscreenMode` config property | +| `paint()` | *Removed* | No longer needed | +| `destructor()` | ✅ Still available | Unchanged | +| `setConfig()` | ✅ New | Enables live config updates | +| `setLocale()` | ✅ New | Allows dynamic locale switching | +| `getReactiveState()` | ✅ New | Enables reactive state tracking | +| `getState()` | ✅ New | Provides current static config state | +| `intercept()` | ✅ New | Intercept internal actions | +| `exec()` | ✅ New | Execute internal actions | + +### - [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md) + +```jsx title="Before 2.0" +... +editor.setValue("

Hello

", "html"); +editor.getValue("text"); +``` + +```jsx title="From 2.0" +const fromTextEncoder = richtext.text.fromText; +const fromHTMLEncoder = richtext.html.fromHTML; + +const toTextEncoder = richtext.text.toText; +const toHTMLEncoder = richtext.html.toHTML; +... +editor.setValue("

Hello

", fromHTMLEncoder); +editor.getValue(toTextEncoder); +``` + +:::note +It’s fine to call `getValue()` and `setValue()` without passing an encoder; HTML will be used by default. +::: + +### - [`on`](api/internal/on.md) / [`detach`](api/internal/detach.md) + +```jsx title="Before 2.0" +editor.events.on("Change", function(action, canUndo, canRedo){ + // your code here +}); + +editor.events.detach("Change"); +``` + +```jsx title="From 2.0" +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}, { tag: "track" }); + +editor.api.detach("track"); +``` + +### - `fire()` → Use [`exec()`](api/internal/exec.md) and [`intercept()`](api/internal/intercept.md) + +```jsx title="Before 2.0" +editor.events.fire("some-event", [data]); +``` + +```jsx title="From 2.0" +editor.api.exec("some-event", obj); + +// Preventing execution +editor.api.intercept("some-event", (obj) => false); +``` \ No newline at end of file diff --git a/i18n/en/docusaurus-plugin-content-docs/current/news/whats_new.md b/i18n/en/docusaurus-plugin-content-docs/current/news/whats_new.md new file mode 100644 index 0000000..e6d2d42 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/news/whats_new.md @@ -0,0 +1,168 @@ +--- +sidebar_label: What's new +title: What's new +description: Check out the latest updates in DHTMLX RichText and see the release history right here in the documentation for the DHTMLX JavaScript UI library. You’ll find guides, API references, code examples, live demos, and a free 30-day trial download for DHTMLX RichText. +--- + +## Version 2.0.4 + +Released on October 15, 2025 + +### Fixes + +- Paragraph range selection didn’t always work right +- Link popups wouldn’t show up if they were next to linked images +- Toolbar values at startup didn’t always match the actual content + +## Version 2.0.3 + +Released on August 27, 2025 + +### Fixes + +- Clicking a horizontal line could throw a script error +- The default line height wasn’t set correctly +- Some content styles had duplicate selectors +- Plain text blocks didn’t pick up style changes when parsing HTML +- The parser skipped escaped font names in HTML +- The parser ignored `margin-left` and `line-height` in HTML + +## Version 2.0.2 + +Released on August 4, 2025 + +### Fixes + +- Package content got updated + +## Version 2.0.1 + +Released on July 30, 2025 + +### Fixes + +- Type definitions for the `defaultStyles` property were updated + +## Version 2.0 + +Released on July 30, 2025 + +:::note +The v1.2 API doesn’t work with v2.0. For details, see the [**migration guide**](news/migration.md). +::: + +### New Functionality + +- **Next-gen text rendering** + The new engine brings smoother, faster, and more accurate text rendering + +- **Granular toolbar configuration** + The toolbar is fully customizable now: + - Choose [individual toolbar controls](guides/configuration.md#default-toolbar-controls) and set their order + - Add your own [custom controls](guides/configuration.md#custom-toolbar-controls) + +- **Optional [menubar](api/config/menubar.md)** + You can add a classic menu-style interface at the top of the editor + +- **Enhanced [document mode](guides/configuration.md#layout-modes)** + Now supports different document sizes + +- **Image support** + - Insert images with [upload features](api/config/image-upload-url.md) + - [Resize images](api/events/resize-image.md) right in the editor + +- **Improved link experience** + Link [popup interactions](api/events/show-popup.md) have been redesigned for easier use + +- **New formatting tools** + - Text alignment: **justify** + - Insert [horizontal lines](api/events/insert-line.md) + - [Indent](api/events/indent.md) / [Outdent](api/events/outdent.md) + - Set [line height](api/events/set-line-height.md) + - Use [subscript](api/events/subscript.md) / [superscript](api/events/superscript.md) + +- **List management** + It’s easy to [insert and manage lists](api/events/insert-list.md) now + +- **Import/Export & Print** + - [Import DOCX](api/events/import.md) files + - [Export](api/events/export.md) to DOCX or PDF + - [Print](api/events/print.md) right from the editor + +- **Keyboard shortcuts** + More common formatting and editing shortcuts are supported + +### New API + +#### New properties + +- [`fullscreenMode`](api/config/fullscreen-mode.md) +- [`imageUploadUrl`](api/config/image-upload-url.md) +- [`layoutMode`](api/config/layout-mode.md) +- [`locale`](api/config/locale.md) +- [`menubar`](api/config/menubar.md) +- [`toolbar`](api/config/toolbar.md) +- [`value`](api/config/value.md) + +#### New methods + +- [`setConfig()`](api/methods/set-config.md) — Update the configuration on the fly +- [`setLocale()`](api/methods/set-locale.md) — Change the locale instantly + +#### New internal methods + +- [`api.exec()`](api/internal/exec.md) +- [`api.intercept()`](api/internal/intercept.md) +- [`api.getReactiveState()`](api/internal/get-reactive-state.md) +- [`api.getState()`](api/internal/get-state.md) + +#### New events + +You’ll find a full list of new events [here](api/overview/events_overview.md) + +### Updated API + +#### Updated properties + +- [`defaultStyles`](api/config/default-styles.md) + +#### Updated methods + +- [`setValue()`](api/methods/set-value.md) +- [`getValue()`](api/methods/get-value.md) + +#### Updated internal methods + +- [`api.detach()`](api/internal/detach.md) +- [`api.on()`](api/internal/on.md) + +## Removed API + +:::warning +Don’t use the removed API in your projects!
For more details, check out the [Migration](news/migration.md) topic. +::: + +### [Removed properties](news/migration.md#properties-migration) + +- [`customStats`](news/migration.md#--customstats) +- [`mode`](news/migration.md#--mode--layoutmode) +- [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar) + +### [Removed methods](news/migration.md#methods-migration) + +- `exitFullScreen()` +- `fullScreen()` +- `getEditorAPI()` +- `getStats()` +- `paint()` + +### Removed internal methods + +- [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept) + +### Removed events + +- `Action` +- `Change` +- `selectionChange` +- `selectionRefresh` \ No newline at end of file diff --git a/i18n/en/docusaurus-theme-classic/footer.json b/i18n/en/docusaurus-theme-classic/footer.json new file mode 100644 index 0000000..cb5c883 --- /dev/null +++ b/i18n/en/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "Development center", + "description": "The title of the footer links column with title=Development center in the footer" + }, + "link.title.Community": { + "message": "Community", + "description": "The title of the footer links column with title=Community in the footer" + }, + "link.title.Company": { + "message": "Company", + "description": "The title of the footer links column with title=Company in the footer" + }, + "link.item.label.Download RichText": { + "message": "Download RichText", + "description": "The label of footer link with label=Download RichText linking to https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml" + }, + "link.item.label.Examples": { + "message": "Examples", + "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/t55alxiy?tag=richtext" + }, + "link.item.label.Blog": { + "message": "Blog", + "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/tag/richtext/" + }, + "link.item.label.Forum": { + "message": "Forum", + "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/richtext/" + }, + "link.item.label.GitHub": { + "message": "GitHub", + "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX" + }, + "link.item.label.Youtube": { + "message": "Youtube", + "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx" + }, + "link.item.label.Facebook": { + "message": "Facebook", + "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx" + }, + "link.item.label.Twitter": { + "message": "Twitter", + "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx" + }, + "link.item.label.Linkedin": { + "message": "Linkedin", + "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/" + }, + "link.item.label.About us": { + "message": "About us", + "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "Contact us", + "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "Licensing", + "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxRichText/#editions-licenses" + } +} diff --git a/i18n/en/docusaurus-theme-classic/navbar.json b/i18n/en/docusaurus-theme-classic/navbar.json new file mode 100644 index 0000000..cdc91aa --- /dev/null +++ b/i18n/en/docusaurus-theme-classic/navbar.json @@ -0,0 +1,26 @@ +{ + "title": { + "message": "JavaScript RichText Documentation", + "description": "The title in the navbar" + }, + "logo.alt": { + "message": "DHTMLX RichText Documentation", + "description": "The alt text of navbar logo" + }, + "item.label.Examples": { + "message": "Examples", + "description": "Navbar item with label Examples" + }, + "item.label.Forum": { + "message": "Forum", + "description": "Navbar item with label Forum" + }, + "item.label.Support": { + "message": "Support", + "description": "Navbar item with label Support" + }, + "item.label.Download": { + "message": "Download", + "description": "Navbar item with label Download" + } +} diff --git a/i18n/ko/code.json b/i18n/ko/code.json new file mode 100644 index 0000000..bbcfd30 --- /dev/null +++ b/i18n/ko/code.json @@ -0,0 +1,560 @@ +{ + "theme.ErrorPageContent.title": { + "message": "이 페이지가 중단되었습니다.", + "description": "페이지가 중단되었을 때 표시되는 대체 페이지의 제목" + }, + "theme.BackToTopButton.buttonAriaLabel": { + "message": "위로 스크롤", + "description": "상단으로 이동 버튼의 ARIA 레이블" + }, + "theme.blog.archive.title": { + "message": "아카이브", + "description": "블로그 아카이브 페이지의 페이지 및 히어로 제목" + }, + "theme.blog.archive.description": { + "message": "아카이브", + "description": "블로그 아카이브 페이지의 페이지 및 히어로 설명" + }, + "theme.blog.paginator.navAriaLabel": { + "message": "블로그 목록 페이지 내비게이션", + "description": "블로그 페이지네이션의 ARIA 레이블" + }, + "theme.blog.paginator.newerEntries": { + "message": "새 게시물", + "description": "더 최신 블로그 게시물 페이지(이전 페이지)로 이동하는 데 사용되는 레이블" + }, + "theme.blog.paginator.olderEntries": { + "message": "이전 게시물", + "description": "더 오래된 블로그 게시물 페이지(다음 페이지)로 이동하는 데 사용되는 레이블" + }, + "theme.blog.post.paginator.navAriaLabel": { + "message": "블로그 게시물 페이지 내비게이션", + "description": "블로그 게시물 페이지네이션의 ARIA 레이블" + }, + "theme.blog.post.paginator.newerPost": { + "message": "새 게시물", + "description": "더 최신/이전 게시물로 이동하는 블로그 게시물 버튼 레이블" + }, + "theme.blog.post.paginator.olderPost": { + "message": "이전 게시물", + "description": "더 오래된/다음 게시물로 이동하는 블로그 게시물 버튼 레이블" + }, + "theme.tags.tagsPageLink": { + "message": "모든 태그 보기", + "description": "태그 목록 페이지로 연결되는 링크의 레이블" + }, + "theme.colorToggle.ariaLabel.mode.system": { + "message": "시스템 모드", + "description": "시스템 색상 모드의 이름" + }, + "theme.colorToggle.ariaLabel.mode.light": { + "message": "라이트 모드", + "description": "라이트 색상 모드의 이름" + }, + "theme.colorToggle.ariaLabel.mode.dark": { + "message": "다크 모드", + "description": "다크 색상 모드의 이름" + }, + "theme.colorToggle.ariaLabel": { + "message": "다크 모드와 라이트 모드 전환 (현재 {mode})", + "description": "색상 모드 토글의 ARIA 레이블" + }, + "theme.docs.breadcrumbs.navAriaLabel": { + "message": "브레드크럼", + "description": "브레드크럼의 ARIA 레이블" + }, + "theme.docs.DocCard.categoryDescription.plurals": { + "message": "1개 항목|{count}개 항목", + "description": "이 카테고리에 포함된 항목 수에 대한 생성된 인덱스의 기본 카테고리 카드 설명" + }, + "theme.docs.paginator.navAriaLabel": { + "message": "문서 페이지", + "description": "문서 페이지네이션의 ARIA 레이블" + }, + "theme.docs.paginator.previous": { + "message": "이전", + "description": "이전 문서로 이동하는 데 사용되는 레이블" + }, + "theme.docs.paginator.next": { + "message": "다음", + "description": "다음 문서로 이동하는 데 사용되는 레이블" + }, + "theme.docs.tagDocListPageTitle.nDocsTagged": { + "message": "1개 문서 태그됨|{count}개 문서 태그됨", + "description": "\"{count}개 문서 태그됨\"의 복수형 레이블. 언어가 지원하는 복수형 수만큼 사용하세요 (\"|\"로 구분) (https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html 참고)" + }, + "theme.docs.tagDocListPageTitle": { + "message": "\"{tagName}\" 태그가 붙은 {nDocsTagged}", + "description": "문서 태그 페이지의 제목" + }, + "theme.docs.versionBadge.label": { + "message": "버전: {versionLabel}" + }, + "theme.docs.versions.unreleasedVersionLabel": { + "message": "{siteTitle} {versionLabel} 버전의 미출시 문서입니다.", + "description": "사용자가 미출시 문서 버전을 보고 있음을 알리는 레이블" + }, + "theme.docs.versions.unmaintainedVersionLabel": { + "message": "{siteTitle} {versionLabel} 버전의 문서로, 더 이상 적극적으로 유지 관리되지 않습니다.", + "description": "사용자가 유지 관리되지 않는 문서 버전을 보고 있음을 알리는 레이블" + }, + "theme.docs.versions.latestVersionSuggestionLabel": { + "message": "최신 문서는 {latestVersionLink} ({versionLabel})를 참조하세요.", + "description": "사용자에게 최신 버전을 확인하라고 알리는 레이블" + }, + "theme.docs.versions.latestVersionLinkLabel": { + "message": "최신 버전", + "description": "최신 버전 제안 링크 레이블" + }, + "theme.common.editThisPage": { + "message": "이 페이지 편집", + "description": "현재 페이지를 편집하는 링크 레이블" + }, + "theme.common.headingLinkTitle": { + "message": "{heading}으로 직접 연결", + "description": "헤딩으로 연결되는 링크의 제목" + }, + "theme.lastUpdated.atDate": { + "message": " {date}에", + "description": "페이지가 마지막으로 업데이트된 날짜를 설명하는 문구" + }, + "theme.lastUpdated.byUser": { + "message": " {user}님에 의해", + "description": "페이지가 마지막으로 업데이트된 사용자를 설명하는 문구" + }, + "theme.lastUpdated.lastUpdatedAtBy": { + "message": "마지막 업데이트{atDate}{byUser}", + "description": "페이지가 마지막으로 업데이트된 시점과 사용자를 표시하는 문장" + }, + "theme.navbar.mobileVersionsDropdown.label": { + "message": "버전", + "description": "모바일에서 네비게이션 바 버전 드롭다운 레이블" + }, + "theme.NotFound.title": { + "message": "페이지를 찾을 수 없습니다", + "description": "404 페이지의 제목" + }, + "theme.tags.tagsListLabel": { + "message": "태그:", + "description": "태그 목록 옆의 레이블" + }, + "theme.admonition.caution": { + "message": "주의", + "description": "Caution 주의 알림 기본 레이블 (:::caution)" + }, + "theme.admonition.danger": { + "message": "위험", + "description": "Danger 주의 알림 기본 레이블 (:::danger)" + }, + "theme.admonition.info": { + "message": "정보", + "description": "Info 주의 알림 기본 레이블 (:::info)" + }, + "theme.admonition.note": { + "message": "노트", + "description": "Note 주의 알림 기본 레이블 (:::note)" + }, + "theme.admonition.tip": { + "message": "팁", + "description": "Tip 주의 알림 기본 레이블 (:::tip)" + }, + "theme.admonition.warning": { + "message": "경고", + "description": "Warning 주의 알림 기본 레이블 (:::warning)" + }, + "theme.AnnouncementBar.closeButtonAriaLabel": { + "message": "닫기", + "description": "공지 바 닫기 버튼의 ARIA 레이블" + }, + "theme.blog.sidebar.navAriaLabel": { + "message": "블로그 최신 게시물 내비게이션", + "description": "블로그 사이드바의 최신 게시물 ARIA 레이블" + }, + "theme.DocSidebarItem.expandCategoryAriaLabel": { + "message": "사이드바 카테고리 '{label}' 확장", + "description": "사이드바 카테고리 확장 ARIA 레이블" + }, + "theme.DocSidebarItem.collapseCategoryAriaLabel": { + "message": "사이드바 카테고리 '{label}' 축소", + "description": "사이드바 카테고리 축소 ARIA 레이블" + }, + "theme.IconExternalLink.ariaLabel": { + "message": "(새 탭에서 열림)", + "description": "외부 링크 아이콘의 ARIA 레이블" + }, + "theme.NotFound.p1": { + "message": "원하시는 내용을 찾을 수 없습니다.", + "description": "404 페이지의 첫 번째 문단" + }, + "theme.NotFound.p2": { + "message": "원본 URL로 연결한 사이트 소유자에게 연락하여 링크가 끊어졌음을 알려주세요.", + "description": "404 페이지의 두 번째 문단" + }, + "theme.NavBar.navAriaLabel": { + "message": "메인", + "description": "메인 내비게이션의 ARIA 레이블" + }, + "theme.navbar.mobileLanguageDropdown.label": { + "message": "언어", + "description": "모바일 언어 선택 드롭다운 레이블" + }, + "theme.TOCCollapsible.toggleButtonLabel": { + "message": "이 페이지 내비게이션", + "description": "접이식 목차 컴포넌트 버튼에 사용되는 레이블" + }, + "theme.blog.post.readMore": { + "message": "더 읽기", + "description": "블로그 게시물 요약에서 전체 게시물로 연결하는 레이블" + }, + "theme.blog.post.readMoreLabel": { + "message": "{title}에 대해 더 읽기", + "description": "요약에서 전체 블로그 게시물로 연결하는 링크의 ARIA 레이블" + }, + "theme.blog.post.readingTime.plurals": { + "message": "1분 읽기|{readingTime}분 읽기", + "description": "\"{readingTime}분 읽기\"에 대한 복수형 레이블. 언어가 지원하는 복수형 수만큼 사용하세요 (\"|\"로 구분) (https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html 참고)" + }, + "theme.CodeBlock.copy": { + "message": "복사", + "description": "코드 블록의 복사 버튼 레이블" + }, + "theme.CodeBlock.copied": { + "message": "복사됨", + "description": "코드 블록 복사 완료 버튼 레이블" + }, + "theme.CodeBlock.copyButtonAriaLabel": { + "message": "코드를 클립보드에 복사", + "description": "코드 블록 복사 버튼의 ARIA 레이블" + }, + "theme.CodeBlock.wordWrapToggle": { + "message": "단어 줄 바꿈 전환", + "description": "코드 블록 줄의 단어 줄 바꿈 전환 버튼의 제목 속성" + }, + "theme.docs.breadcrumbs.home": { + "message": "홈 페이지", + "description": "브레드크럼 내 홈 페이지의 ARIA 레이블" + }, + "theme.docs.sidebar.collapseButtonTitle": { + "message": "사이드바 축소", + "description": "문서 사이드바 축소 버튼의 제목 속성" + }, + "theme.docs.sidebar.collapseButtonAriaLabel": { + "message": "사이드바 축소", + "description": "문서 사이드바 축소 버튼의 ARIA 레이블" + }, + "theme.docs.sidebar.navAriaLabel": { + "message": "문서 사이드바", + "description": "사이드바 내비게이션의 ARIA 레이블" + }, + "theme.docs.sidebar.closeSidebarButtonAriaLabel": { + "message": "내비게이션 바 닫기", + "description": "모바일 사이드바 닫기 버튼의 ARIA 레이블" + }, + "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": { + "message": "드롭다운 확장", + "description": "모바일 드롭다운 네비게이션 바 항목 확장 버튼의 ARIA 레이블" + }, + "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": { + "message": "드롭다운 축소", + "description": "모바일 드롭다운 네비게이션 바 항목 축소 버튼의 ARIA 레이블" + }, + "theme.docs.sidebar.expandButtonTitle": { + "message": "사이드바 확장", + "description": "문서 사이드바 확장 버튼의 ARIA 레이블 및 제목 속성" + }, + "theme.docs.sidebar.expandButtonAriaLabel": { + "message": "사이드바 확장", + "description": "문서 사이드바 확장 버튼의 ARIA 레이블 및 제목 속성" + }, + "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { + "message": "← 메인 메뉴로 돌아가기", + "description": "모바일 네비게이션 바 사이드바 보조 메뉴 내 메인 메뉴로 돌아가는 뒤로 가기 버튼 레이블 (특히 문서 사이드바 표시용)" + }, + "theme.docs.sidebar.toggleSidebarButtonAriaLabel": { + "message": "내비게이션 바 토글", + "description": "모바일 내비게이션 햄버거 메뉴 버튼의 ARIA 레이블" + }, + "theme.SearchBar.seeAll": { + "message": "{count}개의 결과 모두 보기" + }, + "theme.SearchPage.documentsFound.plurals": { + "message": "1개 문서 발견|{count}개 문서 발견", + "description": "\"{count}개 문서 발견\"에 대한 복수형 레이블. 언어가 지원하는 복수형 수만큼 사용하세요 (\"|\"로 구분) (https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html 참고)" + }, + "theme.SearchPage.existingResultsTitle": { + "message": "\"{query}\"에 대한 검색 결과", + "description": "비어 있지 않은 쿼리에 대한 검색 페이지 제목" + }, + "theme.SearchPage.emptyResultsTitle": { + "message": "문서 검색", + "description": "빈 쿼리에 대한 검색 페이지 제목" + }, + "theme.SearchPage.inputPlaceholder": { + "message": "여기에 검색어 입력", + "description": "검색 페이지 입력란의 플레이스홀더" + }, + "theme.SearchPage.inputLabel": { + "message": "검색", + "description": "검색 페이지 입력란의 ARIA 레이블" + }, + "theme.SearchPage.algoliaLabel": { + "message": "Algolia 제공", + "description": "Algolia 언급에 대한 설명 레이블" + }, + "theme.SearchPage.noResultsText": { + "message": "결과가 없습니다", + "description": "검색 결과가 없을 때의 문단" + }, + "theme.SearchPage.fetchingNewResults": { + "message": "새 결과를 가져오는 중...", + "description": "새 검색 결과를 가져올 때의 문단" + }, + "theme.SearchBar.label": { + "message": "검색", + "description": "검색 버튼의 ARIA 레이블 및 플레이스홀더" + }, + "theme.SearchModal.searchBox.resetButtonTitle": { + "message": "쿼리 지우기", + "description": "검색 상자 초기화 버튼의 레이블 및 ARIA 레이블" + }, + "theme.SearchModal.searchBox.cancelButtonText": { + "message": "취소", + "description": "검색 상자 취소 버튼의 레이블 및 ARIA 레이블" + }, + "theme.SearchModal.searchBox.placeholderText": { + "message": "문서 검색", + "description": "주요 검색 입력 필드의 플레이스홀더 텍스트" + }, + "theme.SearchModal.searchBox.placeholderTextAskAi": { + "message": "다른 질문하기...", + "description": "AI 질문 모드에서의 플레이스홀더 텍스트" + }, + "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": { + "message": "응답 중...", + "description": "AI가 답변을 스트리밍하는 동안 검색 상자의 플레이스홀더 텍스트" + }, + "theme.SearchModal.searchBox.enterKeyHint": { + "message": "검색", + "description": "검색 상자 엔터 키 힌트" + }, + "theme.SearchModal.searchBox.enterKeyHintAskAi": { + "message": "입력", + "description": "Ask AI 검색 상자 엔터 키 힌트" + }, + "theme.SearchModal.searchBox.searchInputLabel": { + "message": "검색", + "description": "검색 입력의 ARIA 레이블" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonText": { + "message": "키워드 검색으로 돌아가기", + "description": "키워드 검색으로 돌아가기 버튼 텍스트" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": { + "message": "키워드 검색으로 돌아가기", + "description": "키워드 검색으로 돌아가기 버튼의 ARIA 레이블" + }, + "theme.SearchModal.startScreen.recentSearchesTitle": { + "message": "최근 검색", + "description": "최근 검색 제목" + }, + "theme.SearchModal.startScreen.noRecentSearchesText": { + "message": "최근 검색이 없습니다", + "description": "최근 검색이 없을 때의 텍스트" + }, + "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": { + "message": "이 검색 저장", + "description": "최근 검색 저장 버튼 제목" + }, + "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": { + "message": "이 검색을 기록에서 제거", + "description": "최근 검색 제거 버튼 제목" + }, + "theme.SearchModal.startScreen.favoriteSearchesTitle": { + "message": "즐겨찾기", + "description": "즐겨찾기 검색 제목" + }, + "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": { + "message": "이 검색을 즐겨찾기에서 제거", + "description": "즐겨찾기 검색 제거 버튼 제목" + }, + "theme.SearchModal.startScreen.recentConversationsTitle": { + "message": "최근 대화", + "description": "최근 대화 제목" + }, + "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": { + "message": "이 대화를 기록에서 제거", + "description": "최근 대화 제거 버튼 제목" + }, + "theme.SearchModal.errorScreen.titleText": { + "message": "결과를 가져올 수 없습니다", + "description": "오류 화면 제목" + }, + "theme.SearchModal.errorScreen.helpText": { + "message": "네트워크 연결을 확인하세요.", + "description": "오류 화면 도움말 텍스트" + }, + "theme.SearchModal.resultsScreen.askAiPlaceholder": { + "message": "AI에게 질문: ", + "description": "Ask AI 입력의 플레이스홀더 텍스트" + }, + "theme.SearchModal.askAiScreen.disclaimerText": { + "message": "답변은 AI가 생성하며 오류가 있을 수 있습니다. 답변을 확인하세요.", + "description": "AI 답변에 대한 면책 조항 텍스트" + }, + "theme.SearchModal.askAiScreen.relatedSourcesText": { + "message": "관련 출처", + "description": "관련 출처 텍스트" + }, + "theme.SearchModal.askAiScreen.thinkingText": { + "message": "생각 중...", + "description": "AI가 생각 중일 때의 텍스트" + }, + "theme.SearchModal.askAiScreen.copyButtonText": { + "message": "복사", + "description": "복사 버튼 텍스트" + }, + "theme.SearchModal.askAiScreen.copyButtonCopiedText": { + "message": "복사됨!", + "description": "복사 완료 시 복사 버튼 텍스트" + }, + "theme.SearchModal.askAiScreen.copyButtonTitle": { + "message": "복사", + "description": "복사 버튼 제목" + }, + "theme.SearchModal.askAiScreen.likeButtonTitle": { + "message": "좋아요", + "description": "좋아요 버튼 제목" + }, + "theme.SearchModal.askAiScreen.dislikeButtonTitle": { + "message": "싫어요", + "description": "싫어요 버튼 제목" + }, + "theme.SearchModal.askAiScreen.thanksForFeedbackText": { + "message": "피드백 감사합니다!", + "description": "피드백 감사 텍스트" + }, + "theme.SearchModal.askAiScreen.preToolCallText": { + "message": "검색 중...", + "description": "도구 호출 전 텍스트" + }, + "theme.SearchModal.askAiScreen.duringToolCallText": { + "message": "검색 중 ", + "description": "도구 호출 중 텍스트" + }, + "theme.SearchModal.askAiScreen.afterToolCallText": { + "message": "검색 완료", + "description": "도구 호출 후 텍스트" + }, + "theme.SearchModal.footer.selectText": { + "message": "선택", + "description": "푸터 선택 텍스트" + }, + "theme.SearchModal.footer.submitQuestionText": { + "message": "질문 제출", + "description": "푸터 질문 제출 텍스트" + }, + "theme.SearchModal.footer.selectKeyAriaLabel": { + "message": "엔터 키", + "description": "푸터 선택 키 ARIA 레이블" + }, + "theme.SearchModal.footer.navigateText": { + "message": "이동", + "description": "푸터 이동 텍스트" + }, + "theme.SearchModal.footer.navigateUpKeyAriaLabel": { + "message": "위쪽 화살표", + "description": "푸터 위로 이동 키 ARIA 레이블" + }, + "theme.SearchModal.footer.navigateDownKeyAriaLabel": { + "message": "아래쪽 화살표", + "description": "푸터 아래로 이동 키 ARIA 레이블" + }, + "theme.SearchModal.footer.closeText": { + "message": "닫기", + "description": "푸터 닫기 텍스트" + }, + "theme.SearchModal.footer.closeKeyAriaLabel": { + "message": "이스케이프 키", + "description": "푸터 닫기 키 ARIA 레이블" + }, + "theme.SearchModal.footer.searchByText": { + "message": "제공", + "description": "푸터의 '제공' 텍스트" + }, + "theme.SearchModal.footer.backToSearchText": { + "message": "검색으로 돌아가기", + "description": "푸터 검색으로 돌아가기 텍스트" + }, + "theme.SearchModal.noResultsScreen.noResultsText": { + "message": "결과를 찾을 수 없습니다", + "description": "결과가 없을 때의 텍스트" + }, + "theme.SearchModal.noResultsScreen.suggestedQueryText": { + "message": "다음 검색을 시도해보세요", + "description": "추천 검색어 텍스트" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsText": { + "message": "이 쿼리가 결과를 반환해야 한다고 생각하나요?", + "description": "결과 누락 신고 텍스트" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": { + "message": "알려주세요.", + "description": "결과 누락 신고 링크 텍스트" + }, + "theme.SearchModal.placeholder": { + "message": "문서 검색", + "description": "DocSearch 팝업 모달 입력란의 플레이스홀더" + }, + "theme.blog.post.plurals": { + "message": "1개 게시물|{count}개 게시물", + "description": "\"{count}개 게시물\"에 대한 복수형 레이블. 언어가 지원하는 복수형 수만큼 사용하세요 (\"|\"로 구분) (https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html 참고)" + }, + "theme.blog.tagTitle": { + "message": "\"{tagName}\" 태그가 붙은 {nPosts}개 게시물", + "description": "블로그 태그 페이지의 제목" + }, + "theme.blog.author.pageTitle": { + "message": "{authorName} - {nPosts}", + "description": "블로그 저자 페이지의 제목" + }, + "theme.blog.authorsList.pageTitle": { + "message": "저자", + "description": "저자 목록 페이지의 제목" + }, + "theme.blog.authorsList.viewAll": { + "message": "모든 저자 보기", + "description": "블로그 저자 페이지로 연결되는 링크 레이블" + }, + "theme.blog.author.noPosts": { + "message": "이 저자는 아직 게시물을 작성하지 않았습니다.", + "description": "게시물이 0개인 저자에 대한 텍스트" + }, + "theme.contentVisibility.unlistedBanner.title": { + "message": "비공개 페이지", + "description": "비공개 콘텐츠 배너 제목" + }, + "theme.contentVisibility.unlistedBanner.message": { + "message": "이 페이지는 비공개입니다. 검색 엔진이 색인하지 않으며, 직접 링크를 가진 사용자만 접근할 수 있습니다.", + "description": "비공개 콘텐츠 배너 메시지" + }, + "theme.contentVisibility.draftBanner.title": { + "message": "초안 페이지", + "description": "초안 콘텐츠 배너 제목" + }, + "theme.contentVisibility.draftBanner.message": { + "message": "이 페이지는 초안입니다. 개발 환경에서만 보이며, 프로덕션 빌드에서는 제외됩니다.", + "description": "초안 콘텐츠 배너 메시지" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "다시 시도", + "description": "React 오류 경계가 오류를 감지했을 때 다시 렌더링 시도 버튼 레이블" + }, + "theme.common.skipToMainContent": { + "message": "주요 콘텐츠로 건너뛰기", + "description": "접근성을 위해 키보드 탭/엔터 탐색으로 주요 콘텐츠로 빠르게 이동할 수 있는 건너뛰기 레이블" + }, + "theme.tags.tagsPageTitle": { + "message": "태그", + "description": "태그 목록 페이지의 제목" + } +} \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-blog/options.json b/i18n/ko/docusaurus-plugin-content-blog/options.json new file mode 100644 index 0000000..9239ff7 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-blog/options.json @@ -0,0 +1,14 @@ +{ + "title": { + "message": "Blog", + "description": "The title for the blog used in SEO" + }, + "description": { + "message": "Blog", + "description": "The description for the blog used in SEO" + }, + "sidebar.title": { + "message": "Recent posts", + "description": "The label for the left sidebar" + } +} diff --git a/i18n/ko/docusaurus-plugin-content-docs/current.json b/i18n/ko/docusaurus-plugin-content-docs/current.json new file mode 100644 index 0000000..2b6ce49 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current.json @@ -0,0 +1,62 @@ +{ + "version.label": { + "message": "다음", + "description": "현재 버전에 대한 레이블" + }, + "sidebar.docs.category.What's new and migration": { + "message": "새로운 기능 및 마이그레이션", + "description": "사이드바 'docs'의 '새로운 기능 및 마이그레이션' 카테고리 레이블" + }, + "sidebar.docs.category.What's new and migration.link.generated-index.title": { + "message": "새로운 기능 및 마이그레이션", + "description": "사이드바 'docs'의 '새로운 기능 및 마이그레이션' 카테고리 생성된 인덱스 페이지 제목" + }, + "sidebar.docs.category.API": { + "message": "API", + "description": "사이드바 'docs'의 'API' 카테고리 레이블" + }, + "sidebar.docs.category.RichText methods": { + "message": "RichText 메서드", + "description": "사이드바 'docs'의 'RichText 메서드' 카테고리 레이블" + }, + "sidebar.docs.category.RichText internal API": { + "message": "RichText 내부 API", + "description": "사이드바 'docs'의 'RichText 내부 API' 카테고리 레이블" + }, + "sidebar.docs.category.RichText internal API.link.generated-index.title": { + "message": "내부 API 개요", + "description": "사이드바 'docs'의 'RichText 내부 API' 카테고리 생성된 인덱스 페이지 제목" + }, + "sidebar.docs.category.Event Bus methods": { + "message": "이벤트 버스 메서드", + "description": "사이드바 'docs'의 '이벤트 버스 메서드' 카테고리 레이블" + }, + "sidebar.docs.category.State methods": { + "message": "상태 메서드", + "description": "사이드바 'docs'의 '상태 메서드' 카테고리 레이블" + }, + "sidebar.docs.category.RichText events": { + "message": "RichText 이벤트", + "description": "사이드바 'docs'의 'RichText 이벤트' 카테고리 레이블" + }, + "sidebar.docs.category.RichText properties": { + "message": "RichText 속성", + "description": "사이드바 'docs'의 'RichText 속성' 카테고리 레이블" + }, + "sidebar.docs.category.Integration with frameworks": { + "message": "프레임워크 통합", + "description": "사이드바 'docs'의 '프레임워크 통합' 카테고리 레이블" + }, + "sidebar.docs.category.Integration with frameworks.link.generated-index.title": { + "message": "프레임워크 통합", + "description": "사이드바 'docs'의 '프레임워크 통합' 카테고리 생성된 인덱스 페이지 제목" + }, + "sidebar.docs.category.Guides": { + "message": "가이드", + "description": "사이드바 'docs'의 '가이드' 카테고리 레이블" + }, + "sidebar.docs.category.Guides.link.generated-index.title": { + "message": "가이드", + "description": "사이드바 'docs'의 '가이드' 카테고리 생성된 인덱스 페이지 제목" + } +} \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/default-styles.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/default-styles.md new file mode 100644 index 0000000..4a80ace --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/default-styles.md @@ -0,0 +1,144 @@ +--- +sidebar_label: defaultStyles +title: defaultStyles 구성 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 defaultStyles 구성을 살펴보세요. 개발자 가이드, API 참조, 코드 샘플 및 라이브 데모를 확인하고 DHTMLX RichText의 무료 30일 체험판을 다운로드할 수 있습니다. +--- + +# defaultStyles + +### 설명 + +@short: 선택 사항입니다. 특정 블록 유형에 대한 기본 스타일 설정을 정의합니다. + +### 사용법 + +~~~jsx {} +defaultStyles?: { + "*"?: { // 모든 블록에 적용되며, 공통 속성을 설정할 수 있습니다. + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + p?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + blockquote?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h1?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h2?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h3?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h4?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h5?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h6?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + } +}; +~~~ + +:::important +`defaultStyles` 속성은 실제로 블록에 CSS 스타일을 적용하지 않습니다. 스타일이 적용된 것을 보려면, 별도로 해당 CSS를 추가해야 합니다: + +```jsx title="index.js" +new richtext.Richtext("#root", { + defaultStyles: { + h2: { + "font-family": "Roboto", + "font-size": "28px", + color: "purple", + background: "#FFC0CB" + } + } +}); +``` + +```css title="index.css" + +``` + +이 예제에서는 모든 `h2` 블록에 `"Roboto"` 글꼴과 28px 크기가 설정되며, 텍스트 색상과 배경색도 변경됩니다. `h2` 블록에 대한 CSS 스타일도 함께 적용됩니다. +::: + +### 기본 구성 + +~~~jsx +const defaultStyles = { + "*": { "font-family": "Arial" }, + p: { "font-size": "14px" }, + blockquote: { "font-size": "14px" }, + h1: { "font-size": "32px" }, + h2: { "font-size": "24px" }, + h3: { "font-size": "18px" }, + h4: { "font-size": "16px" }, + h5: { "font-size": "14px" }, + h6: { "font-size": "12px" } +}; +~~~ + +### 예제 + +~~~jsx {3-13} +// RichText 초기화 +new richtext.Richtext("#root", { + defaultStyles: { + h4: { + "font-family": "Roboto" + }, + h5: { + "font-family": "Roboto" + }, + h6: { + "font-family": "Roboto" + } + }, + // 기타 구성 속성 +}); +~~~ + +**변경 로그:** 이 속성은 버전 2.0에서 업데이트되었습니다. + +**관련 문서:** [구성](guides/configuration.md) + +**관련 샘플:** [RichText. 타이포그래피 기본값 변경 (글꼴, 글꼴 크기 등)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md new file mode 100644 index 0000000..00c3627 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md @@ -0,0 +1,39 @@ +--- +sidebar_label: fullscreenMode +title: fullscreenMode 구성 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 fullscreenMode 구성을 살펴보세요. 개발자 가이드, API 참조, 코드 예제 및 라이브 데모를 확인하고 DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# fullscreenMode + +### 설명 + +@short: 선택 사항입니다. RichText 전체 화면 모드를 활성화합니다. + +### 사용법 + +~~~jsx {} +fullscreenMode?: boolean; +~~~ + +### 기본 구성 + +~~~jsx +fullscreenMode: false; +~~~ + +### 예제 + +~~~jsx {3} +// RichText 초기화 +new richtext.Richtext("#root", { + fullscreenMode: true + // 기타 구성 속성 +}); +~~~ + +**변경 로그:** 이 속성은 v2.0에 도입되었습니다. + +**관련 문서:** [구성](guides/configuration.md) + +**관련 샘플:** [RichText. 전체 툴바](https://snippet.dhtmlx.com/ziynafp7?tag=richtext) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md new file mode 100644 index 0000000..450a4a0 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md @@ -0,0 +1,33 @@ +--- +sidebar_label: imageUploadUrl +title: imageUploadUrl 구성 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 imageUploadUrl 구성에 대해 알아보실 수 있습니다. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 체험해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# imageUploadUrl + +### 설명 + +@short: 선택 사항입니다. 이미지를 업로드할 때 사용될 URL을 정의합니다. + +### 사용법 + +~~~jsx {} +imageUploadUrl?: string; +~~~ + +### 예제 + +~~~jsx {3} +// RichText 초기화 +new richtext.Richtext("#root", { + imageUploadUrl: "some URL" + // 기타 구성 속성들 +}); +~~~ + +**변경 로그:** 이 속성은 버전 2.0에서 도입되었습니다. + +**관련 문서:** [구성](guides/configuration.md) + +**관련 샘플:** [RichText. 초기화](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/layout-mode.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/layout-mode.md new file mode 100644 index 0000000..31225fd --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/layout-mode.md @@ -0,0 +1,41 @@ +--- +sidebar_label: layoutMode +title: layoutMode 구성 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 layoutMode 구성에 대해 알아보세요. 개발자 가이드, API 참조, 코드 샘플, 라이브 데모를 확인하고 DHTMLX RichText의 무료 30일 체험판을 다운로드하세요. +--- + +# layoutMode + +### 설명 + +@short: 선택 사항입니다. 메인 편집기 영역의 레이아웃 스타일을 정의합니다. + +### 사용법 + +~~~jsx {} +layoutMode: "classic" | "document"; +~~~ + +`"classic"` 모드는 편집 영역이 페이지 전체에 걸쳐 확장됩니다. `"document"` 모드는 실제 문서 크기를 시뮬레이션하며 A4, A5, A6, A7과 같은 형식을 사용합니다. + +### 기본 구성 + +~~~jsx +layoutMode: "classic"; +~~~ + +### 예제 + +~~~jsx {3} +// RichText 초기화 +new richtext.Richtext("#root", { + layoutMode: "document" // 기본적으로 "document" 모드를 사용하도록 RichText 설정 + // 기타 구성 속성 +}); +~~~ + +**변경 사항:** 이 속성은 v2.0에서 도입되었으며, 이전의 `mode` 속성을 대체합니다. + +**관련 문서:** [Configuration](guides/configuration.md) + +**관련 샘플:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/locale.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/locale.md new file mode 100644 index 0000000..eeb71e9 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/locale.md @@ -0,0 +1,47 @@ +--- +sidebar_label: locale +title: locale 구성 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 locale 구성을 살펴보세요. 개발자 가이드, API 참조, 코드 샘플 및 라이브 데모를 확인하고 DHTMLX RichText의 무료 30일 체험판을 다운로드할 수 있습니다. +--- + +# locale + +### 설명 + +@short: 선택 사항입니다. RichText의 현지화 레이블을 포함하는 객체입니다. + +:::info +**locale** 객체는 모든 RichText 레이블과 해당 번역을 포함해야 합니다. +::: + +### 사용법 + +~~~jsx {} +locale?: object; +~~~ + +### 기본 구성 + +기본적으로 RichText는 **영어** locale을 제공합니다. 또한 사용자 지정 locale을 설정할 수도 있습니다. + +:::tip +실시간으로 locale을 전환하려면 RichText의 [**setLocale()**](api/methods/set-locale.md) 메서드를 사용하세요. +::: + +### 예제 + +~~~jsx {3} +// RichText 초기화 +const editor = new richtext.RichText("#root", { + locale: richtext.locales.cn // 처음에 중국어 locale이 설정됨 + // locale: richtext.locales.en // 처음에 영어 locale이 설정됨 + // locale: richtext.locales.de // 처음에 독일어 locale이 설정됨 + // 기타 구성 속성 +}); +~~~ + +**변경 로그:** 이 속성은 v2.0에서 도입되었습니다. + +**관련 문서:** [현지화](guides/localization.md) + +**관련 샘플:** [RichText. 현지화](https://snippet.dhtmlx.com/zxjrin3i?tag=richtext) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/menubar.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/menubar.md new file mode 100644 index 0000000..929f456 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/menubar.md @@ -0,0 +1,33 @@ +--- +sidebar_label: menubar +title: menubar 구성 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 menubar 구성에 대해 알아보세요. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# menubar + +### 설명 + +@short: 선택 사항입니다. RichText 상단에 menubar를 활성화합니다. + +### 사용법 + +~~~jsx {} +menubar?: boolean; +~~~ + +### 예제 + +~~~jsx {3} +// RichText 초기화 +new richtext.Richtext("#root", { + menubar: true + // 기타 구성 속성 +}); +~~~ + +**변경 로그:** 이 속성은 v2.0에서 도입되었습니다. + +**관련 문서:** [구성](guides/configuration.md) + +**관련 샘플:** [RichText. menubar와 함께 초기화](https://snippet.dhtmlx.com/tjryzka7?tag=richtext) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/toolbar.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/toolbar.md new file mode 100644 index 0000000..34381f0 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/toolbar.md @@ -0,0 +1,219 @@ +--- +sidebar_label: toolbar +title: toolbar 구성 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 toolbar 구성을 살펴보세요. 개발자 가이드, API 참조, 코드 예제 및 라이브 데모를 확인하고 DHTMLX RichText의 30일 무료 평가판을 이용해 보세요. +--- + +# toolbar + +### 설명 + +@short: 선택 사항입니다. toolbar를 활성화하여 사용자가 표시할 버튼을 선택하고 설정할 수 있게 합니다. + +### 사용법 + +~~~jsx {} +toolbar?: boolean | Array any }>; +~~~ + +#### Toolbar 내에서 사용 가능한 버튼 + +RichText toolbar에 추가할 수 있는 버튼 목록은 다음과 같습니다: + +| 버튼 | 설명 | +|---------------------|---------------------------------------------------------------------------| +| `undo` | 마지막 사용자 작업을 되돌립니다. | +| `redo` | 이전에 실행 취소한 작업을 다시 적용합니다. | +| `style` | 제목이나 단락과 같은 텍스트 스타일을 선택할 수 있습니다. | +| `font-family` | 선택한 텍스트의 글꼴을 변경합니다. | +| `font-size` | 선택한 텍스트의 크기를 변경합니다. | +| `bold` | 선택한 텍스트를 굵게 만듭니다. | +| `italic` | 선택한 텍스트를 이탤릭체로 만듭니다. | +| `underline` | 선택한 텍스트에 밑줄을 긋습니다. | +| `strike` | 취소선 효과를 추가합니다. | +| `subscript` | 텍스트를 아래첨자로 서식 지정합니다. | +| `superscript` | 텍스트를 위첨자로 서식 지정합니다. | +| `text-color` | 텍스트 색상을 변경합니다. | +| `background-color` | 텍스트 배경 강조 색상을 변경합니다. | +| `align` | 텍스트 정렬을 설정합니다: 왼쪽, 가운데, 오른쪽, 또는 양쪽 맞춤. | +| `indent` | 텍스트 블록의 들여쓰기를 증가시킵니다. | +| `outdent` | 단락 들여쓰기를 감소시킵니다. | +| `line-height` | 줄 간격을 조정합니다. | +| `quote` | 텍스트를 인용문 블록으로 서식 지정합니다. | +| `bulleted-list` | 글머리 기호 목록을 만듭니다. | +| `numbered-list` | 번호 매기기 목록을 만듭니다. | +| `link` | 하이퍼링크를 삽입합니다. | +| `image` | 이미지를 삽입합니다. | +| `line` | 수평선을 삽입합니다. | +| `clear` | 선택한 텍스트의 모든 서식을 제거합니다. | +| `print` | 인쇄 대화상자를 엽니다. | +| `fullscreen` | 전체 화면 모드를 전환합니다. | +| `mode` | [레이아웃 모드](api/config/layout-mode.md) (고전/문서) 간 전환합니다. | +| `shortcuts` | 키보드 단축키 목록을 표시합니다. | +| `separator` | toolbar 그룹 사이에 시각적 구분선을 추가합니다. | + +이 문자열들을 사용하여 toolbar 버튼을 다음과 같이 설정할 수 있습니다: + +~~~jsx {2-7} +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // 기타 버튼 + ], + // 기타 구성 속성 +}); +~~~ + +#### Toolbar 내 맞춤 버튼 + +맞춤 버튼은 다음 옵션을 가진 객체로 설정할 수 있습니다: + +- `type` - (필수) 컨트롤 유형을 정의합니다. 선택지는 `"button"`, `"richselect"`, `"colorpicker"`입니다. +- `id` - (선택) 고유한 컨트롤 ID (기존 ID와 충돌하지 않아야 함). +- `label` - (선택) 버튼의 텍스트 레이블 (아이콘 옆에 표시). +- `tooltip` - (선택) 마우스 오버 시 표시되는 텍스트 (설정하지 않으면 label이 기본값). +- `css` - (선택) 컨트롤에 적용할 CSS 클래스 (기본 클래스는 wx-primary, wx-secondary 포함). +- `handler` - (선택) 버튼 클릭 시 실행되는 함수. + +~~~jsx {6-32} +new richtext.Richtext("#root", { + toolbar: [ + // 버튼 (문자열은 버튼만 나타냄) + "bold", + "italic", + // 미리 정의된 버튼 (사용자는 여기서 레이블이나 툴팁 같은 추가 옵션을 넣을 수 없으며, ({ type: "button", id: string }) 만 가능) + { + type: "button", + id: "fullscreen", + }, + // 미리 정의된 컨트롤에는 올바른 type을 지정해야 함 (예: richselect/colorpicker) + // 잘못된 타입의 컨트롤은 추가되지 않음 + { + type: "richselect", // type: "button" - 무시됨 + id: "mode", + }, + // 맞춤 버튼 (지원되는 옵션만 사용 가능) + // 현재는 맞춤 버튼만 허용됨 (richselect/colorpicker는 지원하지 않음) + { + type: "button", + id: "some", + label: "Some", + handler: () => {/* 맞춤 로직 */} + }, + { + type: "button", + id: "other", + icon: "wxo-help", + label: "Other", + tooltip: "Some tooltip", + handler: () => {/* 맞춤 로직 */} + } + ], + // 기타 구성 속성 +}); +~~~ + +#### Toolbar 숨기기 + +toolbar를 숨기려면 `toolbar` 속성을 `false`로 설정하세요: + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false + // 기타 구성 속성 +}); +~~~ + +### 기본 구성 + +~~~jsx +const defaultToolbarButtons = { + "undo", + "redo", + "separator", + "style", + "separator", + "font-family", + "font-size", + "separator", + "bold", + "italic", + "underline", + "strike", + "separator", + "text-color", + "background-color", + "separator", + "align", + "line-height", + "outdent", + "indent", + "separator", + "bulleted-list", + "numbered-list", + "quote", + "separator", + "link", + "image", + "separator", + "clear", + "separator", + "fullscreen", + "mode" +}; +~~~ + +:::tip +기본 toolbar 컨트롤은 RichText 위젯에 포함되어 있으며 `richtext.defaultToolbarButtons`를 통해 접근할 수 있습니다. + +```jsx{4} +// RichText 초기화 +new richtext.Richtext("#root", { + toolbar: [ + ...richtext.defaultToolbarButtons, + { + type: "button", + id: "btn1", // 맞춤 로직용 고유 버튼 ID + icon: "wxo-help", // 레이블과 함께 표시되는 아이콘 + css: "rounded", // 스타일링용 CSS 클래스 (기본 지원 클래스: wx-primary, wx-secondary) + label: "Custom button", // 아이콘 옆 버튼 레이블 + tooltip: "Some tooltip", // 마우스 오버 시 툴팁 (없으면 label 사용) + } + ] + // 기타 구성 속성 +}); +``` +::: + +### 예제 + +~~~jsx {3-18} +// RichText 초기화 +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // 맞춤 버튼 (모든 지원 옵션 포함) + // 현재는 맞춤 버튼만 지원 (richselect/colorpicker 없음) + { + type: "button", + id: "btn1", // 맞춤 로직용 고유 버튼 ID + icon: "wxo-help", // 레이블과 함께 표시되는 아이콘 + css: "rounded", // 스타일링용 CSS 클래스 (기본 지원 클래스: wx-primary, wx-secondary) + label: "Custom button", // 아이콘 옆 버튼 레이블 + tooltip: "Some tooltip", // 마우스 오버 시 툴팁 (없으면 label 사용) + handler: () => ..., // 이 버튼에 대한 맞춤 로직 + } + ] + // 기타 구성 속성 +}); +~~~ + +**변경 로그:** 이 속성은 v2.0에서 도입되었습니다. + +**관련 문서:** [구성](guides/configuration.md) + +**관련 샘플:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/value.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/value.md new file mode 100644 index 0000000..53bb4ab --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/value.md @@ -0,0 +1,36 @@ +--- +sidebar_label: value +title: value 구성 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 value 구성에 대해 알아보세요. 개발자 가이드, API 참조, 코드 샘플 및 라이브 데모를 확인하고 DHTMLX RichText의 무료 30일 체험판을 다운로드하세요. +--- + +# value + +### 설명 + +@short: 선택 사항입니다. RichText 편집기 영역에 처음 표시될 내용을 정의합니다. + +:::tip +커스텀 형식으로 내용을 설정하려면 내장된 [`setValue()`](api/methods/set-value.md) 메서드를 사용하세요. +::: + +### 사용법 + +~~~jsx {} +value?: string; +~~~ + +### 예제 + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" // 기본 값 설정 (HTML 형식) + // 기타 구성 속성 +}); +~~~ + +**변경 로그:** 이 속성은 버전 2.0에서 도입되었습니다. + +**관련 문서:** [구성](guides/configuration.md) + +**관련 샘플:** [RichText. 초기화](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/align.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/align.md new file mode 100644 index 0000000..2bb07e9 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/align.md @@ -0,0 +1,48 @@ +--- +sidebar_label: align +title: align 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 align 이벤트를 살펴보세요. 개발자 가이드, API 참조, 코드 예제 및 라이브 데모를 확인하고 DHTMLX RichText의 30일 무료 체험판을 다운로드하세요. +--- + +# align + +### 설명 + +@short: menubar/toolbar 또는 Event Bus 메서드를 사용하여 텍스트 정렬이 업데이트될 때마다 발생합니다. + +### 사용법 + +~~~jsx {} +"align": ({ + align: "left" | "center" | "right" | "justify" +}) => boolean | void; +~~~ + +### 매개변수 + +**align** 이벤트의 콜백은 다음 속성을 가진 객체를 받습니다: + +- `align` - 텍스트 정렬을 지정하며, 가능한 값은 `"left" | "center" | "right" | "justify"` 중 하나입니다. + +:::info +내부 이벤트는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용하여 처리할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-12} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "align" 이벤트 리스닝 +editor.api.on("align", (obj) => { + console.log(`정렬 위치: ${obj.align}`); +}); +// 텍스트 정렬을 왼쪽으로 설정 +editor.api.exec("align", { + align: "left" +}); +~~~ + +**변경 로그:** 이 이벤트는 버전 2.0에서 도입되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md new file mode 100644 index 0000000..16ef392 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md @@ -0,0 +1,38 @@ +--- +sidebar_label: clear-text-format +title: clear-text-format 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 clear-text-format 이벤트에 대해 알아보세요. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 시도하며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# clear-text-format + +### 설명 + +@short: menubar, toolbar 또는 Event Bus 메서드를 사용하여 텍스트 서식이 제거될 때마다 트리거됩니다. + +### 사용법 + +~~~jsx {} +"clear-text-format": () => boolean | void; +~~~ + +:::info +내부 이벤트를 관리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 활용할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-10} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "clear-text-format" 이벤트 구독 +editor.api.on("clear-text-format", () => { + console.log("텍스트 서식이 지워졌습니다"); +}); +// 텍스트 서식 지우기 +editor.api.exec("clear-text-format", {}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에서 도입되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/copy.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/copy.md new file mode 100644 index 0000000..e5923b5 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/copy.md @@ -0,0 +1,36 @@ +--- +sidebar_label: 복사 +title: copy 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 copy 이벤트를 살펴보세요. 개발자 가이드, API 참조, 라이브 데모 및 코드 예제를 이용하고 DHTMLX RichText의 무료 30일 체험판을 다운로드할 수 있습니다. +--- + +# copy + +### 설명 + +@short: 선택한 텍스트가 복사될 때 발생합니다 + +### 사용법 + +~~~jsx {} +"copy": () => boolean | void; +~~~ + +:::info +내부 이벤트를 다루려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "copy" 이벤트 리스닝 +editor.api.on("copy", () => { + console.log("선택한 텍스트가 복사되었습니다"); +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에서 도입되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/create-new.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/create-new.md new file mode 100644 index 0000000..09b15b8 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/create-new.md @@ -0,0 +1,44 @@ +--- +sidebar_label: create-new +title: create-new 이벤트 +description: DHTMLX JavaScript RichText 라이브러리에서 create-new 이벤트가 어떻게 작동하는지 알아보세요. 개발자 가이드, API 참조, 코드 샘플 및 라이브 데모를 탐색하고, DHTMLX RichText의 무료 30일 평가판을 이용해보세요. +--- + +# create-new + +### 설명 + +@short: 이 이벤트는 메뉴바에서 "New" 옵션을 선택하거나 Event Bus 메서드를 사용할 때 발생합니다. + +### 사용법 + +~~~jsx {} +"create-new": ({ reset?: boolean }) => boolean | void; +~~~ + +### 매개변수 + +**create-new** 이벤트의 콜백은 다음 속성을 가진 객체를 받습니다: + +- `reset` - 새 파일이 생성될 때 히스토리를 초기화할지 여부를 나타냅니다. + +:::info +내부 이벤트를 관리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 활용할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-10} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "create-new" 이벤트 구독 +editor.api.on("create-new", ({ reset }) => { + console.log(`문서가 초기화되었습니다. 히스토리는 ${reset ? "" : "초기화되지 않았습니다."}`); +}); +// 새 파일 생성 및 히스토리 초기화 +editor.api.exec("create-new", { reset: true }); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에 도입되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/cut.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/cut.md new file mode 100644 index 0000000..af633e0 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/cut.md @@ -0,0 +1,36 @@ +--- +sidebar_label: cut +title: cut 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 cut 이벤트를 살펴보세요. 개발자 가이드, API 참조, 코드 샘플 및 라이브 데모를 확인하고 DHTMLX RichText의 무료 30일 체험판을 다운로드할 수 있습니다. +--- + +# cut + +### 설명 + +@short: 선택한 텍스트가 잘렸을 때 발생합니다 + +### 사용법 + +~~~jsx {} +"cut": () => boolean | void; +~~~ + +:::info +내부 이벤트 관리를 위해 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "cut" 이벤트 구독 +editor.api.on("cut", () => { + console.log("선택한 텍스트가 잘렸습니다"); +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에서 도입되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/delete-link.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/delete-link.md new file mode 100644 index 0000000..66050a2 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/delete-link.md @@ -0,0 +1,36 @@ +--- +sidebar_label: delete-link +title: delete-link 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 delete-link 이벤트에 대해 알아보세요. 개발자 가이드와 API 참조를 둘러보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText의 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# delete-link + +### 설명 + +@short: 링크가 삭제될 때마다 발생합니다. + +### 사용법 + +~~~jsx {} +"delete-link": () => boolean | void; +~~~ + +:::info +내부 이벤트 관리를 위해 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 참고하세요. +::: + +### 예제 + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "delete-link" 이벤트 구독 +editor.api.on("delete-link", () => { + console.log("링크가 삭제되었습니다"); +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에서 도입되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/export.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/export.md new file mode 100644 index 0000000..0b51546 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/export.md @@ -0,0 +1,59 @@ +--- +sidebar_label: export +title: export 이벤트 +description: 이 섹션에서는 DHTMLX JavaScript RichText 라이브러리의 export 이벤트에 대해 다룹니다. 개발자 가이드, API 참조, 코드 예제, 라이브 데모, 그리고 DHTMLX RichText의 무료 30일 체험판이 포함되어 있습니다. +--- + +# export + +### 설명 + +@short: 메뉴바에서 "Export" 옵션을 선택하거나 Event Bus 메서드를 통해 호출된 후 발생합니다. + +### 사용법 + +~~~jsx {} +"export": ({ options: IExportOptions; result?: any }) => boolean | void; + +interface IExportOptions { + format?: "docx" | "pdf"; + url?: string; + download?: boolean; + fileName?: string; +} +~~~ + +### 매개변수 + +**export** 이벤트의 콜백은 다음 속성을 가진 객체를 받습니다: + +- `format` - 파일 형식을 지정합니다. +- `url` - 파일 내보내기에 사용되는 기본 URL입니다. +- `download` - 서버 응답 후 파일을 자동으로 다운로드할지 여부를 나타냅니다. "false"로 설정하면 자동 다운로드가 되지 않으며, 이벤트 객체의 `result` 속성을 통해 blob 데이터를 접근할 수 있습니다. +- `fileName` - 내보내는 파일의 이름입니다. + +:::info +내부 이벤트는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용하여 관리할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-15} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 설정 속성 +}); +// "export" 이벤트 리스너 등록 +editor.api.on("export", (obj) => { + console.log(obj); + console.log("파일이 내보내졌습니다"); +}); +// 내용을 pdf 파일로 내보내기 +editor.api.exec("export", { + format: "pdf", + download: false, + fileName: "some file" +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에 도입되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/import.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/import.md new file mode 100644 index 0000000..976f2cf --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/import.md @@ -0,0 +1,47 @@ +--- +sidebar_label: import +title: import 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 import 이벤트를 알아보세요. 개발자 가이드, API 참조, 코드 샘플 및 라이브 데모를 탐색하고 DHTMLX RichText의 30일 무료 체험판을 다운로드할 수 있습니다. +--- + +# import + +### 설명 + +@short: 메뉴바에서 "Import" 옵션을 선택하거나 Event Bus 메서드를 통해 호출된 후 트리거됩니다. + +### 사용법 + +~~~jsx {} +"import": ({ html?: string }) => boolean | void; +~~~ + +### 매개변수 + +**import** 이벤트의 콜백은 다음 매개변수를 가진 객체를 받습니다: + +- `html` - HTML 콘텐츠를 포함하는 문자열 + +:::info +내부 이벤트를 관리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-13} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "import" 이벤트 리스닝 +editor.api.on("import", (obj) => { + console.log(obj.html); + console.log("새 값이 import되었습니다"); +}); +// import 실행 +editor.api.exec("import", { + html: "

some value

" // 내부적으로 setValue를 호출합니다 +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에 도입되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/indent.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/indent.md new file mode 100644 index 0000000..21d3dc6 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/indent.md @@ -0,0 +1,43 @@ +--- +sidebar_label: 들여쓰기 +title: indent 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 indent 이벤트를 살펴보세요. 개발자 가이드, API 참조, 코드 샘플, 라이브 데모를 확인하고 DHTMLX RichText의 무료 30일 체험판을 다운로드할 수 있습니다. +--- + +# indent + +### 설명 + +@short: 블록 들여쓰기가 증가할 때 발생합니다. + +### 사용법 + +~~~jsx {} +"indent": ({ step: number }) => boolean | void; +~~~ + +### 매개변수 + +**indent** 이벤트의 콜백은 다음 속성을 포함하는 객체를 받습니다: + +- `step` - 들여쓰기가 증가한 양 + +:::info +내부 이벤트 관리를 위해서는 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 참조하세요. +::: + +### 예제 + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "indent" 이벤트 구독 +editor.api.on("indent", (obj) => { + console.log(obj); + console.log("들여쓰기가 증가했습니다"); +}); +~~~ + +**변경 로그:** 이 이벤트는 버전 2.0에서 도입되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-image.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-image.md new file mode 100644 index 0000000..8933260 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-image.md @@ -0,0 +1,50 @@ +--- +sidebar_label: insert-image +title: insert-image 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 insert-image 이벤트를 살펴보세요. 개발자 가이드, API 참조, 코드 예제 및 라이브 데모를 확인하고 DHTMLX RichText의 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# insert-image + +### 설명 + +@short: 이미지가 삽입될 때 발생합니다 + +### 사용법 + +~~~jsx {} +"insert-image": (IImageContext) => boolean | void; + +interface IImageContext { + id: TID; + value: string; + width: number; + height: number; + // 업로더 컨텍스트에서 추가로 전달되는 속성, 실제 동작에는 필수 아님 + name?: string; + file?: File; + status?: string; + selected: (ctx: IImageContext) => void; + uploaded: (ctx: IImageContext) => void; +} +~~~ + +:::info +내부 이벤트 관리를 위해 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 참고하세요. +::: + +### 예제 + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성들 +}); +// "insert-image" 이벤트 리스너 등록 +editor.api.on("insert-image", (obj) => { + console.log(obj); + console.log("이미지가 삽입되었습니다"); +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0 버전에서 도입되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-line.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-line.md new file mode 100644 index 0000000..cdae1d6 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-line.md @@ -0,0 +1,36 @@ +--- +sidebar_label: insert-line +title: insert-line 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 insert-line 이벤트에 대한 자세한 정보를 확인하세요. 개발자 가이드, API 참조, 예제 및 라이브 데모를 탐색하고 DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# insert-line + +### 설명 + +@short: 수평선이 삽입될 때 트리거됩니다. + +### 사용법 + +~~~jsx {} +"insert-line": () => boolean | void; +~~~ + +:::info +내부 이벤트를 다루려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "insert-line" 이벤트 리스닝 +editor.api.on("insert-line", () => { + console.log("수평선이 삽입되었습니다."); +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에 도입되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-link.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-link.md new file mode 100644 index 0000000..d58a01c --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-link.md @@ -0,0 +1,43 @@ +--- +sidebar_label: insert-link +title: insert-link 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 insert-link 이벤트를 살펴보세요. 개발자 가이드, API 참조, 샘플 코드 및 라이브 데모를 확인하고 DHTMLX RichText의 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# insert-link + +### 설명 + +@short: 링크가 삽입될 때 발생합니다 + +### 사용법 + +~~~jsx {} +"insert-link": ({ url: string }) => boolean | void; +~~~ + +### 매개변수 + +**update-link** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받습니다: + +- `url` - 삽입되는 URL + +:::info +내부 이벤트를 관리하려면 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "insert-link" 이벤트 리스닝 +editor.api.on("insert-link", (obj) => { + console.log(obj) + console.log("다음 링크가 삽입되었습니다: " + obj.url); +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에서 도입되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-list.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-list.md new file mode 100644 index 0000000..0196029 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-list.md @@ -0,0 +1,47 @@ +--- +sidebar_label: insert-list +title: insert-list 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 insert-list 이벤트를 살펴보세요. 개발자 가이드, API 참조, 코드 샘플 및 라이브 데모를 확인하고 DHTMLX RichText의 30일 무료 체험을 이용해 보세요. +--- + +# insert-list + +### 설명 + +@short: 리스트가 삽입될 때 발생합니다. + +### 사용법 + +~~~jsx {} +"insert-list": ({ type: TListType }) => boolean | void; + +type TListType = "bulleted" | "numbered"; +~~~ + +### 매개변수 + +**insert-list** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받습니다: + +- `type` - 삽입된 리스트의 종류를 나타냅니다. 가능한 값은 다음과 같습니다: + - `"bulleted"` - 글머리 기호 리스트 + - `"numbered"` - 번호 매긴 리스트 + +:::info +내부 이벤트 관리를 위해 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 참조할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "insert-list" 이벤트 리스닝 +editor.api.on("insert-list", (obj) => { + console.log(obj.type); + console.log("리스트가 삽입되었습니다"); +}); +~~~ + +**변경 내역:** 이 이벤트는 버전 2.0에서 도입되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/outdent.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/outdent.md new file mode 100644 index 0000000..89ffd2b --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/outdent.md @@ -0,0 +1,43 @@ +--- +sidebar_label: outdent +title: outdent 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 outdent 이벤트를 살펴보세요. 개발자 가이드, API 참조, 코드 샘플, 라이브 데모를 확인하고 DHTMLX RichText의 무료 30일 체험판을 다운로드하세요. +--- + +# outdent + +### 설명 + +@short: 블록 들여쓰기가 줄어들 때 발생합니다 + +### 사용법 + +~~~jsx {} +"outdent": ({ step: number }) => boolean | void; +~~~ + +### 매개변수 + +**outdent** 이벤트의 콜백은 다음을 포함하는 객체를 받습니다: + +- `step` - 들여쓰기가 줄어든 양 + +:::info +내부 이벤트를 다루려면 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 참조하세요 +::: + +### 예제 + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "outdent" 이벤트를 수신 대기 +editor.api.on("outdent", (obj) => { + console.log(obj); + console.log("들여쓰기가 줄어들었습니다"); +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에 도입되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/paste.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/paste.md new file mode 100644 index 0000000..521ebe8 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/paste.md @@ -0,0 +1,36 @@ +--- +sidebar_label: 붙여넣기 +title: 붙여넣기 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 붙여넣기 이벤트를 살펴보세요. 개발자 가이드, API 참조, 코드 샘플 및 라이브 데모를 이용하고 DHTMLX RichText의 30일 무료 체험판을 다운로드할 수 있습니다. +--- + +# 붙여넣기 + +### 설명 + +@short: 내용이 붙여넣기될 때 발생합니다 + +### 사용법 + +~~~jsx {} +"paste": () => boolean | void; +~~~ + +:::info +내부 이벤트 관리는 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 참조하세요. +::: + +### 예제 + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "paste" 이벤트 구독 +editor.api.on("paste", () => { + console.log("내용이 붙여넣기되었습니다"); +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에 도입되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/print.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/print.md new file mode 100644 index 0000000..70a4d3e --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/print.md @@ -0,0 +1,36 @@ +--- +sidebar_label: print +title: print 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 print 이벤트를 살펴보세요. 개발자 가이드, API 참조, 코드 예제 및 라이브 데모를 확인하고 DHTMLX RichText의 무료 30일 평가판을 받아보세요. +--- + +# print + +### 설명 + +@short: 문서가 인쇄를 시작할 때 발생합니다. + +### 사용법 + +~~~jsx {} +"print": () => boolean | void; +~~~ + +:::info +내부 이벤트 관리는 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 참조하세요. +::: + +### 예제 + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { +// 구성 속성 +}); +// "print" 이벤트 리스닝 +editor.api.on("print", () => { + console.log("문서가 인쇄 중입니다"); +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에 도입되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/redo.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/redo.md new file mode 100644 index 0000000..3666fcb --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/redo.md @@ -0,0 +1,36 @@ +--- +sidebar_label: redo +title: redo 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 redo 이벤트를 살펴보세요. 개발자 가이드, API 참조, 코드 샘플, 라이브 데모를 확인하고 DHTMLX RichText의 무료 30일 체험판을 다운로드하세요. +--- + +# redo + +### 설명 + +@short: 메뉴바/툴바의 "Redo" 버튼이 클릭되거나 Event Bus 메서드를 통해 활성화될 때 발생합니다. + +### 사용법 + +~~~jsx {} +"redo": () => boolean | void; +~~~ + +:::info +내부 이벤트 관리를 위해 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "redo" 이벤트 구독 +editor.api.on("redo", () => { + console.log("Redo 작업이 수행되었습니다"); +}); +~~~ + +**변경 로그:** 이 이벤트는 버전 2.0에서 도입되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/resize-image.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/resize-image.md new file mode 100644 index 0000000..1d5b7b6 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/resize-image.md @@ -0,0 +1,45 @@ +--- +sidebar_label: resize-image +title: resize-image 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 resize-image 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# resize-image + +### 설명 + +@short: 이미지 크기가 조정될 때 트리거됩니다. + +### 사용법 + +~~~jsx {} +"resize-image": ({ id: number, width: number, height: number }) => boolean | void; +~~~ + +### 매개변수 + +**resize-image** 이벤트의 콜백은 다음 속성을 가진 객체를 받습니다: + +- `id` - 이미지의 고유 식별자 +- `width` - 이미지의 새로운 너비 +- `height` - 이미지의 새로운 높이 + +:::info +내부 이벤트를 다루려면 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { +// 구성 속성 +}); +// "resize-image" 이벤트를 청취 +editor.api.on("resize-image", (obj) => { + console.log(obj); + console.log("이미지 크기가 조정되었습니다.") +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에서 도입되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-font-family.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-font-family.md new file mode 100644 index 0000000..5c431b3 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-font-family.md @@ -0,0 +1,47 @@ +--- +sidebar_label: set-font-family +title: set-font-family 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 set-font-family 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# set-font-family + +### 설명 + +@short: 글꼴 패밀리가 설정될 때 발생하는 이벤트 + +### 사용법 + +~~~jsx {} +"set-font-family": ({ fontFamily: string }) => boolean | void; +~~~ + +### 매개변수 + +**set-font-family** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받습니다: + +- `fontFamily` - 적용할 글꼴 패밀리입니다. 사용 가능한 옵션은 다음과 같습니다: `"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"` + +:::info +내부 이벤트를 처리하려면 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-13} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성들 +}); +// "set-font-family" 이벤트 리스닝 +editor.api.on("set-font-family", (obj) => { + console.log(obj.fontFamily); + console.log("글꼴 패밀리가 변경되었습니다"); +}); +// 새 글꼴 패밀리 설정 +editor.api.exec("set-font-family", { + fontFamily: "Roboto" +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에 도입되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-font-size.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-font-size.md new file mode 100644 index 0000000..eb8aa9a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-font-size.md @@ -0,0 +1,47 @@ +--- +sidebar_label: set-font-size +title: set-font-size 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 set-font-size 이벤트를 살펴보세요. 개발자 가이드, API 참조, 데모 체험 및 DHTMLX RichText 30일 무료 체험판 다운로드를 확인할 수 있습니다. +--- + +# set-font-size + +### 설명 + +@short: 글꼴 크기가 설정될 때 발생하는 이벤트 + +### 사용법 + +~~~jsx {} +"set-font-size": ({ fontSize: string }) => boolean | void; +~~~ + +### 매개변수 + +**set-font-size** 이벤트의 콜백은 다음 매개변수를 포함하는 객체를 받습니다: + +- `fontSize` - 적용할 글꼴 크기 + +:::info +내부 이벤트 관리를 위해서는 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 참조하세요. +::: + +### 예제 + +~~~jsx {5-13} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "set-font-size" 이벤트 리스닝 +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); + console.log("글꼴 크기가 변경되었습니다"); +}); +// 새 글꼴 크기 설정 +editor.api.exec("set-font-size", { + fontSize: "11px" +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에서 도입되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-line-height.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-line-height.md new file mode 100644 index 0000000..ca970a6 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-line-height.md @@ -0,0 +1,47 @@ +--- +sidebar_label: set-line-height +title: set-line-height 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 set-line-height 이벤트에 대해 알아보세요. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# set-line-height + +### 설명 + +@short: 줄 높이가 설정될 때마다 발생합니다. + +### 사용법 + +~~~jsx {} +"set-line-height": ({ lineHeight: string }) => boolean | void; +~~~ + +### 매개변수 + +**set-line-height** 이벤트의 콜백 함수는 다음 매개변수를 포함하는 객체를 받습니다: + +- `lineHeight` - 설정되는 줄 높이 값 + +:::info +내부 이벤트 관리를 위해서는 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 참조하세요. +::: + +### 예제 + +~~~jsx {5-13} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "set-line-height" 이벤트 리스닝 +editor.api.on("set-line-height", (obj) => { + console.log(obj); + console.log("줄 높이가 변경되었습니다"); +}); +// 새 줄 높이 설정 +editor.api.exec("set-line-height", { + lineHeight: "15px" +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에서 도입되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-color.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-color.md new file mode 100644 index 0000000..d9f37fd --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-color.md @@ -0,0 +1,54 @@ +--- +sidebar_label: set-text-color +title: set-text-color 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 set-text-color 이벤트를 살펴보세요. 개발자 가이드, API 참조, 코드 샘플, 라이브 데모를 확인하고 DHTMLX RichText의 무료 30일 체험판을 받아보세요. +--- + +# set-text-color + +### 설명 + +@short: 텍스트 색상 및/또는 배경 색상이 적용될 때 트리거됩니다. + +### 사용법 + +~~~jsx {} +"set-text-color": (ITextColor) => boolean | void; + +interface ITextColor { + color?: string; + background?: string; +} +~~~ + +### 매개변수 + +**set-text-color** 이벤트의 콜백 함수는 다음 속성을 가진 객체를 받습니다: + +- `color` - 텍스트 색상 +- `background` - 텍스트의 배경 색상 + +:::info +내부 이벤트 관리를 위해 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 참조할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-14} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 설정 속성 +}); +// "set-text-color" 이벤트 리스닝 +editor.api.on("set-text-color", (obj) => { + console.log(obj); + console.log("텍스트 색상 및/또는 배경 색상이 업데이트되었습니다."); +}); +// 텍스트 색상 및 배경 설정 +editor.api.exec("set-text-color", { + color: "red", + background: "blue" +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에서 도입되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-format.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-format.md new file mode 100644 index 0000000..726cfcb --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-format.md @@ -0,0 +1,58 @@ +--- +sidebar_label: set-text-format +title: set-text-format 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 set-text-format 이벤트에 대해 알아보세요. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# set-text-format + +### 설명 + +@short: 텍스트 서식이 적용될 때 발생하는 이벤트 + +### 사용법 + +~~~jsx {} +"set-text-format": (ITextFormat) => boolean | void; + +interface ITextFormat { + bold?: boolean; + italic?: boolean; + strike?: boolean; + underline?: boolean; +} +~~~ + +:::info +내부 이벤트 관리를 위해 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 참고할 수 있습니다. +::: + +### 매개변수 + +**set-text-format** 이벤트의 콜백은 다음과 같은 선택적 속성을 가진 객체를 받습니다: + +- `bold` - 굵은 글씨 서식을 나타냅니다 +- `italic` - 이탤릭체 서식을 나타냅니다 +- `strike` - 취소선 서식을 나타냅니다 +- `underline` - 밑줄 서식을 나타냅니다 + +### 예제 + +~~~jsx {5-14} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "set-text-format" 이벤트 리스닝 +editor.api.on("set-text-format", (obj) => { + console.log(obj); + console.log("텍스트 서식이 변경되었습니다"); +}); +// 텍스트에 이탤릭체와 굵은 글씨 서식 적용 +editor.api.exec("set-text-format", { + italic: true, + bold: true +}); +~~~ + +**변경 로그:** 이 이벤트는 버전 2.0에서 도입되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-style.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-style.md new file mode 100644 index 0000000..c71382e --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-style.md @@ -0,0 +1,49 @@ +--- +sidebar_label: set-text-style +title: set-text-style 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 set-text-style 이벤트를 살펴보세요. 개발자 가이드, API 참조, 코드 예제 및 라이브 데모를 확인하고 DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# set-text-style + +### 설명 + +@short: 텍스트 스타일이 적용될 때 발생합니다 + +### 사용법 + +~~~jsx {} +"set-text-style": ({ tag: TBlockType }) => boolean | void; + +type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; +~~~ + +### 매개변수 + +**set-text-style** 이벤트의 콜백은 다음 속성을 가진 객체를 받습니다: + +- `tag` - 적용되는 텍스트 스타일을 지정합니다 + +:::info +내부 이벤트 관리를 위해서는 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 참조하세요 +::: + +### 예제 + +~~~jsx {5-13} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "set-text-style" 이벤트 리스닝 +editor.api.on("set-text-style", (obj) => { + console.log(obj.tag); + console.log("텍스트 스타일이 업데이트되었습니다"); +}); +// 텍스트 스타일 변경 +editor.api.exec("set-text-style", { + tag: "blockquote" +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에 도입되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/show-popup.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/show-popup.md new file mode 100644 index 0000000..34d76be --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/show-popup.md @@ -0,0 +1,53 @@ +--- +sidebar_label: show-popup +title: show-popup 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 show-popup 이벤트를 살펴보세요. 개발자 가이드, API 참조, 코드 예제, 라이브 데모를 확인하고 DHTMLX RichText의 무료 30일 체험판을 다운로드하세요. +--- + +# show-popup + +### 설명 + +@short: 팝업이 표시되거나 숨겨질 때 발생합니다. + +### 사용법 + +~~~jsx {} +"show-popup": (IPopupConfig) => boolean | void; + +interface IPopupConfig { + type: "link" | null; + image?: boolean; +} +~~~ + +### 매개변수 + +**show-popup** 이벤트의 콜백은 다음 속성을 가진 객체를 받습니다: + +- `type` - 팝업의 유형을 지정합니다. +- `image` - 현재 커서가 이미지 위에 있는지 여부를 나타냅니다. + +:::info +내부 이벤트를 관리하려면 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 활용할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-13} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성들 +}); +// "show-popup" 이벤트 구독 +editor.api.on("show-popup", (obj) => { + console.log(obj); + console.log("팝업이 표시되거나 숨겨졌습니다."); +}); +// 왼쪽에 텍스트 팝업 표시 +editor.api.exec("show-popup", { + type: "link" +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에 도입되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/subscript.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/subscript.md new file mode 100644 index 0000000..cf03212 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/subscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: subscript +title: subscript 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 subscript 이벤트를 살펴보세요. 개발자 가이드, API 참조, 코드 샘플 및 라이브 데모를 확인하고 DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# subscript + +### 설명 + +@short: 메뉴바/툴바에서 "Subscript" 버튼이 클릭되거나 Event Bus 메서드를 통해 호출될 때 발생합니다. + +### 사용법 + +~~~jsx {} +"subscript": () => boolean | void; +~~~ + +:::info +내부 이벤트를 다루려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-10} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "subscript" 이벤트 리스닝 +editor.api.on("subscript", () => { + console.log("아래 첨자가 적용되었습니다"); +}); +// "subscript" 이벤트 실행 +editor.api.exec("subscript", {}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에서 도입되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/superscript.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/superscript.md new file mode 100644 index 0000000..7168de7 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/superscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: 위첨자 +title: superscript 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 superscript 이벤트를 살펴보세요. 개발자 가이드, API 참조, 코드 샘플 및 라이브 데모를 확인하고 DHTMLX RichText의 무료 30일 체험판을 다운로드하세요. +--- + +# superscript + +### 설명 + +@short: 이 이벤트는 메뉴바 또는 툴바에서 "Superscript" 버튼이 클릭되었을 때 또는 Event Bus 메서드를 통해 활성화되었을 때 발생합니다. + +### 사용법 + +~~~jsx {} +"superscript": () => boolean | void; +~~~ + +:::info +내부 이벤트 관리는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 참조하세요. +::: + +### 예제 + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "superscript" 이벤트 구독 +editor.api.on("superscript", () => { + console.log("위첨자가 적용되었습니다"); +}); +// "superscript" 이벤트 실행 +editor.api.exec("superscript", {}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에서 도입되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md new file mode 100644 index 0000000..c027554 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md @@ -0,0 +1,45 @@ +--- +sidebar_label: toggle-fullscreen-mode +title: toggle-fullscreen-mode 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 toggle-fullscreen-mode 이벤트에 대해 알아보세요. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# toggle-fullscreen-mode + +### 설명 + +@short: 전체 화면 모드를 켜거나 끌 때 발생합니다. + +### 사용법 + +~~~jsx {} +"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void; +~~~ + +### 매개변수 + +**toggle-fullscreen-mode** 이벤트의 콜백은 다음 속성을 가진 객체를 받습니다: + +- `mode` - 전체 화면 모드가 활성화되었는지 여부를 나타냅니다. + +:::info +내부 이벤트를 관리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "toggle-fullscreen-mode" 이벤트 구독 +editor.api.on("toggle-fullscreen-mode", (obj) => { + console.log(obj); + console.log("전체 화면 모드가 변경되었습니다"); +}); +// 전체 화면 모드 활성화 +editor.api.exec("toggle-fullscreen-mode", { mode: true }); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에 도입되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md new file mode 100644 index 0000000..bc457d6 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md @@ -0,0 +1,45 @@ +--- +sidebar_label: toggle-layout-mode +title: toggle-layout-mode 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 toggle-layout-mode 이벤트에 대해 알아보세요. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# toggle-layout-mode + +### 설명 + +@short: 레이아웃 모드가 전환될 때마다 발생합니다. + +### 사용법 + +~~~jsx {} +"toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void; +~~~ + +### 매개변수 + +**toggle-layout-mode** 이벤트의 콜백 함수는 다음 매개변수를 포함하는 객체를 받습니다: + +- `mode` - 레이아웃 모드를 나타냅니다. 사용 가능한 옵션은 `"classic" | "document"` 입니다. + +:::info +내부 이벤트를 처리하려면 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-11} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "toggle-layout-mode" 이벤트 구독 +editor.api.on("toggle-layout-mode", (obj) => { + console.log(obj); + console.log("레이아웃 모드가 변경되었습니다"); +}); +// "document" 레이아웃 모드 설정 +editor.api.exec("toggle-layout-mode", { mode: "document" }); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에 도입되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md new file mode 100644 index 0000000..2c352c1 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md @@ -0,0 +1,45 @@ +--- +sidebar_label: toggle-shortcut-info +title: toggle-shortcut-info 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 toggle-shortcut-info 이벤트에 대해 알아보세요. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 시도해보며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# toggle-shortcut-info + +### 설명 + +@short: 단축키 정보가 토글될 때 발생합니다 + +### 사용법 + +~~~jsx {} +"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void; +~~~ + +### 매개변수 + +**toggle-shortcut-info** 이벤트의 콜백은 다음 속성을 포함하는 객체를 받습니다: + +- `mode` - 단축키 정보 표시를 제어합니다; `true`는 단축키 정보 팝업을 표시, `false`는 숨깁니다 + +:::info +내부 이벤트 관리는 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 참고하세요 +::: + +### 예제 + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "toggle-shortcut-info" 이벤트 구독 +editor.api.on("toggle-shortcut-info", (obj) => { + console.log(obj); + console.log("단축키 정보가 표시되었습니다"); +}); +// 단축키 정보 활성화 +editor.api.exec("toggle-shortcut-info", { mode: true }); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에 도입되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/undo.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/undo.md new file mode 100644 index 0000000..3181b6b --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/undo.md @@ -0,0 +1,36 @@ +--- +sidebar_label: undo +title: undo 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 undo 이벤트를 살펴보세요. 개발자 가이드, API 참조, 코드 예제 및 라이브 데모를 확인하고 DHTMLX RichText의 30일 무료 체험판을 다운로드할 수 있습니다. +--- + +# undo + +### 설명 + +@short: 메뉴바/툴바에서 "Undo" 버튼이 클릭되거나 Event Bus 메서드를 통해 활성화될 때 발생합니다. + +### 사용법 + +~~~jsx {} +"undo": () => boolean | void; +~~~ + +:::info +내부 이벤트는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용하여 관리할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "undo" 이벤트 리스닝 +editor.api.on("undo", () => { + console.log("Undo 작업이 수행되었습니다"); +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에서 도입되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/update-link.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/update-link.md new file mode 100644 index 0000000..9b1a93d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/update-link.md @@ -0,0 +1,44 @@ +--- +sidebar_label: update-link +title: update-link 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 update-link 이벤트에 대해 알아보세요. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 시도하며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# update-link + +### 설명 + +@short: 링크가 업데이트될 때 발생합니다 + +### 사용법 + +~~~jsx {} +"update-link": ({ id: number, url: string }) => boolean | void; +~~~ + +### 매개변수 + +**update-link** 이벤트의 콜백은 다음 속성을 포함하는 객체를 전달받습니다: + +- `id` - 링크의 식별자 +- `url` - 업데이트된 URL + +:::info +내부 이벤트 관리를 위해 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 참고할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "update-link" 이벤트 구독 +editor.api.on("update-link", (obj) => { + console.log(obj); + console.log("다음 링크가 업데이트되었습니다:" + obj.url); +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에서 도입되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/detach.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/detach.md new file mode 100644 index 0000000..42e4563 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/detach.md @@ -0,0 +1,44 @@ +--- +sidebar_label: api.detach() +title: on 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 on 메서드에 대해 알아보세요. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# api.detach() + +### 설명 + +@short: 이벤트 핸들러를 제거하거나 분리할 수 있게 합니다. + +### 사용법 + +~~~jsx {} +api.detach( tag: string ): void; +~~~ + +### 매개변수 + +- `tag` - (필수) 액션 태그의 이름을 지정합니다. + +### 이벤트 + +:::info +RichText 내부 이벤트의 전체 목록은 [**여기**](api/overview/events_overview.md)에서 확인할 수 있습니다. +::: + +### 예제 + +~~~jsx {6-8,10} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성들 +}); + +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}, { tag: "track" }); + +editor.api.detach("track"); +~~~ + +**변경 내역:** 이 메서드는 v2.0에서 업데이트되었습니다. `name` 및 `context` 매개변수가 제거되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/exec.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/exec.md new file mode 100644 index 0000000..3f83462 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/exec.md @@ -0,0 +1,46 @@ +--- +sidebar_label: api.exec() +title: exec 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 exec 메서드에 대해 알아보세요. 개발자 가이드와 API 참조를 확인하고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText의 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# api.exec() + +### 설명 + +@short: 이 메서드는 에디터 내에서 내부 이벤트를 트리거할 수 있게 해줍니다. + +### 사용법 + +~~~jsx {} +api.exec( + event: string, + config: object +): void; +~~~ + +### 매개변수 + +- `event` - (필수) 트리거할 이벤트 이름 +- `config` - (필수) 발생시킬 이벤트에 대한 매개변수를 포함하는 객체 + +### 이벤트 + +:::info +내부 RichText 이벤트의 전체 목록은 [**여기**](api/overview/events_overview.md)에서 확인할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// 텍스트에 글꼴 크기 적용 +editor.api.exec("set-font-size", { + fontSize: "16px" +}); +~~~ + +**변경 로그:** 이 메서드는 v2.0에서 도입되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md new file mode 100644 index 0000000..d37efde --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.getReactiveState() +title: getReactiveState 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 getReactiveState 메서드에 대해 알아보세요. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 시도해보며, DHTMLX RichText의 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# api.getReactiveState() + +### 설명 + +@short: RichText의 반응형 속성을 포함하는 객체를 제공합니다. + +### 사용법 + +~~~jsx {} +api.getReactiveState(): object; +~~~ + +### 반환값 + +이 메서드는 다음과 같은 속성을 가진 객체를 반환합니다: + +~~~jsx {} +{ + cursorState: { subscribe: any }, + defaultStyles {...}, + document {...}, + fullscreen {...}, + history {...}, + layoutMode {...}, + popup {...}, + selection {...} +} +~~~ + +### 예제 + +~~~jsx {5-7} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 설정 속성 +}); +// RichText의 Reactive State 가져오기 +const reactive_state = editor.api.getReactiveState(); +console.log(reactive_state) +~~~ + +**변경 로그:** 이 메서드는 버전 2.0에서 도입되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/get-state.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/get-state.md new file mode 100644 index 0000000..d108641 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/get-state.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.getState() +title: getState 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 getState 메서드에 대해 알아보세요. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 시도해보며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# api.getState() + +### 설명 + +@short: RichText의 현재 StateStore 속성을 포함하는 객체를 제공합니다. + +### 사용법 + +~~~jsx {} +api.getState(): object; +~~~ + +### 반환값 + +이 메서드는 다음 속성을 가진 객체를 반환합니다: + +~~~jsx {} +{ + cursorState: {}, + defaultStyles: {}, + document: {}, + fullscreen: boolean, + history: [] + layoutMode: string, + popup: any, + selection: {} +} +~~~ + +### 예제 + +~~~jsx {5-7} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// RichText의 현재 상태를 가져옴 +const state = editor.api.getState(); +console.log(state); +~~~ + +**변경 로그:** 이 메서드는 v2.0에 추가되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/intercept.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/intercept.md new file mode 100644 index 0000000..5fdbca0 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/intercept.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.intercept() +title: intercept 메서드 +description: DHTMLX JavaScript RichText 라이브러리의 intercept 메서드에 대해 알아보세요. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 시도해보며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# api.intercept() + +### 설명 + +@short: 내부 이벤트가 진행되기 전에 이를 가로채고 차단할 수 있는 방법을 제공합니다. + +### 사용법 + +~~~jsx {} +api.intercept( + event: string, + callback: function +): void; +~~~ + +### 매개변수 + +- `event` - (필수) 가로챌 이벤트 이름 +- `callback` - (필수) 이벤트 발생 시 실행할 함수 (인수는 특정 이벤트에 따라 다름) + +### 이벤트 + +:::info +RichText 내부 이벤트 전체 목록은 [**여기서**](api/overview/events_overview.md) 확인할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-10} +// RichText 생성 +const editor = new richtext.Richtext("#root", { + // 구성 속성들 +}); +// "36px" 외의 폰트 크기 변경을 차단 +editor.api.intercept("set-font-size", (obj) => { + if(obj.fontSize !== "36px" ){ + return false; + } +}); +~~~ + +**변경 로그:** 이 메서드는 v2.0에 추가되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/on.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/on.md new file mode 100644 index 0000000..50b3cd1 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/on.md @@ -0,0 +1,46 @@ +--- +sidebar_label: api.on() +title: on 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 on 메서드에 대해 배울 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# api.on() + +### 설명 + +@short: 내부 이벤트에 핸들러를 연결할 수 있습니다. + +### 사용법 + +~~~jsx {} +api.on( + event: string, + handler: function +): void; +~~~ + +### 매개변수 + +- `event` - (필수) 핸들러를 실행할 이벤트 +- `handler` - (필수) 이벤트가 발생할 때 호출될 함수 (인자는 이벤트에 따라 다름) + +### 이벤트 + +:::info +RichText 내부 이벤트 전체 목록은 [**여기**](api/overview/events_overview.md)에서 확인할 수 있습니다. +::: + +### 예제 + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 설정 속성 +}); +// "set-font-size" 이벤트를 감지 +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}); +~~~ + +**변경 내역:** 이 메서드는 v2.0에서 업데이트되었습니다. `context` 매개변수가 제거되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/set-next.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/set-next.md new file mode 100644 index 0000000..3a0b6f7 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/set-next.md @@ -0,0 +1,40 @@ +--- +sidebar_label: api.setNext() +title: setNext 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 setNext 메서드에 대해 알아보세요. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 시도해보며, DHTMLX RichText의 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# api.setNext() + +### 설명 + +@short: 이 메서드는 Event Bus 시퀀스에 액션을 추가할 수 있게 해줍니다. + +### 사용법 + +~~~jsx {} +api.setNext(next: any): void; +~~~ + +### 매개변수 + +- `next` - (필수) **Event Bus** 시퀀스에 추가할 액션 + +### 예제 + +~~~jsx {10-11} +const server = "https://some-backend-url"; +// someServerService라는 커스텀 서버 서비스 클래스가 있다고 가정합니다. +const someServerService = new ServerDataService(server); + +fetch(server + "/data").then((res) => res.json()).then((data) => { + const editor = new richtext.Richtext("#root", { + value: data + }); + + // 위젯의 Event Bus 시퀀스에 someServerService를 추가합니다. + editor.api.setNext(someServerService); +}); +~~~ + +**변경 로그:** 이 메서드는 v2.0에 추가되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/destructor.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/destructor.md new file mode 100644 index 0000000..1b1db95 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/destructor.md @@ -0,0 +1,28 @@ +--- +sidebar_label: destructor() +title: destructor 메서드 +description: DHTMLX JavaScript RichText 라이브러리의 destructor 메서드에 대해 알아보세요. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# destructor() + +### 설명 + +@short: RichText 컴포넌트의 모든 HTML 요소를 제거하고 관련된 모든 이벤트를 분리합니다. + +### 사용법 + +~~~jsx {} +destructor(): void; +~~~ + +### 예제 + +~~~jsx {5-6} +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); + +// RichText 제거 +editor.destructor(); +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/get-value.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/get-value.md new file mode 100644 index 0000000..0780403 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/get-value.md @@ -0,0 +1,43 @@ +--- +sidebar_label: getValue() +title: getValue 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 getValue 메서드에 대해 알아보세요. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# getValue() + +### 설명 + +@short: RichText 편집기의 현재 값을 가져옵니다 + +### 사용법 + +~~~jsx {} +getValue(encoder?: any): string; +~~~ + +### 매개변수 + +- `encoder` - (선택 사항) RichText 내용을 특정 형식으로 변환하는 파서입니다. 사용 가능한 옵션에는 기본값인 `html`과 `text`가 있습니다. + +원하는 인코더를 얻으려면 다음을 사용하세요: + +```jsx +const toTextEncoder = richtext.text.toText; // 텍스트 인코더 +const toHTMLEncoder = richtext.html.toHTML; // HTML 인코더 +``` + +### 예제 + +~~~jsx {6-8} +const editor = new richtext.Richtext("#root", { + value: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." // 기본값 설정 (HTML 형식) + // 기타 구성 속성 +}); + +const toTextEncoder = richtext.text.toText; +const editor_value = editor.getValue(toTextEncoder); +console.log(editor_value); +~~~ + +**변경 내역:** 이 메서드는 v2.0에서 업데이트되었습니다. `mode` 매개변수가 제거되고, `encoder` 매개변수가 추가되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-config.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-config.md new file mode 100644 index 0000000..db4fe43 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-config.md @@ -0,0 +1,40 @@ +--- +sidebar_label: setConfig() +title: setConfig 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 setConfig 메서드에 대해 알아보세요. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# setConfig() + +### 설명 + +@short: RichText 편집기의 설정을 새로운 구성으로 업데이트합니다. + +### 사용법 + +~~~jsx {} +setConfig(config: { [key:any]: any }): void; +~~~ + +### 매개변수 + +- `config` - (필수) RichText 구성 옵션을 포함하는 객체입니다. 전체 속성 목록은 [여기](api/overview/properties_overview.md)에서 확인하세요. + +:::note +`setConfig()` 메서드를 사용할 때, 새 호출에 포함되지 않은 이전에 설정된 매개변수들은 변경되지 않고 그대로 유지됩니다. +::: + +### 예제 + +~~~jsx {6-8} +const editor = new richtext.Richtext("#root", { + value: "

Some text

", + // 기타 구성 속성 +}); + +editor.setConfig({ + layoutMode: "document" +}); +~~~ + +**변경 이력:** 이 메서드는 v2.0에 도입되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-locale.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-locale.md new file mode 100644 index 0000000..95152cf --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-locale.md @@ -0,0 +1,41 @@ +--- +sidebar_label: setLocale() +title: setLocale 메서드 +description: DHTMLX JavaScript RichText 라이브러리의 setLocale 메서드에 대해 알아보세요. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 시도해보며, DHTMLX RichText의 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# setLocale() + +### 설명 + +@short: RichText의 로케일 설정을 업데이트합니다 + +### 사용법 + +~~~jsx {} +setLocale(null | locale?: object): void; +~~~ + +### 매개변수 + +- `null` - (선택 사항) 기본 로케일(*영어*)로 다시 전환합니다 +- `locale` - (선택 사항) 적용할 새 로케일 데이터를 포함하는 객체입니다 + +:::info +`setLocale()` 메서드는 RichText에서 사용하는 로케일을 업데이트합니다. 인수를 전달하지 않거나 *null*을 전달하면 로케일이 기본 설정으로 되돌아갑니다. +::: + +### 예제 + +~~~jsx {5-6} +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); + +// RichText의 로케일을 "de"로 설정 +editor.setLocale(de); +~~~ + +**변경 로그:** 이 메서드는 v2.0에 도입되었습니다 + +**관련 문서:** [Localization](guides/localization.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-value.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-value.md new file mode 100644 index 0000000..da18988 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-value.md @@ -0,0 +1,44 @@ +--- +sidebar_label: setValue() +title: setValue 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 setValue 메서드에 대해 알아보세요. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# setValue() + +### 설명 + +@short: RichText 내용을 새로운 값으로 업데이트합니다. + +### 사용법 + +~~~jsx {} +setValue: (value: string, encoder?: any): void; +~~~ + +### 매개변수 + +- `value` - (필수) RichText에 삽입할 내용 +- `encoder` - (선택) RichText 내용을 특정 형식으로 인코딩하기 위한 사용자 정의 파서. 사용 가능한 형식은 `html` (기본값)과 `text`가 있습니다. + +원하는 인코더는 다음과 같이 얻을 수 있습니다: + +```jsx +const fromTextEncoder = richtext.text.fromText; // text 인코더 +const fromHTMLEncoder = richtext.html.fromHTML; // html 인코더 +``` + +### 예제 + +~~~jsx {7-8} +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); + +const editor_value = "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." + +const fromTextEncoder = richtext.text.fromText; +editor.setValue(editor_value, fromTextEncoder); +~~~ + +**변경 내역:** 이 메서드는 v2.0에서 업데이트되었습니다. `mode` 매개변수가 제거되었고, `encoder` 매개변수가 추가되었습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md new file mode 100644 index 0000000..1221dce --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md @@ -0,0 +1,18 @@ +--- +sidebar_label: 이벤트 버스 메서드 +title: 이벤트 버스 메서드 +description: DHTMLX JavaScript RichText 라이브러리의 JavaScript RichText 문서 내 내부 이벤트 버스 메서드에 대한 개요입니다. 개발자 가이드, API 참조, 코드 예제 및 라이브 데모를 살펴보고 DHTMLX RichText의 무료 30일 체험판을 이용해 보세요. +--- + +# 이벤트 버스 메서드 + +이 섹션에서는 DHTMLX RichText 에디터 내 내부 이벤트 버스와 연결된 메서드를 나열합니다. +이 메서드들은 고급 사용 사례를 위해 설계되었으며, 내부 이벤트 시스템을 통해 맞춤형 통합 및 동작을 구현할 수 있습니다. + +| 이름 | 설명 | +| ------------------------------------------------- | -------------------------------------------- | +| [](../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) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/events_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/events_overview.md new file mode 100644 index 0000000..0ae46fc --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/events_overview.md @@ -0,0 +1,45 @@ +--- +sidebar_label: 이벤트 개요 +title: 이벤트 개요 +description: DHTMLX JavaScript RichText 편집기 문서에서 이벤트에 대한 완전한 개요를 확인하세요. 개발자 가이드, API 참조, 코드 샘플 및 라이브 데모를 탐색하고 DHTMLX RichText의 무료 30일 평가판을 받아보세요. +--- + +# 이벤트 개요 + +여기에서는 DHTMLX RichText 편집기에서 발생하는 모든 이벤트 목록을 확인할 수 있습니다. +이 이벤트들은 기능을 확장하거나, 사용자 동작을 모니터링하거나, 맞춤형 응답을 시작하는 데 활용할 수 있습니다. + +| 이름 | 설명 | +| ------------------------------------------------------ | ------------------------------------- | +| [](../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) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/main_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/main_overview.md new file mode 100644 index 0000000..00f8268 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/main_overview.md @@ -0,0 +1,97 @@ +--- +sidebar_label: API 개요 +title: API 개요 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText API를 탐색하세요. 개발자 가이드, API 참조, 코드 예제 및 라이브 데모를 확인하고 DHTMLX RichText의 무료 30일 체험판을 다운로드할 수 있습니다. +--- + +# API 개요 + +## RichText 생성자 + +~~~js +new richtext.RichText("#root", { + // 구성 매개변수 +}); +~~~ + +**매개변수**: + +- HTML 컨테이너(예: CSS 선택자 또는 DOM 요소) +- 구성 객체 ([속성 참조](api/overview/properties_overview.md)) + +## RichText 메서드 + +| 이름 | 설명 | +| ----------------------------------------------|---------------------------------------| +| [](../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) | + +## 이벤트 버스 메서드 + +| 이름 | 설명 | +| ----------------------------------------------|---------------------------------------| +| [](../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) | + +## 상태 메서드 + +| 이름 | 설명 | +| ----------------------------------------------|---------------------------------------| +| [](../internal/get-state.md) | @getshort(../internal/get-state.md) | +| [](../internal/get-reactive-state.md) | @getshort(../internal/get-reactive-state.md) | + +## 이벤트 + +| 이름 | 설명 | +| ----------------------------------------------|---------------------------------------| +| [](../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) | + +## 속성 + +| 이름 | 설명 | +| ----------------------------------------------|---------------------------------------| +| [](../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) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md new file mode 100644 index 0000000..c092e78 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md @@ -0,0 +1,18 @@ +--- +sidebar_label: 메서드 개요 +title: 메서드 개요 +description: DHTMLX 라이브러리 문서에서 JavaScript RichText 메서드 요약을 확인하세요. 개발자 가이드, API 참조, 코드 예제 및 라이브 데모를 탐색하고 DHTMLX RichText의 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# 메서드 개요 + +다음은 DHTMLX RichText 편집기에서 제공하는 주요 메서드에 대한 간단한 설명입니다. +이 가이드는 각 메서드가 수행하는 작업을 명확히 이해하는 데 도움을 주며, 자세한 설명과 예제로 안내합니다. + +| 이름 | 설명 | +| ------------------------------------------------------ | ----------------------------------------- | +| [](../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) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md new file mode 100644 index 0000000..62c6710 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md @@ -0,0 +1,21 @@ +--- +sidebar_label: 속성 개요 +title: 속성 개요 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText의 속성 개요를 살펴보세요. 개발자 가이드, API 참조, 샘플 코드, 라이브 데모를 확인하고 DHTMLX RichText의 무료 30일 체험판을 받아보세요. +--- + +# 속성 개요 + +여기에서는 DHTMLX RichText 편집기를 설정할 때 사용할 수 있는 모든 구성 속성 목록을 제공합니다. +이 옵션들을 통해 레이아웃, 툴바, 콘텐츠, 지역화 등 다양한 부분을 사용자 정의할 수 있습니다. + +| 이름 | 설명 | +| --------------------------------------------------------|----------------------------------------------| +| [](../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) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md new file mode 100644 index 0000000..ab6d77b --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md @@ -0,0 +1,15 @@ +--- +sidebar_label: 상태 메서드 +title: 상태 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText의 내부 상태 메서드 개요를 살펴보세요. 개발자 가이드, API 참조, 코드 샘플 및 라이브 데모를 확인하고 DHTMLX RichText의 무료 30일 체험판을 다운로드할 수 있습니다. +--- + +# 상태 메서드 + +여기에서는 DHTMLX RichText 편집기의 내부 상태에 접근하고 관리하기 위한 메서드를 찾을 수 있습니다. +이 메서드들은 디버깅, 반응형 프레임워크 작업 또는 고급 맞춤 기능을 만들 때 유용합니다. + +| 이름 | 설명 | +| ----------------------------------------------------------- | -------------------------------------------- | +| [](../internal/get-reactive-state.md) | @getshort(../internal/get-reactive-state.md) | +| [](../internal/get-state.md) | @getshort(../internal/get-state.md) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/configuration.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/configuration.md new file mode 100644 index 0000000..36314c9 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/configuration.md @@ -0,0 +1,291 @@ +--- +sidebar_label: 구성 +title: 구성 +description: DHTMLX JavaScript RichText 라이브러리의 문서에서 구성 방법을 알아보세요. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# 구성 + +RichText는 API를 통해 원하는 모양과 동작으로 설정할 수 있습니다. 제공되는 옵션을 사용하여 다음과 같이 설정할 수 있습니다: + +- [`menubar`](api/config/menubar.md) 속성으로 **메뉴바**를 표시하거나 숨길 수 있습니다. +- [`toolbar`](api/config/toolbar.md) 속성으로 **툴바**를 설정할 수 있습니다. +- [`fullscreenMode`](api/config/fullscreen-mode.md) 속성으로 **전체화면 모드**를 활성화할 수 있습니다. +- [`layoutMode`](api/config/layout-mode.md) 속성으로 **레이아웃**을 "classic"과 "document" 모드 중에서 전환할 수 있습니다. +- [`value`](api/config/value.md) 속성으로 **초기 값**을 지정할 수 있습니다. +- [`locale`](api/config/locale.md) 속성으로 **초기 로케일**을 선택할 수 있습니다. +- [`defaultStyles`](api/config/default-styles.md) 속성으로 **초기 스타일**을 적용할 수 있습니다. + +## 레이아웃 모드 + +RichText 에디터는 두 가지 레이아웃 모드를 제공합니다. 콘텐츠에 맞는 환경에서 작업할 수 있습니다: + +- **"classic"** + +import classic_mode from '@site/static/img/richtext/classic_mode.png'; + +Classic mode + +- **"document"** + +import document_mode from '@site/static/img/richtext/document_mode.png'; + +Document mode + +모드를 선택하려면, 컴포넌트 초기화 시 RichText 설정에서 [`layoutMode`](api/config/layout-mode.md) 속성을 지정하세요: + +~~~jsx +const editor = new richtext.Richtext("#root", { + layoutMode: "document" +}); +~~~ + +## 툴바 + +RichText 툴바는 여러 그룹의 컨트롤로 구성되어 있으며, 필요에 맞게 변경할 수 있습니다. + +### 기본 툴바 컨트롤 + +RichText 툴바에서 사용할 수 있는 버튼 및 컨트롤은 아래와 같습니다: + +| 버튼 | 설명 | +|---------------------|---------------------------------------------------------------------------| +| `undo` | 가장 최근의 사용자 동작을 되돌립니다 | +| `redo` | 이전에 실행 취소한 동작을 다시 적용합니다 | +| `style` | 텍스트 스타일(예: 제목, 본문 등) 선택 | +| `font-family` | 선택한 텍스트의 글꼴을 변경합니다 | +| `font-size` | 선택한 텍스트의 크기를 조정합니다 | +| `bold` | 선택한 텍스트에 굵게 서식을 적용합니다 | +| `italic` | 선택한 텍스트에 기울임 서식을 적용합니다 | +| `underline` | 선택한 텍스트에 밑줄을 적용합니다 | +| `strike` | 취소선 서식을 적용합니다 | +| `subscript` | 텍스트를 아래 첨자로 표시합니다 | +| `superscript` | 텍스트를 위 첨자로 표시합니다 | +| `text-color` | 텍스트 색상을 변경합니다 | +| `background-color` | 텍스트의 배경(하이라이트) 색상을 변경합니다 | +| `align` | 텍스트 정렬(왼쪽, 가운데, 오른쪽, 양쪽 맞춤)을 설정합니다 | +| `indent` | 단락 들여쓰기를 증가시킵니다 | +| `outdent` | 단락 들여쓰기를 감소시킵니다 | +| `line-height` | 줄 간격(행 높이)을 조정합니다 | +| `quote` | 텍스트를 인용구로 서식화합니다 | +| `bulleted-list` | 글머리 기호 목록을 만듭니다 | +| `numbered-list` | 번호 매기기 목록을 만듭니다 | +| `link` | 하이퍼링크를 삽입하거나 편집합니다 | +| `image` | 이미지를 삽입합니다 | +| `line` | 가로선을 삽입합니다 | +| `clear` | 선택한 텍스트의 모든 서식을 제거합니다 | +| `print` | 인쇄 대화상자를 엽니다 | +| `fullscreen` | 전체화면 모드를 전환합니다 | +| `mode` | 2가지 보기 모드(클래식/문서) 간 전환 | +| `shortcuts` | 사용 가능한 키보드 단축키 목록을 표시합니다 | +| `separator` | 컨트롤 사이에 시각적 구분선을 추가합니다 | + +툴바 레이아웃은 [`toolbar`](api/config/toolbar.md) 속성으로 설정합니다. 이 속성은 원하는 컨트롤의 이름을 나열한 문자열 배열입니다. + +~~~jsx {2-36} +new richtext.Richtext("#root", { + toolbar: [ + "undo", + "redo", + "separator", + "style", + "separator", + "font-family", + "font-size", + "separator", + "bold", + "italic", + "underline", + "strike", + "separator", + "text-color", + "background-color", + "separator", + "align", + "line-height", + "outdent", + "indent", + "separator", + "bulleted-list", + "numbered-list", + "quote", + "separator", + "link", + "image", + "separator", + "clear", + "separator", + "fullscreen", + "mode" + // 다른 버튼 추가 가능 + ], + // 기타 구성 속성 +}); +~~~ + +**관련 샘플:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### 사용자 지정 툴바 컨트롤 + +사용자만의 컨트롤을 추가하고 싶다면, [`toolbar`](api/config/toolbar.md) 속성에 아래 옵션을 가진 객체를 포함할 수 있습니다: + +- `type` - (필수) 사용자 지정 컨트롤의 타입을 지정합니다. `"button"`, `"richselect"`, `"colorpicker"` 중 하나를 사용할 수 있습니다. +- `id` - (선택) 사용자 지정 컨트롤 ID(내장 컨트롤 ID와 중복되지 않아야 함) +- `label` - (선택) 버튼 라벨(아이콘과 함께 사용할 수 있음) +- `tooltip` - (선택) 마우스 오버 시 표시되는 툴팁(설정하지 않으면 "label" 값 사용) +- `css` - (선택) 컨트롤에 적용할 CSS 클래스명(기본 지원: wx-primary, wx-secondary) +- `handler` - (선택) 버튼 클릭 시 실행할 콜백 함수 + +~~~jsx {6-32} +new richtext.Richtext("#root", { + toolbar: [ + // 버튼(문자열은 버튼만 나타냄) + "bold", + "italic", + // 미리 정의된 버튼(사용자가 다른 옵션을 정의할 수 없음(라벨, 툴팁, 옵션 등), ({ type: "button", id: string })만 가능) + { + type: "button", + id: "fullscreen", + }, + // 미리 정의된 컨트롤을 사용하려면 올바른 타입을 지정해야 함(richselect/colorpicker) + // 타입이 일치하지 않으면 무시됨(툴바에 추가되지 않음) + { + type: "richselect", // type: "button" - 잘못된 값, 무시됨 + id: "mode", + }, + // 사용자 지정 버튼(아래 옵션만 지원) + // 현재 richselect/colorpicker는 사용자 정의 불가 + { + type: "button", + id: "some", + label: "Some", + handler: () => {/* custom logic */} + }, + { + type: "button", + id: "other", + icon: "wxo-help", + label: "Other", + tooltip: "Some tooltip", + handler: () => {/* custom logic */} + } + ], + // 기타 구성 속성 +}); +~~~ + +**관련 샘플:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### 툴바 숨기기 + +툴바를 숨기려면 [`toolbar`](api/config/toolbar.md) 속성을 `false`로 설정하세요: + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false, + // 기타 구성 속성 +}); +~~~ + +## 기본 스타일 + +에디터 내 특정 블록 유형의 기본 스타일 값은 [`defaultStyles`](api/config/default-styles.md) 속성으로 지정할 수 있습니다. + +~~~jsx {} +defaultStyles?: boolean | { + "*"?: { // 모든 블록에 적용, 공통 속성 설정 + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + p?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + blockquote?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h1?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h2?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h3?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h4?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h5?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h6?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + } +}; +~~~ + +`defaultStyles` 속성은 실제로 블록에 CSS를 적용하지 않고, 스타일 값을 설정만 해줍니다. 별도로 CSS 스타일을 추가해야 합니다: + +```html title="index.html" +
+``` + +```jsx {2-9} title="index.js" +const editor = new richtext.Richtext("#root", { + defaultStyles: { + h2: { + "font-family": "Roboto", + "font-size": "28px", + color: "purple", + background: "#FFC0CB" + } + } +}); +``` + +```css title="index.css" +#root h2 { + font-family: Roboto; + font-size: 28px; + color: purple; + background: #FFC0CB; +} +``` + +이 예시에서는 모든 `h2` 블록에 "Roboto" 글꼴, 28px 폰트 크기, 그리고 전경색과 배경색이 적용됩니다. CSS 규칙은 `h2` 블록에 적용됩니다. + +**관련 샘플:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/initialization.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/initialization.md new file mode 100644 index 0000000..085b467 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/initialization.md @@ -0,0 +1,63 @@ +--- +sidebar_label: 초기화 +title: 초기화 +description: DHTMLX JavaScript RichText 라이브러리의 초기화에 대해 문서에서 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# 초기화 + +이 문서는 페이지에 RichText를 설정하는 간단한 과정을 안내합니다. 아래 단계만 따라하면 앱에서 RichText 에디터를 바로 사용할 수 있습니다. + +1. [RichText 소스 파일을 페이지에 포함하기](#including-source-files) +2. [RichText 컨테이너 만들기](#creating-container) +3. [객체 생성자로 RichText 초기화하기](#initializing-richtext) + +## Including source files + +먼저, [패키지를 다운로드](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml)하여 프로젝트 폴더 내 원하는 위치에 압축을 해제하세요. + +RichText를 사용하려면 아래 두 파일을 페이지에 추가해야 합니다. + +- *richtext.js* +- *richtext.css* + +이 파일들을 저장한 경로를 정확히 지정해야 합니다. + +~~~html title="index.html" + + +~~~ + +## Creating container + +다음으로, RichText를 위한 컨테이너를 만듭니다. 예를 들어 *"root"*와 같은 ID를 부여하세요. + +~~~jsx title="index.html" +
+~~~ + +## Initializing RichText + +이제 `richtext.Richtext` 생성자를 사용하여 RichText를 생성할 수 있습니다. 이 생성자에는 두 가지가 필요합니다. + +- HTML 컨테이너(지정한 ID 사용) +- 설정 옵션을 담은 객체. [전체 옵션 목록은 여기에서 확인하세요](#configuration-properties) + +~~~jsx title="index.html" +// RichText 생성 +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +~~~ + +### Configuration properties + +:::note +**RichText**에서 사용할 수 있는 모든 속성은 [**여기**](api/overview/properties_overview.md)에서 확인할 수 있습니다. +::: + +## Example + +아래는 초기 데이터와 함께 **RichText**를 설정하는 간단한 예시입니다. + + diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md new file mode 100644 index 0000000..7ba3237 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md @@ -0,0 +1,304 @@ +--- +sidebar_label: Angular와의 통합 +title: Angular와의 통합 +description: DHTMLX JavaScript RichText 라이브러리의 문서에서 Angular와의 통합 방법을 알아보세요. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# Angular와의 통합 + +:::tip +여기 내용을 시작하기 전에 **Angular**의 주요 개념과 패턴에 익숙해져 있으면 도움이 됩니다. 빠르게 복습하고 싶다면 [**Angular documentation**](https://v17.angular.io/docs)을 참고하세요. +::: + +DHTMLX RichText는 **Angular**와 잘 호환됩니다. **Angular** 프로젝트에서 DHTMLX RichText를 사용하는 코드 샘플도 제공됩니다. 자세한 내용은 [**GitHub의 예제**](https://github.com/DHTMLX/angular-richtext-demo)를 참고하세요. + +## 프로젝트 생성 + +:::info +새 프로젝트를 시작하기 전에 [**Angular CLI**](https://v17.angular.io/cli)와 [**Node.js**](https://nodejs.org/en/)가 설치되어 있는지 확인하세요. +::: + +Angular CLI를 사용해 새로운 **my-angular-richtext-app** 프로젝트를 생성하려면 다음 명령어를 실행하세요: + +~~~json +ng new my-angular-richtext-app +~~~ + +:::note +이 가이드를 따라하는 동안에는 Angular 앱 생성 시 Server-Side Rendering(SSR)과 Static Site Generation(SSG/Prerendering)을 비활성화하여 단순하게 진행하세요! +::: + +이 명령어로 모든 준비가 완료되며, 추가 설치 과정은 필요하지 않습니다. + +### 의존성 설치 + +새로 만든 앱 디렉토리로 이동하세요: + +~~~json +cd my-angular-richtext-app +~~~ + +[**yarn**](https://yarnpkg.com/)을 사용해 의존성을 설치하고 개발 서버를 시작하세요: + +~~~json +yarn +yarn start +~~~ + +앱이 로컬에서 실행됩니다(예: `http://localhost:3000`). + +## RichText 생성 + +이제 DHTMLX RichText 소스 코드를 받아야 합니다. 앱을 잠시 중지한 후 RichText 패키지를 설치하세요. + +### 1단계. 패키지 설치 + +[**평가판 RichText 패키지**](how_to_start.md#installing-richtext-via-npm-or-yarn)를 다운로드하고, README 파일의 안내를 따르세요. 참고로, 평가판은 30일간 사용할 수 있습니다. + +### 2단계. 컴포넌트 생성 + +RichText를 앱에 추가하려면 새로운 Angular 컴포넌트를 만드세요. **src/app/**에 **richtext** 폴더를 만들고, **richtext.component.ts** 파일을 추가하세요. + +#### 소스 파일 임포트 + +**richtext.component.ts** 파일을 열고 RichText 소스 파일을 임포트하세요. 임포트 경로는 다음과 같습니다: + +- 로컬 폴더에서 PRO 버전을 설치한 경우: + +~~~jsx +import { Richtext} from 'dhx-richtext-package'; +~~~ + +- 평가판 사용 시: + +~~~jsx +import { Richtext} from '@dhx/trial-richtext'; +~~~ + +이 가이드에서는 **평가판** 설정 방법을 안내합니다. + +#### 컨테이너 설정 및 Richtext 초기화 + +RichText를 페이지에 표시하려면 컨테이너를 설정하고 생성자에서 컴포넌트를 초기화하세요: + +~~~jsx {} title="richtext.component.ts" +import { Richtext} from '@dhx/trial-richtext'; +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", // "app.component.ts" 파일에서 로 사용됨 + styleUrls: ["./richtext.component.css"], // css 파일 포함 + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + // RichText용 컨테이너 초기화 + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: Richtext; + + ngOnInit() { + // RichText 컴포넌트 초기화 + this._editor = new Richtext(this.richtext_container.nativeElement, {}); + } + + ngOnDestroy(): void { + this._editor.destructor(); // RichText 해제 + } +} +~~~ + +#### 스타일 추가 + +RichText가 올바르게 보이도록 필요한 스타일을 추가하세요. **src/app/richtext/**에 **richtext.component.css** 파일을 만들고, RichText와 컨테이너를 위한 다음 스타일을 포함하세요: + +~~~css title="richtext.component.css" +/* RichText 스타일 임포트 */ +@import "@dhx/trial-richtext/dist/richtext.css"; + +/* 초기 페이지 스타일 지정 */ +html, +body{ + height: 100%; + padding: 0; + margin: 0; +} + +/* RichText 컨테이너 스타일 */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* RichText 위젯 스타일 */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### 데이터 로딩 + +RichText에 데이터를 로드하려면 데이터셋을 제공하면 됩니다. **src/app/richtext/**에 **data.ts** 파일을 만들고 샘플 데이터를 추가하세요: + +~~~jsx {} title="data.ts" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +다음으로 ***richtext.component.ts*** 파일을 열고, 데이터 파일을 임포트한 뒤 `ngOnInit()` 메서드 내에서 RichText 설정에 데이터를 지정하세요: + +~~~jsx {} title="richtext.component.ts" +import { Richtext} from '@dhx/trial-richtext'; +import { getData } from "./data"; // 데이터 임포트 +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", + styleUrls: ["./richtext.component.css"], + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: RichText; + + ngOnInit() { + const { value } = getData(); // 데이터 프로퍼티 초기화 + this._editor = new Richtext(this.richtext_container.nativeElement, { + value + // 기타 설정 프로퍼티 + }); + } + + ngOnDestroy(): void { + this._editor.destructor(); + } +} +~~~ + +또는, `ngOnInit()`에서 [`setValue()`](api/methods/set-value.md) 메서드를 사용해 RichText에 데이터를 로드할 수도 있습니다. + +~~~jsx {} title="richtext.component.ts" +import { Richtext} from '@dhx/trial-richtext'; +import { getData } from "./data"; // 데이터 임포트 +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", + styleUrls: ["./richtext.component.css"], + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: RichText; + + ngOnInit() { + const { value } = getData(); // 데이터 프로퍼티 초기화 + this._editor = new Richtext(this.richtext_container.nativeElement, { + // 기타 설정 프로퍼티 + }); + + // setValue() 메서드를 통해 데이터 적용 + this._editor.setValue({ value }); + } + + ngOnDestroy(): void { + this._editor.destructor(); + } +} +~~~ + +이제 RichText 컴포넌트가 준비되었습니다. 페이지에 추가하면 지정한 데이터로 RichText가 초기화됩니다. 필요에 따라 다양한 설정 옵션을 추가할 수 있습니다. 전체 프로퍼티 목록은 [RichText API 문서](api/overview/main_overview.md)를 참고하세요. + +#### 이벤트 처리 + +RichText에서 무언가 발생하면 이벤트가 발생합니다. 이 이벤트를 감지해 원하는 동작을 실행할 수 있습니다. [이벤트 전체 목록](api/overview/events_overview.md)도 참고하세요. + +**richtext.component.ts** 파일을 열고 `ngOnInit()` 메서드를 다음과 같이 업데이트하세요: + +~~~jsx {} title="richtext.component.ts" +// ... +ngOnInit() { + this._editor = new Richtext(this.richtext_container.nativeElement, {}); + + this._editor.api.on("print", () => { + console.log("The document is printing"); + }); +} + +ngOnDestroy(): void { + this._editor.destructor(); +} +~~~ + +### 3단계. 앱에 RichText 추가 + +***RichTextComponent***를 앱에서 사용하려면, ***src/app/app.component.ts***를 열고 기본 코드를 다음과 같이 교체하세요: + +~~~jsx {} title="app.component.ts" +import { Component } from "@angular/core"; + +@Component({ + selector: "app-root", + template: `` +}) +export class AppComponent { + name = ""; +} +~~~ + +이제 ***src/app/***에 ***app.module.ts***를 생성하고, 아래와 같이 *RichTextComponent*를 추가하세요: + +~~~jsx {} title="app.module.ts" +import { NgModule } from "@angular/core"; +import { BrowserModule } from "@angular/platform-browser"; + +import { AppComponent } from "./app.component"; +import { RichTextComponent } from "./richtext/richtext.component"; + +@NgModule({ + declarations: [AppComponent, RichTextComponent], + imports: [BrowserModule], + bootstrap: [AppComponent] +}) +export class AppModule {} +~~~ + +마지막으로 ***src/main.ts*** 파일을 다음 코드로 업데이트하세요: + +~~~jsx title="main.ts" +import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; +import { AppModule } from "./app/app.module"; +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); +~~~ + +이제 앱을 실행하면 페이지에서 데이터와 함께 RichText가 로드된 것을 볼 수 있습니다. + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +이렇게 하면 DHTMLX RichText를 Angular에서 사용할 준비가 끝납니다. 코드를 필요에 맞게 자유롭게 수정하세요. 전체 예제는 [**GitHub**](https://github.com/DHTMLX/angular-richtext-demo)에서 확인할 수 있습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_react.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_react.md new file mode 100644 index 0000000..4143067 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_react.md @@ -0,0 +1,257 @@ +--- +sidebar_label: React와의 통합 +title: React와의 통합 +description: DHTMLX JavaScript RichText 라이브러리의 문서에서 React와의 통합에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 시도해 보세요. DHTMLX RichText의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# React와의 통합 + +:::tip +이 가이드에 들어가기 전에 [**React**](https://react.dev)에 대한 경험이 있으면 좋습니다. 빠르게 복습이 필요하다면 [**React 공식 문서**](https://react.dev/learn)를 참고하세요. +::: + +DHTMLX RichText는 **React**와 잘 작동합니다. React 앱에서 DHTMLX RichText를 사용하는 방법에 대한 코드 샘플도 제공됩니다. 자세한 내용은 [**GitHub 예제**](https://github.com/DHTMLX/react-richtext-demo)를 참고하세요. + +## 프로젝트 생성 + +:::info +새 프로젝트를 시작하기 전에 [**Vite**](https://vite.dev/) (선택 사항)와 [**Node.js**](https://nodejs.org/en/)가 설치되어 있는지 확인하세요. +::: + +기본 **React** 프로젝트를 만들거나 **Vite와 함께 React**를 사용할 수 있습니다. 이 예제에서는 프로젝트 이름을 **my-react-richtext-app**으로 지정합니다: + +~~~json +npx create-react-app my-react-richtext-app +~~~ + +### 의존성 설치 + +새 앱 폴더로 이동하세요: + +~~~json +cd my-react-richtext-app +~~~ + +그 다음, 원하는 패키지 매니저를 사용하여 의존성을 설치하고 개발 서버를 시작하세요: + +- [**yarn**](https://yarnpkg.com/)을 사용하는 경우: + +~~~json +yarn +yarn start +~~~ + +- [**npm**](https://www.npmjs.com/)을 사용하는 경우: + +~~~json +npm install +npm run dev +~~~ + +앱은 localhost(예: `http://localhost:3000`)에서 확인할 수 있습니다. + +## RichText 생성 + +이제 DHTMLX RichText 코드를 추가할 차례입니다. 먼저 앱을 중지하고 RichText 패키지를 설치하세요. + +### 1단계. 패키지 설치 + +[**평가판 RichText 패키지**](how_to_start.md#installing-richtext-via-npm-or-yarn)를 다운로드하고, README 파일의 안내에 따라 진행하세요. RichText 평가판은 30일 동안 사용할 수 있습니다. + +### 2단계. 컴포넌트 생성 + +이제 React 컴포넌트를 만들어 앱에 RichText를 추가합니다. ***src/*** 디렉터리에 ***Richtext.jsx***라는 새 파일을 만드세요. + +#### 소스 파일 임포트 + +***Richtext.jsx***를 열고 RichText 파일을 임포트합니다. 참고: + +- PRO 버전을 사용 중이고 RichText를 로컬 폴더에서 설치했다면, 임포트는 다음과 같습니다: + +~~~jsx title="Richtext.jsx" +import { Richtext} from 'dhx-richtext-package'; +import 'dhx-richtext-package/dist/richtext.css'; +~~~ + +- 평가판을 사용하는 경우, 다음과 같이 임포트하세요: + +~~~jsx title="Richtext.jsx" +import { Richtext} from '@dhx/trial-richtext'; +import "@dhx/trial-richtext/dist/richtext.css"; +~~~ + +이 가이드에서는 **평가판**을 예시로 사용합니다. + +#### 컨테이너 설정 및 Richtext 추가 + +RichText를 페이지에 표시하려면 컨테이너를 설정하고 생성자를 통해 컴포넌트를 초기화해야 합니다: + +~~~jsx {} title="Richtext.jsx" +import { useEffect, useRef } from "react"; +import { Richtext} from '@dhx/trial-richtext'; +import '@dhx/trial-richtext/dist/richtext.css'; // RichText 스타일 포함 + +export default function RichTextComponent(props) { + let richtext_container = useRef(); // RichText 컨테이너 초기화 + + useEffect(() => { + // RichText 컴포넌트 초기화 + const editor = new Richtext(richtext_container.current, {}); + + return () => { + editor.destructor(); // RichText 제거 + }; + }, []); + + return
+
+
+} +~~~ + +#### 스타일 추가 + +RichText가 올바르게 표시되려면 CSS를 추가해야 합니다. 메인 CSS 파일에 다음 스타일을 추가하세요: + +~~~css title="index.css" +/* 초기 페이지 스타일 지정 */ +html, +body, +#root { + height: 100%; + padding: 0; + margin: 0; +} + +/* RichText 컨테이너 스타일 */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* RichText 위젯 스타일 */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### 데이터 로딩 + +RichText에 데이터를 로드하려면 데이터 세트를 준비해야 합니다. ***src/*** 폴더에 ***data.js*** 파일을 만들고 다음과 같이 내용을 추가하세요: + +~~~jsx {} title="data.js" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +그 다음, ***App.js***를 열고 데이터를 임포트합니다. `` 컴포넌트에 **prop**으로 전달하세요: + +~~~jsx {2,5-6} title="App.js" +import RichText from "./Richtext"; +import { getData } from "./data"; + +function App() { + const { value } = getData(); + return ; +} + +export default App; +~~~ + +이제 ***Richtext.jsx***에서 들어오는 **prop**을 RichText 설정에 사용하세요: + +~~~jsx {} title="Richtext.jsx" +import { useEffect, useRef } from "react"; +import { Richtext} from "@dhx/trial-richtext"; +import "@dhx/trial-richtext/dist/richtext.css"; + +export default function RichTextComponent(props) { + let richtext_container = useRef(); + + useEffect(() => { + const editor = new Richtext(richtext_container.current, { + value: props.value, // 값 적용 + // 기타 설정 속성 + }); + + return () => { + editor.destructor(); + }; + }, []); + + return
+
+
+} +~~~ + +원한다면, `useEffect()` 안에서 [`setValue()`](api/methods/set-value.md) 메서드를 사용해 데이터를 로드할 수도 있습니다: + +~~~jsx {} title="Richtext.jsx" +import { useEffect, useRef } from "react"; +import { Richtext} from "@dhx/trial-richtext"; +import "@dhx/trial-richtext/dist/richtext.css"; + +export default function RichTextComponent(props) { + let richtext_container = useRef(); + + let value = props.value; + + useEffect(() => { + const editor = new Richtext(richtext_container.current, { + // 설정 속성 + }); + + editor.setValue(value); + + return () => { + editor.destructor(); + }; + }, []); + + return
+
+
+} +~~~ + +이제 RichText 컴포넌트가 준비되었습니다. 렌더링되면, RichText 에디터와 함께 데이터가 표시됩니다. 필요에 따라 설정을 조정할 수 있습니다. 사용 가능한 옵션 전체 목록은 [RichText API 문서](api/overview/main_overview.md)에서 확인할 수 있습니다. + +#### 이벤트 처리 + +RichText는 사용자가 상호작용할 때 이벤트를 발생시킵니다. 이러한 이벤트를 활용해 원하는 동작을 구현할 수 있습니다. [전체 이벤트 목록](api/overview/events_overview.md)은 문서에서 확인할 수 있습니다. + +이벤트를 처리하려면, ***Richtext.jsx***를 다음과 같이 수정하세요: + +~~~jsx {} title="Richtext.jsx" +// ... +useEffect(() => { + const editor = new Richtext(richtext_container.current, {}); + + editor.api.on("print", () => { + console.log("The document is printing"); + }); + + return () => { + editor.destructor(); + }; +}, []); +// ... +~~~ + +이제 앱을 시작하면 RichText가 데이터와 함께 페이지에 표시됩니다. + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +이것으로 DHTMLX RichText와 React의 통합이 완료되었습니다. 필요에 따라 코드를 수정할 수 있습니다. 좀 더 고급 예제가 필요하다면 [**GitHub**](https://github.com/DHTMLX/react-richtext-demo)를 확인하세요. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md new file mode 100644 index 0000000..c2c304d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md @@ -0,0 +1,267 @@ +--- +sidebar_label: Svelte와의 통합 +title: Svelte와의 통합 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 Svelte와의 통합에 대해 알아보세요. 개발자 가이드 및 API 레퍼런스를 확인하고, 코드 예제와 라이브 데모를 직접 시도해보며, DHTMLX RichText의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# Svelte와의 통합 + +:::tip +이 가이드를 따라하기 전에 **Svelte**의 기본적인 내용을 알고 있으면 도움이 됩니다. 빠르게 복습하고 싶다면 [**Svelte 공식 문서**](https://svelte.dev/)를 참고하세요. +::: + +DHTMLX RichText는 **Svelte**와 잘 호환됩니다. Svelte 앱에서 DHTMLX RichText를 사용하는 방법에 대한 실용적인 코드 예제도 제공됩니다. 더 많은 정보와 예제는 [**GitHub 예제**](https://github.com/DHTMLX/svelte-richtext-demo)에서 확인할 수 있습니다. + +## 프로젝트 생성 + +:::info +새 프로젝트를 시작하기 전에 [**Vite**](https://vite.dev/) (선택사항)와 [**Node.js**](https://nodejs.org/en/)가 설치되어 있는지 확인하세요. +::: + +**Svelte** 프로젝트를 설정하는 방법에는 여러 가지가 있습니다: + +- [**SvelteKit**](https://kit.svelte.dev/) 사용 + +또는 + +- **Svelte와 Vite** 조합 사용 (SvelteKit 없이): + +~~~json +npm create vite@latest +~~~ + +더 자세한 내용은 [관련 문서](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit)를 참고하세요. + +### 의존성 설치 + +프로젝트 이름을 **my-svelte-richtext-app**으로 하고, 해당 디렉터리로 이동합니다: + +~~~json +cd my-svelte-richtext-app +~~~ + +이제 의존성을 설치하고, 선택한 패키지 매니저를 사용하여 개발 서버를 시작하세요: + +- [**yarn**](https://yarnpkg.com/) 사용 시: + +~~~json +yarn +yarn start +~~~ + +- [**npm**](https://www.npmjs.com/) 사용 시: + +~~~json +npm install +npm run dev +~~~ + +앱이 로컬에서 실행되며 (예: `http://localhost:3000`), 브라우저에서 확인할 수 있습니다. + +## RichText 생성 + +DHTMLX RichText 소스 코드를 준비해야 합니다. 계속 진행하기 전에 앱을 중지하고 RichText 패키지를 설치하세요. + +### 1단계. 패키지 설치 + +[**평가판 RichText 패키지**](how_to_start.md#installing-richtext-via-npm-or-yarn)를 다운로드하고, README 파일의 안내에 따라 설치하세요. 평가판은 30일간 동작합니다. + +### 2단계. 컴포넌트 생성 + +이제 Svelte용 RichText 컴포넌트를 만들 차례입니다. ***src/*** 디렉터리에 ***Richtext.svelte*** 파일을 새로 만듭니다. + +#### 소스 파일 임포트 + +***Richtext.svelte***에서 RichText 소스 파일을 임포트합니다. 사용하는 버전에 따라 임포트 경로가 다릅니다: + +- PRO 버전을 로컬에 설치한 경우: + +~~~html title="Richtext.svelte" + +~~~ + +- 평가판 버전 사용 시: + +~~~html title="Richtext.svelte" + + +
+
+
+~~~ + +#### 데이터 로딩 + +RichText에 데이터를 불러오기 위해 데이터셋이 필요합니다. ***src/*** 디렉터리에 ***data.js*** 파일을 만들고, 샘플 데이터를 추가하세요: + +~~~jsx {} title="data.ts" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +이제 ***App.svelte***에서 데이터를 임포트하고, `` 컴포넌트에 prop으로 전달하세요: + +~~~html {} title="App.svelte" + + + +~~~ + +이제 ***Richtext.svelte***를 수정하여 전달받은 **props**를 RichText 설정에 사용하세요: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +또는, Svelte의 `onMount()`에서 [`setValue()`](api/methods/set-value.md) 메서드를 사용하여 데이터를 로드할 수도 있습니다: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +이 시점에서 RichText 컴포넌트는 설정이 완료되었으며, 페이지에 추가하면 데이터와 함께 로드됩니다. 필요에 따라 설정을 조정할 수 있습니다. 더 많은 옵션은 [RichText API 문서](api/overview/main_overview.md)를 참고하세요. + +#### 이벤트 처리 + +RichText는 특정 동작이 발생할 때 이벤트를 발생시키며, 이를 감지하여 원하는 코드를 실행할 수 있습니다. [이벤트 전체 목록](api/overview/events_overview.md)을 참고하세요. + +이벤트를 처리하려면 `onMount()` 메서드에서 ***Richtext.svelte***를 다음과 같이 업데이트하세요: + +~~~html {} title="Richtext.svelte" + + +// ... +~~~ + +### 3단계. 앱에 RichText 추가 + +앱에서 컴포넌트를 사용하려면 **App.svelte**를 열고, 기본 내용을 다음과 같이 교체하세요: + +~~~html title="App.svelte" + + + +~~~ + +이제 앱을 실행하면, RichText가 데이터와 함께 페이지에 표시됩니다. + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +이렇게 하면 DHTMLX RichText와 Svelte의 통합이 완료됩니다. 필요에 따라 코드를 자유롭게 수정해보세요. 더 발전된 예제가 궁금하다면 [**GitHub**](https://github.com/DHTMLX/svelte-richtext-demo)에서 확인할 수 있습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md new file mode 100644 index 0000000..dfb280c --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md @@ -0,0 +1,283 @@ +--- +sidebar_label: Vue와의 통합 +title: Vue와의 통합 +description: DHTMLX JavaScript RichText 라이브러리의 문서에서 Vue와의 통합 방법을 알아보세요. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# Vue와의 통합 + +:::tip +이 문서를 읽기 전에 [**Vue**](https://vuejs.org/)에 대한 기본적인 이해가 있으면 도움이 됩니다. 복습이 필요하다면 [**Vue 3 공식 문서**](https://vuejs.org/guide/introduction.html#getting-started)를 참고하세요. +::: + +DHTMLX RichText는 **Vue**와 잘 호환됩니다. **Vue 3**에서 DHTMLX RichText를 사용하는 방법에 대한 코드 샘플도 제공됩니다. 자세한 내용은 [**GitHub 예제**](https://github.com/DHTMLX/vue-richtext-demo)를 참고하세요. + +## 프로젝트 생성 + +:::info +새 프로젝트를 시작하기 전에 [**Node.js**](https://nodejs.org/en/)가 설치되어 있는지 확인하세요. +::: + +**Vue** 프로젝트를 생성하려면 아래 명령어를 사용하세요: + +~~~json +npm create vue@latest +~~~ + +이 명령은 **Vue** 프로젝트의 공식 스캐폴딩 도구인 `create-vue`를 실행합니다. 더 많은 정보는 [Vue.js 빠른 시작](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)에서 확인할 수 있습니다. + +이 가이드에서는 프로젝트 이름을 **my-vue-richtext-app**으로 하겠습니다. + +### 의존성 설치 + +앱 디렉터리로 이동하세요: + +~~~json +cd my-vue-richtext-app +~~~ + +선호하는 패키지 매니저를 사용해 의존성을 설치하고 개발 서버를 시작하세요: + +- [**yarn**](https://yarnpkg.com/) 사용 시: + +~~~jsx +yarn +yarn start // 또는 yarn dev +~~~ + +- [**npm**](https://www.npmjs.com/) 사용 시: + +~~~json +npm install +npm run dev +~~~ + +앱은 로컬호스트(예: `http://localhost:3000`)에서 확인할 수 있습니다. + +## RichText 생성 + +이제 DHTMLX RichText 소스 코드를 준비해야 합니다. 앱을 잠시 중단하고 RichText 패키지를 설치하세요. + +### 1단계. 패키지 설치 + +[**평가판 RichText 패키지**](how_to_start.md#installing-richtext-via-npm-or-yarn)를 다운로드하고, README 파일의 지침을 따르세요. 평가판은 30일간 사용할 수 있습니다. + +### 2단계. 컴포넌트 생성 + +앱에 RichText를 추가하기 위해 Vue 컴포넌트를 만듭니다. ***src/components/*** 디렉터리에 ***Richtext.vue*** 파일을 새로 만드세요. + +#### 소스 파일 임포트 + +***Richtext.vue*** 파일을 열고 RichText 소스 파일을 임포트하세요. 참고: + +- PRO 버전을 사용하고 로컬 폴더에서 RichText를 설치한 경우, 임포트는 다음과 같습니다: + +~~~html title="Richtext.vue" + +~~~ + +- 평가판 버전의 경우, 임포트는 다음과 같습니다: + +~~~html title="Richtext.vue" + +~~~ + +이 튜토리얼에서는 **평가판** 버전의 RichText를 설정하는 방법을 안내합니다. + +#### 컨테이너 설정 및 Richtext 추가 + +페이지에 RichText를 표시하려면 컨테이너를 만들고, 컴포넌트를 생성자와 함께 초기화하세요: + +~~~html {} title="Richtext.vue" + + + +~~~ + +#### 스타일 추가 + +RichText가 올바르게 표시되도록, 메인 CSS 파일에 RichText와 컨테이너에 대한 주요 스타일을 추가하세요: + +~~~css title="main.css" +/* 초기 페이지 스타일 지정 */ +html, +body, +#app { /* #app 루트 컨테이너를 반드시 사용하세요 */ + height: 100%; + padding: 0; + margin: 0; +} + +/* RichText 컨테이너 스타일 */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* RichText 위젯 스타일 */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### 데이터 로딩 + +RichText에 데이터를 로드하려면 데이터셋을 만드세요. ***src/*** 디렉터리에 ***data.js*** 파일을 추가하고 아래와 같이 작성할 수 있습니다: + +~~~jsx {} title="data.ts" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +그런 다음, ***App.vue***에서 데이터를 임포트하고 `data()` 메서드로 초기화하세요. 데이터를 **props**로 `` 컴포넌트에 전달합니다: + +~~~html {} title="App.vue" + + + +~~~ + +이제 ***Richtext.vue***로 돌아가서, RichText 설정에서 **props**를 사용하세요: + +~~~html {} title="Richtext.vue" + + + +~~~ + +또는, `mounted()` 훅 내부에서 [`setValue()`](api/methods/set-value.md) 메서드를 사용해 RichText에 데이터를 로드할 수도 있습니다: + +~~~html {} title="Richtext.vue" + + + +~~~ + +이제 RichText 컴포넌트가 준비되었습니다. 페이지에 추가하면, 지정한 데이터와 함께 RichText가 초기화됩니다. 설정은 필요에 따라 조정할 수 있습니다. 사용 가능한 모든 속성은 [RichText API 문서](api/overview/main_overview.md)에서 확인할 수 있습니다. + +#### 이벤트 처리 + +RichText에서 동작이 발생하면 이벤트가 트리거됩니다. 이 이벤트를 통해 원하는 동작을 실행할 수 있습니다. 자세한 이벤트 목록은 [이벤트 전체 목록](api/overview/events_overview.md)에서 확인하세요. + +***Richtext.vue***에서 `mounted()` 메서드를 업데이트하여 이벤트를 처리할 수 있습니다: + +~~~html {} title="Richtext.vue" + + +// ... +~~~ + +이제 앱을 시작하면 지정한 데이터와 함께 RichText가 페이지에 표시됩니다. + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +이렇게 하면 DHTMLX RichText를 Vue에 통합할 수 있습니다. 필요에 따라 코드를 자유롭게 수정해보세요. 더 발전된 예제를 보고 싶다면 [**GitHub**](https://github.com/DHTMLX/vue-richtext-demo)를 참고하세요. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/localization.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/localization.md new file mode 100644 index 0000000..3d05f44 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/localization.md @@ -0,0 +1,473 @@ +--- +sidebar_label: 로컬라이제이션 +title: 로컬라이제이션 +description: DHTMLX JavaScript RichText 라이브러리의 문서에서 로컬라이제이션에 대해 알아보세요. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보며, DHTMLX RichText의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# 로컬라이제이션 + +JavaScript RichText 인터페이스의 모든 라벨은 현지화할 수 있습니다. 새로운 로케일을 생성하거나 기존 로케일을 수정한 후, RichText에 적용할 수 있습니다. + +## 기본 로케일 + +기본적으로 인터페이스는 **영어** 로케일을 사용합니다: + +~~~jsx +const en = { + richtext: { + // buttons/actions + Undo: "Undo", + Redo: "Redo", + Style: "Style", + "Font family": "Font family", + "Font size": "Font size", + Bold: "Bold", + Italic: "Italic", + Underline: "Underline", + Strikethrough: "Strikethrough", + Subscript: "Subscript", + Superscript: "Superscript", + "Text color": "Text color", + "Background color": "Background color", + "Left align": "Left align", + "Center align": "Center align", + "Right align": "Right align", + Justify: "Justify", + "Line height": "Line height", + Outdent: "Outdent", + Indent: "Indent", + "Insert link": "Insert link", + "Insert image": "Insert image", + "Insert horizontal line": "Insert horizontal line", + "Clear formatting": "Clear formatting", + Print: "Print", + "Fullscreen mode": "Fullscreen mode", + "Layout mode": "Layout mode", + "Classic mode": "Classic mode", + "Document mode": "Document mode", + + // menubar exclusive options + File: "File", + Import: "Import", + Export: "Export", + Edit: "Edit", + Cut: "Cut", + Copy: "Copy", + Paste: "Paste", + View: "View", + Insert: "Insert", + Format: "Format", + Help: "Help", + New: "New", + Link: "Link", + Image: "Image", + "Horizontal line": "Horizontal line", + Text: "Text", + "Heading 1": "Heading 1", + "Heading 2": "Heading 2", + "Heading 3": "Heading 3", + "Heading 4": "Heading 4", + "Heading 5": "Heading 5", + "Heading 6": "Heading 6", + Align: "Align", + Left: "Left", + Center: "Center", + Right: "Right", + Justified: "Justified", + "Keyboard shortcuts": "Keyboard shortcuts", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "Operation failed. Please check your browser's clipboard permissions.", + + // block style dropdown + Heading: "Heading", + Quote: "Quote", + Paragraph: "Paragraph", + "Text style": "Text style", + Lists: "Lists", + + normal: "normal", + default: "default", + + // lists + "Bulleted list": "Bulleted list", + "Numbered list": "Numbered list", + + // links + "Enter text to display": "Enter text to display", + "Paste link": "Paste link", + "Link copied to clipboard": "Link copied to clipboard", + + // shortcut groups + "Text formatting": "Text formatting", + Editing: "Editing", + "Special actions": "Special actions", + + // colors + Black: "Black", + Gray: "Gray", + White: "White", + Red: "Red", + Orange: "Orange", + Yellow: "Yellow", + Lime: "Lime", + Green: "Green", + Teal: "Teal", + Cyan: "Cyan", + Blue: "Blue", + Indigo: "Indigo", + Magenta: "Magenta", + + // shades + "Light gray": "Light gray", + "Medium gray": "Medium gray", + "Dark gray": "Dark gray", + "Light red": "Light red", + "Medium red": "Medium red", + "Dark red": "Dark red", + "Light orange": "Light orange", + "Medium orange": "Medium orange", + "Dark orange": "Dark orange", + "Light yellow": "Light yellow", + "Medium yellow": "Medium yellow", + "Dark yellow": "Dark yellow", + "Light lime": "Light lime", + "Medium lime": "Medium lime", + "Dark lime": "Dark lime", + "Light green": "Light green", + "Medium green": "Medium green", + "Dark green": "Dark green", + "Light teal": "Light teal", + "Medium teal": "Medium teal", + "Dark teal": "Dark teal", + "Light cyan": "Light cyan", + "Medium cyan": "Medium cyan", + "Dark cyan": "Dark cyan", + "Light blue": "Light blue", + "Medium blue": "Medium blue", + "Dark blue": "Dark blue", + "Light indigo": "Light indigo", + "Medium indigo": "Medium indigo", + "Dark indigo": "Dark indigo", + "Light magenta": "Light magenta", + "Medium magenta": "Medium magenta", + "Dark magenta": "Dark magenta" + } +}; +~~~ + +:::info +기본 ***en*** 로케일(*영어*)과 함께, RichText에는 내장된 ***de***(*독일어*) 및 ***cn***(*중국어*) 로케일도 포함되어 있습니다. +::: + +
+de 로케일 + +~~~jsx +const de = { + richtext: { + // buttons/actions + Undo: "Rückgängig", + Redo: "Wiederholen", + Style: "Stil", + "Font family": "Schriftart", + "Font size": "Schriftgröße", + Bold: "Fett", + Italic: "Kursiv", + Underline: "Unterstrichen", + Strikethrough: "Durchgestrichen", + Subscript: "Tiefgestellt", + Superscript: "Hochgestellt", + "Text color": "Textfarbe", + "Background color": "Hintergrundfarbe", + "Left align": "Linksbündig", + "Center align": "Zentriert", + "Right align": "Rechtsbündig", + Justify: "Blocksatz", + "Line height": "Zeilenhöhe", + Outdent: "Einzug verringern", + Indent: "Einzug erhöhen", + "Insert link": "Link einfügen", + "Insert image": "Bild einfügen", + "Insert horizontal line": "Horizontale Linie einfügen", + "Clear formatting": "Formatierung löschen", + Print: "Drucken", + "Fullscreen mode": "Vollbildmodus", + "Layout mode": "Layout-Modus", + "Classic mode": "Klassischer Modus", + "Document mode": "Dokumentenmodus", + + // menubar exclusive options + File: "Datei", + Import: "Importieren", + Export: "Exportieren", + Edit: "Bearbeiten", + Cut: "Ausschneiden", + Copy: "Kopieren", + Paste: "Einfügen", + View: "Ansicht", + Insert: "Einfügen", + Format: "Format", + Help: "Hilfe", + New: "Neu", + Link: "Link", + Image: "Bild", + "Horizontal line": "Horizontale Linie", + Text: "Text", + "Heading 1": "Überschrift 1", + "Heading 2": "Überschrift 2", + "Heading 3": "Überschrift 3", + "Heading 4": "Überschrift 4", + "Heading 5": "Überschrift 5", + "Heading 6": "Überschrift 6", + Align: "Ausrichten", + Left: "Links", + Center: "Zentriert", + Right: "Rechts", + Justified: "Blocksatz", + "Keyboard shortcuts": "Tastenkürzel", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "Operation fehlgeschlagen. Bitte überprüfen Sie die Berechtigungen für die Zwischenablage Ihres Browsers.", + + // block style dropdown + Heading: "Überschrift", + Quote: "Zitat", + Paragraph: "Absatz", + "Text style": "Textstil", + Lists: "Listen", + + normal: "normal", + default: "standard", + + // lists + "Bulleted list": "Liste mit Aufzählungszeichen", + "Numbered list": "Nummerierte Liste", + + // links + "Enter text to display": "Text zum Anzeigen eingeben", + "Paste link": "Link einfügen", + "Link copied to clipboard": "Link in die Zwischenablage kopiert", + + // shortcut groups + "Text formatting": "Textformatierung", + Editing: "Bearbeitung", + "Special actions": "Spezielle Aktionen", + + // colors + Black: "Schwarz", + Gray: "Grau", + White: "Weiß", + Red: "Rot", + Orange: "Orange", + Yellow: "Gelb", + Lime: "Limette", + Green: "Grün", + Teal: "Türkis", + Cyan: "Cyan", + Blue: "Blau", + Indigo: "Indigo", + Magenta: "Magenta", + + // shades + "Light gray": "Hellgrau", + "Medium gray": "Mittelgrau", + "Dark gray": "Dunkelgrau", + "Light red": "Hellrot", + "Medium red": "Mittelrot", + "Dark red": "Dunkelrot", + "Light orange": "Hellorange", + "Medium orange": "Mittelorange", + "Dark orange": "Dunkelorange", + "Light yellow": "Hellgelb", + "Medium yellow": "Mittleres Gelb", + "Dark yellow": "Dunkelgelb", + "Light lime": "Hellgrün", + "Medium lime": "Mittleres Grün", + "Dark lime": "Dunkelgrün", + "Light green": "Hellgrün", + "Medium green": "Mittleres Grün", + "Dark green": "Dunkelgrün", + "Light teal": "Hellblau", + "Medium teal": "Mittelblau", + "Dark teal": "Dunkelblau", + "Light cyan": "Hellcyan", + "Medium cyan": "Mittleres Cyan", + "Dark cyan": "Dunkelcyan", + "Light blue": "Hellblau", + "Medium blue": "Mittelblau", + "Dark blue": "Dunkelblau", + "Light indigo": "Hellindigo", + "Medium indigo": "Mittelindigo", + "Dark indigo": "Dunkelindigo", + "Light magenta": "Hellmagenta", + "Medium magenta": "Mittleres Magenta", + "Dark magenta": "Dunkelmagenta" + } +}; +~~~ +
+ +
+cn 로케일 + +~~~jsx +const cn = { + richtext: { + // buttons/actions, + Undo: "撤销", + Redo: "重做", + Style: "样式", + "Font family": "字体", + "Font size": "字体大小", + Bold: "粗体", + Italic: "斜体", + Underline: "下划线", + Strikethrough: "删除线", + Subscript: "下标", + Superscript: "上标", + "Text color": "文本颜色", + "Background color": "背景颜色", + "Left align": "左对齐", + "Center align": "居中对齐", + "Right align": "右对齐", + Justify: "两端对齐", + "Line height": "行高", + Outdent: "减少缩进", + Indent: "增加缩进", + "Insert link": "插入链接", + "Insert image": "插入图片", + "Insert horizontal line": "插入水平线", + "Clear formatting": "清除格式", + Print: "打印", + "Fullscreen mode": "全屏模式", + "Layout mode": "布局模式", + "Classic mode": "经典模式", + "Document mode": "文档模式", + + // menubar exclusive options + File: "文件", + Import: "导入", + Export: "导出", + Edit: "编辑", + Cut: "剪切", + Copy: "复制", + Paste: "粘贴", + View: "视图", + Insert: "插入", + Format: "格式", + Help: "帮助", + New: "新建", + Link: "链接", + Image: "图片", + "Horizontal line": "水平线", + Text: "文本", + "Heading 1": "标题 1", + "Heading 2": "标题 2", + "Heading 3": "标题 3", + "Heading 4": "标题 4", + "Heading 5": "标题 5", + "Heading 6": "标题 6", + Align: "对齐", + Left: "左", + Center: "居中", + Right: "右", + Justified: "两端对齐", + "Keyboard shortcuts": "键盘快捷键", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "操作失败。请检查浏览器的剪贴板权限。", + + // block style dropdown + Heading: "标题", + Quote: "引用", + Paragraph: "段落", + "Text style": "文本样式", + Lists: "列表", + + normal: "普通的", + default: "默认", + + // lists + "Bulleted list": "项目符号列表", + "Numbered list": "编号列表", + + // links + "Enter text to display": "输入要显示的文本", + "Paste link": "粘贴链接", + "Link copied to clipboard": "链接已复制到剪贴板", + + // shortcut groups + "Text formatting": "文本格式化", + Editing: "编辑", + "Special actions": "特殊操作", + + // colors + Black: "黑色", + Gray: "灰色", + White: "白色", + Red: "红色", + Orange: "橙色", + Yellow: "黄色", + Lime: "酸橙色", + Green: "绿色", + Teal: "水鸭色", + Cyan: "青色", + Blue: "蓝色", + Indigo: "靛蓝色", + Magenta: "洋红色", + + // shades + "Light gray": "浅灰色", + "Medium gray": "中灰色", + "Dark gray": "深灰色", + "Light red": "浅红色", + "Medium red": "中红色", + "Dark red": "深红色", + "Light orange": "浅橙色", + "Medium orange": "中橙色", + "Dark orange": "深橙色", + "Light yellow": "浅黄色", + "Medium yellow": "中黄色", + "Dark yellow": "深黄色", + "Light lime": "浅酸橙色", + "Medium lime": "中酸橙色", + "Dark lime": "深酸橙色", + "Light green": "浅绿色", + "Medium green": "中绿色", + "Dark green": "深绿色", + "Light teal": "浅水鸭色", + "Medium teal": "中水鸭色", + "Dark teal": "深水鸭色", + "Light cyan": "浅青色", + "Medium cyan": "中青色", + "Dark cyan": "深青色", + "Light blue": "浅蓝色", + "Medium blue": "中蓝色", + "Dark blue": "深蓝色", + "Light indigo": "浅靛蓝色", + "Medium indigo": "中靛蓝色", + "Dark indigo": "深靛蓝色", + "Light magenta": "浅洋红色", + "Medium magenta": "中洋红色", + "Dark magenta": "深洋红色" + } +}; +~~~ +
+ +## 사용자 정의 로케일 + +사용자 정의 로케일을 사용하려면: + +- 직접 로케일을 만들거나 기본 로케일을 수정하여 필요한 모든 라벨에 대한 번역을 추가하세요(언어는 자유롭게 선택 가능) +- [`locale`](api/config/locale.md) 속성이나 [`setLocale()`](api/methods/set-locale.md) 메서드를 사용하여 해당 로케일을 **RichText**에 설정하세요 + +## 예시 + +아래는 다양한 로케일 간 전환 방법을 보여주는 코드 예시입니다: + + diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/stylization.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/stylization.md new file mode 100644 index 0000000..adbebeb --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/stylization.md @@ -0,0 +1,89 @@ +--- +title: 스타일링 +sidebar_label: 스타일링 +description: DHTMLX JavaScript RichText 라이브러리의 문서에서 스타일링에 대해 알아보세요. 개발자 가이드와 API 레퍼런스를 둘러보고, 코드 예제와 라이브 데모를 직접 사용해보고, DHTMLX RichText의 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# 스타일링 + +DHTMLX RichText는 CSS 변수 또는 위젯의 특정 부분을 대상으로 하는 커스텀 스타일을 사용하여 어떤 스타일에도 맞게 꾸밀 수 있습니다. + +여기서는 **다크 테마**를 설정하고, menubar, toolbar, popup, content area 등 에디터의 다양한 부분을 클래스 이름으로 스타일링하는 방법을 간단히 안내합니다. + +## 기본 구조와 클래스 이름 + +RichText는 UI 레이아웃을 위해 다음과 같은 주요 클래스를 사용합니다: + +| 클래스 이름 | 설명 | +|---------------------------|----------------------------------------------| +| `.wx-richtext` | RichText 위젯의 루트 컨테이너 | +| `.wx-richtext-menubar` | menubar의 컨테이너 | +| `.wx-richtext-menu` | menubar 드롭다운 메뉴의 컨테이너 | +| `.wx-richtext-toolbar` | toolbar의 컨테이너 | +| `.wx-editor-area` | 주요 편집 가능한 콘텐츠 영역의 컨테이너 | + +이 클래스들은 CSS에서 RichText 에디터의 외관을 조정하는 데 사용할 수 있습니다. + +## 기본 스타일 덮어쓰기 + +RichText에 맞춤 스타일을 적용하려면, `#root` 컨테이너나 특정 하위 요소에 CSS 변수를 업데이트하세요: + +```html +
+ + +``` + +:::note +이 설정은 에디터에 다크 배경을 적용하고, 버튼 및 아이콘 색상을 업데이트하며, 다크 UI에서 요소들을 더 잘 보이도록 해줍니다. +::: + +## 지원되는 CSS 변수 목록 + +| 변수 이름 | 설명 | +|----------------------------|-------------------------------------------------------------------| +| `--wx-background` | 에디터 및 팝업의 배경색 | +| `--wx-background-alt` | menubar의 대체 배경색 | +| `--wx-color-primary` | 링크, blockquote, 이미지 리사이즈 테두리 등 강조 색상 | +| `--wx-color-font` | 에디터, menubar, toolbar의 기본 폰트 색상 | +| `--wx-color-font-alt` | 대체 폰트 색상 | +| `--wx-color-font-disabled` | menubar 및 toolbar 요소의 비활성 텍스트 색상 | +| `--wx-border` | 에디터 전반에 사용되는 테두리 스타일 | +| `--wx-color-secondary-hover`| menubar 및 toolbar 내 버튼의 hover 상태 배경색 | +| `--wx-button-active` | menubar 및 toolbar 내 버튼의 active 상태 배경색 | +| `--wx-icon-color` | 드롭다운에 사용되는 toolbar 화살표 아이콘 색상 | +| `--wx-popup-border` | 팝업 요소의 테두리 | + +## 권장 사항 + +* `color-scheme: dark` 속성은 다크 모드에서 네이티브 input 요소가 올바르게 보이도록 도와줍니다. +* 특별한 이유가 없다면, `display`나 `position`과 같은 레이아웃 관련 CSS 속성은 변경하지 않는 것이 좋습니다. + +## 라이브 데모 + +아래는 RichText에 커스텀 스타일을 적용하는 간단한 예시입니다: + + + +**관련 문서:** [Customization](guides/configuration.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/typescript_support.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/typescript_support.md new file mode 100644 index 0000000..f53c312 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/typescript_support.md @@ -0,0 +1,19 @@ +--- +sidebar_label: TypeScript 지원 +title: TypeScript 지원 +description: DHTMLX JavaScript RichText 라이브러리에서 TypeScript를 사용하는 방법에 대해 문서에서 확인할 수 있습니다. 개발자 가이드 및 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 사용해 보세요. DHTMLX RichText의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# TypeScript 지원 + +버전 2.0부터 DHTMLX RichText는 내장된 TypeScript 정의 파일을 제공하므로, TypeScript를 바로 사용할 수 있습니다. + +:::note +Snippet Tool을 사용하여 다양한 기능을 직접 시도해 볼 수 있습니다. +::: + +## TypeScript 사용의 장점 + +DHTMLX RichText를 TypeScript와 함께 사용하면 여러 가지 이점이 있습니다. + +TypeScript는 개발 과정을 더 원활하고 신뢰성 있게 만들어 줍니다. 타입 검사와 자동 완성 기능으로 오류를 초기에 발견하고 개발 속도를 높일 수 있습니다. 또한, TypeScript를 사용하면 DHTMLX RichText API를 다룰 때 어떤 데이터 타입을 사용해야 하는지 명확하게 알 수 있습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/ko/docusaurus-plugin-content-docs/current/how_to_start.md new file mode 100644 index 0000000..e830e43 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/how_to_start.md @@ -0,0 +1,113 @@ +--- +sidebar_label: 시작하기 +title: 시작하기 +description: DHTMLX JavaScript RichText 라이브러리의 문서를 통해 DHTMLX RichText를 시작하는 방법을 알아보세요. 개발자 가이드와 API 레퍼런스를 참고하고, 코드 예제와 라이브 데모를 직접 실행해 보며, DHTMLX RichText의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# 시작하기 + +페이지에 RichText를 적용하는 간단한 절차를 안내합니다. + +import classic_mode from '@site/static/img/richtext/classic_mode.png'; + +Classic mode + +## 1단계. 소스 파일 포함하기 + +먼저, *index.html*이라는 HTML 파일을 생성하세요. 이 파일에 RichText 소스 파일을 추가합니다. + +필요한 파일은 다음 두 가지입니다: + +- RichText의 JS 파일 +- RichText의 CSS 파일 + +~~~html {5-6} title="index.html" + + + + How to Start with RichText + + + + + + + +~~~ + +### npm 또는 yarn을 통한 RichText 설치 + +RichText는 **yarn** 또는 **npm**을 사용해 프로젝트에 추가할 수 있습니다. + +#### npm 또는 yarn으로 체험판 RichText 설치 + +:::info +체험판 RichText를 사용하려면 [**trial RichText package**](https://dhtmlx.com/docs/products/dhtmlxRichtext/download.shtml)를 다운로드하고, *README* 파일의 안내에 따라 설치하세요. 참고로, 체험판은 30일 동안 사용할 수 있습니다. +::: + +#### npm 또는 yarn으로 PRO RichText 설치 + +:::info +PRO 버전을 이용하려면 [Client's Area](https://dhtmlx.com/clients/)에서 DHTMLX 전용 **npm**을 위한 로그인 정보와 비밀번호를 생성하세요. 자세한 설치 가이드도 제공됩니다. 전용 **npm** 접근 권한은 RichText 라이선스가 활성화되어 있는 동안 유지됩니다. +::: + +## 2단계. RichText 생성하기 + +이제 RichText를 페이지에 추가할 차례입니다. 먼저 RichText를 위한 `
` 컨테이너를 만드세요. 절차는 다음과 같습니다: + +- *index.html* 파일에 DIV 컨테이너 추가 +- `richtext.Richtext` 생성자를 사용해 RichText 초기화 + +생성자는 RichText가 표시될 HTML 컨테이너에 대한 유효한 CSS 선택자와, 필요한 경우 설정 객체를 인자로 받습니다. + +~~~html {9,12-14} title="index.html" + + + + How to Start with RichText + + + + +
+ + + + +~~~ + +## 3단계. RichText 설정하기 + +이제 RichText가 시작될 때 사용할 설정 옵션을 지정할 수 있습니다. + +가장 먼저, [`value`](api/config/value.md) 속성을 사용해 에디터의 초기 데이터를 설정하세요. 또한 [**menubar**](api/config/menubar.md)를 활성화하거나, [**toolbar**](api/config/toolbar.md)를 조정하고, [**fullscreen**](api/config/fullscreen-mode.md) 및 [**layout**](api/config/layout-mode.md) 모드를 설정할 수 있습니다. [**locale**](api/config/locale.md)를 변경하거나 [**default styles**](api/config/default-styles.md)를 적용할 수도 있습니다. + +~~~jsx {2-12} +const editor = new richtext.Richtext("#root", { + menubar: true, + toolbar: false, + fullscreenMode: true, + layoutMode: "document", + locale: richtext.locales.cn + defaultStyles: { + h4: { + "font-family": "Roboto" + }, + // other settings + } +}); +~~~ + +## 다음 단계 + +이제 세 단계만 거치면 RichText를 사용해 콘텐츠를 편집할 준비가 완료됩니다. 바로 작업을 시작하거나, JavaScript RichText의 다양한 기능을 더 살펴보세요. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/index.md b/i18n/ko/docusaurus-plugin-content-docs/current/index.md new file mode 100644 index 0000000..2583b91 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/index.md @@ -0,0 +1,154 @@ +--- +sidebar_label: RichText 개요 +title: RichText 개요 +slug: / +description: DHTMLX JavaScript RichText 라이브러리의 개요를 문서에서 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 둘러보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText의 30일 무료 평가판도 다운로드해보세요. +--- + +# RichText 개요 + +**DHTMLX RichText**는 JavaScript로 제작된 가볍고 유연한 WYSIWYG 에디터입니다. 현대 웹 애플리케이션에서 손쉬운 편집을 위해 설계되었으며, 단순한 인터페이스와 다양한 서식 도구, 그리고 콘텐츠 표시 방식에 대한 완전한 제어 기능을 제공합니다. CMS, 관리자 대시보드, 또는 내장 문서 편집기 등 다양한 프로젝트에 RichText를 쉽게 추가하고 조정할 수 있습니다. + +**DHTMLX RichText**의 주요 기능은 다음과 같습니다: + +- 두 가지 [**레이아웃 모드**](api/config/layout-mode.md) + +- 콘텐츠를 일반 텍스트 또는 HTML로 저장 가능 + +- 기본 및 사용자 지정 버튼을 구성할 수 있는 [**툴바**](api/config/toolbar.md) + +- 고정형이며 표시/숨김이 가능한 [**메뉴바**](api/config/menubar.md) + +- 이미지 업로드, 다양한 서식 지정, 사용자 정의 스타일, 전체화면 편집 지원 + +- [전체 API 접근](api/overview/main_overview.md) - [이벤트 처리](api/overview/event_bus_methods_overview.md), [콘텐츠 변경](api/overview/methods_overview.md), [반응형 상태 관리](api/overview/state_methods_overview.md) + +RichText는 어떤 프레임워크와도 함께 사용할 수 있으며, [React](guides/integration_with_react.md), [Angular](guides/integration_with_angular.md), [Vue](guides/integration_with_vue.md), [Svelte](guides/integration_with_svelte.md)와도 연동되어 다양한 프론트엔드 환경에 적용할 수 있습니다. + +이 문서에서는 설치, 설정, 사용법, 그리고 다양한 조정 방법을 안내합니다. 일반적인 작업 예제, [전체 API 문서](api/overview/main_overview.md), 그리고 여러 앱에 RichText를 추가하는 팁도 제공합니다. + +## RichText 구조 + +### 메뉴바 + +RichText 메뉴바는 새 문서 만들기, 인쇄, 가져오기/내보내기 등 다양한 편집 작업에 빠르게 접근할 수 있도록 도와줍니다. 기본적으로 메뉴바는 숨겨져 있습니다. + +[`menubar`](api/config/menubar.md) 속성으로 메뉴바의 표시 여부를 제어할 수 있습니다. 메뉴바를 켜거나 끌 수 있지만, 현재는 항목을 변경할 수 없습니다. + +import menubar from '@site/static/img/richtext/menubar.png'; + +Menubar + +### 툴바 + +RichText 툴바는 사용자가 텍스트를 빠르게 서식 지정하고 구조를 편집할 수 있도록 해줍니다. 기본적으로 [toolbar](api/config/toolbar.md#기본-구성)는 활성화되어 있으며, 굵게, 기울임, 글꼴 설정, 목록 등 일반적으로 많이 쓰는 컨트롤을 보여줍니다. + +[`toolbar`](api/config/toolbar.md) 속성을 통해 어떤 컨트롤이 표시될지, 배열 순서 등을 변경할 수 있습니다. 툴바를 켜거나 끄는 것은 물론, 기본 버튼의 순서를 변경하거나, 내장 및 사용자 정의 버튼으로 직접 구성할 수도 있습니다. + +import toolbar from '@site/static/img/richtext/toolbar.png'; + +Toolbar + +### 에디터 + +RichText의 핵심은 바로 에디터로, 모든 콘텐츠가 작성되고 서식이 적용되는 부분입니다. [`value`](api/config/value.md), [`layoutMode`](api/config/layout-mode.md), [`defaultStyles`](api/config/default-styles.md) 등 다양한 옵션으로 에디터의 모양과 동작을 조정할 수 있습니다. RichText는 사용자 정의 스타일, 이미지 추가, 다양한 화면 및 요구에 맞춘 레이아웃 조정이 가능합니다. + +#### 두 가지 작업 모드 + +DHTMLX RichText는 "classic"과 "document" 두 가지 방식으로 콘텐츠를 표시할 수 있습니다. 원하는 편집 스타일에 맞는 모드를 선택할 수 있으며, [`layoutMode`](api/config/layout-mode.md) 속성으로 전환할 수 있습니다. + +- **"classic"** + +import classic_mode from '@site/static/img/richtext/classic_mode.png'; + +Classic mode + +- **"document"** + +import document_mode from '@site/static/img/richtext/document_mode.png'; + +Document mode + +## 지원 포맷 + +RichText는 콘텐츠를 **HTML** 또는 일반 텍스트로 [읽기](api/methods/set-value.md) 및 [저장](api/methods/get-value.md)할 수 있습니다. + +#### HTML 포맷 + +import html_format from '@site/static/img/richtext/html_format.png'; + +HTML format + +#### 텍스트 포맷 + +import text_format from '@site/static/img/richtext/text_format.png'; + +Text format + +## 키보드 단축키 + +RichText는 빠른 편집과 서식 지정을 위해 다양한 표준 키보드 단축키를 지원합니다. 단축키는 각 플랫폼에서 일반적으로 쓰이는 방식과 동일하며, **Windows/Linux**(`Ctrl`)와 **macOS**(`⌘`) 모두에서 동작합니다. + +### 텍스트 서식 + +| 동작 | Windows/Linux | macOS | +|----------------|-----------------|---------------| +| 굵게* | `Ctrl+B` | `⌘B` | +| 기울임 | `Ctrl+I` | `⌘I` | +| 밑줄 | `Ctrl+U` | `⌘U` | +| 취소선 | `Ctrl+Shift+X` | `⌘⇧X` | + +### 편집 + +| 동작 | Windows/Linux | macOS | +|---------|--------------------------|---------------| +| 실행 취소 | `Ctrl+Z` | `⌘Z` | +| 다시 실행 | `Ctrl+Y` / `Ctrl+Shift+Z`| `⌘Y` / `⌘⇧Z` | +| 잘라내기 | `Ctrl+X` | `⌘X` | +| 복사 | `Ctrl+C` | `⌘C` | +| 붙여넣기 | `Ctrl+V` | `⌘V` | + +### 특수 동작 + +| 동작 | Windows/Linux | macOS | +|----------------|---------------|-------| +| 링크 삽입 | `Ctrl+K` | `⌘K` | +| 인쇄 | `Ctrl+P` | `⌘P` | + +:::info +앞으로 더 많은 단축키가 추가될 수 있습니다. +::: + +RichText의 전체 키보드 단축키 목록은 **도움말**에서 **키보드 단축키**를 선택하면 확인할 수 있습니다: + +import shortcut_reference from '@site/static/img/richtext/shortcut_reference.png'; + +Shortcut reference diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/news/migration.md b/i18n/ko/docusaurus-plugin-content-docs/current/news/migration.md new file mode 100644 index 0000000..a9a59f5 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/news/migration.md @@ -0,0 +1,167 @@ +--- +sidebar_label: 최신 버전으로의 마이그레이션 +title: 최신 버전으로의 마이그레이션 +description: DHTMLX JavaScript RichTExt 라이브러리 문서에서 최신 버전으로의 마이그레이션에 대해 알아보세요. 개발자 가이드와 API 레퍼런스를 둘러보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichTExt의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# 최신 버전으로의 마이그레이션 + +## 1.2 -> 2.0 + +### 속성 마이그레이션 + +| 기존 속성 | 대체 속성 | 비고 | +| ----------------- | -------------------------- | ------------------------------------------- | +| `customStats` | *(삭제됨)* | 2.0 버전에서 더 이상 제공되지 않음 | +| `toolbarBlocks` | `toolbar` | 툴바 구조를 더 세밀하게 설정 가능 | +| `defaultStyles` | `defaultStyles` (업데이트) | 구조가 블록별 및 CSS 기반으로 변경됨 | +| `mode` | `layoutMode` | 더 엄격한 enum 기반 설정으로 대체됨 | + +### - `customStats` + +`customStats` 속성은 최신 RichText 버전에서 제거되었습니다. 따라서 문자, 단어, 문장 수와 같은 커스텀 통계에 대한 내장 지원이 더 이상 제공되지 않습니다. + +텍스트 메트릭을 처리하려면, 에디터 내용을 직접 가져와 원하는 방식으로 처리하면 됩니다: + +```jsx +const content = editor.getValue(); +const wordCount = content.split(/\s+/).length; +``` + +### - `toolbarBlocks` → [`toolbar`](api/config/toolbar.md) + +**2.0** 이전에는 컨트롤 블록만 설정할 수 있었습니다: +```jsx{2} title="Before 2.0" +new dhx.RichText("#root", { + toolbarBlocks: ["undo", "style", "decoration", "colors", "align", "link"] +}); +``` + +**2.0** 이후에는 필요한 개별 컨트롤을 자유롭게 나열할 수 있습니다: +```jsx{2-4} title="From 2.0" +new richtext.Richtext("#root", { + toolbar: [ + "undo", "style", "bold", "italic", "underline", "text-color", + "align", "link" + ] +}); +``` + +### - [`defaultStyles`](api/config/default-styles.md) + +**2.0** 이전에는 툴바 선택 컨트롤의 기본값을 아래와 같이 지정했습니다: +```jsx title="Before 2.0" +defaultStyles: { + "font-family": "Tahoma", + "font-size": "14px" +} +``` + +**2.0**부터는 특정 블록 유형별로 기본 스타일 값을 설정할 수 있습니다: +```jsx title="From 2.0" +defaultStyles: { + "*": { + "font-family": "Tahoma", + "font-size": "14px" + }, + h1: { + "font-size": "32px", + "color": "#333" + } +} +``` + +:::note +`*` 키는 모든 요소에 대한 기본값을 설정하며, p, h1, blockquote 등 특정 요소별로 추가 커스터마이즈가 가능합니다. +::: + +### - `mode` → [`layoutMode`](api/config/layout-mode.md) + +```jsx{2} title="Before 2.0" +new dhx.RichText("#root", { + mode: "document" +}); +``` + +```jsx{2} title="From 2.0" +new Richtext("#root", { + layoutMode: "document" // 또는 "classic" +}); +``` + +이제 [`layoutMode`](api/config/layout-mode.md)는 `"classic"` 또는 `"document"` 값만 허용합니다. + +### 메서드 마이그레이션 + +| 기존 메서드 | 대체 메서드 | 비고 | +| ------------------------- | ---------------------------------------- | -------------------------------------------------------------- | +| `getValue(mode)` | `getValue(encoder)` | 문자열 모드 대신 encoder 사용, encoder는 별도 import 필요 | +| `setValue(value, mode)` | `setValue(value, encoder)` | 문자열 모드 대신 encoder 사용, encoder는 별도 import 필요 | +| `getStats()` | *삭제됨* | 대체 없음, 직접 구현 필요 | +| `getEditorAPI()` | *삭제됨* | 내부용, 공개 API 사용 권장 | +| `fire()` | *삭제됨* | `exec()`와 `intercept()`로 대체 | +| `on()`, `detach()` | ✅ 유지됨 (`api.on`, `api.detach`) | 이제 `richtext.api`를 통해 접근 | +| `fullScreen()` | *삭제됨* | `fullscreenMode` 설정 속성 사용 | +| `exitFullScreen()` | *삭제됨* | `fullscreenMode` 설정 속성 사용 | +| `paint()` | *삭제됨* | 더 이상 필요 없음 | +| `destructor()` | ✅ 여전히 사용 가능 | 변경 없음 | +| `setConfig()` | ✅ 새로 추가 | 실시간 설정 업데이트 가능 | +| `setLocale()` | ✅ 새로 추가 | 동적으로 언어 전환 가능 | +| `getReactiveState()` | ✅ 새로 추가 | 반응형 상태 추적 가능 | +| `getState()` | ✅ 새로 추가 | 현재 정적 설정 상태 제공 | +| `intercept()` | ✅ 새로 추가 | 내부 동작 가로채기 가능 | +| `exec()` | ✅ 새로 추가 | 내부 동작 실행 가능 | + +### - [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md) + +```jsx title="Before 2.0" +... +editor.setValue("

Hello

", "html"); +editor.getValue("text"); +``` + +```jsx title="From 2.0" +const fromTextEncoder = richtext.text.fromText; +const fromHTMLEncoder = richtext.html.fromHTML; + +const toTextEncoder = richtext.text.toText; +const toHTMLEncoder = richtext.html.toHTML; +... +editor.setValue("

Hello

", fromHTMLEncoder); +editor.getValue(toTextEncoder); +``` + +:::note +encoder를 전달하지 않고 `getValue()` 및 `setValue()`를 호출해도 무방하며, 이 경우 기본적으로 HTML이 사용됩니다. +::: + +### - [`on`](api/internal/on.md) / [`detach`](api/internal/detach.md) + +```jsx title="Before 2.0" +editor.events.on("Change", function(action, canUndo, canRedo){ + // your code here +}); + +editor.events.detach("Change"); +``` + +```jsx title="From 2.0" +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}, { tag: "track" }); + +editor.api.detach("track"); +``` + +### - `fire()` → [`exec()`](api/internal/exec.md) 및 [`intercept()`](api/internal/intercept.md) 사용 + +```jsx title="Before 2.0" +editor.events.fire("some-event", [data]); +``` + +```jsx title="From 2.0" +editor.api.exec("some-event", obj); + +// 실행 방지 +editor.api.intercept("some-event", (obj) => false); +``` diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/news/whats_new.md b/i18n/ko/docusaurus-plugin-content-docs/current/news/whats_new.md new file mode 100644 index 0000000..fd3915a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/news/whats_new.md @@ -0,0 +1,168 @@ +--- +sidebar_label: 새로운 소식 +title: 새로운 소식 +description: DHTMLX RichText의 최신 업데이트와 릴리즈 히스토리를 DHTMLX JavaScript UI 라이브러리 문서에서 확인하세요. 가이드, API 레퍼런스, 코드 예제, 라이브 데모, 그리고 DHTMLX RichText의 30일 무료 체험판 다운로드도 제공됩니다. +--- + +## 버전 2.0.4 + +2025년 10월 15일 출시 + +### 수정 사항 + +- 단락 범위 선택이 항상 올바르게 동작하지 않던 문제 수정 +- 링크 이미지 옆에 있을 때 링크 팝업이 표시되지 않던 문제 수정 +- 시작 시 툴바 값이 실제 콘텐츠와 일치하지 않던 문제 수정 + +## 버전 2.0.3 + +2025년 8월 27일 출시 + +### 수정 사항 + +- 수평선을 클릭할 때 스크립트 오류가 발생할 수 있던 문제 수정 +- 기본 줄 간격이 올바르게 설정되지 않던 문제 수정 +- 일부 콘텐츠 스타일에 중복 선택자가 있던 문제 수정 +- 일반 텍스트 블록이 HTML 파싱 시 스타일 변경을 반영하지 않던 문제 수정 +- 파서가 HTML에서 이스케이프된 폰트명을 건너뛰던 문제 수정 +- 파서가 HTML에서 `margin-left` 및 `line-height`를 무시하던 문제 수정 + +## 버전 2.0.2 + +2025년 8월 4일 출시 + +### 수정 사항 + +- 패키지 콘텐츠가 업데이트됨 + +## 버전 2.0.1 + +2025년 7월 30일 출시 + +### 수정 사항 + +- `defaultStyles` 속성의 타입 정의가 업데이트됨 + +## 버전 2.0 + +2025년 7월 30일 출시 + +:::note +v1.2 API는 v2.0과 호환되지 않습니다. 자세한 내용은 [**마이그레이션 가이드**](news/migration.md)를 참고하세요. +::: + +### 새로운 기능 + +- **차세대 텍스트 렌더링** + 새로운 엔진으로 더 부드럽고, 빠르며, 정확한 텍스트 렌더링 제공 + +- **세분화된 툴바 구성** + 툴바를 완전히 커스터마이즈할 수 있습니다: + - [개별 툴바 컨트롤](guides/configuration.md#default-toolbar-controls) 선택 및 순서 지정 + - [사용자 정의 컨트롤](guides/configuration.md#custom-toolbar-controls) 추가 + +- **선택적 [menubar](api/config/menubar.md)** + 에디터 상단에 고전적인 메뉴 스타일 인터페이스 추가 가능 + +- **향상된 [문서 모드](guides/configuration.md#layout-modes)** + 다양한 문서 크기 지원 + +- **이미지 지원** + - [업로드 기능](api/config/image-upload-url.md)으로 이미지 삽입 + - 에디터 내에서 바로 [이미지 크기 조정](api/events/resize-image.md) 가능 + +- **개선된 링크 경험** + 링크 [팝업 인터랙션](api/events/show-popup.md)이 더 쉽게 재설계됨 + +- **새로운 서식 도구** + - 텍스트 정렬: **양쪽 정렬** + - [수평선 삽입](api/events/insert-line.md) + - [들여쓰기](api/events/indent.md) / [내어쓰기](api/events/outdent.md) + - [줄 간격 설정](api/events/set-line-height.md) + - [아래 첨자](api/events/subscript.md) / [위 첨자](api/events/superscript.md) 사용 + +- **목록 관리** + [목록 삽입 및 관리](api/events/insert-list.md)가 더 쉬워짐 + +- **가져오기/내보내기 및 인쇄** + - [DOCX 가져오기](api/events/import.md) + - [DOCX 또는 PDF로 내보내기](api/events/export.md) + - 에디터에서 바로 [인쇄](api/events/print.md) 가능 + +- **키보드 단축키** + 더 많은 일반 서식 및 편집 단축키 지원 + +### 새로운 API + +#### 새로운 속성 + +- [`fullscreenMode`](api/config/fullscreen-mode.md) +- [`imageUploadUrl`](api/config/image-upload-url.md) +- [`layoutMode`](api/config/layout-mode.md) +- [`locale`](api/config/locale.md) +- [`menubar`](api/config/menubar.md) +- [`toolbar`](api/config/toolbar.md) +- [`value`](api/config/value.md) + +#### 새로운 메서드 + +- [`setConfig()`](api/methods/set-config.md) - 실시간으로 설정 변경 +- [`setLocale()`](api/methods/set-locale.md) - 로케일 즉시 변경 + +#### 새로운 내부 메서드 + +- [`api.exec()`](api/internal/exec.md) +- [`api.intercept()`](api/internal/intercept.md) +- [`api.getReactiveState()`](api/internal/get-reactive-state.md) +- [`api.getState()`](api/internal/get-state.md) + +#### 새로운 이벤트 + +새로운 이벤트 전체 목록은 [여기](api/overview/events_overview.md)에서 확인할 수 있습니다. + +### 업데이트된 API + +#### 업데이트된 속성 + +- [`defaultStyles`](api/config/default-styles.md) + +#### 업데이트된 메서드 + +- [`setValue()`](api/methods/set-value.md) +- [`getValue()`](api/methods/get-value.md) + +#### 업데이트된 내부 메서드 + +- [`api.detach()`](api/internal/detach.md) +- [`api.on()`](api/internal/on.md) + +## 제거된 API + +:::warning +제거된 API는 프로젝트에서 사용하지 마세요!
자세한 내용은 [Migration](news/migration.md) 항목을 참고하세요. +::: + +### [제거된 속성](news/migration.md#properties-migration) + +- [`customStats`](news/migration.md#--customstats) +- [`mode`](news/migration.md#--mode--layoutmode) +- [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar) + +### [제거된 메서드](news/migration.md#methods-migration) + +- `exitFullScreen()` +- `fullScreen()` +- `getEditorAPI()` +- `getStats()` +- `paint()` + +### 제거된 내부 메서드 + +- [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept) + +### 제거된 이벤트 + +- `Action` +- `Change` +- `selectionChange` +- `selectionRefresh` diff --git a/i18n/ko/docusaurus-theme-classic/footer.json b/i18n/ko/docusaurus-theme-classic/footer.json new file mode 100644 index 0000000..a94d988 --- /dev/null +++ b/i18n/ko/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "개발 센터", + "description": "푸터에서 title=Development center인 링크 열의 제목" + }, + "link.title.Community": { + "message": "커뮤니티", + "description": "푸터에서 title=Community인 링크 열의 제목" + }, + "link.title.Company": { + "message": "회사", + "description": "푸터에서 title=Company인 링크 열의 제목" + }, + "link.item.label.Download RichText": { + "message": "RichText 다운로드", + "description": "https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml 에 연결된 label=Download RichText인 푸터 링크의 라벨" + }, + "link.item.label.Examples": { + "message": "예제", + "description": "https://snippet.dhtmlx.com/t55alxiy?tag=richtext 에 연결된 label=Examples인 푸터 링크의 라벨" + }, + "link.item.label.Blog": { + "message": "블로그", + "description": "https://dhtmlx.com/blog/tag/richtext/ 에 연결된 label=Blog인 푸터 링크의 라벨" + }, + "link.item.label.Forum": { + "message": "포럼", + "description": "https://forum.dhtmlx.com/c/richtext/ 에 연결된 label=Forum인 푸터 링크의 라벨" + }, + "link.item.label.GitHub": { + "message": "GitHub", + "description": "https://github.com/DHTMLX 에 연결된 label=GitHub인 푸터 링크의 라벨" + }, + "link.item.label.Youtube": { + "message": "유튜브", + "description": "https://www.youtube.com/user/dhtmlx 에 연결된 label=Youtube인 푸터 링크의 라벨" + }, + "link.item.label.Facebook": { + "message": "페이스북", + "description": "https://www.facebook.com/dhtmlx 에 연결된 label=Facebook인 푸터 링크의 라벨" + }, + "link.item.label.Twitter": { + "message": "트위터", + "description": "https://twitter.com/dhtmlx 에 연결된 label=Twitter인 푸터 링크의 라벨" + }, + "link.item.label.Linkedin": { + "message": "링크드인", + "description": "https://www.linkedin.com/groups/3345009/ 에 연결된 label=Linkedin인 푸터 링크의 라벨" + }, + "link.item.label.About us": { + "message": "회사 소개", + "description": "https://dhtmlx.com/docs/company.shtml 에 연결된 label=About us인 푸터 링크의 라벨" + }, + "link.item.label.Contact us": { + "message": "문의하기", + "description": "https://dhtmlx.com/docs/contact.shtml 에 연결된 label=Contact us인 푸터 링크의 라벨" + }, + "link.item.label.Licensing": { + "message": "라이선스", + "description": "https://dhtmlx.com/docs/products/dhtmlxRichText/#editions-licenses 에 연결된 label=Licensing인 푸터 링크의 라벨" + } +} \ No newline at end of file diff --git a/i18n/ko/docusaurus-theme-classic/navbar.json b/i18n/ko/docusaurus-theme-classic/navbar.json new file mode 100644 index 0000000..b861114 --- /dev/null +++ b/i18n/ko/docusaurus-theme-classic/navbar.json @@ -0,0 +1,26 @@ +{ + "title": { + "message": "자바스크립트 리치텍스트 문서", + "description": "네비게이션 바의 제목" + }, + "logo.alt": { + "message": "DHTMLX 리치텍스트 문서", + "description": "네비게이션 바 로고의 대체 텍스트" + }, + "item.label.Examples": { + "message": "예제", + "description": "예제 라벨이 있는 네비게이션 바 항목" + }, + "item.label.Forum": { + "message": "포럼", + "description": "포럼 라벨이 있는 네비게이션 바 항목" + }, + "item.label.Support": { + "message": "지원", + "description": "지원 라벨이 있는 네비게이션 바 항목" + }, + "item.label.Download": { + "message": "다운로드", + "description": "다운로드 라벨이 있는 네비게이션 바 항목" + } +} \ No newline at end of file diff --git a/i18n/ru/code.json b/i18n/ru/code.json new file mode 100644 index 0000000..f7b8bb8 --- /dev/null +++ b/i18n/ru/code.json @@ -0,0 +1,560 @@ +{ + "theme.ErrorPageContent.title": { + "message": "Эта страница аварийно завершила работу.", + "description": "Заголовок страницы по умолчанию при сбое страницы" + }, + "theme.BackToTopButton.buttonAriaLabel": { + "message": "Прокрутить вверх", + "description": "ARIA-метка для кнопки возврата к началу страницы" + }, + "theme.blog.archive.title": { + "message": "Архив", + "description": "Заголовок страницы и героя страницы архива блога" + }, + "theme.blog.archive.description": { + "message": "Архив", + "description": "Описание страницы и героя страницы архива блога" + }, + "theme.blog.paginator.navAriaLabel": { + "message": "Навигация по страницам списка блога", + "description": "ARIA-метка для пагинации блога" + }, + "theme.blog.paginator.newerEntries": { + "message": "Новые записи", + "description": "Метка для перехода к более новым записям блога (предыдущая страница)" + }, + "theme.blog.paginator.olderEntries": { + "message": "Старые записи", + "description": "Метка для перехода к более старым записям блога (следующая страница)" + }, + "theme.blog.post.paginator.navAriaLabel": { + "message": "Навигация по страницам блога", + "description": "ARIA-метка для пагинации записей блога" + }, + "theme.blog.post.paginator.newerPost": { + "message": "Новая запись", + "description": "Метка кнопки для перехода к более новой/предыдущей записи блога" + }, + "theme.blog.post.paginator.olderPost": { + "message": "Старая запись", + "description": "Метка кнопки для перехода к более старой/следующей записи блога" + }, + "theme.tags.tagsPageLink": { + "message": "Просмотреть все теги", + "description": "Метка ссылки, ведущей на страницу списка тегов" + }, + "theme.colorToggle.ariaLabel.mode.system": { + "message": "системный режим", + "description": "Название системного цветового режима" + }, + "theme.colorToggle.ariaLabel.mode.light": { + "message": "светлый режим", + "description": "Название светлого цветового режима" + }, + "theme.colorToggle.ariaLabel.mode.dark": { + "message": "тёмный режим", + "description": "Название тёмного цветового режима" + }, + "theme.colorToggle.ariaLabel": { + "message": "Переключить между тёмным и светлым режимом (сейчас {mode})", + "description": "ARIA-метка переключателя цветового режима" + }, + "theme.docs.breadcrumbs.navAriaLabel": { + "message": "Хлебные крошки", + "description": "ARIA-метка для хлебных крошек" + }, + "theme.docs.DocCard.categoryDescription.plurals": { + "message": "1 элемент|{count} элементов", + "description": "Описание категории карточки в сгенерированном индексе о количестве элементов в категории" + }, + "theme.docs.paginator.navAriaLabel": { + "message": "Страницы документации", + "description": "ARIA-метка для пагинации документации" + }, + "theme.docs.paginator.previous": { + "message": "Предыдущая", + "description": "Метка для перехода к предыдущему документу" + }, + "theme.docs.paginator.next": { + "message": "Следующая", + "description": "Метка для перехода к следующему документу" + }, + "theme.docs.tagDocListPageTitle.nDocsTagged": { + "message": "Один документ помечен|{count} документов помечены", + "description": "Множественная форма для \"{count} документов помечены\"" + }, + "theme.docs.tagDocListPageTitle": { + "message": "{nDocsTagged} с тегом \"{tagName}\"", + "description": "Заголовок страницы для тега документации" + }, + "theme.docs.versionBadge.label": { + "message": "Версия: {versionLabel}" + }, + "theme.docs.versions.unreleasedVersionLabel": { + "message": "Это неопубликованная документация для версии {siteTitle} {versionLabel}.", + "description": "Метка, сообщающая пользователю, что он просматривает неопубликованную версию документации" + }, + "theme.docs.versions.unmaintainedVersionLabel": { + "message": "Это документация для {siteTitle} {versionLabel}, которая больше не поддерживается активно.", + "description": "Метка, сообщающая пользователю, что он просматривает неподдерживаемую версию документации" + }, + "theme.docs.versions.latestVersionSuggestionLabel": { + "message": "Для актуальной документации смотрите {latestVersionLink} ({versionLabel}).", + "description": "Метка, предлагающая пользователю проверить последнюю версию" + }, + "theme.docs.versions.latestVersionLinkLabel": { + "message": "последняя версия", + "description": "Метка ссылки для предложения последней версии" + }, + "theme.common.editThisPage": { + "message": "Редактировать эту страницу", + "description": "Метка ссылки для редактирования текущей страницы" + }, + "theme.common.headingLinkTitle": { + "message": "Прямая ссылка на {heading}", + "description": "Заголовок для ссылки на заголовок" + }, + "theme.lastUpdated.atDate": { + "message": " от {date}", + "description": "Фраза, описывающая дату последнего обновления страницы" + }, + "theme.lastUpdated.byUser": { + "message": " пользователем {user}", + "description": "Фраза, описывающая пользователя, который обновил страницу" + }, + "theme.lastUpdated.lastUpdatedAtBy": { + "message": "Последнее обновление{atDate}{byUser}", + "description": "Предложение, показывающее когда и кем была обновлена страница" + }, + "theme.navbar.mobileVersionsDropdown.label": { + "message": "Версии", + "description": "Метка выпадающего списка версий в мобильной навигации" + }, + "theme.NotFound.title": { + "message": "Страница не найдена", + "description": "Заголовок страницы 404" + }, + "theme.tags.tagsListLabel": { + "message": "Теги:", + "description": "Метка рядом со списком тегов" + }, + "theme.admonition.caution": { + "message": "внимание", + "description": "Метка по умолчанию для предупреждения Caution (:::caution)" + }, + "theme.admonition.danger": { + "message": "опасность", + "description": "Метка по умолчанию для предупреждения Danger (:::danger)" + }, + "theme.admonition.info": { + "message": "информация", + "description": "Метка по умолчанию для предупреждения Info (:::info)" + }, + "theme.admonition.note": { + "message": "заметка", + "description": "Метка по умолчанию для предупреждения Note (:::note)" + }, + "theme.admonition.tip": { + "message": "совет", + "description": "Метка по умолчанию для предупреждения Tip (:::tip)" + }, + "theme.admonition.warning": { + "message": "предупреждение", + "description": "Метка по умолчанию для предупреждения Warning (:::warning)" + }, + "theme.AnnouncementBar.closeButtonAriaLabel": { + "message": "Закрыть", + "description": "ARIA-метка для кнопки закрытия панели объявлений" + }, + "theme.blog.sidebar.navAriaLabel": { + "message": "Навигация по последним записям блога", + "description": "ARIA-метка для последних записей в боковой панели блога" + }, + "theme.DocSidebarItem.expandCategoryAriaLabel": { + "message": "Развернуть категорию боковой панели '{label}'", + "description": "ARIA-метка для развертывания категории боковой панели" + }, + "theme.DocSidebarItem.collapseCategoryAriaLabel": { + "message": "Свернуть категорию боковой панели '{label}'", + "description": "ARIA-метка для сворачивания категории боковой панели" + }, + "theme.IconExternalLink.ariaLabel": { + "message": "(открывается в новой вкладке)", + "description": "ARIA-метка для иконки внешней ссылки" + }, + "theme.NotFound.p1": { + "message": "Мы не смогли найти то, что вы искали.", + "description": "Первый абзац страницы 404" + }, + "theme.NotFound.p2": { + "message": "Пожалуйста, свяжитесь с владельцем сайта, который направил вас по этой ссылке, и сообщите ему, что ссылка не работает.", + "description": "Второй абзац страницы 404" + }, + "theme.NavBar.navAriaLabel": { + "message": "Основное", + "description": "ARIA-метка для основной навигации" + }, + "theme.navbar.mobileLanguageDropdown.label": { + "message": "Языки", + "description": "Метка выпадающего списка переключателя языков в мобильной версии" + }, + "theme.TOCCollapsible.toggleButtonLabel": { + "message": "На этой странице", + "description": "Метка кнопки для сворачиваемого компонента оглавления" + }, + "theme.blog.post.readMore": { + "message": "Читать далее", + "description": "Метка для ссылки на полные записи блога из обзоров" + }, + "theme.blog.post.readMoreLabel": { + "message": "Подробнее о {title}", + "description": "ARIA-метка для ссылки на полные записи блога из обзоров" + }, + "theme.blog.post.readingTime.plurals": { + "message": "Одна минута чтения|{readingTime} минут чтения", + "description": "Множественная форма для \"{readingTime} минут чтения\"" + }, + "theme.CodeBlock.copy": { + "message": "Копировать", + "description": "Метка кнопки копирования в блоках кода" + }, + "theme.CodeBlock.copied": { + "message": "Скопировано", + "description": "Метка кнопки после копирования в блоках кода" + }, + "theme.CodeBlock.copyButtonAriaLabel": { + "message": "Скопировать код в буфер обмена", + "description": "ARIA-метка кнопки копирования кода" + }, + "theme.CodeBlock.wordWrapToggle": { + "message": "Переключить перенос слов", + "description": "Заголовок кнопки переключения переноса строк в блоке кода" + }, + "theme.docs.breadcrumbs.home": { + "message": "Главная страница", + "description": "ARIA-метка для главной страницы в хлебных крошках" + }, + "theme.docs.sidebar.collapseButtonTitle": { + "message": "Свернуть боковую панель", + "description": "Заголовок кнопки сворачивания боковой панели документации" + }, + "theme.docs.sidebar.collapseButtonAriaLabel": { + "message": "Свернуть боковую панель", + "description": "ARIA-метка кнопки сворачивания боковой панели документации" + }, + "theme.docs.sidebar.navAriaLabel": { + "message": "Боковая панель документации", + "description": "ARIA-метка для навигации боковой панели" + }, + "theme.docs.sidebar.closeSidebarButtonAriaLabel": { + "message": "Закрыть панель навигации", + "description": "ARIA-метка кнопки закрытия мобильной боковой панели" + }, + "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": { + "message": "Развернуть выпадающий список", + "description": "ARIA-метка кнопки развертывания выпадающего списка в мобильной навигации" + }, + "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": { + "message": "Свернуть выпадающий список", + "description": "ARIA-метка кнопки сворачивания выпадающего списка в мобильной навигации" + }, + "theme.docs.sidebar.expandButtonTitle": { + "message": "Развернуть боковую панель", + "description": "ARIA-метка и заголовок кнопки разворачивания боковой панели документации" + }, + "theme.docs.sidebar.expandButtonAriaLabel": { + "message": "Развернуть боковую панель", + "description": "ARIA-метка и заголовок кнопки разворачивания боковой панели документации" + }, + "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { + "message": "← Вернуться в главное меню", + "description": "Метка кнопки возврата в главное меню в мобильной боковой панели (обычно отображает боковую панель документации)" + }, + "theme.docs.sidebar.toggleSidebarButtonAriaLabel": { + "message": "Переключить панель навигации", + "description": "ARIA-метка кнопки гамбургера для мобильной навигации" + }, + "theme.SearchBar.seeAll": { + "message": "Показать все {count} результатов" + }, + "theme.SearchPage.documentsFound.plurals": { + "message": "Найден один документ|Найдено {count} документов", + "description": "Множественная форма для \"{count} найденных документов\"" + }, + "theme.SearchPage.existingResultsTitle": { + "message": "Результаты поиска по запросу \"{query}\"", + "description": "Заголовок страницы поиска для непустого запроса" + }, + "theme.SearchPage.emptyResultsTitle": { + "message": "Поиск по документации", + "description": "Заголовок страницы поиска для пустого запроса" + }, + "theme.SearchPage.inputPlaceholder": { + "message": "Введите ваш запрос здесь", + "description": "Подсказка для поля ввода на странице поиска" + }, + "theme.SearchPage.inputLabel": { + "message": "Поиск", + "description": "ARIA-метка для поля ввода на странице поиска" + }, + "theme.SearchPage.algoliaLabel": { + "message": "Работает на Algolia", + "description": "Описание для упоминания Algolia" + }, + "theme.SearchPage.noResultsText": { + "message": "Результаты не найдены", + "description": "Текст для пустого результата поиска" + }, + "theme.SearchPage.fetchingNewResults": { + "message": "Загрузка новых результатов...", + "description": "Текст при загрузке новых результатов поиска" + }, + "theme.SearchBar.label": { + "message": "Поиск", + "description": "ARIA-метка и подсказка для кнопки поиска" + }, + "theme.SearchModal.searchBox.resetButtonTitle": { + "message": "Очистить запрос", + "description": "Метка и ARIA-метка кнопки сброса запроса в поисковой строке" + }, + "theme.SearchModal.searchBox.cancelButtonText": { + "message": "Отмена", + "description": "Метка и ARIA-метка кнопки отмены в поисковой строке" + }, + "theme.SearchModal.searchBox.placeholderText": { + "message": "Поиск в документах", + "description": "Подсказка для основного поля поиска" + }, + "theme.SearchModal.searchBox.placeholderTextAskAi": { + "message": "Задайте другой вопрос...", + "description": "Подсказка в режиме вопросов AI" + }, + "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": { + "message": "Ответ формируется...", + "description": "Подсказка в поисковой строке во время генерации ответа AI" + }, + "theme.SearchModal.searchBox.enterKeyHint": { + "message": "поиск", + "description": "Подсказка для клавиши ввода в поисковой строке" + }, + "theme.SearchModal.searchBox.enterKeyHintAskAi": { + "message": "ввод", + "description": "Подсказка для клавиши ввода в режиме вопросов AI" + }, + "theme.SearchModal.searchBox.searchInputLabel": { + "message": "Поиск", + "description": "ARIA-метка для поля ввода поиска" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonText": { + "message": "Вернуться к поиску по ключевым словам", + "description": "Текст кнопки возврата к поиску по ключевым словам" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": { + "message": "Вернуться к поиску по ключевым словам", + "description": "ARIA-метка кнопки возврата к поиску по ключевым словам" + }, + "theme.SearchModal.startScreen.recentSearchesTitle": { + "message": "Недавние", + "description": "Заголовок для недавних поисков" + }, + "theme.SearchModal.startScreen.noRecentSearchesText": { + "message": "Нет недавних поисков", + "description": "Текст при отсутствии недавних поисков" + }, + "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": { + "message": "Сохранить этот поиск", + "description": "Заголовок кнопки сохранения недавнего поиска" + }, + "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": { + "message": "Удалить этот поиск из истории", + "description": "Заголовок кнопки удаления недавнего поиска" + }, + "theme.SearchModal.startScreen.favoriteSearchesTitle": { + "message": "Избранное", + "description": "Заголовок для избранных поисков" + }, + "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": { + "message": "Удалить этот поиск из избранного", + "description": "Заголовок кнопки удаления избранного поиска" + }, + "theme.SearchModal.startScreen.recentConversationsTitle": { + "message": "Недавние разговоры", + "description": "Заголовок для недавних разговоров" + }, + "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": { + "message": "Удалить этот разговор из истории", + "description": "Заголовок кнопки удаления недавнего разговора" + }, + "theme.SearchModal.errorScreen.titleText": { + "message": "Не удалось получить результаты", + "description": "Заголовок экрана ошибки" + }, + "theme.SearchModal.errorScreen.helpText": { + "message": "Проверьте ваше сетевое соединение.", + "description": "Текст помощи на экране ошибки" + }, + "theme.SearchModal.resultsScreen.askAiPlaceholder": { + "message": "Спросить ИИ: ", + "description": "Подсказка для ввода вопроса ИИ" + }, + "theme.SearchModal.askAiScreen.disclaimerText": { + "message": "Ответы генерируются ИИ и могут содержать ошибки. Проверьте информацию.", + "description": "Отказ от ответственности для ответов ИИ" + }, + "theme.SearchModal.askAiScreen.relatedSourcesText": { + "message": "Связанные источники", + "description": "Текст для связанных источников" + }, + "theme.SearchModal.askAiScreen.thinkingText": { + "message": "Обработка...", + "description": "Текст, когда ИИ обрабатывает запрос" + }, + "theme.SearchModal.askAiScreen.copyButtonText": { + "message": "Копировать", + "description": "Текст кнопки копирования" + }, + "theme.SearchModal.askAiScreen.copyButtonCopiedText": { + "message": "Скопировано!", + "description": "Текст кнопки после копирования" + }, + "theme.SearchModal.askAiScreen.copyButtonTitle": { + "message": "Копировать", + "description": "Заголовок кнопки копирования" + }, + "theme.SearchModal.askAiScreen.likeButtonTitle": { + "message": "Нравится", + "description": "Заголовок кнопки лайка" + }, + "theme.SearchModal.askAiScreen.dislikeButtonTitle": { + "message": "Не нравится", + "description": "Заголовок кнопки дизлайка" + }, + "theme.SearchModal.askAiScreen.thanksForFeedbackText": { + "message": "Спасибо за ваш отзыв!", + "description": "Текст благодарности за отзыв" + }, + "theme.SearchModal.askAiScreen.preToolCallText": { + "message": "Поиск...", + "description": "Текст перед вызовом инструмента" + }, + "theme.SearchModal.askAiScreen.duringToolCallText": { + "message": "Поиск ", + "description": "Текст во время вызова инструмента" + }, + "theme.SearchModal.askAiScreen.afterToolCallText": { + "message": "Поиск завершён", + "description": "Текст после вызова инструмента" + }, + "theme.SearchModal.footer.selectText": { + "message": "Выбрать", + "description": "Текст выбора для нижнего колонтитула" + }, + "theme.SearchModal.footer.submitQuestionText": { + "message": "Отправить вопрос", + "description": "Текст отправки вопроса для нижнего колонтитула" + }, + "theme.SearchModal.footer.selectKeyAriaLabel": { + "message": "Клавиша ввода", + "description": "ARIA-метка для клавиши выбора в нижнем колонтитуле" + }, + "theme.SearchModal.footer.navigateText": { + "message": "Навигация", + "description": "Текст навигации для нижнего колонтитула" + }, + "theme.SearchModal.footer.navigateUpKeyAriaLabel": { + "message": "Стрелка вверх", + "description": "ARIA-метка для клавиши навигации вверх в нижнем колонтитуле" + }, + "theme.SearchModal.footer.navigateDownKeyAriaLabel": { + "message": "Стрелка вниз", + "description": "ARIA-метка для клавиши навигации вниз в нижнем колонтитуле" + }, + "theme.SearchModal.footer.closeText": { + "message": "Закрыть", + "description": "Текст закрытия для нижнего колонтитула" + }, + "theme.SearchModal.footer.closeKeyAriaLabel": { + "message": "Клавиша Escape", + "description": "ARIA-метка для клавиши закрытия в нижнем колонтитуле" + }, + "theme.SearchModal.footer.searchByText": { + "message": "Работает на", + "description": "Текст 'Работает на' для нижнего колонтитула" + }, + "theme.SearchModal.footer.backToSearchText": { + "message": "Вернуться к поиску", + "description": "Текст возврата к поиску для нижнего колонтитула" + }, + "theme.SearchModal.noResultsScreen.noResultsText": { + "message": "Результаты не найдены для", + "description": "Текст при отсутствии результатов" + }, + "theme.SearchModal.noResultsScreen.suggestedQueryText": { + "message": "Попробуйте поискать", + "description": "Текст для предложенного запроса" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsText": { + "message": "Считаете, что этот запрос должен возвращать результаты?", + "description": "Текст для сообщения о пропущенных результатах" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": { + "message": "Сообщите нам.", + "description": "Текст ссылки для сообщения о пропущенных результатах" + }, + "theme.SearchModal.placeholder": { + "message": "Поиск в документации", + "description": "Подсказка для поля ввода в модальном окне DocSearch" + }, + "theme.blog.post.plurals": { + "message": "Одна запись|{count} записей", + "description": "Множественная форма для \"{count} записей\"" + }, + "theme.blog.tagTitle": { + "message": "{nPosts} с тегом \"{tagName}\"", + "description": "Заголовок страницы для тега блога" + }, + "theme.blog.author.pageTitle": { + "message": "{authorName} - {nPosts}", + "description": "Заголовок страницы для автора блога" + }, + "theme.blog.authorsList.pageTitle": { + "message": "Авторы", + "description": "Заголовок страницы авторов" + }, + "theme.blog.authorsList.viewAll": { + "message": "Просмотреть всех авторов", + "description": "Метка ссылки, ведущей на страницу авторов блога" + }, + "theme.blog.author.noPosts": { + "message": "Этот автор еще не написал ни одной записи.", + "description": "Текст для авторов с 0 записями в блоге" + }, + "theme.contentVisibility.unlistedBanner.title": { + "message": "Неиндексируемая страница", + "description": "Заголовок баннера неиндексируемого контента" + }, + "theme.contentVisibility.unlistedBanner.message": { + "message": "Эта страница неиндексируема. Поисковые системы не будут её индексировать, и доступ к ней имеют только пользователи с прямой ссылкой.", + "description": "Сообщение баннера неиндексируемого контента" + }, + "theme.contentVisibility.draftBanner.title": { + "message": "Черновик страницы", + "description": "Заголовок баннера черновика контента" + }, + "theme.contentVisibility.draftBanner.message": { + "message": "Эта страница является черновиком. Она будет видна только в режиме разработки и исключена из производственной сборки.", + "description": "Сообщение баннера черновика контента" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "Попробовать снова", + "description": "Метка кнопки для повторной попытки рендеринга при ошибке React" + }, + "theme.common.skipToMainContent": { + "message": "Перейти к основному содержимому", + "description": "Метка для перехода к основному содержимому, обеспечивающая быструю навигацию с клавиатуры" + }, + "theme.tags.tagsPageTitle": { + "message": "Теги", + "description": "Заголовок страницы списка тегов" + } +} \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-blog/options.json b/i18n/ru/docusaurus-plugin-content-blog/options.json new file mode 100644 index 0000000..9239ff7 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-blog/options.json @@ -0,0 +1,14 @@ +{ + "title": { + "message": "Blog", + "description": "The title for the blog used in SEO" + }, + "description": { + "message": "Blog", + "description": "The description for the blog used in SEO" + }, + "sidebar.title": { + "message": "Recent posts", + "description": "The label for the left sidebar" + } +} diff --git a/i18n/ru/docusaurus-plugin-content-docs/current.json b/i18n/ru/docusaurus-plugin-content-docs/current.json new file mode 100644 index 0000000..58b7bfa --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current.json @@ -0,0 +1,62 @@ +{ + "version.label": { + "message": "Следующий", + "description": "Метка для текущей версии" + }, + "sidebar.docs.category.What's new and migration": { + "message": "Новое и миграция", + "description": "Метка для категории 'Новое и миграция' в боковой панели 'документация'" + }, + "sidebar.docs.category.What's new and migration.link.generated-index.title": { + "message": "Новое и миграция", + "description": "Заголовок страницы сгенерированного индекса для категории 'Новое и миграция' в боковой панели 'документация'" + }, + "sidebar.docs.category.API": { + "message": "API", + "description": "Метка для категории 'API' в боковой панели 'документация'" + }, + "sidebar.docs.category.RichText methods": { + "message": "Методы RichText", + "description": "Метка для категории 'Методы RichText' в боковой панели 'документация'" + }, + "sidebar.docs.category.RichText internal API": { + "message": "Внутренний API RichText", + "description": "Метка для категории 'Внутренний API RichText' в боковой панели 'документация'" + }, + "sidebar.docs.category.RichText internal API.link.generated-index.title": { + "message": "Обзор внутреннего API", + "description": "Заголовок страницы сгенерированного индекса для категории 'Внутренний API RichText' в боковой панели 'документация'" + }, + "sidebar.docs.category.Event Bus methods": { + "message": "Методы Event Bus", + "description": "Метка для категории 'Методы Event Bus' в боковой панели 'документация'" + }, + "sidebar.docs.category.State methods": { + "message": "Методы состояния", + "description": "Метка для категории 'Методы состояния' в боковой панели 'документация'" + }, + "sidebar.docs.category.RichText events": { + "message": "События RichText", + "description": "Метка для категории 'События RichText' в боковой панели 'документация'" + }, + "sidebar.docs.category.RichText properties": { + "message": "Свойства RichText", + "description": "Метка для категории 'Свойства RichText' в боковой панели 'документация'" + }, + "sidebar.docs.category.Integration with frameworks": { + "message": "Интеграция с фреймворками", + "description": "Метка для категории 'Интеграция с фреймворками' в боковой панели 'документация'" + }, + "sidebar.docs.category.Integration with frameworks.link.generated-index.title": { + "message": "Интеграция с фреймворками", + "description": "Заголовок страницы сгенерированного индекса для категории 'Интеграция с фреймворками' в боковой панели 'документация'" + }, + "sidebar.docs.category.Guides": { + "message": "Руководства", + "description": "Метка для категории 'Руководства' в боковой панели 'документация'" + }, + "sidebar.docs.category.Guides.link.generated-index.title": { + "message": "Руководства", + "description": "Заголовок страницы сгенерированного индекса для категории 'Руководства' в боковой панели 'документация'" + } +} \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/default-styles.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/default-styles.md new file mode 100644 index 0000000..83f0bd8 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/default-styles.md @@ -0,0 +1,144 @@ +--- +sidebar_label: defaultStyles +title: Конфигурация defaultStyles +description: Изучите конфигурацию defaultStyles в документации по библиотеке DHTMLX JavaScript RichText. Найдите руководства для разработчиков, справочники по API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# defaultStyles + +### Описание + +@short: Необязательно. Определяет стандартные настройки стилей для конкретных типов блоков. + +### Использование + +~~~jsx {} +defaultStyles?: { + "*"?: { // применяется ко всем блокам, позволяя задать общие свойства для всех них + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + p?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + blockquote?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h1?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h2?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h3?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h4?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h5?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h6?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + } +}; +~~~ + +:::important +Свойство `defaultStyles` само по себе не применяет CSS-стили к блокам. Чтобы стили вступили в силу, необходимо добавить соответствующий CSS отдельно: + +```jsx title="index.js" +new richtext.Richtext("#root", { + defaultStyles: { + h2: { + "font-family": "Roboto", + "font-size": "28px", + color: "purple", + background: "#FFC0CB" + } + } +}); +``` + +```css title="index.css" + +``` + +В этом примере для каждого блока `h2` устанавливается шрифт `"Roboto"` с размером 28px, а также изменяются цвета текста и фона. CSS-стили для блоков `h2` применяются соответственно. +::: + +### Конфигурация по умолчанию + +~~~jsx +const defaultStyles = { + "*": { "font-family": "Arial" }, + p: { "font-size": "14px" }, + blockquote: { "font-size": "14px" }, + h1: { "font-size": "32px" }, + h2: { "font-size": "24px" }, + h3: { "font-size": "18px" }, + h4: { "font-size": "16px" }, + h5: { "font-size": "14px" }, + h6: { "font-size": "12px" } +}; +~~~ + +### Пример + +~~~jsx {3-13} +// инициализация RichText +new richtext.Richtext("#root", { + defaultStyles: { + h4: { + "font-family": "Roboto" + }, + h5: { + "font-family": "Roboto" + }, + h6: { + "font-family": "Roboto" + } + }, + // другие свойства конфигурации +}); +~~~ + +**История изменений:** Это свойство было обновлено в версии 2.0 + +**Связанные статьи:** [Конфигурация](guides/configuration.md) + +**Связанный пример:** [RichText. Изменение значения по умолчанию для типографики (шрифт, размер шрифта и т.д.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md new file mode 100644 index 0000000..c68c64d --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md @@ -0,0 +1,39 @@ +--- +sidebar_label: fullscreenMode +title: fullscreenMode Конфигурация +description: Изучите конфигурацию fullscreenMode в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками по API, попробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# fullscreenMode + +### Описание + +@short: Необязательно. Включает полноэкранный режим RichText + +### Использование + +~~~jsx {} +fullscreenMode?: boolean; +~~~ + +### Конфигурация по умолчанию + +~~~jsx +fullscreenMode: false; +~~~ + +### Пример + +~~~jsx {3} +// инициализация RichText +new richtext.Richtext("#root", { + fullscreenMode: true + // другие свойства конфигурации +}); +~~~ + +**История изменений:** Это свойство было добавлено в версии v2.0 + +**Связанные статьи:** [Конфигурация](guides/configuration.md) + +**Связанный пример:** [RichText. Полная панель инструментов](https://snippet.dhtmlx.com/ziynafp7?tag=richtext) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md new file mode 100644 index 0000000..37deb42 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md @@ -0,0 +1,33 @@ +--- +sidebar_label: imageUploadUrl +title: Конфигурация imageUploadUrl +description: Вы можете узнать о конфигурации imageUploadUrl в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# imageUploadUrl + +### Описание + +@short: Необязательно. Определяет URL, который будет использоваться для загрузки изображений + +### Использование + +~~~jsx {} +imageUploadUrl?: string; +~~~ + +### Пример + +~~~jsx {3} +// инициализация RichText +new richtext.Richtext("#root", { + imageUploadUrl: "some URL" + // другие свойства конфигурации +}); +~~~ + +**Журнал изменений:** Это свойство было добавлено в версии 2.0 + +**Связанные статьи:** [Configuration](guides/configuration.md) + +**Связанный пример:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/layout-mode.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/layout-mode.md new file mode 100644 index 0000000..71be809 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/layout-mode.md @@ -0,0 +1,41 @@ +--- +sidebar_label: layoutMode +title: Конфигурация layoutMode +description: Изучите конфигурацию layoutMode в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками API, примерами кода, живыми демо и скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# layoutMode + +### Описание + +@short: Опционально. Определяет стиль расположения для основной области редактора. + +### Использование + +~~~jsx {} +layoutMode: "classic" | "document"; +~~~ + +Режим `"classic"` делает область редактирования во всю страницу. Режим `"document"` имитирует реальные размеры документов, используя форматы A4, A5, A6 и A7. + +### Конфигурация по умолчанию + +~~~jsx +layoutMode: "classic"; +~~~ + +### Пример + +~~~jsx {3} +// инициализация RichText +new richtext.Richtext("#root", { + layoutMode: "document" // устанавливает режим "document" по умолчанию + // другие свойства конфигурации +}); +~~~ + +**История изменений:** Это свойство было добавлено в версии v2.0, заменив старое свойство `mode`. + +**Связанные статьи:** [Configuration](guides/configuration.md) + +**Связанный пример:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/locale.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/locale.md new file mode 100644 index 0000000..9710bd2 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/locale.md @@ -0,0 +1,47 @@ +--- +sidebar_label: locale +title: locale Конфигурация +description: Изучите конфигурацию locale в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками по API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# locale + +### Описание + +@short: Необязательно. Объект, содержащий локализационные метки для RichText + +:::info +Объект **locale** должен содержать все метки RichText вместе с их соответствующими переводами. +::: + +### Использование + +~~~jsx {} +locale?: object; +~~~ + +### Конфигурация по умолчанию + +По умолчанию RichText поставляется с **английской** локалью. Также вы можете задать пользовательскую локаль. + +:::tip +Чтобы переключить локаль на лету, используйте метод [**setLocale()**](api/methods/set-locale.md) RichText +::: + +### Пример + +~~~jsx {3} +// инициализация RichText +const editor = new richtext.RichText("#root", { + locale: richtext.locales.cn // изначально установлена китайская локаль + // locale: richtext.locales.en // изначально установлена английская локаль + // locale: richtext.locales.de // изначально установлена немецкая локаль + // другие свойства конфигурации +}); +~~~ + +**История изменений:** Это свойство было добавлено в версии v2.0 + +**Связанные статьи:** [Локализация](guides/localization.md) + +**Связанный пример:** [RichText. Локализация](https://snippet.dhtmlx.com/zxjrin3i?tag=richtext) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/menubar.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/menubar.md new file mode 100644 index 0000000..7a3ccb9 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/menubar.md @@ -0,0 +1,33 @@ +--- +sidebar_label: menubar +title: Конфигурация menubar +description: Вы можете узнать о конфигурации menubar в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также скачивайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# menubar + +### Описание + +@short: Необязательно. Включает верхнее меню (menubar) в RichText. + +### Использование + +~~~jsx {} +menubar?: boolean; +~~~ + +### Пример + +~~~jsx {3} +// инициализация RichText +new richtext.Richtext("#root", { + menubar: true + // другие свойства конфигурации +}); +~~~ + +**История изменений:** Это свойство было добавлено в версии v2.0 + +**Связанные статьи:** [Конфигурация](guides/configuration.md) + +**Связанный пример:** [RichText. Инициализация с menubar](https://snippet.dhtmlx.com/tjryzka7?tag=richtext) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/toolbar.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/toolbar.md new file mode 100644 index 0000000..67315db --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/toolbar.md @@ -0,0 +1,219 @@ +--- +sidebar_label: toolbar +title: Конфигурация toolbar +description: Изучите конфигурацию toolbar в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками API, попробуйте примеры кода и живые демо, а также получите бесплатный 30-дневный пробный период DHTMLX RichText. +--- + +# toolbar + +### Описание + +@short: Необязательно. Включает toolbar и позволяет пользователям выбирать и настраивать кнопки, отображаемые на нем. + +### Использование + +~~~jsx {} +toolbar?: boolean | Array any }>; +~~~ + +#### Доступные кнопки в Toolbar + +Вот кнопки, которые можно добавить в toolbar RichText: + +| Кнопка | Описание | +|---------------------|-----------------------------------------------------------------------------| +| `undo` | Отменяет последнее действие пользователя. | +| `redo` | Повторяет действие, которое было отменено. | +| `style` | Позволяет выбрать стили текста, такие как заголовки или абзацы. | +| `font-family` | Меняет шрифт выделенного текста. | +| `font-size` | Меняет размер выделенного текста. | +| `bold` | Делает выделенный текст жирным. | +| `italic` | Делает выделенный текст курсивом. | +| `underline` | Подчеркивает выделенный текст. | +| `strike` | Добавляет эффект зачеркнутого текста. | +| `subscript` | Форматирует текст как подстрочный индекс. | +| `superscript` | Форматирует текст как надстрочный индекс. | +| `text-color` | Изменяет цвет текста. | +| `background-color` | Изменяет цвет фона выделенного текста. | +| `align` | Устанавливает выравнивание текста: по левому краю, по центру, по правому краю или по ширине. | +| `indent` | Увеличивает отступ блока текста. | +| `outdent` | Уменьшает отступ абзаца. | +| `line-height` | Регулирует межстрочный интервал. | +| `quote` | Форматирует текст как цитату. | +| `bulleted-list` | Создает маркированный список. | +| `numbered-list` | Создает нумерованный список. | +| `link` | Вставляет гиперссылку. | +| `image` | Вставляет изображение. | +| `line` | Вставляет горизонтальную линию. | +| `clear` | Удаляет все форматирование с выделенного текста. | +| `print` | Открывает диалог печати. | +| `fullscreen` | Переключает полноэкранный режим. | +| `mode` | Переключает между [режимами компоновки](api/config/layout-mode.md) (классический/документ). | +| `shortcuts` | Показывает список горячих клавиш. | +| `separator` | Добавляет визуальный разделитель между группами кнопок toolbar. | + +Вы можете использовать эти строки для настройки кнопок toolbar следующим образом: + +~~~jsx {2-7} +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // другие кнопки + ], + // другие параметры конфигурации +}); +~~~ + +#### Пользовательские кнопки в Toolbar + +Пользовательские кнопки можно настроить как объекты с такими опциями: + +- `type` - (обязательно) определяет тип элемента управления. Возможные значения: `"button"`, `"richselect"`, `"colorpicker"`. +- `id` - (необязательно) уникальный идентификатор элемента управления (не должен совпадать с существующими). +- `label` - (необязательно) текстовая метка кнопки (отображается рядом с иконкой). +- `tooltip` - (необязательно) текст, показываемый при наведении (по умолчанию совпадает с label, если не задан). +- `css` - (необязательно) CSS-класс для элемента управления (по умолчанию поддерживаются классы wx-primary, wx-secondary). +- `handler` - (необязательно) функция, которая вызывается при клике на кнопку. + +~~~jsx {6-32} +new richtext.Richtext("#root", { + toolbar: [ + // кнопки (строки обозначают только кнопки) + "bold", + "italic", + // предопределённые кнопки (пользователи не могут добавлять дополнительные опции, такие как label или tooltip, только ({ type: "button", id: string }) + { + type: "button", + id: "fullscreen", + }, + // пользователи должны указать правильный тип для предопределённых элементов (например, richselect/colorpicker) + // элементы с неправильным типом добавлены не будут + { + type: "richselect", // type: "button" - будет проигнорировано + id: "mode", + }, + // пользовательские кнопки (поддерживаются только эти опции) + // на данный момент разрешены только пользовательские кнопки (поддержки richselect/colorpicker нет) + { + type: "button", + id: "some", + label: "Some", + handler: () => {/* пользовательская логика */} + }, + { + type: "button", + id: "other", + icon: "wxo-help", + label: "Other", + tooltip: "Some tooltip", + handler: () => {/* пользовательская логика */} + } + ], + // другие параметры конфигурации +}); +~~~ + +#### Скрыть Toolbar + +Чтобы скрыть toolbar, просто установите свойство `toolbar` в `false` так: + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false + // другие параметры конфигурации +}); +~~~ + +### Конфигурация по умолчанию + +~~~jsx +const defaultToolbarButtons = { + "undo", + "redo", + "separator", + "style", + "separator", + "font-family", + "font-size", + "separator", + "bold", + "italic", + "underline", + "strike", + "separator", + "text-color", + "background-color", + "separator", + "align", + "line-height", + "outdent", + "indent", + "separator", + "bulleted-list", + "numbered-list", + "quote", + "separator", + "link", + "image", + "separator", + "clear", + "separator", + "fullscreen", + "mode" +}; +~~~ + +:::tip +Кнопки toolbar по умолчанию входят в состав виджета RichText и доступны через `richtext.defaultToolbarButtons`. + +```jsx{4} +// инициализация RichText +new richtext.Richtext("#root", { + toolbar: [ + ...richtext.defaultToolbarButtons, + { + type: "button", + id: "btn1", // уникальный ID кнопки для пользовательской логики + icon: "wxo-help", // иконка рядом с меткой + css: "rounded", // CSS-класс для стилизации (поддерживаемые классы по умолчанию: wx-primary, wx-secondary) + label: "Custom button", // метка кнопки рядом с иконкой + tooltip: "Some tooltip", // тултип при наведении (по умолчанию совпадает с label, если отсутствует) + } + ] + // другие параметры конфигурации +}); +``` +::: + +### Пример + +~~~jsx {3-18} +// инициализация RichText +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // пользовательские кнопки (здесь показаны все поддерживаемые опции) + // на данный момент поддерживаются только пользовательские кнопки (richselect/colorpicker не поддерживаются) + { + type: "button", + id: "btn1", // уникальный ID кнопки для пользовательской логики + icon: "wxo-help", // иконка рядом с меткой + css: "rounded", // CSS-класс для стилизации (поддерживаемые классы по умолчанию: wx-primary, wx-secondary) + label: "Custom button", // метка кнопки рядом с иконкой + tooltip: "Some tooltip", // тултип при наведении (по умолчанию совпадает с label, если отсутствует) + handler: () => ..., // пользовательская логика для этой кнопки + } + ] + // другие параметры конфигурации +}); +~~~ + +**История изменений:** Это свойство было добавлено в версии v2.0 + +**Связанные статьи:** [Конфигурация](guides/configuration.md) + +**Связанный пример:** [RichText. Пользовательский контрол и упрощённый toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/value.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/value.md new file mode 100644 index 0000000..a41d86f --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/value.md @@ -0,0 +1,36 @@ +--- +sidebar_label: value +title: Конфигурация value +description: Изучите конфигурацию value в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочником API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# value + +### Описание + +@short: Необязательно. Определяет начальное содержимое, отображаемое в области редактора RichText. + +:::tip +Чтобы задать содержимое в пользовательском формате, используйте встроенный метод [`setValue()`](api/methods/set-value.md). +::: + +### Использование + +~~~jsx {} +value?: string; +~~~ + +### Пример + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" // задаёт значение по умолчанию (формат HTML) + // другие свойства конфигурации +}); +~~~ + +**История изменений:** Это свойство было добавлено в версии 2.0 + +**Связанные статьи:** [Конфигурация](guides/configuration.md) + +**Связанный пример:** [RichText. Инициализация](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/align.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/align.md new file mode 100644 index 0000000..68c11df --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/align.md @@ -0,0 +1,48 @@ +--- +sidebar_label: align +title: Событие align +description: Изучите событие align в документации по библиотеке DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками по API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# align + +### Описание + +@short: Срабатывает при каждом обновлении выравнивания текста с помощью menubar/toolbar или методов Event Bus. + +### Использование + +~~~jsx {} +"align": ({ + align: "left" | "center" | "right" | "justify" +}) => boolean | void; +~~~ + +### Параметры + +В callback для события **align** передается объект со следующим свойством: + +- `align` - задает выравнивание текста, может принимать одно из значений: `"left" | "center" | "right" | "justify"` + +:::info +Внутренние события можно обрабатывать с помощью [**методов Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-12} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "align" +editor.api.on("align", (obj) => { + console.log(`Выравнивание: ${obj.align}`); +}); +// установка выравнивания текста влево +editor.api.exec("align", { + align: "left" +}); +~~~ + +**Изменения:** Это событие было добавлено в версии 2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md new file mode 100644 index 0000000..793ee0d --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md @@ -0,0 +1,38 @@ +--- +sidebar_label: clear-text-format +title: Событие clear-text-format +description: Вы можете узнать о событии clear-text-format в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков и справочником по API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# clear-text-format + +### Описание + +@short: Срабатывает каждый раз, когда форматирование текста удаляется с помощью меню, панели инструментов или методов Event Bus. + +### Использование + +~~~jsx {} +"clear-text-format": () => boolean | void; +~~~ + +:::info +Для управления внутренними событиями вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-10} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "clear-text-format" +editor.api.on("clear-text-format", () => { + console.log("Форматирование текста было очищено"); +}); +// очистка форматирования текста +editor.api.exec("clear-text-format", {}); +~~~ + +**Изменения:** Событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/copy.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/copy.md new file mode 100644 index 0000000..4ed32a1 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/copy.md @@ -0,0 +1,36 @@ +--- +sidebar_label: копирование +title: событие copy +description: Изучите событие copy в документации библиотеки DHTMLX JavaScript RichText. Получите доступ к руководствам для разработчиков, справочникам API, попробуйте живые демо и примеры кода, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# copy + +### Описание + +@short: Срабатывает при копировании выделенного текста + +### Использование + +~~~jsx {} +"copy": () => boolean | void; +~~~ + +:::info +Для работы с внутренними событиями вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// прослушивание события "copy" +editor.api.on("copy", () => { + console.log("Выделенный текст был скопирован"); +}); +~~~ + +**История изменений:** Это событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/create-new.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/create-new.md new file mode 100644 index 0000000..b5d5017 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/create-new.md @@ -0,0 +1,44 @@ +--- +sidebar_label: create-new +title: Событие create-new +description: Узнайте, как работает событие create-new в библиотеке DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками по API, попробуйте примеры кода и живые демо, а также получите бесплатный 30-дневный пробный период DHTMLX RichText. +--- + +# create-new + +### Описание + +@short: Это событие вызывается при выборе опции «New» в меню или при использовании методов Event Bus. + +### Использование + +~~~jsx {} +"create-new": ({ reset?: boolean }) => boolean | void; +~~~ + +### Параметры + +Обработчик события **create-new** принимает объект со следующим свойством: + +- `reset` - указывает, нужно ли сбрасывать историю при создании нового файла. + +:::info +Для управления внутренними событиями вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md). +::: + +### Пример + +~~~jsx {5-10} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "create-new" +editor.api.on("create-new", ({ reset }) => { + console.log(`Документ был очищен. История была ${reset ? "" : "не"} сброшена.`); +}); +// создание нового файла и сброс истории +editor.api.exec("create-new", { reset: true }); +~~~ + +**История изменений:** Это событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/cut.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/cut.md new file mode 100644 index 0000000..2589701 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/cut.md @@ -0,0 +1,36 @@ +--- +sidebar_label: cut +title: Событие cut +description: Изучите событие cut в документации по библиотеке DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками по API, попробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# cut + +### Описание + +@short: Срабатывает при вырезании выделенного текста + +### Использование + +~~~jsx {} +"cut": () => boolean | void; +~~~ + +:::info +Для управления внутренними событиями можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md). +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "cut" +editor.api.on("cut", () => { + console.log("Выделенный текст был вырезан"); +}); +~~~ + +**Журнал изменений:** Событие было введено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/delete-link.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/delete-link.md new file mode 100644 index 0000000..912b89c --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/delete-link.md @@ -0,0 +1,36 @@ +--- +sidebar_label: delete-link +title: Событие delete-link +description: Вы можете узнать о событии delete-link в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# delete-link + +### Описание + +@short: Срабатывает каждый раз при удалении ссылки + +### Использование + +~~~jsx {} +"delete-link": () => boolean | void; +~~~ + +:::info +Для управления внутренними событиями вы можете обратиться к [**методам Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "delete-link" +editor.api.on("delete-link", () => { + console.log("Ссылка была удалена"); +}); +~~~ + +**История изменений:** Это событие было введено в версии 2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/export.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/export.md new file mode 100644 index 0000000..fdcec75 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/export.md @@ -0,0 +1,59 @@ +--- +sidebar_label: export +title: событие export +description: В этом разделе рассматривается событие export в библиотеке DHTMLX JavaScript RichText. Включает руководства для разработчиков, справочник API, примеры кода, живые демонстрации и бесплатный 30-дневный пробный период DHTMLX RichText. +--- + +# export + +### Описание + +@short: Срабатывает после выбора опции «Export» в меню или вызова через методы Event Bus. + +### Использование + +~~~jsx {} +"export": ({ options: IExportOptions; result?: any }) => boolean | void; + +interface IExportOptions { + format?: "docx" | "pdf"; + url?: string; + download?: boolean; + fileName?: string; +} +~~~ + +### Параметры + +Колбэк для события **export** получает объект со следующими свойствами: + +- `format` - указывает формат файла +- `url` - базовый URL, используемый для экспорта файла +- `download` - указывает, должен ли файл автоматически скачиваться после ответа сервера. Если установлено в "false", файл не будет скачиваться автоматически, но данные blob можно получить через свойство `result` в объекте события +- `fileName` - имя, присваиваемое экспортируемому файлу + +:::info +Внутренними событиями можно управлять с помощью [**методов Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-15} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// прослушивание события "export" +editor.api.on("export", (obj) => { + console.log(obj); + console.log("Файл был экспортирован"); +}); +// экспорт содержимого в формате pdf +editor.api.exec("export", { + format: "pdf", + download: false, + fileName: "some file" +}); +~~~ + +**История изменений:** Это событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/import.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/import.md new file mode 100644 index 0000000..f2c9b08 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/import.md @@ -0,0 +1,47 @@ +--- +sidebar_label: импорт +title: событие import +description: Ознакомьтесь с событием import в документации по библиотеке DHTMLX JavaScript RichText. Изучите руководства для разработчиков, справочник API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# import + +### Описание + +@short: Срабатывает после выбора опции «Import» в меню или вызова через методы Event Bus. + +### Использование + +~~~jsx {} +"import": ({ html?: string }) => boolean | void; +~~~ + +### Параметры + +Колбэк для события **import** принимает объект со следующим параметром: + +- `html` - строка, содержащая HTML-контент + +:::info +Для управления внутренними событиями можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-13} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "import" +editor.api.on("import", (obj) => { + console.log(obj.html); + console.log("Новое значение было импортировано"); +}); +// выполнение импорта +editor.api.exec("import", { + html: "

some value

" // внутренне вызывает setValue +}); +~~~ + +**Журнал изменений:** Это событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/indent.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/indent.md new file mode 100644 index 0000000..e0670be --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/indent.md @@ -0,0 +1,43 @@ +--- +sidebar_label: indent +title: Событие indent +description: Изучите событие indent в документации по библиотеке DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками API, примерами кода, живыми демо и скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# indent + +### Описание + +@short: Срабатывает при увеличении отступа блока + +### Использование + +~~~jsx {} +"indent": ({ step: number }) => boolean | void; +~~~ + +### Параметры + +Обработчик события **indent** получает объект с следующим свойством: + +- `step` - величина, на которую был увеличен отступ + +:::info +Для управления внутренними событиями вы можете обратиться к [**методам Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "indent" +editor.api.on("indent", (obj) => { + console.log(obj); + console.log("Отступ был увеличен"); +}); +~~~ + +**История изменений:** Это событие было добавлено в версии 2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-image.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-image.md new file mode 100644 index 0000000..2112479 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-image.md @@ -0,0 +1,50 @@ +--- +sidebar_label: insert-image +title: Событие insert-image +description: Изучите событие insert-image в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# insert-image + +### Описание + +@short: Срабатывает при вставке изображения + +### Использование + +~~~jsx {} +"insert-image": (IImageContext) => boolean | void; + +interface IImageContext { + id: TID; + value: string; + width: number; + height: number; + // дополнительные свойства из контекста загрузчика, не обязательные для самого действия + name?: string; + file?: File; + status?: string; + selected: (ctx: IImageContext) => void; + uploaded: (ctx: IImageContext) => void; +} +~~~ + +:::info +Для работы с внутренними событиями вы можете обратиться к [**методам Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "insert-image" +editor.api.on("insert-image", (obj) => { + console.log(obj); + console.log("Изображение было вставлено"); +}); +~~~ + +**История изменений:** Это событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-line.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-line.md new file mode 100644 index 0000000..1ed9e2b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-line.md @@ -0,0 +1,36 @@ +--- +sidebar_label: insert-line +title: Событие insert-line +description: Узнайте подробности о событии insert-line в документации библиотеки DHTMLX JavaScript RichText. Изучите руководства для разработчиков, справочники по API, попробуйте примеры и живые демонстрации, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# insert-line + +### Описание + +@short: Срабатывает при вставке горизонтальной линии + +### Использование + +~~~jsx {} +"insert-line": () => boolean | void; +~~~ + +:::info +Для работы с внутренними событиями можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "insert-line" +editor.api.on("insert-line", () => { + console.log("Горизонтальная линия была вставлена"); +}); +~~~ + +**История изменений:** Это событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-link.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-link.md new file mode 100644 index 0000000..0f64f66 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-link.md @@ -0,0 +1,43 @@ +--- +sidebar_label: insert-link +title: Событие insert-link +description: Изучите событие insert-link в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками по API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# insert-link + +### Описание + +@short: Срабатывает при вставке ссылки + +### Использование + +~~~jsx {} +"insert-link": ({ url: string }) => boolean | void; +~~~ + +### Параметры + +Обратный вызов для события **update-link** получает объект с этим параметром: + +- `url` - вставляемый URL + +:::info +Для управления внутренними событиями вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "insert-link" +editor.api.on("insert-link", (obj) => { + console.log(obj) + console.log("Вставлена следующая ссылка: " + obj.url); +}); +~~~ + +**История изменений:** Это событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-list.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-list.md new file mode 100644 index 0000000..23a4e95 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-list.md @@ -0,0 +1,47 @@ +--- +sidebar_label: insert-list +title: Событие insert-list +description: Изучите событие insert-list в документации по библиотеке DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками API, попробуйте примеры кода и живые демо, а также получите бесплатный 30-дневный пробный период DHTMLX RichText. +--- + +# insert-list + +### Описание + +@short: Срабатывает при вставке списка + +### Использование + +~~~jsx {} +"insert-list": ({ type: TListType }) => boolean | void; + +type TListType = "bulleted" | "numbered"; +~~~ + +### Параметры + +Обработчик события **insert-list** получает объект с следующим параметром: + +- `type` - указывает тип вставленного списка. Возможные значения: + - `"bulleted"` - маркированный список + - `"numbered"` - нумерованный список + +:::info +Для управления внутренними событиями вы можете обратиться к [**методам Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "insert-list" +editor.api.on("insert-list", (obj) => { + console.log(obj.type); + console.log("Список был вставлен"); +}); +~~~ + +**История изменений:** Это событие было добавлено в версии 2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/outdent.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/outdent.md new file mode 100644 index 0000000..eccb8e6 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/outdent.md @@ -0,0 +1,43 @@ +--- +sidebar_label: outdent +title: Событие outdent +description: Изучите событие outdent в документации по библиотеке DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками API, примерами кода, живыми демо и скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# outdent + +### Описание + +@short: Срабатывает при уменьшении отступа блока + +### Использование + +~~~jsx {} +"outdent": ({ step: number }) => boolean | void; +~~~ + +### Параметры + +Объект, передаваемый в callback для события **outdent**, содержит: + +- `step` - величина, на которую был уменьшен отступ + +:::info +Для работы с внутренними событиями вы можете обратиться к [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "outdent" +editor.api.on("outdent", (obj) => { + console.log(obj); + console.log("Отступ был уменьшен"); +}); +~~~ + +**Изменения:** Это событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/paste.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/paste.md new file mode 100644 index 0000000..7bd079a --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/paste.md @@ -0,0 +1,36 @@ +--- +sidebar_label: paste +title: Событие paste +description: Изучите событие paste в документации библиотеки DHTMLX JavaScript RichText. Получите доступ к руководствам для разработчиков, справочникам по API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# paste + +### Описание + +@short: Срабатывает при вставке содержимого + +### Использование + +~~~jsx {} +"paste": () => boolean | void; +~~~ + +:::info +Для управления внутренними событиями обратитесь к [**методам Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "paste" +editor.api.on("paste", () => { + console.log("Содержимое было вставлено"); +}); +~~~ + +**Журнал изменений:** Это событие было введено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/print.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/print.md new file mode 100644 index 0000000..d717fe7 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/print.md @@ -0,0 +1,36 @@ +--- +sidebar_label: print +title: Событие print +description: Изучите событие print в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками по API, попробуйте примеры кода и живые демо, а также получите бесплатный 30-дневный пробный период DHTMLX RichText. +--- + +# print + +### Описание + +@short: Срабатывает при начале печати документа + +### Использование + +~~~jsx {} +"print": () => boolean | void; +~~~ + +:::info +Для управления внутренними событиями обратитесь к [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { +// свойства конфигурации +}); +// подписка на событие "print" +editor.api.on("print", () => { + console.log("Документ печатается"); +}); +~~~ + +**История изменений:** Событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/redo.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/redo.md new file mode 100644 index 0000000..7c9eb6d --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/redo.md @@ -0,0 +1,36 @@ +--- +sidebar_label: redo +title: Событие redo +description: Изучите событие redo в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками API, примерами кода, живыми демо и скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# redo + +### Описание + +@short: Срабатывает при нажатии кнопки "Redo" в менюбара/тулбаре или при активации через методы Event Bus. + +### Использование + +~~~jsx {} +"redo": () => boolean | void; +~~~ + +:::info +Для управления внутренними событиями можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "redo" +editor.api.on("redo", () => { + console.log("Операция повторения была выполнена"); +}); +~~~ + +**Журнал изменений:** Это событие было добавлено в версии 2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/resize-image.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/resize-image.md new file mode 100644 index 0000000..89e7c48 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/resize-image.md @@ -0,0 +1,45 @@ +--- +sidebar_label: resize-image +title: Событие resize-image +description: Вы можете узнать о событии resize-image в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# resize-image + +### Описание + +@short: Срабатывает при изменении размера изображения + +### Использование + +~~~jsx {} +"resize-image": ({ id: number, width: number, height: number }) => boolean | void; +~~~ + +### Параметры + +Объект, передаваемый в колбэк события **resize-image**, содержит следующие свойства: + +- `id` - уникальный идентификатор изображения +- `width` - новая ширина изображения +- `height` - новая высота изображения + +:::info +Для работы с внутренними событиями вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { +// свойства конфигурации +}); +// подписка на событие "resize-image" +editor.api.on("resize-image", (obj) => { + console.log(obj); + console.log("Изображение было изменено в размере") +}); +~~~ + +**История изменений:** Событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-font-family.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-font-family.md new file mode 100644 index 0000000..2017545 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-font-family.md @@ -0,0 +1,47 @@ +--- +sidebar_label: set-font-family +title: Событие set-font-family +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о событии set-font-family. Ознакомьтесь с руководствами для разработчиков и справочником по API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# set-font-family + +### Описание + +@short: Срабатывает при установке семейства шрифтов + +### Использование + +~~~jsx {} +"set-font-family": ({ fontFamily: string }) => boolean | void; +~~~ + +### Параметры + +Callback для события **set-font-family** получает объект с следующим параметром: + +- `fontFamily` - семейство шрифтов, которое необходимо применить. Доступные варианты: `"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"` + +:::info +Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-13} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "set-font-family" +editor.api.on("set-font-family", (obj) => { + console.log(obj.fontFamily); + console.log("Семейство шрифтов было изменено"); +}); +// установка нового семейства шрифтов +editor.api.exec("set-font-family", { + fontFamily: "Roboto" +}); +~~~ + +**История изменений:** Это событие было добавлено в версии 2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-font-size.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-font-size.md new file mode 100644 index 0000000..6242216 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-font-size.md @@ -0,0 +1,47 @@ +--- +sidebar_label: set-font-size +title: Событие set-font-size +description: Изучите событие set-font-size в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками API, попробуйте демо и скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# set-font-size + +### Описание + +@short: Срабатывает при установке размера шрифта + +### Использование + +~~~jsx {} +"set-font-size": ({ fontSize: string }) => boolean | void; +~~~ + +### Параметры + +Колбэк для события **set-font-size** получает объект с таким параметром: + +- `fontSize` - размер шрифта, который нужно применить + +:::info +Для управления внутренними событиями вы можете обратиться к [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-13} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "set-font-size" +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); + console.log("Размер шрифта был изменён"); +}); +// установка нового размера шрифта +editor.api.exec("set-font-size", { + fontSize: "11px" +}); +~~~ + +**История изменений:** Это событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-line-height.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-line-height.md new file mode 100644 index 0000000..fbeeaf2 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-line-height.md @@ -0,0 +1,47 @@ +--- +sidebar_label: set-line-height +title: Событие set-line-height +description: Вы можете узнать о событии set-line-height в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также скачивайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# set-line-height + +### Описание + +@short: Срабатывает всякий раз при установке высоты строки + +### Использование + +~~~jsx {} +"set-line-height": ({ lineHeight: string }) => boolean | void; +~~~ + +### Параметры + +Колбэк для события **set-line-height** получает объект с таким параметром: + +- `lineHeight` - значение устанавливаемой высоты строки + +:::info +Для управления внутренними событиями можно обратиться к [**методам Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-13} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// отслеживание события "set-line-height" +editor.api.on("set-line-height", (obj) => { + console.log(obj); + console.log("Высота строки была изменена"); +}); +// установка новой высоты строки +editor.api.exec("set-line-height", { + lineHeight: "15px" +}); +~~~ + +**Изменения:** Событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-text-color.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-text-color.md new file mode 100644 index 0000000..f94b7d8 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-text-color.md @@ -0,0 +1,54 @@ +--- +sidebar_label: set-text-color +title: Событие set-text-color +description: Изучите событие set-text-color в документации библиотеки DHTMLX JavaScript RichText. Найдите руководства для разработчиков, справочники API, примеры кода, живые демонстрации и получите бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# set-text-color + +### Описание + +@short: Срабатывает при применении цвета текста и/или цвета фона + +### Использование + +~~~jsx {} +"set-text-color": (ITextColor) => boolean | void; + +interface ITextColor { + color?: string; + background?: string; +} +~~~ + +### Параметры + +Колбэк для события **set-text-color** получает объект со следующими свойствами: + +- `color` - цвет текста +- `background` - цвет фона текста + +:::info +Для управления внутренними событиями вы можете ознакомиться с [**Методами Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-14} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "set-text-color" +editor.api.on("set-text-color", (obj) => { + console.log(obj); + console.log("Цвет текста и/или цвет фона были обновлены"); +}); +// установка цвета текста и фона +editor.api.exec("set-text-color", { + color: "red", + background: "blue" +}); +~~~ + +**История изменений:** Это событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-text-format.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-text-format.md new file mode 100644 index 0000000..8ae4006 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-text-format.md @@ -0,0 +1,58 @@ +--- +sidebar_label: set-text-format +title: Событие set-text-format +description: Вы можете узнать о событии set-text-format в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# set-text-format + +### Описание + +@short: Срабатывает при применении форматирования текста + +### Использование + +~~~jsx {} +"set-text-format": (ITextFormat) => boolean | void; + +interface ITextFormat { + bold?: boolean; + italic?: boolean; + strike?: boolean; + underline?: boolean; +} +~~~ + +:::info +Для управления внутренними событиями вы можете обратиться к [**методам Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Параметры + +Колбэк для события **set-text-format** получает объект с следующими необязательными свойствами: + +- `bold` - указывает на применение полужирного форматирования текста +- `italic` - указывает на применение курсивного форматирования текста +- `strike` - указывает на применение зачёркнутого форматирования текста +- `underline` - указывает на применение подчёркнутого форматирования текста + +### Пример + +~~~jsx {5-14} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "set-text-format" +editor.api.on("set-text-format", (obj) => { + console.log(obj); + console.log("Формат текста был изменён"); +}); +// применение курсивного и полужирного форматирования к тексту +editor.api.exec("set-text-format", { + italic: true, + bold: true +}); +~~~ + +**История изменений:** Это событие было добавлено в версии 2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-text-style.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-text-style.md new file mode 100644 index 0000000..0dc4eed --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/set-text-style.md @@ -0,0 +1,49 @@ +--- +sidebar_label: set-text-style +title: Событие set-text-style +description: Изучите событие set-text-style в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками по API, попробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# set-text-style + +### Описание + +@short: Срабатывает при применении стиля текста + +### Использование + +~~~jsx {} +"set-text-style": ({ tag: TBlockType }) => boolean | void; + +type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; +~~~ + +### Параметры + +Обратный вызов для события **set-text-style** получает объект со следующим свойством: + +- `tag` - указывает применяемый стиль текста + +:::info +Для управления внутренними событиями вы можете обратиться к [**методам Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-13} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// отслеживание события "set-text-style" +editor.api.on("set-text-style", (obj) => { + console.log(obj.tag); + console.log("Стиль текста был обновлен"); +}); +// изменение стиля текста +editor.api.exec("set-text-style", { + tag: "blockquote" +}); +~~~ + +**История изменений:** Это событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/show-popup.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/show-popup.md new file mode 100644 index 0000000..b9880c5 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/show-popup.md @@ -0,0 +1,53 @@ +--- +sidebar_label: show-popup +title: Событие show-popup +description: Изучите событие show-popup в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками по API, попробуйте примеры кода, живые демо и скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# show-popup + +### Описание + +@short: Срабатывает при отображении или скрытии всплывающего окна (popup) + +### Использование + +~~~jsx {} +"show-popup": (IPopupConfig) => boolean | void; + +interface IPopupConfig { + type: "link" | null; + image?: boolean; +} +~~~ + +### Параметры + +Обработчик события **show-popup** получает объект со следующими свойствами: + +- `type` - определяет тип всплывающего окна +- `image` - указывает, находится ли текущий курсор над изображением + +:::info +Для управления внутренними событиями можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-13} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "show-popup" +editor.api.on("show-popup", (obj) => { + console.log(obj); + console.log("Всплывающее окно было показано/скрыто"); +}); +// показать всплывающее окно для текста слева +editor.api.exec("show-popup", { + type: "link" +}); +~~~ + +**Журнал изменений:** Событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/subscript.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/subscript.md new file mode 100644 index 0000000..b31763f --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/subscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: subscript +title: Событие subscript +description: Изучите событие subscript в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками по API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# subscript + +### Описание + +@short: Срабатывает при нажатии кнопки "Subscript" в менюбара/тулбаре или при вызове через методы Event Bus + +### Использование + +~~~jsx {} +"subscript": () => boolean | void; +~~~ + +:::info +Для работы с внутренними событиями вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-10} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "subscript" +editor.api.on("subscript", () => { + console.log("Подстрочный текст был применён"); +}); +// выполнение события "subscript" +editor.api.exec("subscript", {}); +~~~ + +**История изменений:** Это событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/superscript.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/superscript.md new file mode 100644 index 0000000..bbad67b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/superscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: надстрочный индекс +title: событие superscript +description: Изучите событие superscript в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочными материалами по API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# superscript + +### Описание + +@short: Это событие срабатывает при нажатии кнопки "Superscript" в меню или панели инструментов, либо при активации через методы Event Bus. + +### Использование + +~~~jsx {} +"superscript": () => boolean | void; +~~~ + +:::info +Для управления внутренними событиями обратитесь к [**Event Bus methods**](api/overview/event_bus_methods_overview.md). +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "superscript" +editor.api.on("superscript", () => { + console.log("Superscript был применён"); +}); +// вызов события "superscript" +editor.api.exec("superscript", {}); +~~~ + +**Журнал изменений:** Это событие было введено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md new file mode 100644 index 0000000..0a33348 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md @@ -0,0 +1,45 @@ +--- +sidebar_label: переключение-режима-полноэкранного-режима +title: Событие toggle-fullscreen-mode +description: Вы можете узнать о событии toggle-fullscreen-mode в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачивайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# toggle-fullscreen-mode + +### Описание + +@short: Срабатывает при переключении полноэкранного режима включения или отключения + +### Использование + +~~~jsx {} +"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void; +~~~ + +### Параметры + +Обработчик события **toggle-fullscreen-mode** принимает объект со следующим свойством: + +- `mode` - указывает, включён ли полноэкранный режим + +:::info +Для управления внутренними событиями вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "toggle-fullscreen-mode" +editor.api.on("toggle-fullscreen-mode", (obj) => { + console.log(obj); + console.log("Полноэкранный режим был изменён"); +}); +// включение полноэкранного режима +editor.api.exec("toggle-fullscreen-mode", { mode: true }); +~~~ + +**Журнал изменений:** Событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md new file mode 100644 index 0000000..59a9881 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md @@ -0,0 +1,45 @@ +--- +sidebar_label: переключение-режима-раскладки +title: Событие toggle-layout-mode +description: Вы можете узнать о событии toggle-layout-mode в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# toggle-layout-mode + +### Описание + +@short: Срабатывает при переключении режима раскладки + +### Использование + +~~~jsx {} +"toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void; +~~~ + +### Параметры + +Обработчик события **toggle-layout-mode** получает объект с такими параметрами: + +- `mode` - указывает режим раскладки. Доступные варианты: `"classic" | "document"` + +:::info +Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-11} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "toggle-layout-mode" +editor.api.on("toggle-layout-mode", (obj) => { + console.log(obj); + console.log("Режим раскладки изменён"); +}); +// установка режима раскладки "document" +editor.api.exec("toggle-layout-mode", { mode: "document" }); +~~~ + +**Журнал изменений:** Событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md new file mode 100644 index 0000000..ecad29b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md @@ -0,0 +1,45 @@ +--- +sidebar_label: toggle-shortcut-info +title: Событие toggle-shortcut-info +description: Вы можете узнать о событии toggle-shortcut-info в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также скачивайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# toggle-shortcut-info + +### Описание + +@short: Срабатывает при переключении отображения информации о сочетаниях клавиш + +### Использование + +~~~jsx {} +"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void; +~~~ + +### Параметры + +Колбэк для события **toggle-shortcut-info** получает объект со следующим свойством: + +- `mode` - управляет отображением информации о сочетаниях клавиш; `true` - показать всплывающее окно с подсказкой, `false` - скрыть его + +:::info +Для управления внутренними событиями вы можете обратиться к [**методам Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "toggle-shortcut-info" +editor.api.on("toggle-shortcut-info", (obj) => { + console.log(obj); + console.log("Информация о сочетаниях клавиш была показана"); +}); +// включение отображения информации о сочетаниях клавиш +editor.api.exec("toggle-shortcut-info", { mode: true }); +~~~ + +**Журнал изменений:** Событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/undo.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/undo.md new file mode 100644 index 0000000..9aa494a --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/undo.md @@ -0,0 +1,36 @@ +--- +sidebar_label: undo +title: событие undo +description: Изучите событие undo в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками по API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# undo + +### Описание + +@short: Срабатывает при нажатии кнопки "Отменить" в меню/панели инструментов или при активации через методы Event Bus. + +### Использование + +~~~jsx {} +"undo": () => boolean | void; +~~~ + +:::info +Внутренними событиями можно управлять с помощью [**методов Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// прослушивание события "undo" +editor.api.on("undo", () => { + console.log("Операция отмены выполнена"); +}); +~~~ + +**Журнал изменений:** Это событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/update-link.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/update-link.md new file mode 100644 index 0000000..c22b8a1 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/update-link.md @@ -0,0 +1,44 @@ +--- +sidebar_label: update-link +title: Событие update-link +description: Вы можете узнать о событии update-link в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# update-link + +### Описание + +@short: Срабатывает при обновлении ссылки + +### Использование + +~~~jsx {} +"update-link": ({ id: number, url: string }) => boolean | void; +~~~ + +### Параметры + +Колбэк для события **update-link** получает объект с следующими свойствами: + +- `id` - идентификатор ссылки +- `url` - обновлённый URL + +:::info +Для управления внутренними событиями вы можете обратиться к [**методам Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "update-link" +editor.api.on("update-link", (obj) => { + console.log(obj); + console.log("Была обновлена следующая ссылка: " + obj.url); +}); +~~~ + +**История изменений:** Событие было добавлено в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/detach.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/detach.md new file mode 100644 index 0000000..6731c2f --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/detach.md @@ -0,0 +1,44 @@ +--- +sidebar_label: api.detach() +title: Метод on +description: Вы можете узнать о методе on в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также скачивайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# api.detach() + +### Описание + +@short: Позволяет удалять или отсоединять обработчики событий + +### Использование + +~~~jsx {} +api.detach( tag: string ): void; +~~~ + +### Параметры + +- `tag` - (обязательный) указывает имя тега действия + +### События + +:::info +Полный список внутренних событий RichText доступен [**здесь**](api/overview/events_overview.md) +::: + +### Пример + +~~~jsx {6-8,10} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); + +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}, { tag: "track" }); + +editor.api.detach("track"); +~~~ + +**История изменений:** Метод был обновлен в версии 2.0. Параметры `name` и `context` были удалены diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/exec.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/exec.md new file mode 100644 index 0000000..05dbe4f --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/exec.md @@ -0,0 +1,46 @@ +--- +sidebar_label: api.exec() +title: Метод exec +description: Вы можете узнать о методе exec в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства для разработчиков и справочник по API, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# api.exec() + +### Описание + +@short: Этот метод позволяет запускать внутренние события внутри редактора. + +### Использование + +~~~jsx {} +api.exec( + event: string, + config: object +): void; +~~~ + +### Параметры + +- `event` - (обязательный) имя события, которое нужно вызвать +- `config` - (обязательный) объект с параметрами для вызываемого события + +### События + +:::info +Полный список внутренних событий RichText вы можете найти [**здесь**](api/overview/events_overview.md) +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// применяем размер шрифта к тексту +editor.api.exec("set-font-size", { + fontSize: "16px" +}); +~~~ + +**История изменений:** Этот метод был добавлен в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md new file mode 100644 index 0000000..ff06556 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.getReactiveState() +title: Метод getReactiveState +description: Вы можете ознакомиться с методом getReactiveState в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и интерактивные демонстрации, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# api.getReactiveState() + +### Описание + +@short: Предоставляет объект, содержащий реактивные свойства RichText. + +### Использование + +~~~jsx {} +api.getReactiveState(): object; +~~~ + +### Возвращаемое значение + +Этот метод возвращает объект со следующими свойствами: + +~~~jsx {} +{ + cursorState: { subscribe: any }, + defaultStyles {...}, + document {...}, + fullscreen {...}, + history {...}, + layoutMode {...}, + popup {...}, + selection {...} +} +~~~ + +### Пример + +~~~jsx {5-7} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // конфигурационные свойства +}); +// получение реактивного состояния RichText +const reactive_state = editor.api.getReactiveState(); +console.log(reactive_state) +~~~ + +**Журнал изменений:** Этот метод был введён в версии 2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/get-state.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/get-state.md new file mode 100644 index 0000000..ef684bc --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/get-state.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.getState() +title: Метод getState +description: Вы можете узнать о методе getState в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также скачивайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# api.getState() + +### Описание + +@short: Предоставляет объект, содержащий текущие свойства StateStore в RichText. + +### Использование + +~~~jsx {} +api.getState(): object; +~~~ + +### Возвращаемое значение + +Этот метод возвращает объект со следующими свойствами: + +~~~jsx {} +{ + cursorState: {}, + defaultStyles: {}, + document: {}, + fullscreen: boolean, + history: [] + layoutMode: string, + popup: any, + selection: {} +} +~~~ + +### Пример + +~~~jsx {5-7} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// получение текущего состояния RichText +const state = editor.api.getState(); +console.log(state); +~~~ + +**Изменения:** Метод добавлен в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/intercept.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/intercept.md new file mode 100644 index 0000000..c2e5884 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/intercept.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.intercept() +title: Метод intercept +description: Вы можете узнать о методе intercept в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также скачивайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# api.intercept() + +### Описание + +@short: Предоставляет способ перехвата и блокировки внутренних событий до их выполнения. + +### Использование + +~~~jsx {} +api.intercept( + event: string, + callback: function +): void; +~~~ + +### Параметры + +- `event` - (обязательный) имя события для перехвата +- `callback` - (обязательный) функция, которая выполняется при возникновении события (аргументы зависят от конкретного события) + +### События + +:::info +Полный список внутренних событий RichText вы можете найти [**здесь**](api/overview/events_overview.md) +::: + +### Пример + +~~~jsx {5-10} +// создаем RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// предотвращаем изменение размера шрифта, кроме "36px" +editor.api.intercept("set-font-size", (obj) => { + if(obj.fontSize !== "36px" ){ + return false; + } +}); +~~~ + +**История изменений:** Метод добавлен в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/on.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/on.md new file mode 100644 index 0000000..a3f3886 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/on.md @@ -0,0 +1,46 @@ +--- +sidebar_label: api.on() +title: Метод on +description: Вы можете узнать о методе on в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# api.on() + +### Описание + +@short: Позволяет привязать обработчик к внутренним событиям + +### Использование + +~~~jsx {} +api.on( + event: string, + handler: function +): void; +~~~ + +### Параметры + +- `event` - (обязательный) событие, при наступлении которого вызывается обработчик +- `handler` - (обязательный) функция, которая будет вызвана при срабатывании события (аргументы зависят от события) + +### События + +:::info +Полный список внутренних событий RichText вы можете найти [**здесь**](api/overview/events_overview.md) +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "set-font-size" +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}); +~~~ + +**История изменений:** Метод был обновлен в версии v2.0. Параметр `context` был удалён diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/set-next.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/set-next.md new file mode 100644 index 0000000..a0db32b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/set-next.md @@ -0,0 +1,40 @@ +--- +sidebar_label: api.setNext() +title: Метод setNext +description: Вы можете узнать о методе setNext в документации по библиотеке DHTMLX JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также скачивайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# api.setNext() + +### Описание + +@short: Этот метод позволяет добавить действие в последовательность Event Bus. + +### Использование + +~~~jsx {} +api.setNext(next: any): void; +~~~ + +### Параметры + +- `next` - (обязательный) действие, которое нужно добавить в последовательность **Event Bus** + +### Пример + +~~~jsx {10-11} +const server = "https://some-backend-url"; +// Предположим, что у вас есть кастомный класс сервиса someServerService +const someServerService = new ServerDataService(server); + +fetch(server + "/data").then((res) => res.json()).then((data) => { + const editor = new richtext.Richtext("#root", { + value: data + }); + + // Добавляем someServerService в последовательность Event Bus виджета + editor.api.setNext(someServerService); +}); +~~~ + +**История изменений:** Метод добавлен в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/destructor.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/destructor.md new file mode 100644 index 0000000..8c54456 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/destructor.md @@ -0,0 +1,28 @@ +--- +sidebar_label: destructor() +title: Метод destructor +description: Вы можете узнать о методе destructor в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# destructor() + +### Описание + +@short: Очищает все HTML-элементы компонента RichText и отключает все связанные события. + +### Использование + +~~~jsx {} +destructor(): void; +~~~ + +### Пример + +~~~jsx {5-6} +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); + +// удаление RichText +editor.destructor(); +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/get-value.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/get-value.md new file mode 100644 index 0000000..9b3465c --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/get-value.md @@ -0,0 +1,43 @@ +--- +sidebar_label: getValue() +title: Метод getValue +description: Вы можете узнать о методе getValue в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также скачивайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# getValue() + +### Описание + +@short: Получает текущее значение редактора RichText + +### Использование + +~~~jsx {} +getValue(encoder?: any): string; +~~~ + +### Параметры + +- `encoder` - (необязательный) парсер, который преобразует содержимое RichText в определённый формат. Доступные варианты включают `html` (по умолчанию) и `text` + +Для получения нужного энкодера используйте следующий код: + +```jsx +const toTextEncoder = richtext.text.toText; // текстовый энкодер +const toHTMLEncoder = richtext.html.toHTML; // HTML энкодер +``` + +### Пример + +~~~jsx {6-8} +const editor = new richtext.Richtext("#root", { + value: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." // задаёт значение по умолчанию (формат HTML) + // другие свойства конфигурации +}); + +const toTextEncoder = richtext.text.toText; +const editor_value = editor.getValue(toTextEncoder); +console.log(editor_value); +~~~ + +**Изменения:** Метод был обновлён в версии 2.0. Параметр `mode` был удалён. Добавлен параметр `encoder`. diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-config.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-config.md new file mode 100644 index 0000000..4fd6d88 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-config.md @@ -0,0 +1,40 @@ +--- +sidebar_label: setConfig() +title: Метод setConfig +description: Вы можете ознакомиться с методом setConfig в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства для разработчиков и справочник по API, пробуйте примеры кода и живые демо, а также скачивайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# setConfig() + +### Описание + +@short: Обновляет редактор RichText новыми настройками конфигурации. + +### Использование + +~~~jsx {} +setConfig(config: { [key:any]: any }): void; +~~~ + +### Параметры + +- `config` - (обязательный) объект, содержащий параметры конфигурации RichText. Полный список свойств доступен [здесь](api/overview/properties_overview.md) + +:::note +При использовании метода `setConfig()` любые ранее установленные параметры, которые не включены в новый вызов, останутся без изменений. +::: + +### Пример + +~~~jsx {6-8} +const editor = new richtext.Richtext("#root", { + value: "

Some text

", + // другие свойства конфигурации +}); + +editor.setConfig({ + layoutMode: "document" +}); +~~~ + +**История изменений:** Метод был введён в версии v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-locale.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-locale.md new file mode 100644 index 0000000..7a950df --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-locale.md @@ -0,0 +1,41 @@ +--- +sidebar_label: setLocale() +title: Метод setLocale +description: Вы можете ознакомиться с методом setLocale в документации по библиотеке DHTMLX JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демонстрации, а также скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# setLocale() + +### Описание + +@short: Обновляет настройки локали для RichText + +### Использование + +~~~jsx {} +setLocale(null | locale?: object): void; +~~~ + +### Параметры + +- `null` - (необязательно) переключается обратно на локаль по умолчанию (*английский*) +- `locale` - (необязательно) объект с новыми данными локали для применения + +:::info +Метод `setLocale()` обновляет локаль, используемую в RichText. Вызов без аргументов (или с передачей *null*) вернёт локаль к настройкам по умолчанию. +::: + +### Пример + +~~~jsx {5-6} +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); + +// установить локаль RichText на "de" +editor.setLocale(de); +~~~ + +**Журнал изменений:** Метод был введён в версии v2.0 + +**Связанные статьи:** [Локализация](guides/localization.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-value.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-value.md new file mode 100644 index 0000000..c698829 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-value.md @@ -0,0 +1,44 @@ +--- +sidebar_label: setValue() +title: Метод setValue +description: Вы можете ознакомиться с методом setValue в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# setValue() + +### Описание + +@short: Обновляет содержимое RichText новым значением + +### Использование + +~~~jsx {} +setValue: (value: string, encoder?: any): void; +~~~ + +### Параметры + +- `value` - (обязательный) содержимое, которое будет вставлено в RichText +- `encoder` - (необязательный) пользовательский парсер для кодирования содержимого RichText в определённый формат. Доступные форматы: `html` (по умолчанию) и `text` + +Получить нужный encoder можно следующим образом: + +```jsx +const fromTextEncoder = richtext.text.fromText; // текстовый энкодер +const fromHTMLEncoder = richtext.html.fromHTML; // html энкодер +``` + +### Пример + +~~~jsx {7-8} +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); + +const editor_value = "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." + +const fromTextEncoder = richtext.text.fromText; +editor.setValue(editor_value, fromTextEncoder); +~~~ + +**Журнал изменений:** Метод был обновлён в версии v2.0. Параметр `mode` был удалён. Добавлен параметр `encoder`. diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md new file mode 100644 index 0000000..6d360f3 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md @@ -0,0 +1,18 @@ +--- +sidebar_label: Методы Event Bus +title: Методы Event Bus +description: Обзор методов внутреннего Event Bus в документации JavaScript RichText для библиотеки DHTMLX JavaScript RichText. Изучайте руководства для разработчиков, справочники по API, пробуйте примеры кода и живые демонстрации, а также получите бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# Методы Event Bus + +В этом разделе перечислены методы, связанные с внутренним Event Bus в редакторе DHTMLX RichText. +Эти методы предназначены для продвинутых сценариев использования, позволяя создавать кастомные интеграции и поведения через внутреннюю систему событий. + +| Название | Описание | +| ------------------------------------------------- | -------------------------------------------- | +| [](../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) | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/events_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/events_overview.md new file mode 100644 index 0000000..dd50111 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/events_overview.md @@ -0,0 +1,45 @@ +--- +sidebar_label: Обзор событий +title: Обзор событий +description: Полный обзор событий в документации DHTMLX JavaScript RichText редактора. Изучите руководства для разработчиков, справочники по API, попробуйте примеры кода и живые демо, а также получите бесплатный 30-дневный пробный период DHTMLX RichText. +--- + +# Обзор событий + +Здесь вы найдете список всех событий, вызываемых редактором DHTMLX RichText. +Эти события позволяют расширять функциональность, отслеживать действия пользователя или запускать пользовательские реакции. + +| Название | Описание | +| ------------------------------------------------------ | --------------------------------------------- | +| [](../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) | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/main_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/main_overview.md new file mode 100644 index 0000000..da6f74e --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/main_overview.md @@ -0,0 +1,97 @@ +--- +sidebar_label: Обзор API +title: Обзор API +description: Изучите JavaScript RichText API в документации библиотеки DHTMLX JavaScript RichText. Получите доступ к руководствам для разработчиков, справочникам по API, попробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# Обзор API + +## Конструктор RichText + +~~~js +new richtext.RichText("#root", { + // параметры конфигурации +}); +~~~ + +**Параметры**: + +- HTML контейнер (например, CSS селектор или DOM элемент) +- объект конфигурации ([см. свойства](api/overview/properties_overview.md)) + +## Методы RichText + +| Название | Описание | +| ----------------------------------------------|----------------------------------------| +| [](../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) | + +## Методы Event Bus + +| Название | Описание | +| ----------------------------------------------|----------------------------------------| +| [](../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) | + +## Методы State + +| Название | Описание | +| ----------------------------------------------|----------------------------------------| +| [](../internal/get-state.md) | @getshort(../internal/get-state.md) | +| [](../internal/get-reactive-state.md) | @getshort(../internal/get-reactive-state.md) | + +## События + +| Название | Описание | +| ----------------------------------------------|----------------------------------------| +| [](../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) | + +## Свойства + +| Название | Описание | +| ----------------------------------------------|----------------------------------------| +| [](../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) | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md new file mode 100644 index 0000000..1d0652f --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md @@ -0,0 +1,17 @@ +--- +sidebar_label: Обзор методов +title: Обзор методов +description: Ознакомьтесь с кратким обзором методов JavaScript RichText в документации библиотеки DHTMLX. Изучайте руководства для разработчиков, справочники по API, пробуйте примеры кода и живые демо, а также скачивайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# Обзор методов + +Здесь представлен краткий обзор основных методов, доступных в редакторе DHTMLX RichText. Это руководство поможет вам получить ясное представление о назначении каждого метода и направит к подробным описаниям и примерам. + +| Название | Описание | +| ------------------------------------------------------ | ----------------------------------------- | +| [](../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) | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md new file mode 100644 index 0000000..48ae465 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md @@ -0,0 +1,20 @@ +--- +sidebar_label: Обзор свойств +title: Обзор свойств +description: Изучите обзор свойств JavaScript RichText в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков, справочниками по API, примерами кода, живыми демо и получите бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# Обзор свойств + +Здесь вы найдете список всех доступных конфигурационных свойств при настройке редактора DHTMLX RichText. Эти параметры позволяют настроить макет, панель инструментов, содержимое, локализацию и многое другое. + +| Название | Описание | +| ------------------------------------------------------|----------------------------------------------| +| [](../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) | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md new file mode 100644 index 0000000..c092e25 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md @@ -0,0 +1,14 @@ +--- +sidebar_label: Методы состояния +title: Методы состояния +description: Ознакомьтесь с обзором методов внутреннего состояния для JavaScript RichText в документации библиотеки DHTMLX JavaScript RichText. Просмотрите руководства для разработчиков, справочники по API, попробуйте примеры кода и живые демонстрации, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# Методы состояния + +Здесь вы найдете методы для доступа и управления внутренним состоянием редактора DHTMLX RichText. Эти методы полезны для отладки, работы с реактивными фреймворками или создания продвинутых пользовательских функций. + +| Название | Описание | +| ----------------------------------------------------------- | ------------------------------------------------ | +| [](../internal/get-reactive-state.md) | @getshort(../internal/get-reactive-state.md) | +| [](../internal/get-state.md) | @getshort(../internal/get-state.md) | diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/configuration.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/configuration.md new file mode 100644 index 0000000..d478a3d --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/configuration.md @@ -0,0 +1,291 @@ +--- +sidebar_label: Конфигурация +title: Конфигурация +description: Ознакомьтесь с документацией по настройке DHTMLX JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# Конфигурация + +RichText можно настроить так, как вам нужно, с помощью его API. Доступные опции позволяют: + +- Показать или скрыть **меню** с помощью свойства [`menubar`](api/config/menubar.md) +- Настроить **панель инструментов** с помощью свойства [`toolbar`](api/config/toolbar.md) +- Включить **режим на весь экран** с помощью свойства [`fullscreenMode`](api/config/fullscreen-mode.md) +- Переключить **режим отображения** между "classic" и "document" с помощью свойства [`layoutMode`](api/config/layout-mode.md) +- Установить **начальное значение** с помощью свойства [`value`](api/config/value.md) +- Задать **начальную локализацию** с помощью свойства [`locale`](api/config/locale.md) +- Применить **начальные стили** с помощью свойства [`defaultStyles`](api/config/default-styles.md) + +## Режимы отображения + +Редактор RichText поддерживает два режима отображения, чтобы вы могли работать в наиболее подходящей для вашего контента среде: + +- **"classic"** + +import classic_mode from '@site/static/img/richtext/classic_mode.png'; + +Classic mode + +- **"document"** + +import document_mode from '@site/static/img/richtext/document_mode.png'; + +Document mode + +Чтобы выбрать режим, просто укажите свойство [`layoutMode`](api/config/layout-mode.md) в конфигурации RichText при инициализации компонента: + +~~~jsx +const editor = new richtext.Richtext("#root", { + layoutMode: "document" +}); +~~~ + +## Панель инструментов + +Панель инструментов RichText состоит из нескольких групп элементов управления, которые вы можете настраивать по своему усмотрению. + +### Элементы управления панели инструментов по умолчанию + +В панели инструментов RichText можно использовать следующие кнопки и элементы управления: + +| Кнопка | Описание | +|---------------------|-------------------------------------------------------------------------------| +| `undo` | Отменяет последнее действие пользователя | +| `redo` | Повторяет ранее отменённое действие | +| `style` | Позволяет выбрать стиль текста (например, заголовок, абзац и т.д.) | +| `font-family` | Изменяет шрифт выбранного текста | +| `font-size` | Изменяет размер выбранного текста | +| `bold` | Применяет полужирное начертание к выбранному тексту | +| `italic` | Применяет курсив к выбранному тексту | +| `underline` | Подчеркивает выбранный текст | +| `strike` | Применяет зачёркивание | +| `subscript` | Форматирует текст как подстрочный | +| `superscript` | Форматирует текст как надстрочный | +| `text-color` | Изменяет цвет текста | +| `background-color` | Изменяет цвет фона (выделения) текста | +| `align` | Устанавливает выравнивание текста (влево, по центру, вправо, по ширине) | +| `indent` | Увеличивает отступ абзаца | +| `outdent` | Уменьшает отступ абзаца | +| `line-height` | Изменяет межстрочный интервал | +| `quote` | Форматирует текст как цитату | +| `bulleted-list` | Создаёт маркированный список | +| `numbered-list` | Создаёт нумерованный список | +| `link` | Вставляет или редактирует гиперссылку | +| `image` | Вставляет изображение | +| `line` | Вставляет горизонтальную линию | +| `clear` | Удаляет всё форматирование выбранного текста | +| `print` | Открывает диалог печати | +| `fullscreen` | Переключает режим на весь экран | +| `mode` | Переключает между двумя режимами отображения: Classic/Document | +| `shortcuts` | Показывает список доступных горячих клавиш | +| `separator` | Добавляет визуальный разделитель между элементами управления | + +Состав панели инструментов задаётся через свойство [`toolbar`](api/config/toolbar.md), которое представляет собой массив строк с названиями нужных вам элементов. + +~~~jsx {2-36} +new richtext.Richtext("#root", { + toolbar: [ + "undo", + "redo", + "separator", + "style", + "separator", + "font-family", + "font-size", + "separator", + "bold", + "italic", + "underline", + "strike", + "separator", + "text-color", + "background-color", + "separator", + "align", + "line-height", + "outdent", + "indent", + "separator", + "bulleted-list", + "numbered-list", + "quote", + "separator", + "link", + "image", + "separator", + "clear", + "separator", + "fullscreen", + "mode" + // другие кнопки + ], + // другие параметры конфигурации +}); +~~~ + +**Связанный пример:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### Пользовательские элементы панели инструментов + +Если вы хотите добавить собственные элементы, вы можете включить объекты в свойство [`toolbar`](api/config/toolbar.md) со следующими опциями: + +- `type` - (обязательно) определяет тип пользовательского элемента. Доступны: `"button"`, `"richselect"`, `"colorpicker"` +- `id` - (необязательно) идентификатор пользовательского элемента (не должен совпадать с ID встроенных элементов) +- `label` - (необязательно) подпись кнопки (может использоваться вместе с иконкой) +- `tooltip` - (необязательно) тултип при наведении (если не задан, используется значение "label") +- `css` - (необязательно) имя CSS-класса для элемента (по умолчанию поддерживаются: wx-primary, wx-secondary) +- `handler` - (необязательно) функция-обработчик, вызываемая при клике на кнопку + +~~~jsx {6-32} +new richtext.Richtext("#root", { + toolbar: [ + // кнопки (строки обозначают только кнопки) + "bold", + "italic", + // предопределённые кнопки (пользователь не может задать для них другие опции, кроме ({ type: "button", id: string })) + { + type: "button", + id: "fullscreen", + }, + // пользователь должен указать корректный тип, если хочет использовать предопределённый элемент (например, richselect/colorpicker) + // некорректные типы будут проигнорированы (не добавятся на панель) + { + type: "richselect", // type: "button" — некорректно, будет проигнорировано + id: "mode", + }, + // пользовательские кнопки (поддерживаются опции ниже) + // пользователь может определять только пользовательские кнопки (richselect/colorpicker пока не поддерживаются) + { + type: "button", + id: "some", + label: "Some", + handler: () => {/* custom logic */} + }, + { + type: "button", + id: "other", + icon: "wxo-help", + label: "Other", + tooltip: "Some tooltip", + handler: () => {/* custom logic */} + } + ], + // другие параметры конфигурации +}); +~~~ + +**Связанный пример:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### Скрытие панели инструментов + +Чтобы скрыть панель инструментов, просто установите свойство [`toolbar`](api/config/toolbar.md) в значение `false` следующим образом: + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false, + // другие параметры конфигурации +}); +~~~ + +## Стили по умолчанию + +Значения стилей по умолчанию для определённых типов блоков в редакторе можно задать с помощью свойства [`defaultStyles`](api/config/default-styles.md). + +~~~jsx {} +defaultStyles?: boolean | { + "*"?: { // влияет на все блоки, позволяет задать общие свойства для всех этих блоков + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + p?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + blockquote?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h1?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h2?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h3?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h4?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h5?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h6?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + } +}; +~~~ + +Свойство `defaultStyles` не применяет CSS к блокам напрямую - оно только задаёт значения стилей. Для применения внешнего вида необходимо добавить CSS-стили отдельно: + +```html title="index.html" +
+``` + +```jsx {2-9} title="index.js" +const editor = new richtext.Richtext("#root", { + defaultStyles: { + h2: { + "font-family": "Roboto", + "font-size": "28px", + color: "purple", + background: "#FFC0CB" + } + } +}); +``` + +```css title="index.css" +#root h2 { + font-family: Roboto; + font-size: 28px; + color: purple; + background: #FFC0CB; +} +``` + +В этом примере все блоки `h2` получают шрифт "Roboto", размер шрифта 28px, а также изменённые цвета текста и фона. CSS-правила применяются к блокам `h2`. + +**Связанный пример:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/initialization.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/initialization.md new file mode 100644 index 0000000..ab8a922 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/initialization.md @@ -0,0 +1,63 @@ +--- +sidebar_label: Инициализация +title: Инициализация +description: Вы можете узнать об инициализации в документации по JavaScript-библиотеке DHTMLX RichText. Ознакомьтесь с руководствами для разработчиков и справочником по API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Инициализация + +Здесь приведена простая инструкция по настройке RichText на вашей странице, чтобы вы могли начать использовать редактор RichText в своем приложении. Просто выполните следующие шаги: + +1. [Подключите исходные файлы RichText на страницу](#подключение-исходных-файлов). +2. [Создайте контейнер для RichText](#создание-контейнера). +3. [Инициализируйте RichText с помощью конструктора объекта](#инициализация-richtext). + +## Подключение исходных файлов + +Сначала [скачайте пакет](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml) и распакуйте его в папку вашего проекта. + +Для использования RichText добавьте на страницу два файла: + +- *richtext.js* +- *richtext.css* + +Убедитесь, что вы используете корректные пути к этим файлам: + +~~~html title="index.html" + + +~~~ + +## Создание контейнера + +Далее создайте контейнер для RichText. Присвойте ему идентификатор, например *"root"*: + +~~~jsx title="index.html" +
+~~~ + +## Инициализация RichText + +Теперь используйте конструктор `richtext.Richtext` для создания RichText. Конструктор принимает два параметра: + +- HTML-контейнер (используйте указанный вами ID) +- объект с параметрами конфигурации. [Полный список параметров смотрите здесь](#параметры-конфигурации) + +~~~jsx title="index.html" +// создание RichText +const editor = new richtext.Richtext("#root", { + // параметры конфигурации +}); +~~~ + +### Параметры конфигурации + +:::note +Вы можете посмотреть все доступные параметры для **RichText** [**здесь**](api/overview/properties_overview.md). +::: + +## Пример + +Ниже приведён быстрый пример настройки **RichText** с начальными данными: + + diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md new file mode 100644 index 0000000..645d433 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md @@ -0,0 +1,304 @@ +--- +sidebar_label: Интеграция с Angular +title: Интеграция с Angular +description: Вы можете узнать об интеграции с Angular в документации по DHTMLX JavaScript RichText. Изучайте руководства для разработчиков и справочник по API, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# Интеграция с Angular + +:::tip +Перед началом работы рекомендуется ознакомиться с основными идеями и паттернами **Angular**. Для быстрого ознакомления воспользуйтесь [**Angular documentation**](https://v17.angular.io/docs). +::: + +DHTMLX RichText отлично работает с **Angular**. Доступны примеры кода, показывающие, как использовать DHTMLX RichText в проекте на **Angular**. Для подробностей посмотрите [**Example on GitHub**](https://github.com/DHTMLX/angular-richtext-demo). + +## Создание проекта + +:::info +Перед началом нового проекта убедитесь, что установлены [**Angular CLI**](https://v17.angular.io/cli) и [**Node.js**](https://nodejs.org/en/). +::: + +Чтобы создать новый проект **my-angular-richtext-app** с помощью Angular CLI, выполните команду: + +~~~json +ng new my-angular-richtext-app +~~~ + +:::note +Для простоты отключите Server-Side Rendering (SSR) и Static Site Generation (SSG/Prerendering) при создании приложения Angular! +::: + +Эта команда подготовит всё необходимое, никаких дополнительных шагов по установке не требуется. + +### Установка зависимостей + +Перейдите в директорию нового приложения: + +~~~json +cd my-angular-richtext-app +~~~ + +Установите зависимости и запустите сервер разработки с помощью [**yarn**](https://yarnpkg.com/): + +~~~json +yarn +yarn start +~~~ + +Приложение будет доступно локально (например, по адресу `http://localhost:3000`). + +## Создание RichText + +Далее получите исходный код DHTMLX RichText. Остановите приложение и установите пакет RichText. + +### Шаг 1. Установка пакета + +Скачайте [**пробную версию пакета RichText**](/how_to_start/#установка-richtext-через-npm-или-yarn) и следуйте инструкциям в файле README. Обратите внимание: пробная версия действует 30 дней. + +### Шаг 2. Создание компонента + +Чтобы добавить RichText в приложение, создайте новый компонент Angular. Создайте папку **richtext** в **src/app/** и добавьте новый файл **richtext.component.ts**. + +#### Импорт исходных файлов + +Откройте **richtext.component.ts** и импортируйте исходные файлы RichText. Пример пути импорта: + +- Для PRO-версии, установленной из локальной папки: + +~~~jsx +import { Richtext} from 'dhx-richtext-package'; +~~~ + +- Для пробной версии: + +~~~jsx +import { Richtext} from '@dhx/trial-richtext'; +~~~ + +В этом руководстве показана настройка **trial** версии. + +#### Задание контейнеров и инициализация Richtext + +Чтобы отобразить RichText на странице, создайте контейнер и инициализируйте компонент через конструктор: + +~~~jsx {} title="richtext.component.ts" +import { Richtext} from '@dhx/trial-richtext'; +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", // имя шаблона, используемое в "app.component.ts" как + styleUrls: ["./richtext.component.css"], // подключение css-файла + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + // инициализация контейнера для RichText + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: Richtext; + + ngOnInit() { + // инициализация компонента RichText + this._editor = new Richtext(this.richtext_container.nativeElement, {}); + } + + ngOnDestroy(): void { + this._editor.destructor(); // уничтожение RichText + } +} +~~~ + +#### Добавление стилей + +Чтобы RichText отображался корректно, добавьте необходимые стили. Создайте файл **richtext.component.css** в **src/app/richtext/** и добавьте следующие стили для RichText и его контейнера: + +~~~css title="richtext.component.css" +/* импорт стилей RichText */ +@import "@dhx/trial-richtext/dist/richtext.css"; + +/* стили для начальной страницы */ +html, +body{ + height: 100%; + padding: 0; + margin: 0; +} + +/* стили для контейнера RichText */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* стили для виджета RichText */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### Загрузка данных + +Чтобы загрузить данные в RichText, просто передайте набор данных. Создайте файл **data.ts** в **src/app/richtext/** и добавьте пример данных: + +~~~jsx {} title="data.ts" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +Далее откройте ***richtext.component.ts***. Импортируйте файл с данными и задайте свойства данных в конфигурации RichText в методе `ngOnInit()` следующим образом: + +~~~jsx {} title="richtext.component.ts" +import { Richtext} from '@dhx/trial-richtext'; +import { getData } from "./data"; // импорт данных +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", + styleUrls: ["./richtext.component.css"], + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: RichText; + + ngOnInit() { + const { value } = getData(); // инициализация свойства данных + this._editor = new Richtext(this.richtext_container.nativeElement, { + value + // другие свойства конфигурации + }); + } + + ngOnDestroy(): void { + this._editor.destructor(); + } +} +~~~ + +В качестве альтернативы можно использовать метод [`setValue()`](api/methods/set-value.md) в `ngOnInit()` для загрузки данных в RichText. + +~~~jsx {} title="richtext.component.ts" +import { Richtext} from '@dhx/trial-richtext'; +import { getData } from "./data"; // импорт данных +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", + styleUrls: ["./richtext.component.css"], + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: RichText; + + ngOnInit() { + const { value } = getData(); // инициализация свойства данных + this._editor = new Richtext(this.richtext_container.nativeElement, { + // другие свойства конфигурации + }); + + // передача данных через метод setValue() + this._editor.setValue({ value }); + } + + ngOnDestroy(): void { + this._editor.destructor(); + } +} +~~~ + +На этом этапе компонент RichText готов. При добавлении на страницу RichText будет инициализирован с переданными данными. Вы также можете добавить любые необходимые параметры конфигурации. Полный список свойств смотрите в [RichText API docs](api/overview/main_overview.md). + +#### Обработка событий + +Когда в RichText происходит какое-либо действие, срабатывает событие. Вы можете подписаться на эти события и выполнять свой код. [Полный список событий](api/overview/events_overview.md) доступен в документации. + +Отредактируйте файл **richtext.component.ts** и обновите метод `ngOnInit()` следующим образом: + +~~~jsx {} title="richtext.component.ts" +// ... +ngOnInit() { + this._editor = new Richtext(this.richtext_container.nativeElement, {}); + + this._editor.api.on("print", () => { + console.log("The document is printing"); + }); +} + +ngOnDestroy(): void { + this._editor.destructor(); +} +~~~ + +### Шаг 3. Добавление RichText в приложение + +Чтобы использовать ***RichTextComponent*** в вашем приложении, откройте ***src/app/app.component.ts*** и замените стандартный код на следующий: + +~~~jsx {} title="app.component.ts" +import { Component } from "@angular/core"; + +@Component({ + selector: "app-root", + template: `` +}) +export class AppComponent { + name = ""; +} +~~~ + +Теперь создайте ***app.module.ts*** в ***src/app/*** и добавьте *RichTextComponent* следующим образом: + +~~~jsx {} title="app.module.ts" +import { NgModule } from "@angular/core"; +import { BrowserModule } from "@angular/platform-browser"; + +import { AppComponent } from "./app.component"; +import { RichTextComponent } from "./richtext/richtext.component"; + +@NgModule({ + declarations: [AppComponent, RichTextComponent], + imports: [BrowserModule], + bootstrap: [AppComponent] +}) +export class AppModule {} +~~~ + +Последнее, что нужно сделать - обновить ***src/main.ts*** следующим кодом: + +~~~jsx title="main.ts" +import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; +import { AppModule } from "./app/app.module"; +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); +~~~ + +Теперь вы можете запустить приложение и увидеть RichText с загруженными данными на странице. + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +Вот и всё, что требуется для работы DHTMLX RichText с Angular. Вы можете адаптировать код под свои задачи. Полный пример доступен на [**GitHub**](https://github.com/DHTMLX/angular-richtext-demo). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_react.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_react.md new file mode 100644 index 0000000..fa338e1 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_react.md @@ -0,0 +1,257 @@ +--- +sidebar_label: Интеграция с React +title: Интеграция с React +description: Ознакомьтесь с интеграцией с React в документации по JavaScript-библиотеке DHTMLX RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# Интеграция с React + +:::tip +Перед началом работы с этим руководством рекомендуется иметь некоторый опыт работы с [**React**](https://react.dev). Если вам нужно быстро освежить знания, ознакомьтесь с [**документацией React**](https://react.dev/learn). +::: + +DHTMLX RichText отлично работает с **React**. В документации представлены примеры кода, демонстрирующие использование DHTMLX RichText в приложениях на React. Более подробную информацию вы найдете в [**примере на GitHub**](https://github.com/DHTMLX/react-richtext-demo). + +## Создание проекта + +:::info +Перед созданием нового проекта убедитесь, что у вас установлены [**Vite**](https://vite.dev/) (опционально) и [**Node.js**](https://nodejs.org/en/). +::: + +Вы можете создать базовый проект на **React** или использовать **React с Vite**. В этом примере проект называется **my-react-richtext-app**: + +~~~json +npx create-react-app my-react-richtext-app +~~~ + +### Установка зависимостей + +Перейдите в папку с новым приложением: + +~~~json +cd my-react-richtext-app +~~~ + +Далее установите зависимости и запустите сервер разработки, используя предпочитаемый пакетный менеджер: + +- Для [**yarn**](https://yarnpkg.com/): + +~~~json +yarn +yarn start +~~~ + +- Для [**npm**](https://www.npmjs.com/): + +~~~json +npm install +npm run dev +~~~ + +Приложение будет доступно по адресу localhost (например, `http://localhost:3000`). + +## Создание RichText + +Теперь пришло время добавить код DHTMLX RichText. Сначала остановите приложение и установите пакет RichText. + +### Шаг 1. Установка пакета + +Скачайте [**пробную версию пакета RichText**](/how_to_start/#установка-richtext-через-npm-или-yarn) и следуйте инструкциям в файле README. Пробная версия RichText доступна в течение 30 дней. + +### Шаг 2. Создание компонента + +Далее создайте React-компонент для добавления RichText в ваше приложение. В директории ***src/*** создайте новый файл с именем ***Richtext.jsx***. + +#### Импорт исходных файлов + +Откройте ***Richtext.jsx*** и импортируйте файлы RichText. Обратите внимание: + +- Если у вас PRO-версия и вы устанавливаете RichText из локальной папки, ваши импорты должны выглядеть так: + +~~~jsx title="Richtext.jsx" +import { Richtext} from 'dhx-richtext-package'; +import 'dhx-richtext-package/dist/richtext.css'; +~~~ + +- Для пробной версии используйте такие импорты: + +~~~jsx title="Richtext.jsx" +import { Richtext} from '@dhx/trial-richtext'; +import "@dhx/trial-richtext/dist/richtext.css"; +~~~ + +В данном руководстве для демонстрации используется **пробная** версия. + +#### Настройка контейнера и добавление Richtext + +Чтобы вывести RichText на страницу, создайте контейнер и инициализируйте компонент с помощью его конструктора: + +~~~jsx {} title="Richtext.jsx" +import { useEffect, useRef } from "react"; +import { Richtext} from '@dhx/trial-richtext'; +import '@dhx/trial-richtext/dist/richtext.css'; // подключение стилей RichText + +export default function RichTextComponent(props) { + let richtext_container = useRef(); // инициализация контейнера для RichText + + useEffect(() => { + // инициализация компонента RichText + const editor = new Richtext(richtext_container.current, {}); + + return () => { + editor.destructor(); // уничтожение RichText + }; + }, []); + + return
+
+
+} +~~~ + +#### Добавление стилей + +Для корректного отображения RichText потребуется добавить немного CSS. Обновите основной CSS-файл следующими стилями: + +~~~css title="index.css" +/* стили для начальной страницы */ +html, +body, +#root { + height: 100%; + padding: 0; + margin: 0; +} + +/* стили для контейнера RichText */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* стили для виджета RichText */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### Загрузка данных + +Чтобы загрузить данные в RichText, подготовьте набор данных. Создайте файл ***data.js*** в папке ***src/*** и добавьте следующий контент: + +~~~jsx {} title="data.js" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +Далее откройте ***App.js*** и импортируйте данные. Передайте их вашему компоненту `` как **prop**: + +~~~jsx {2,5-6} title="App.js" +import RichText from "./Richtext"; +import { getData } from "./data"; + +function App() { + const { value } = getData(); + return ; +} + +export default App; +~~~ + +Теперь в ***Richtext.jsx*** используйте полученный **prop** в конфигурации RichText: + +~~~jsx {} title="Richtext.jsx" +import { useEffect, useRef } from "react"; +import { Richtext} from "@dhx/trial-richtext"; +import "@dhx/trial-richtext/dist/richtext.css"; + +export default function RichTextComponent(props) { + let richtext_container = useRef(); + + useEffect(() => { + const editor = new Richtext(richtext_container.current, { + value: props.value, // установка значения + // другие параметры конфигурации + }); + + return () => { + editor.destructor(); + }; + }, []); + + return
+
+
+} +~~~ + +Если нужно, вы также можете использовать метод [`setValue()`](api/methods/set-value.md) внутри `useEffect()` для загрузки данных: + +~~~jsx {} title="Richtext.jsx" +import { useEffect, useRef } from "react"; +import { Richtext} from "@dhx/trial-richtext"; +import "@dhx/trial-richtext/dist/richtext.css"; + +export default function RichTextComponent(props) { + let richtext_container = useRef(); + + let value = props.value; + + useEffect(() => { + const editor = new Richtext(richtext_container.current, { + // параметры конфигурации + }); + + editor.setValue(value); + + return () => { + editor.destructor(); + }; + }, []); + + return
+
+
+} +~~~ + +На этом этапе компонент RichText готов. При рендеринге будет отображаться редактор RichText с вашими данными. Вы можете изменить конфигурацию по своему усмотрению. Полный список доступных опций смотрите в [документации по API RichText](api/overview/main_overview.md). + +#### Обработка событий + +RichText генерирует события при взаимодействии пользователя. Вы можете использовать эти события для запуска собственного кода. [Полный список событий](api/overview/events_overview.md) доступен в документации. + +Чтобы обработать событие, обновите ***Richtext.jsx*** следующим образом: + +~~~jsx {} title="Richtext.jsx" +// ... +useEffect(() => { + const editor = new Richtext(richtext_container.current, {}); + + editor.api.on("print", () => { + console.log("The document is printing"); + }); + + return () => { + editor.destructor(); + }; +}, []); +// ... +~~~ + +Теперь вы можете запустить приложение и увидеть RichText с вашими данными на странице. + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +На этом интеграция DHTMLX RichText с React завершена. Вы можете адаптировать код под свои задачи. Для более продвинутого примера обратитесь к [**GitHub**](https://github.com/DHTMLX/react-richtext-demo). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md new file mode 100644 index 0000000..3d591c5 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md @@ -0,0 +1,267 @@ +--- +sidebar_label: Интеграция с Svelte +title: Интеграция с Svelte +description: Подробнее об интеграции с Svelte вы можете узнать в документации JavaScript-библиотеки DHTMLX RichText. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# Интеграция с Svelte + +:::tip +Для этого руководства полезно знать основы **Svelte**. Если вам нужно быстро освежить знания, ознакомьтесь с [**документацией Svelte**](https://svelte.dev/). +::: + +DHTMLX RichText отлично работает с **Svelte**. Существуют удобные примеры кода, показывающие, как использовать DHTMLX RichText в приложениях на Svelte. Подробнее и с примерами вы можете ознакомиться в [**примере на GitHub**](https://github.com/DHTMLX/svelte-richtext-demo). + +## Создание проекта + +:::info +Перед началом убедитесь, что у вас установлены [**Vite**](https://vite.dev/) (опционально) и [**Node.js**](https://nodejs.org/en/). +::: + +Есть несколько способов создать проект на **Svelte**: + +- Использовать [**SvelteKit**](https://kit.svelte.dev/) + +или + +- Использовать **Svelte и Vite** (без SvelteKit): + +~~~json +npm create vite@latest +~~~ + +Подробнее о способах создания проекта читайте в [этой статье](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit). + +### Установка зависимостей + +Назовём проект **my-svelte-richtext-app** и перейдём в его директорию: + +~~~json +cd my-svelte-richtext-app +~~~ + +Далее установите зависимости и запустите сервер разработки с помощью вашего пакетного менеджера: + +- Для [**yarn**](https://yarnpkg.com/): + +~~~json +yarn +yarn start +~~~ + +- Для [**npm**](https://www.npmjs.com/): + +~~~json +npm install +npm run dev +~~~ + +Приложение теперь должно работать локально (например, по адресу `http://localhost:3000`). + +## Создание RichText + +Вам понадобится исходный код DHTMLX RichText. Перед следующим шагом остановите приложение и установите пакет RichText. + +### Шаг 1. Установка пакета + +Скачайте [**пробную версию пакета RichText**](/how_to_start/#установка-richtext-через-npm-или-yarn) и следуйте шагам из файла README. Пробная версия работает 30 дней. + +### Шаг 2. Создание компонента + +Теперь создадим Svelte-компонент для RichText. В каталоге ***src/*** создайте новый файл с именем ***Richtext.svelte***. + +#### Импорт исходных файлов + +В ***Richtext.svelte*** импортируйте исходные файлы RichText. В зависимости от вашей версии это будет выглядеть так: + +- Для локально установленной PRO-версии используйте такие пути: + +~~~html title="Richtext.svelte" + +~~~ + +- Для пробной версии используйте такие импорты: + +~~~html title="Richtext.svelte" + + +
+
+
+~~~ + +#### Загрузка данных + +Чтобы загрузить данные в RichText, потребуется набор данных. Создайте файл ***data.js*** в каталоге ***src/*** и добавьте туда пример данных: + +~~~jsx {} title="data.ts" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +Затем в ***App.svelte*** импортируйте данные и передайте их в ваш компонент `` через пропс: + +~~~html {} title="App.svelte" + + + +~~~ + +Теперь обновите ***Richtext.svelte***, чтобы использовать переданные **props** в конфигурации RichText: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +Также вы можете воспользоваться методом [`setValue()`](api/methods/set-value.md) внутри Svelte `onMount()` для загрузки данных: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +Теперь компонент RichText настроен и загрузит ваши данные при добавлении на страницу. Вы можете настроить параметры конфигурации по своему усмотрению. Для получения дополнительной информации ознакомьтесь с [документацией по API RichText](api/overview/main_overview.md). + +#### Обработка событий + +RichText генерирует события при различных действиях, и вы можете подписаться на них для выполнения своего кода. [Полный список событий](api/overview/events_overview.md) доступен для ознакомления. + +Чтобы обрабатывать события, обновите ***Richtext.svelte*** следующим образом в методе `onMount()`: + +~~~html {} title="Richtext.svelte" + + +// ... +~~~ + +### Шаг 3. Добавление RichText в приложение + +Чтобы использовать компонент в вашем приложении, откройте **App.svelte** и замените содержимое на следующее: + +~~~html title="App.svelte" + + + +~~~ + +Теперь запустите приложение, и вы увидите RichText с вашими данными на странице. + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +На этом интеграция DHTMLX RichText с Svelte завершена. Вы можете адаптировать код под свои задачи. Если хотите ознакомиться с более продвинутым примером, он доступен на [**GitHub**](https://github.com/DHTMLX/svelte-richtext-demo). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md new file mode 100644 index 0000000..d0afcc1 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md @@ -0,0 +1,283 @@ +--- +sidebar_label: Интеграция с Vue +title: Интеграция с Vue +description: Вы можете узнать об интеграции с Vue в документации по DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков и справочником по API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +# Интеграция с Vue + +:::tip +Перед тем как приступить к работе с этой документацией, полезно иметь базовые знания о [**Vue**](https://vuejs.org/). Если вам нужно освежить знания, ознакомьтесь с [**документацией по Vue 3**](https://vuejs.org/guide/introduction.html#getting-started). +::: + +DHTMLX RichText отлично работает с **Vue**. Доступны примеры кода, демонстрирующие, как использовать DHTMLX RichText с **Vue 3**. Подробнее смотрите в [**примере на GitHub**](https://github.com/DHTMLX/vue-richtext-demo). + +## Создание проекта + +:::info +Перед началом работы убедитесь, что установлен [**Node.js**](https://nodejs.org/en/). +::: + +Чтобы создать проект на **Vue**, выполните следующую команду: + +~~~json +npm create vue@latest +~~~ + +Эта команда запускает `create-vue`, официальный инструмент для создания проектов на **Vue**. Подробнее читайте в [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application). + +В этом руководстве проект будет называться **my-vue-richtext-app**. + +### Установка зависимостей + +Перейдите в директорию приложения: + +~~~json +cd my-vue-richtext-app +~~~ + +Установите зависимости и запустите сервер разработки с помощью вашего любимого пакетного менеджера: + +- Для [**yarn**](https://yarnpkg.com/): + +~~~jsx +yarn +yarn start // или yarn dev +~~~ + +- Для [**npm**](https://www.npmjs.com/): + +~~~json +npm install +npm run dev +~~~ + +Приложение будет доступно на вашем localhost (например, `http://localhost:3000`). + +## Создание RichText + +Далее потребуется исходный код DHTMLX RichText. Остановите приложение и установите пакет RichText. + +### Шаг 1. Установка пакета + +Скачайте [**пробную версию пакета RichText**](/how_to_start/#установка-richtext-через-npm-или-yarn) и следуйте инструкциям в файле README. Пробная версия доступна на 30 дней. + +### Шаг 2. Создание компонента + +Создайте компонент Vue для добавления RichText в ваше приложение. Создайте новый файл в директории ***src/components/*** и назовите его ***Richtext.vue***. + +#### Импорт исходных файлов + +Откройте ***Richtext.vue*** и импортируйте исходные файлы RichText. Обратите внимание: + +- Если вы используете PRO-версию и устанавливали RichText из локальной папки, ваши импорты будут выглядеть так: + +~~~html title="Richtext.vue" + +~~~ + +- Для пробной версии импорты такие: + +~~~html title="Richtext.vue" + +~~~ + +В этом руководстве показана настройка **пробной** версии RichText. + +#### Настройка контейнера и добавление Richtext + +Чтобы отобразить RichText на странице, создайте контейнер и инициализируйте компонент через его конструктор: + +~~~html {} title="Richtext.vue" + + + +~~~ + +#### Добавление стилей + +Чтобы RichText отображался корректно, добавьте основные стили для RichText и его контейнера в основной CSS-файл: + +~~~css title="main.css" +/* стили для начальной страницы */ +html, +body, +#app { /* убедитесь, что используете #app как корневой контейнер */ + height: 100%; + padding: 0; + margin: 0; +} + +/* стили для контейнера RichText */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* стили для виджета RichText */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### Загрузка данных + +Чтобы загрузить данные в RichText, создайте набор данных. Например, добавьте файл ***data.js*** в директорию ***src/*** со следующим содержимым: + +~~~jsx {} title="data.ts" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +Затем в ***App.vue*** импортируйте данные и инициализируйте их с помощью метода `data()`. Передайте данные в компонент `` через **props**: + +~~~html {} title="App.vue" + + + +~~~ + +Теперь вернитесь в ***Richtext.vue*** и используйте **props** в конфигурации RichText: + +~~~html {} title="Richtext.vue" + + + +~~~ + +В качестве альтернативы, вы можете использовать метод [`setValue()`](api/methods/set-value.md) внутри хука `mounted()` для загрузки данных в RichText: + +~~~html {} title="Richtext.vue" + + + +~~~ + +На этом этапе компонент RichText готов к использованию. При добавлении на страницу он инициализирует RichText с вашими данными. Вы можете гибко настраивать параметры. Полный список доступных свойств смотрите в [документации по API RichText](api/overview/main_overview.md). + +#### Обработка событий + +При действиях в RichText срабатывают события. Это полезно для запуска пользовательского кода в ответ на действия. [Полный список событий](api/overview/events_overview.md) доступен в документации. + +В ***Richtext.vue*** вы можете обновить метод `mounted()` для обработки событий: + +~~~html {} title="Richtext.vue" + + +// ... +~~~ + +Теперь запустите приложение, и вы увидите RichText с вашими данными на странице. + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +Вот так DHTMLX RichText можно интегрировать с Vue. Не стесняйтесь адаптировать код под свои задачи. Для более продвинутого примера посмотрите [**GitHub**](https://github.com/DHTMLX/vue-richtext-demo). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/localization.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/localization.md new file mode 100644 index 0000000..eabca0e --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/localization.md @@ -0,0 +1,474 @@ +--- +sidebar_label: Локализация +title: Локализация +description: Вы можете узнать о локализации в документации по DHTMLX JavaScript RichText. Изучайте руководства для разработчиков и справочник API, пробуйте примеры кода и живые демо, а также скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Локализация + +Все подписи в интерфейсе JavaScript RichText могут быть локализованы. Для этого вы можете создать новую локаль или изменить существующую, а затем применить её для RichText. + +## Локаль по умолчанию + +По умолчанию интерфейс использует локаль **English**: + +~~~jsx +const en = { + richtext: { + // buttons/actions + Undo: "Undo", + Redo: "Redo", + Style: "Style", + "Font family": "Font family", + "Font size": "Font size", + Bold: "Bold", + Italic: "Italic", + Underline: "Underline", + Strikethrough: "Strikethrough", + Subscript: "Subscript", + Superscript: "Superscript", + "Text color": "Text color", + "Background color": "Background color", + "Left align": "Left align", + "Center align": "Center align", + "Right align": "Right align", + Justify: "Justify", + "Line height": "Line height", + Outdent: "Outdent", + Indent: "Indent", + "Insert link": "Insert link", + "Insert image": "Insert image", + "Insert horizontal line": "Insert horizontal line", + "Clear formatting": "Clear formatting", + Print: "Print", + "Fullscreen mode": "Fullscreen mode", + "Layout mode": "Layout mode", + "Classic mode": "Classic mode", + "Document mode": "Document mode", + + // menubar exclusive options + File: "File", + Import: "Import", + Export: "Export", + Edit: "Edit", + Cut: "Cut", + Copy: "Copy", + Paste: "Paste", + View: "View", + Insert: "Insert", + Format: "Format", + Help: "Help", + New: "New", + Link: "Link", + Image: "Image", + "Horizontal line": "Horizontal line", + Text: "Text", + "Heading 1": "Heading 1", + "Heading 2": "Heading 2", + "Heading 3": "Heading 3", + "Heading 4": "Heading 4", + "Heading 5": "Heading 5", + "Heading 6": "Heading 6", + Align: "Align", + Left: "Left", + Center: "Center", + Right: "Right", + Justified: "Justified", + "Keyboard shortcuts": "Keyboard shortcuts", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "Operation failed. Please check your browser's clipboard permissions.", + + // block style dropdown + Heading: "Heading", + Quote: "Quote", + Paragraph: "Paragraph", + "Text style": "Text style", + Lists: "Lists", + + normal: "normal", + default: "default", + + // lists + "Bulleted list": "Bulleted list", + "Numbered list": "Numbered list", + + // links + "Enter text to display": "Enter text to display", + "Paste link": "Paste link", + "Link copied to clipboard": "Link copied to clipboard", + + // shortcut groups + "Text formatting": "Text formatting", + Editing: "Editing", + "Special actions": "Special actions", + + // colors + Black: "Black", + Gray: "Gray", + White: "White", + Red: "Red", + Orange: "Orange", + Yellow: "Yellow", + Lime: "Lime", + Green: "Green", + Teal: "Teal", + Cyan: "Cyan", + Blue: "Blue", + Indigo: "Indigo", + Magenta: "Magenta", + + // shades + "Light gray": "Light gray", + "Medium gray": "Medium gray", + "Dark gray": "Dark gray", + "Light red": "Light red", + "Medium red": "Medium red", + "Dark red": "Dark red", + "Light orange": "Light orange", + "Medium orange": "Medium orange", + "Dark orange": "Dark orange", + "Light yellow": "Light yellow", + "Medium yellow": "Medium yellow", + "Dark yellow": "Dark yellow", + "Light lime": "Light lime", + "Medium lime": "Medium lime", + "Dark lime": "Dark lime", + "Light green": "Light green", + "Medium green": "Medium green", + "Dark green": "Dark green", + "Light teal": "Light teal", + "Medium teal": "Medium teal", + "Dark teal": "Dark teal", + "Light cyan": "Light cyan", + "Medium cyan": "Medium cyan", + "Dark cyan": "Dark cyan", + "Light blue": "Light blue", + "Medium blue": "Medium blue", + "Dark blue": "Dark blue", + "Light indigo": "Light indigo", + "Medium indigo": "Medium indigo", + "Dark indigo": "Dark indigo", + "Light magenta": "Light magenta", + "Medium magenta": "Medium magenta", + "Dark magenta": "Dark magenta" + } +}; +~~~ + +:::info +Вместе с локалью ***en*** (*English*) по умолчанию, RichText также поставляется с предустановленными локалями ***de*** (*German*) и ***cn*** (*Chinese*). +::: + +
+de локаль + +~~~jsx +const de = { + richtext: { + // buttons/actions + Undo: "Rückgängig", + Redo: "Wiederholen", + Style: "Stil", + "Font family": "Schriftart", + "Font size": "Schriftgröße", + Bold: "Fett", + Italic: "Kursiv", + Underline: "Unterstrichen", + Strikethrough: "Durchgestrichen", + Subscript: "Tiefgestellt", + Superscript: "Hochgestellt", + "Text color": "Textfarbe", + "Background color": "Hintergrundfarbe", + "Left align": "Linksbündig", + "Center align": "Zentriert", + "Right align": "Rechtsbündig", + Justify: "Blocksatz", + "Line height": "Zeilenhöhe", + Outdent: "Einzug verringern", + Indent: "Einzug erhöhen", + "Insert link": "Link einfügen", + "Insert image": "Bild einfügen", + "Insert horizontal line": "Horizontale Linie einfügen", + "Clear formatting": "Formatierung löschen", + Print: "Drucken", + "Fullscreen mode": "Vollbildmodus", + "Layout mode": "Layout-Modus", + "Classic mode": "Klassischer Modus", + "Document mode": "Dokumentenmodus", + + // menubar exclusive options + File: "Datei", + Import: "Importieren", + Export: "Exportieren", + Edit: "Bearbeiten", + Cut: "Ausschneiden", + Copy: "Kopieren", + Paste: "Einfügen", + View: "Ansicht", + Insert: "Einfügen", + Format: "Format", + Help: "Hilfe", + New: "Neu", + Link: "Link", + Image: "Bild", + "Horizontal line": "Horizontale Linie", + Text: "Text", + "Heading 1": "Überschrift 1", + "Heading 2": "Überschrift 2", + "Heading 3": "Überschrift 3", + "Heading 4": "Überschrift 4", + "Heading 5": "Überschrift 5", + "Heading 6": "Überschrift 6", + Align: "Ausrichten", + Left: "Links", + Center: "Zentriert", + Right: "Rechts", + Justified: "Blocksatz", + "Keyboard shortcuts": "Tastenkürzel", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "Operation fehlgeschlagen. Bitte überprüfen Sie die Berechtigungen für die Zwischenablage Ihres Browsers.", + + // block style dropdown + Heading: "Überschrift", + Quote: "Zitat", + Paragraph: "Absatz", + "Text style": "Textstil", + Lists: "Listen", + + normal: "normal", + default: "standard", + + // lists + "Bulleted list": "Liste mit Aufzählungszeichen", + "Numbered list": "Nummerierte Liste", + + // links + "Enter text to display": "Text zum Anzeigen eingeben", + "Paste link": "Link einfügen", + "Link copied to clipboard": "Link in die Zwischenablage kopiert", + + // shortcut groups + "Text formatting": "Textformatierung", + Editing: "Bearbeitung", + "Special actions": "Spezielle Aktionen", + + // colors + Black: "Schwarz", + Gray: "Grau", + White: "Weiß", + Red: "Rot", + Orange: "Orange", + Yellow: "Gelb", + Lime: "Limette", + Green: "Grün", + Teal: "Türkis", + Cyan: "Cyan", + Blue: "Blau", + Indigo: "Indigo", + Magenta: "Magenta", + + // shades + "Light gray": "Hellgrau", + "Medium gray": "Mittelgrau", + "Dark gray": "Dunkelgrau", + "Light red": "Hellrot", + "Medium red": "Mittelrot", + "Dark red": "Dunkelrot", + "Light orange": "Hellorange", + "Medium orange": "Mittelorange", + "Dark orange": "Dunkelorange", + "Light yellow": "Hellgelb", + "Medium yellow": "Mittleres Gelb", + "Dark yellow": "Dunkelgelb", + "Light lime": "Hellgrün", + "Medium lime": "Mittleres Grün", + "Dark lime": "Dunkelgrün", + "Light green": "Hellgrün", + "Medium green": "Mittleres Grün", + "Dark green": "Dunkelgrün", + "Light teal": "Hellblau", + "Medium teal": "Mittelblau", + "Dark teal": "Dunkelblau", + "Light cyan": "Hellcyan", + "Medium cyan": "Mittleres Cyan", + "Dark cyan": "Dunkelcyan", + "Light blue": "Hellblau", + "Medium blue": "Mittelblau", + "Dark blue": "Dunkelblau", + "Light indigo": "Hellindigo", + "Medium indigo": "Mittelindigo", + "Dark indigo": "Dunkelindigo", + "Light magenta": "Hellmagenta", + "Medium magenta": "Mittleres Magenta", + "Dark magenta": "Dunkelmagenta" + } +}; +~~~ +
+ +
+cn локаль + +~~~jsx +const cn = { + richtext: { + // buttons/actions, + Undo: "撤销", + Redo: "重做", + Style: "样式", + "Font family": "字体", + "Font size": "字体大小", + Bold: "粗体", + Italic: "斜体", + Underline: "下划线", + Strikethrough: "删除线", + Subscript: "下标", + Superscript: "上标", + "Text color": "文本颜色", + "Background color": "背景颜色", + "Left align": "左对齐", + "Center align": "居中对齐", + "Right align": "右对齐", + Justify: "两端对齐", + "Line height": "行高", + Outdent: "减少缩进", + Indent: "增加缩进", + "Insert link": "插入链接", + "Insert image": "插入图片", + "Insert horizontal line": "插入水平线", + "Clear formatting": "清除格式", + Print: "打印", + "Fullscreen mode": "全屏模式", + "Layout mode": "布局模式", + "Classic mode": "经典模式", + "Document mode": "文档模式", + + // menubar exclusive options + File: "文件", + Import: "导入", + Export: "导出", + Edit: "编辑", + Cut: "剪切", + Copy: "复制", + Paste: "粘贴", + View: "视图", + Insert: "插入", + Format: "格式", + Help: "帮助", + New: "新建", + Link: "链接", + Image: "图片", + "Horizontal line": "水平线", + Text: "文本", + "Heading 1": "标题 1", + "Heading 2": "标题 2", + "Heading 3": "标题 3", + "Heading 4": "标题 4", + "Heading 5": "标题 5", + "Heading 6": "标题 6", + Align: "对齐", + Left: "左", + Center: "居中", + Right: "右", + Justified: "两端对齐", + "Keyboard shortcuts": "键盘快捷键", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "操作失败。请检查浏览器的剪贴板权限。", + + // block style dropdown + Heading: "标题", + Quote: "引用", + Paragraph: "段落", + "Text style": "文本样式", + Lists: "列表", + + normal: "普通的", + default: "默认", + + // lists + "Bulleted list": "项目符号列表", + "Numbered list": "编号列表", + + // links + "Enter text to display": "输入要显示的文本", + "Paste link": "粘贴链接", + "Link copied to clipboard": "链接已复制到剪贴板", + + // shortcut groups + "Text formatting": "文本格式化", + Editing: "编辑", + "Special actions": "特殊操作", + + // colors + Black: "黑色", + Gray: "灰色", + White: "白色", + Red: "红色", + Orange: "橙色", + Yellow: "黄色", + Lime: "酸橙色", + Green: "绿色", + Teal: "水鸭色", + Cyan: "青色", + Blue: "蓝色", + Indigo: "靛蓝色", + Magenta: "洋红色", + + // shades + "Light gray": "浅灰色", + "Medium gray": "中灰色", + "Dark gray": "深灰色", + "Light red": "浅红色", + "Medium red": "中红色", + "Dark red": "深红色", + "Light orange": "浅橙色", + "Medium orange": "中橙色", + "Dark orange": "深橙色", + "Light yellow": "浅黄色", + "Medium yellow": "中黄色", + "Dark yellow": "深黄色", + "Light lime": "浅酸橙色", + "Medium lime": "中酸橙色", + "Dark lime": "深酸橙色", + "Light green": "浅绿色", + "Medium green": "中绿色", + "Dark green": "深绿色", + "Light teal": "浅水鸭色", + "Medium teal": "中水鸭色", + "Dark teal": "深水鸭色", + "Light cyan": "浅青色", + "Medium cyan": "中青色", + "Dark cyan": "深青色", + "Light blue": "浅蓝色", + "Medium blue": "中蓝色", + "Dark blue": "深蓝色", + "Light indigo": "浅靛蓝色", + "Medium indigo": "中靛蓝色", + "Dark indigo": "深靛蓝色", + "Light magenta": "浅洋红色", + "Medium magenta": "中洋红色", + "Dark magenta": "深洋红色" + } +}; +~~~ +
+ +## Пользовательская локаль + +Чтобы использовать пользовательскую локаль: + +- Создайте свою локаль (или измените стандартную) и добавьте переводы для всех необходимых подписей (поддерживается любой язык) + +- Установите эту локаль для **RichText** с помощью свойства [`locale`](api/config/locale.md) или метода [`setLocale()`](api/methods/set-locale.md) + +## Пример + +Ниже приведён пример, показывающий, как переключаться между разными локалями: + + diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/stylization.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/stylization.md new file mode 100644 index 0000000..527d441 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/stylization.md @@ -0,0 +1,89 @@ +--- +title: Стилизация +sidebar_label: Стилизация +description: Ознакомьтесь с возможностями стилизации в документации по DHTMLX JavaScript RichText. Изучайте руководства для разработчиков, справочник API, смотрите примеры кода и живые демо, а также скачайте бесплатную 30-дневную версию DHTMLX RichText. +--- + +# Стилизация + +DHTMLX RichText можно стилизовать под любой дизайн с помощью CSS-переменных или добавления пользовательских стилей к определённым частям виджета. + +Ниже приведён краткий пример настройки **тёмной темы** и использования имён классов для стилизации различных частей редактора, таких как меню, тулбар, всплывающие окна и область содержимого. + +## Стандартная структура и имена классов + +RichText использует следующие основные классы для построения интерфейса: + +| Имя класса | Описание | +|---------------------------|--------------------------------------------------| +| `.wx-richtext` | Корневой контейнер виджета RichText | +| `.wx-richtext-menubar` | Контейнер для меню | +| `.wx-richtext-menu` | Контейнер для выпадающего меню | +| `.wx-richtext-toolbar` | Контейнер для тулбара | +| `.wx-editor-area` | Контейнер для основной редактируемой области | + +Эти классы можно использовать в вашем CSS для изменения внешнего вида редактора RichText. + +## Переопределение стандартных стилей + +Чтобы задать RichText индивидуальный стиль, просто измените CSS-переменные на контейнере `#root` или на отдельных подэлементах: + +```html +
+ + +``` + +:::note +Такая настройка придаёт редактору тёмный фон, обновляет цвета кнопок и иконок, а также улучшает читаемость интерфейса в тёмной теме. +::: + +## Список поддерживаемых CSS-переменных + +| Имя переменной | Описание | +| ------------------------------ | -------------------------------------------------------- | +| `--wx-background` | Цвет фона редактора и всплывающих окон | +| `--wx-background-alt` | Альтернативный фон для меню | +| `--wx-color-primary` | Акцентный цвет для ссылок, цитат и рамок изменяемых картинок | +| `--wx-color-font` | Основной цвет шрифта (для редактора, меню и тулбара) | +| `--wx-color-font-alt` | Альтернативный цвет шрифта | +| `--wx-color-font-disabled` | Цвет неактивного текста (для элементов меню и тулбара) | +| `--wx-border` | Стиль рамки, используемый по всему редактору | +| `--wx-color-secondary-hover` | Фон при наведении для кнопок в меню и тулбаре | +| `--wx-button-active` | Фон активной кнопки в меню и тулбаре | +| `--wx-icon-color` | Цвет стрелок тулбара для выпадающих списков | +| `--wx-popup-border` | Рамка для всплывающих элементов | + +## Рекомендации + +* Свойство `color-scheme: dark` помогает корректно отображать нативные инпуты в тёмном режиме +* Не рекомендуется менять свойства, влияющие на разметку (такие как `display` или `position`), без необходимости + +## Живой пример + +Ниже приведён пример, показывающий, как можно добавить собственные стили в RichText: + + + +**Связанные статьи:** [Customization](guides/configuration.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/typescript_support.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/typescript_support.md new file mode 100644 index 0000000..89cc5c7 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/typescript_support.md @@ -0,0 +1,19 @@ +--- +sidebar_label: Поддержка TypeScript +title: Поддержка TypeScript +description: В документации вы узнаете, как использовать typescript с библиотекой DHTMLX JavaScript RichText. Ознакомьтесь с руководствами для разработчиков и справочником API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Поддержка TypeScript + +Начиная с версии 2.0, DHTMLX RichText поставляется с встроенными определениями TypeScript, поэтому TypeScript работает из коробки. + +:::note +Доступен Snippet Tool для экспериментов. +::: + +## Преимущества использования TypeScript + +Использование DHTMLX RichText с TypeScript дает несколько приятных преимуществ. + +TypeScript помогает сделать процесс разработки более плавным и надежным. Проверка типов и автодополнение позволяют раньше находить ошибки и ускоряют работу. Кроме того, TypeScript дает четкую информацию о том, какие типы данных использовать при работе с API DHTMLX RichText. diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/ru/docusaurus-plugin-content-docs/current/how_to_start.md new file mode 100644 index 0000000..c7a0d62 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/how_to_start.md @@ -0,0 +1,113 @@ +--- +sidebar_label: Как начать +title: Как начать +description: Ознакомьтесь с тем, как начать работу с DHTMLX RichText в документации по JavaScript-библиотеке DHTMLX RichText. Изучайте руководства для разработчиков и справочник по API, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Как начать + +Здесь приведена простая инструкция по запуску RichText на странице. + +import classic_mode from '@site/static/img/richtext/classic_mode.png'; + +Classic mode + +## Шаг 1. Подключение исходных файлов + +Сначала создайте HTML-файл с именем *index.html*. Добавьте в этот файл исходные файлы RichText. + +Вам понадобятся два файла: + +- JS-файл RichText +- CSS-файл RichText + +~~~html {5-6} title="index.html" + + + + How to Start with RichText + + + + + + + +~~~ + +### Установка RichText через npm или yarn + +RichText можно добавить в ваш проект с помощью **yarn** или **npm**. + +#### Установка пробной версии RichText через npm или yarn + +:::info +Чтобы использовать пробную версию RichText, скачайте [**trial RichText package**](https://dhtmlx.com/docs/products/dhtmlxRichtext/download.shtml) и следуйте инструкциям в файле *README*. Обратите внимание, что пробная версия работает 30 дней. +::: + +#### Установка PRO RichText через npm или yarn + +:::info +Чтобы получить PRO-версию, перейдите в [Client's Area](https://dhtmlx.com/clients/) и сгенерируйте логин и пароль для приватного **npm** DHTMLX. Там же вы найдете подробное руководство по установке. Доступ к приватному **npm** предоставляется, пока действует ваша лицензия на RichText. +::: + +## Шаг 2. Создание RichText + +Теперь добавим RichText на страницу. Начните с создания контейнера `
` для RichText. Выполните следующие действия: + +- Добавьте контейнер DIV в файл *index.html* +- Инициализируйте RichText с помощью конструктора `richtext.Richtext` + +Конструктор принимает любой валидный CSS-селектор для HTML-контейнера, где будет отображаться RichText, а также любые необходимые объекты конфигурации. + +~~~html {9,12-14} title="index.html" + + + + How to Start with RichText + + + + +
+ + + + +~~~ + +## Шаг 3. Настройка RichText + +Теперь вы можете задать параметры конфигурации, которые будут использоваться RichText при запуске. + +Для начала задайте исходные данные для редактора через свойство [`value`](api/config/value.md). Также можно включить [**menubar**](api/config/menubar.md), изменить [**toolbar**](api/config/toolbar.md), установить режимы [**fullscreen**](api/config/fullscreen-mode.md) и [**layout**](api/config/layout-mode.md), выбрать нужную [**locale**](api/config/locale.md) и применить [**default styles**](api/config/default-styles.md). + +~~~jsx {2-12} +const editor = new richtext.Richtext("#root", { + menubar: true, + toolbar: false, + fullscreenMode: true, + layoutMode: "document", + locale: richtext.locales.cn + defaultStyles: { + h4: { + "font-family": "Roboto" + }, + // другие настройки + } +}); +~~~ + +## Что дальше + +Готово! После этих трех шагов RichText готов к редактированию контента. Вы можете сразу приступить к работе или изучить дополнительные возможности JavaScript RichText. diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/index.md b/i18n/ru/docusaurus-plugin-content-docs/current/index.md new file mode 100644 index 0000000..03a5420 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/index.md @@ -0,0 +1,154 @@ +--- +sidebar_label: Обзор RichText +title: Обзор RichText +slug: / +description: В документации вы найдете обзор JavaScript-библиотеки DHTMLX RichText. Ознакомьтесь с руководствами для разработчиков и справочником по API, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную версию DHTMLX RichText. +--- + +# Обзор RichText + +**DHTMLX RichText** - это легковесный и гибкий WYSIWYG-редактор, созданный на JavaScript. Он разработан для удобного редактирования в современных веб-приложениях, имеет простой интерфейс, широкий набор инструментов форматирования и полный контроль над отображением контента. Будь то CMS, админ-панель или встроенный редактор документов, RichText легко интегрируется и настраивается под различные проекты. + +**DHTMLX RichText** предлагает следующие возможности: + +- Два [**режима отображения**](api/config/layout-mode.md) + +- Сохранение контента как в виде обычного текста, так и в формате HTML + +- [**Тулбар**](api/config/toolbar.md), который можно настраивать с помощью встроенных и пользовательских кнопок + +- [**Меню**](api/config/menubar.md), которое статично и может быть показано или скрыто + +- Поддержка загрузки изображений, расширенного форматирования, пользовательских стилей и полноэкранного режима + +- [Полный доступ к API](api/overview/main_overview.md) для [обработки событий](api/overview/event_bus_methods_overview.md), [отслеживания изменений контента](api/overview/methods_overview.md) и [реактивного управления состоянием](api/overview/state_methods_overview.md) + +RichText работает с любым фреймворком и может использоваться с [React](guides/integration_with_react.md), [Angular](guides/integration_with_angular.md), [Vue](guides/integration_with_vue.md) или [Svelte](guides/integration_with_svelte.md), поэтому он подходит для любых фронтенд-решений. + +В этой документации описаны установка, настройка, использование и способы доработки. Приведены примеры для типовых задач, [полная документация по API](api/overview/main_overview.md) и рекомендации по интеграции RichText в различные приложения. + +## Структура RichText + +### Меню + +Меню RichText обеспечивает быстрый доступ к действиям редактирования, таким как создание нового документа, печать, импорт или экспорт и другие. По умолчанию оно скрыто. + +Свойство [`menubar`](api/config/menubar.md) определяет, будет ли меню отображаться. Вы можете включить или отключить меню, однако на данный момент его элементы изменить нельзя. + +import menubar from '@site/static/img/richtext/menubar.png'; + +Menubar + +### Тулбар + +Тулбар RichText позволяет быстро форматировать текст и управлять структурой документа. По умолчанию [тулбар](api/config/toolbar.md#конфигурация-по-умолчанию) включен и содержит набор стандартных инструментов - жирный, курсив, настройки шрифта, списки и другие. + +Свойство [`toolbar`](api/config/toolbar.md) позволяет изменять состав и порядок элементов тулбара. Вы можете включить или отключить тулбар, изменить расположение стандартных кнопок или создать собственную конфигурацию с помощью встроенных и пользовательских кнопок. + +import toolbar from '@site/static/img/richtext/toolbar.png'; + +Toolbar + +### Редактор + +Основная часть RichText - это редактор, где создается и форматируется весь контент. Внешний вид и поведение редактора можно настраивать с помощью опций [`value`](api/config/value.md), [`layoutMode`](api/config/layout-mode.md) и [`defaultStyles`](api/config/default-styles.md). RichText поддерживает пользовательские стили, вставку изображений и адаптивное отображение под различные экраны и задачи. + +#### Два режима работы + +DHTMLX RichText поддерживает два способа отображения контента: режимы "classic" и "document". Выберите тот, который удобнее для вашего стиля редактирования. Переключение между ними происходит через свойство [`layoutMode`](api/config/layout-mode.md). + +- **"classic"** + +import classic_mode from '@site/static/img/richtext/classic_mode.png'; + +Classic mode + +- **"document"** + +import document_mode from '@site/static/img/richtext/document_mode.png'; + +Document mode + +## Поддерживаемые форматы + +RichText может [читать](api/methods/set-value.md) и [сохранять](api/methods/get-value.md) контент как в формате **HTML**, так и в виде обычного текста. + +#### Формат HTML + +import html_format from '@site/static/img/richtext/html_format.png'; + +HTML format + +#### Текстовый формат + +import text_format from '@site/static/img/richtext/text_format.png'; + +Text format + +## Горячие клавиши + +RichText поддерживает множество стандартных горячих клавиш для ускорения редактирования и форматирования. Комбинации соответствуют привычным для каждой платформы и работают как на **Windows/Linux** (`Ctrl`), так и на **macOS** (`⌘`). + +### Форматирование текста + +| Действие | Windows/Linux | macOS | +|------------------|-----------------|---------------| +| Жирный* | `Ctrl+B` | `⌘B` | +| Курсив | `Ctrl+I` | `⌘I` | +| Подчеркнутый | `Ctrl+U` | `⌘U` | +| Зачеркнутый | `Ctrl+Shift+X` | `⌘⇧X` | + +### Редактирование + +| Действие | Windows/Linux | macOS | +|------------|--------------------------|---------------| +| Отменить | `Ctrl+Z` | `⌘Z` | +| Повторить | `Ctrl+Y` / `Ctrl+Shift+Z`| `⌘Y` / `⌘⇧Z` | +| Вырезать | `Ctrl+X` | `⌘X` | +| Копировать | `Ctrl+C` | `⌘C` | +| Вставить | `Ctrl+V` | `⌘V` | + +### Специальные действия + +| Действие | Windows/Linux | macOS | +|---------------|---------------|-------| +| Вставить ссылку| `Ctrl+K` | `⌘K` | +| Печать | `Ctrl+P` | `⌘P` | + +:::info +В будущих обновлениях могут появиться дополнительные горячие клавиши. +::: + +Для просмотра полного списка горячих клавиш RichText нажмите **Help** и выберите **Keyboard shortcuts**: + +import shortcut_reference from '@site/static/img/richtext/shortcut_reference.png'; + +Shortcut reference diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/news/migration.md b/i18n/ru/docusaurus-plugin-content-docs/current/news/migration.md new file mode 100644 index 0000000..2c4e85c --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/news/migration.md @@ -0,0 +1,167 @@ +--- +sidebar_label: Миграция на новые версии +title: Миграция на новые версии +description: Вы можете узнать о миграции на новые версии в документации по DHTMLX JavaScript RichTExt. Изучайте руководства для разработчиков и справочник по API, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную пробную версию DHTMLX RichTExt. +--- + +# Миграция на новые версии + +## 1.2 -> 2.0 + +### Миграция свойств + +| Старое свойство | Заменено на | Примечания | +| --------------- | -------------------------- | ------------------------------------------ | +| `customStats` | *(Удалено)* | Недоступно в новой версии 2.0 | +| `toolbarBlocks` | `toolbar` | Теперь поддерживает детальную структуру | +| `defaultStyles` | `defaultStyles` (обновлено)| Структура теперь по блокам и на основе CSS | +| `mode` | `layoutMode` | Заменено на более строгую настройку enum | + +### - `customStats` + +Свойство `customStats` не входит в последнюю версию RichText. Это значит, что встроенная поддержка пользовательской статистики, такой как подсчет символов, слов или предложений, больше недоступна. + +Чтобы обработать метрики текста, просто получите содержимое редактора и обработайте его по своему усмотрению: + +```jsx +const content = editor.getValue(); +const wordCount = content.split(/\s+/).length; +``` + +### - `toolbarBlocks` → [`toolbar`](api/config/toolbar.md) + +До **2.0** можно было задавать только блоки элементов управления: +```jsx{2} title="До 2.0" +new dhx.RichText("#root", { + toolbarBlocks: ["undo", "style", "decoration", "colors", "align", "link"] +}); +``` + +Начиная с **2.0**, можно указывать отдельные элементы управления: +```jsx{2-4} title="C 2.0" +new richtext.Richtext("#root", { + toolbar: [ + "undo", "style", "bold", "italic", "underline", "text-color", + "align", "link" + ] +}); +``` + +### - [`defaultStyles`](api/config/default-styles.md) + +До **2.0** значения по умолчанию для элементов управления тулбара задавались так: +```jsx title="До 2.0" +defaultStyles: { + "font-family": "Tahoma", + "font-size": "14px" +} +``` + +С **2.0** значения по умолчанию можно задавать для конкретных типов блоков: +```jsx title="C 2.0" +defaultStyles: { + "*": { + "font-family": "Tahoma", + "font-size": "14px" + }, + h1: { + "font-size": "32px", + "color": "#333" + } +} +``` + +:::note +Ключ `*` задаёт базовые значения по умолчанию для всего, а для конкретных элементов (например, p, h1 или blockquote) можно указать свои настройки. +::: + +### - `mode` → [`layoutMode`](api/config/layout-mode.md) + +```jsx{2} title="До 2.0" +new dhx.RichText("#root", { + mode: "document" +}); +``` + +```jsx{2} title="C 2.0" +new Richtext("#root", { + layoutMode: "document" // или "classic" +}); +``` + +Теперь [`layoutMode`](api/config/layout-mode.md) принимает только значения `"classic"` или `"document"`. + +### Миграция методов + +| Старый метод | Новый эквивалент | Примечания | +| ------------------------ | -------------------------------------- | -------------------------------------------------------- | +| `getValue(mode)` | `getValue(encoder)` | Энкодеры заменяют строковые режимы; требуется отдельный импорт энкодеров | +| `setValue(value, mode)` | `setValue(value, encoder)` | Энкодеры заменяют строковые режимы; требуется отдельный импорт энкодеров | +| `getStats()` | *Удалено* | Нет замены; требуется ручная логика | +| `getEditorAPI()` | *Удалено* | Внутренний; используйте публичный API | +| `fire()` | *Удалено* | Заменено на `exec()` и `intercept()` | +| `on()`, `detach()` | ✅ Сохранены (`api.on`, `api.detach`) | Теперь доступны через `richtext.api` | +| `fullScreen()` | *Удалено* | Используйте свойство конфигурации `fullscreenMode` | +| `exitFullScreen()` | *Удалено* | Используйте свойство конфигурации `fullscreenMode` | +| `paint()` | *Удалено* | Больше не требуется | +| `destructor()` | ✅ Доступен | Без изменений | +| `setConfig()` | ✅ Новый | Позволяет обновлять конфиг "на лету" | +| `setLocale()` | ✅ Новый | Позволяет динамически менять язык | +| `getReactiveState()` | ✅ Новый | Позволяет отслеживать реактивное состояние | +| `getState()` | ✅ Новый | Позволяет получить текущее статичное состояние конфигурации | +| `intercept()` | ✅ Новый | Перехват внутренних действий | +| `exec()` | ✅ Новый | Выполнение внутренних действий | + +### - [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md) + +```jsx title="До 2.0" +... +editor.setValue("

Hello

", "html"); +editor.getValue("text"); +``` + +```jsx title="C 2.0" +const fromTextEncoder = richtext.text.fromText; +const fromHTMLEncoder = richtext.html.fromHTML; + +const toTextEncoder = richtext.text.toText; +const toHTMLEncoder = richtext.html.toHTML; +... +editor.setValue("

Hello

", fromHTMLEncoder); +editor.getValue(toTextEncoder); +``` + +:::note +Можно вызывать `getValue()` и `setValue()` без передачи энкодера — по умолчанию будет использоваться HTML. +::: + +### - [`on`](api/internal/on.md) / [`detach`](api/internal/detach.md) + +```jsx title="До 2.0" +editor.events.on("Change", function(action, canUndo, canRedo){ + // ваш код +}); + +editor.events.detach("Change"); +``` + +```jsx title="C 2.0" +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}, { tag: "track" }); + +editor.api.detach("track"); +``` + +### - `fire()` → Используйте [`exec()`](api/internal/exec.md) и [`intercept()`](api/internal/intercept.md) + +```jsx title="До 2.0" +editor.events.fire("some-event", [data]); +``` + +```jsx title="C 2.0" +editor.api.exec("some-event", obj); + +// Предотвращение выполнения +editor.api.intercept("some-event", (obj) => false); +``` diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/news/whats_new.md b/i18n/ru/docusaurus-plugin-content-docs/current/news/whats_new.md new file mode 100644 index 0000000..0dcdaa4 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/news/whats_new.md @@ -0,0 +1,168 @@ +--- +sidebar_label: Что нового +title: Что нового +description: Ознакомьтесь с последними обновлениями DHTMLX RichText и просмотрите историю релизов прямо в документации по JavaScript UI библиотеке DHTMLX. Здесь вы найдете руководства, справочник API, примеры кода, живые демо и бесплатную 30-дневную пробную версию DHTMLX RichText. +--- + +## Версия 2.0.4 + +Выпущено 15 октября 2025 + +### Исправления + +- Диапазон выделения абзацев работал не всегда корректно +- Всплывающие окна ссылок не отображались, если находились рядом с изображениями-ссылками +- Значения тулбара при запуске не всегда соответствовали фактическому содержимому + +## Версия 2.0.3 + +Выпущено 27 августа 2025 + +### Исправления + +- Клик по горизонтальной линии мог вызывать ошибку скрипта +- Значение высоты строки по умолчанию было задано некорректно +- Некоторые стили содержимого имели дублирующиеся селекторы +- Блоки обычного текста не применяли изменения стиля при разборе HTML +- Парсер пропускал экранированные имена шрифтов в HTML +- Парсер игнорировал `margin-left` и `line-height` в HTML + +## Версия 2.0.2 + +Выпущено 4 августа 2025 + +### Исправления + +- Обновлено содержимое пакета + +## Версия 2.0.1 + +Выпущено 30 июля 2025 + +### Исправления + +- Обновлены определения типов для свойства `defaultStyles` + +## Версия 2.0 + +Выпущено 30 июля 2025 + +:::note +API версии v1.2 не совместим с v2.0. Подробнее см. [**руководство по миграции**](news/migration.md). +::: + +### Новая функциональность + +- **Новое поколение рендеринга текста** + Новый движок обеспечивает более плавное, быстрое и точное отображение текста + +- **Гибкая настройка тулбара** + Теперь тулбар полностью настраивается: + - Выбирайте [отдельные элементы тулбара](guides/configuration.md#default-toolbar-controls) и задавайте их порядок + - Добавляйте свои [пользовательские элементы](guides/configuration.md#custom-toolbar-controls) + +- **Опциональная [меню-строка](api/config/menubar.md)** + Можно добавить классический интерфейс меню в верхней части редактора + +- **Улучшенный [режим документа](guides/configuration.md#layout-modes)** + Теперь поддерживаются различные размеры документа + +- **Поддержка изображений** + - Вставка изображений с помощью [функций загрузки](api/config/image-upload-url.md) + - [Изменение размера изображений](api/events/resize-image.md) прямо в редакторе + +- **Улучшенная работа со ссылками** + Взаимодействие с [всплывающими окнами ссылок](api/events/show-popup.md) стало удобнее + +- **Новые инструменты форматирования** + - Выравнивание текста: **по ширине** + - Вставка [горизонтальных линий](api/events/insert-line.md) + - [Увеличение отступа](api/events/indent.md) / [уменьшение отступа](api/events/outdent.md) + - Установка [высоты строки](api/events/set-line-height.md) + - Использование [подстрочного](api/events/subscript.md) / [надстрочного](api/events/superscript.md) текста + +- **Управление списками** + Теперь легко [вставлять и управлять списками](api/events/insert-list.md) + +- **Импорт/Экспорт и печать** + - [Импорт DOCX](api/events/import.md) файлов + - [Экспорт](api/events/export.md) в DOCX или PDF + - [Печать](api/events/print.md) прямо из редактора + +- **Горячие клавиши** + Поддерживается больше стандартных сочетаний клавиш для форматирования и редактирования + +### Новый API + +#### Новые свойства + +- [`fullscreenMode`](api/config/fullscreen-mode.md) +- [`imageUploadUrl`](api/config/image-upload-url.md) +- [`layoutMode`](api/config/layout-mode.md) +- [`locale`](api/config/locale.md) +- [`menubar`](api/config/menubar.md) +- [`toolbar`](api/config/toolbar.md) +- [`value`](api/config/value.md) + +#### Новые методы + +- [`setConfig()`](api/methods/set-config.md) - обновление конфигурации на лету +- [`setLocale()`](api/methods/set-locale.md) - мгновенная смена локали + +#### Новые внутренние методы + +- [`api.exec()`](api/internal/exec.md) +- [`api.intercept()`](api/internal/intercept.md) +- [`api.getReactiveState()`](api/internal/get-reactive-state.md) +- [`api.getState()`](api/internal/get-state.md) + +#### Новые события + +Полный список новых событий смотрите [здесь](api/overview/events_overview.md) + +### Обновленный API + +#### Обновленные свойства + +- [`defaultStyles`](api/config/default-styles.md) + +#### Обновленные методы + +- [`setValue()`](api/methods/set-value.md) +- [`getValue()`](api/methods/get-value.md) + +#### Обновленные внутренние методы + +- [`api.detach()`](api/internal/detach.md) +- [`api.on()`](api/internal/on.md) + +## Удаленный API + +:::warning +Не используйте удаленный API в своих проектах!
Подробнее смотрите в разделе [Миграция](news/migration.md). +::: + +### [Удаленные свойства](news/migration.md#properties-migration) + +- [`customStats`](news/migration.md#--customstats) +- [`mode`](news/migration.md#--mode--layoutmode) +- [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar) + +### [Удаленные методы](news/migration.md#methods-migration) + +- `exitFullScreen()` +- `fullScreen()` +- `getEditorAPI()` +- `getStats()` +- `paint()` + +### Удаленные внутренние методы + +- [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept) + +### Удаленные события + +- `Action` +- `Change` +- `selectionChange` +- `selectionRefresh` diff --git a/i18n/ru/docusaurus-theme-classic/footer.json b/i18n/ru/docusaurus-theme-classic/footer.json new file mode 100644 index 0000000..0773622 --- /dev/null +++ b/i18n/ru/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "Центр разработки", + "description": "Заголовок колонки ссылок в подвале с заголовком=Центр разработки" + }, + "link.title.Community": { + "message": "Сообщество", + "description": "Заголовок колонки ссылок в подвале с заголовком=Сообщество" + }, + "link.title.Company": { + "message": "Компания", + "description": "Заголовок колонки ссылок в подвале с заголовком=Компания" + }, + "link.item.label.Download RichText": { + "message": "Скачать RichText", + "description": "Метка ссылки в подвале с меткой=Скачать RichText, ведущей на https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml" + }, + "link.item.label.Examples": { + "message": "Примеры", + "description": "Метка ссылки в подвале с меткой=Примеры, ведущей на https://snippet.dhtmlx.com/t55alxiy?tag=richtext" + }, + "link.item.label.Blog": { + "message": "Блог", + "description": "Метка ссылки в подвале с меткой=Блог, ведущей на https://dhtmlx.com/blog/tag/richtext/" + }, + "link.item.label.Forum": { + "message": "Форум", + "description": "Метка ссылки в подвале с меткой=Форум, ведущей на https://forum.dhtmlx.com/c/richtext/" + }, + "link.item.label.GitHub": { + "message": "GitHub", + "description": "Метка ссылки в подвале с меткой=GitHub, ведущей на https://github.com/DHTMLX" + }, + "link.item.label.Youtube": { + "message": "Youtube", + "description": "Метка ссылки в подвале с меткой=Youtube, ведущей на https://www.youtube.com/user/dhtmlx" + }, + "link.item.label.Facebook": { + "message": "Facebook", + "description": "Метка ссылки в подвале с меткой=Facebook, ведущей на https://www.facebook.com/dhtmlx" + }, + "link.item.label.Twitter": { + "message": "Twitter", + "description": "Метка ссылки в подвале с меткой=Twitter, ведущей на https://twitter.com/dhtmlx" + }, + "link.item.label.Linkedin": { + "message": "Linkedin", + "description": "Метка ссылки в подвале с меткой=Linkedin, ведущей на https://www.linkedin.com/groups/3345009/" + }, + "link.item.label.About us": { + "message": "О нас", + "description": "Метка ссылки в подвале с меткой=О нас, ведущей на https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "Контакты", + "description": "Метка ссылки в подвале с меткой=Контакты, ведущей на https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "Лицензирование", + "description": "Метка ссылки в подвале с меткой=Лицензирование, ведущей на https://dhtmlx.com/docs/products/dhtmlxRichText/#editions-licenses" + } +} \ No newline at end of file diff --git a/i18n/ru/docusaurus-theme-classic/navbar.json b/i18n/ru/docusaurus-theme-classic/navbar.json new file mode 100644 index 0000000..9a800bb --- /dev/null +++ b/i18n/ru/docusaurus-theme-classic/navbar.json @@ -0,0 +1,26 @@ +{ + "title": { + "message": "Документация по JavaScript RichText", + "description": "Заголовок в навигационной панели" + }, + "logo.alt": { + "message": "Документация DHTMLX RichText", + "description": "Альтернативный текст логотипа в навигационной панели" + }, + "item.label.Examples": { + "message": "Примеры", + "description": "Элемент навигационной панели с меткой Примеры" + }, + "item.label.Forum": { + "message": "Форум", + "description": "Элемент навигационной панели с меткой Форум" + }, + "item.label.Support": { + "message": "Поддержка", + "description": "Элемент навигационной панели с меткой Поддержка" + }, + "item.label.Download": { + "message": "Скачать", + "description": "Элемент навигационной панели с меткой Скачать" + } +} \ No newline at end of file diff --git a/i18n/zh/code.json b/i18n/zh/code.json new file mode 100644 index 0000000..24e6b16 --- /dev/null +++ b/i18n/zh/code.json @@ -0,0 +1,560 @@ +{ + "theme.ErrorPageContent.title": { + "message": "此页面崩溃了。", + "description": "页面崩溃时备用页面的标题" + }, + "theme.BackToTopButton.buttonAriaLabel": { + "message": "滚动回顶部", + "description": "返回顶部按钮的ARIA标签" + }, + "theme.blog.archive.title": { + "message": "归档", + "description": "博客归档页面的页面和主标题" + }, + "theme.blog.archive.description": { + "message": "归档", + "description": "博客归档页面的页面和主描述" + }, + "theme.blog.paginator.navAriaLabel": { + "message": "博客列表页面导航", + "description": "博客分页的ARIA标签" + }, + "theme.blog.paginator.newerEntries": { + "message": "更新的文章", + "description": "用于导航到较新的博客文章页面（上一页）的标签" + }, + "theme.blog.paginator.olderEntries": { + "message": "较旧的文章", + "description": "用于导航到较旧的博客文章页面（下一页）的标签" + }, + "theme.blog.post.paginator.navAriaLabel": { + "message": "博客文章页面导航", + "description": "博客文章分页的ARIA标签" + }, + "theme.blog.post.paginator.newerPost": { + "message": "更新的文章", + "description": "导航到更新/上一篇博客文章的按钮标签" + }, + "theme.blog.post.paginator.olderPost": { + "message": "较旧的文章", + "description": "导航到较旧/下一篇博客文章的按钮标签" + }, + "theme.tags.tagsPageLink": { + "message": "查看所有标签", + "description": "指向标签列表页面链接的标签" + }, + "theme.colorToggle.ariaLabel.mode.system": { + "message": "系统模式", + "description": "系统颜色模式的名称" + }, + "theme.colorToggle.ariaLabel.mode.light": { + "message": "浅色模式", + "description": "浅色颜色模式的名称" + }, + "theme.colorToggle.ariaLabel.mode.dark": { + "message": "深色模式", + "description": "深色颜色模式的名称" + }, + "theme.colorToggle.ariaLabel": { + "message": "在深色和浅色模式之间切换（当前为 {mode}）", + "description": "颜色模式切换按钮的ARIA标签" + }, + "theme.docs.breadcrumbs.navAriaLabel": { + "message": "面包屑导航", + "description": "面包屑导航的ARIA标签" + }, + "theme.docs.DocCard.categoryDescription.plurals": { + "message": "1 个项目|{count} 个项目", + "description": "生成索引中类别卡的默认描述，说明该类别包含多少项目" + }, + "theme.docs.paginator.navAriaLabel": { + "message": "文档页面", + "description": "文档分页的ARIA标签" + }, + "theme.docs.paginator.previous": { + "message": "上一页", + "description": "用于导航到上一篇文档的标签" + }, + "theme.docs.paginator.next": { + "message": "下一页", + "description": "用于导航到下一篇文档的标签" + }, + "theme.docs.tagDocListPageTitle.nDocsTagged": { + "message": "1 个文档标记|{count} 个文档标记", + "description": "“{count} 个文档标记”的复数形式标签。根据语言支持使用多种复数形式（用“|”分隔）" + }, + "theme.docs.tagDocListPageTitle": { + "message": "带有 “{tagName}” 的 {nDocsTagged}", + "description": "文档标签页面的标题" + }, + "theme.docs.versionBadge.label": { + "message": "版本：{versionLabel}" + }, + "theme.docs.versions.unreleasedVersionLabel": { + "message": "这是 {siteTitle} {versionLabel} 版本的未发布文档。", + "description": "用于告知用户正在浏览未发布文档版本的标签" + }, + "theme.docs.versions.unmaintainedVersionLabel": { + "message": "这是 {siteTitle} {versionLabel} 的文档，该版本不再积极维护。", + "description": "用于告知用户正在浏览不再维护的文档版本的标签" + }, + "theme.docs.versions.latestVersionSuggestionLabel": { + "message": "有关最新文档，请参阅 {latestVersionLink}（{versionLabel}）。", + "description": "用于提示用户查看最新版本的标签" + }, + "theme.docs.versions.latestVersionLinkLabel": { + "message": "最新版本", + "description": "最新版本建议链接的标签" + }, + "theme.common.editThisPage": { + "message": "编辑此页面", + "description": "编辑当前页面的链接标签" + }, + "theme.common.headingLinkTitle": { + "message": "直接链接到 {heading}", + "description": "标题链接的标题" + }, + "theme.lastUpdated.atDate": { + "message": " 于 {date}", + "description": "描述页面最后更新时间的日期部分" + }, + "theme.lastUpdated.byUser": { + "message": " 由 {user}", + "description": "描述页面最后更新者的部分" + }, + "theme.lastUpdated.lastUpdatedAtBy": { + "message": "最后更新{atDate}{byUser}", + "description": "显示页面最后更新时间及更新者的句子" + }, + "theme.navbar.mobileVersionsDropdown.label": { + "message": "版本", + "description": "移动视图下导航栏版本下拉菜单的标签" + }, + "theme.NotFound.title": { + "message": "页面未找到", + "description": "404 页面标题" + }, + "theme.tags.tagsListLabel": { + "message": "标签：", + "description": "标签列表旁的标签" + }, + "theme.admonition.caution": { + "message": "注意", + "description": "警告提示的默认标签（:::caution）" + }, + "theme.admonition.danger": { + "message": "危险", + "description": "危险提示的默认标签（:::danger）" + }, + "theme.admonition.info": { + "message": "信息", + "description": "信息提示的默认标签（:::info）" + }, + "theme.admonition.note": { + "message": "注释", + "description": "注释提示的默认标签（:::note）" + }, + "theme.admonition.tip": { + "message": "提示", + "description": "提示信息的默认标签（:::tip）" + }, + "theme.admonition.warning": { + "message": "警告", + "description": "警告提示的默认标签（:::warning）" + }, + "theme.AnnouncementBar.closeButtonAriaLabel": { + "message": "关闭", + "description": "公告栏关闭按钮的ARIA标签" + }, + "theme.blog.sidebar.navAriaLabel": { + "message": "博客最新文章导航", + "description": "博客侧边栏最新文章的ARIA标签" + }, + "theme.DocSidebarItem.expandCategoryAriaLabel": { + "message": "展开侧边栏类别 '{label}'", + "description": "展开侧边栏类别的ARIA标签" + }, + "theme.DocSidebarItem.collapseCategoryAriaLabel": { + "message": "折叠侧边栏类别 '{label}'", + "description": "折叠侧边栏类别的ARIA标签" + }, + "theme.IconExternalLink.ariaLabel": { + "message": "（在新标签页打开）", + "description": "外部链接图标的ARIA标签" + }, + "theme.NotFound.p1": { + "message": "我们找不到您要查找的内容。", + "description": "404 页面第一段" + }, + "theme.NotFound.p2": { + "message": "请联系链接到此原始URL的站点所有者，告知他们链接已损坏。", + "description": "404 页面第二段" + }, + "theme.NavBar.navAriaLabel": { + "message": "主导航", + "description": "主导航的ARIA标签" + }, + "theme.navbar.mobileLanguageDropdown.label": { + "message": "语言", + "description": "移动语言切换下拉菜单的标签" + }, + "theme.TOCCollapsible.toggleButtonLabel": { + "message": "本页内容", + "description": "可折叠目录组件按钮的标签" + }, + "theme.blog.post.readMore": { + "message": "阅读更多", + "description": "博客文章摘要中链接到完整博客文章的标签" + }, + "theme.blog.post.readMoreLabel": { + "message": "阅读更多关于 {title}", + "description": "博客文章摘要中链接到完整文章的ARIA标签" + }, + "theme.blog.post.readingTime.plurals": { + "message": "1 分钟阅读|{readingTime} 分钟阅读", + "description": "“{readingTime} 分钟阅读”的复数形式标签。根据语言支持使用多种复数形式（用“|”分隔）" + }, + "theme.CodeBlock.copy": { + "message": "复制", + "description": "代码块复制按钮标签" + }, + "theme.CodeBlock.copied": { + "message": "已复制", + "description": "代码块复制后按钮标签" + }, + "theme.CodeBlock.copyButtonAriaLabel": { + "message": "复制代码到剪贴板", + "description": "复制代码按钮的ARIA标签" + }, + "theme.CodeBlock.wordWrapToggle": { + "message": "切换自动换行", + "description": "代码块行自动换行切换按钮的标题属性" + }, + "theme.docs.breadcrumbs.home": { + "message": "主页", + "description": "面包屑导航中主页的ARIA标签" + }, + "theme.docs.sidebar.collapseButtonTitle": { + "message": "折叠侧边栏", + "description": "文档侧边栏折叠按钮的标题属性" + }, + "theme.docs.sidebar.collapseButtonAriaLabel": { + "message": "折叠侧边栏", + "description": "文档侧边栏折叠按钮的ARIA标签" + }, + "theme.docs.sidebar.navAriaLabel": { + "message": "文档侧边栏", + "description": "侧边栏导航的ARIA标签" + }, + "theme.docs.sidebar.closeSidebarButtonAriaLabel": { + "message": "关闭导航栏", + "description": "移动端侧边栏关闭按钮的ARIA标签" + }, + "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": { + "message": "展开下拉菜单", + "description": "展开移动端下拉导航栏按钮的ARIA标签" + }, + "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": { + "message": "折叠下拉菜单", + "description": "折叠移动端下拉导航栏按钮的ARIA标签" + }, + "theme.docs.sidebar.expandButtonTitle": { + "message": "展开侧边栏", + "description": "文档侧边栏展开按钮的ARIA标签和标题属性" + }, + "theme.docs.sidebar.expandButtonAriaLabel": { + "message": "展开侧边栏", + "description": "文档侧边栏展开按钮的ARIA标签和标题属性" + }, + "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { + "message": "← 返回主菜单", + "description": "移动导航栏侧边栏二级菜单中返回主菜单的按钮标签（通常用于显示文档侧边栏）" + }, + "theme.docs.sidebar.toggleSidebarButtonAriaLabel": { + "message": "切换导航栏", + "description": "移动导航汉堡菜单按钮的ARIA标签" + }, + "theme.SearchBar.seeAll": { + "message": "查看所有 {count} 个结果" + }, + "theme.SearchPage.documentsFound.plurals": { + "message": "找到 1 个文档|找到 {count} 个文档", + "description": "“找到 {count} 个文档”的复数形式标签。根据语言支持使用多种复数形式（用“|”分隔）" + }, + "theme.SearchPage.existingResultsTitle": { + "message": "\"{query}\" 的搜索结果", + "description": "非空查询的搜索页面标题" + }, + "theme.SearchPage.emptyResultsTitle": { + "message": "搜索文档", + "description": "空查询的搜索页面标题" + }, + "theme.SearchPage.inputPlaceholder": { + "message": "在此输入搜索内容", + "description": "搜索页面输入框的占位符" + }, + "theme.SearchPage.inputLabel": { + "message": "搜索", + "description": "搜索页面输入框的ARIA标签" + }, + "theme.SearchPage.algoliaLabel": { + "message": "由 Algolia 提供支持", + "description": "Algolia 提及的描述标签" + }, + "theme.SearchPage.noResultsText": { + "message": "未找到结果", + "description": "空搜索结果的段落" + }, + "theme.SearchPage.fetchingNewResults": { + "message": "正在获取新结果...", + "description": "获取新搜索结果的段落" + }, + "theme.SearchBar.label": { + "message": "搜索", + "description": "搜索按钮的ARIA标签和占位符" + }, + "theme.SearchModal.searchBox.resetButtonTitle": { + "message": "清除查询", + "description": "搜索框重置按钮的标签和ARIA标签" + }, + "theme.SearchModal.searchBox.cancelButtonText": { + "message": "取消", + "description": "搜索框取消按钮的标签和ARIA标签" + }, + "theme.SearchModal.searchBox.placeholderText": { + "message": "搜索文档", + "description": "主搜索输入框的占位符文本" + }, + "theme.SearchModal.searchBox.placeholderTextAskAi": { + "message": "提问另一个问题...", + "description": "AI 问答模式下的占位符文本" + }, + "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": { + "message": "正在回答...", + "description": "AI 流式回答时搜索框的占位符文本" + }, + "theme.SearchModal.searchBox.enterKeyHint": { + "message": "搜索", + "description": "搜索框回车键提示" + }, + "theme.SearchModal.searchBox.enterKeyHintAskAi": { + "message": "回车", + "description": "AI 搜索框回车键提示" + }, + "theme.SearchModal.searchBox.searchInputLabel": { + "message": "搜索", + "description": "搜索输入框的ARIA标签" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonText": { + "message": "返回关键词搜索", + "description": "返回关键词搜索按钮的文本" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": { + "message": "返回关键词搜索", + "description": "返回关键词搜索按钮的ARIA标签" + }, + "theme.SearchModal.startScreen.recentSearchesTitle": { + "message": "最近", + "description": "最近搜索的标题" + }, + "theme.SearchModal.startScreen.noRecentSearchesText": { + "message": "无最近搜索", + "description": "无最近搜索时的文本" + }, + "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": { + "message": "保存此搜索", + "description": "保存最近搜索按钮的标题" + }, + "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": { + "message": "从历史记录中移除此搜索", + "description": "移除最近搜索按钮的标题" + }, + "theme.SearchModal.startScreen.favoriteSearchesTitle": { + "message": "收藏", + "description": "收藏搜索的标题" + }, + "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": { + "message": "从收藏中移除此搜索", + "description": "移除收藏搜索按钮的标题" + }, + "theme.SearchModal.startScreen.recentConversationsTitle": { + "message": "最近对话", + "description": "最近对话的标题" + }, + "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": { + "message": "从历史记录中移除此对话", + "description": "移除最近对话按钮的标题" + }, + "theme.SearchModal.errorScreen.titleText": { + "message": "无法获取结果", + "description": "错误屏幕的标题" + }, + "theme.SearchModal.errorScreen.helpText": { + "message": "您可能需要检查您的网络连接。", + "description": "错误屏幕的帮助文本" + }, + "theme.SearchModal.resultsScreen.askAiPlaceholder": { + "message": "向 AI 提问：", + "description": "向 AI 提问输入框的占位符文本" + }, + "theme.SearchModal.askAiScreen.disclaimerText": { + "message": "答案由 AI 生成，可能存在错误。请核实回复内容。", + "description": "AI 答案的免责声明文本" + }, + "theme.SearchModal.askAiScreen.relatedSourcesText": { + "message": "相关来源", + "description": "相关来源的文本" + }, + "theme.SearchModal.askAiScreen.thinkingText": { + "message": "思考中...", + "description": "AI 思考时的文本" + }, + "theme.SearchModal.askAiScreen.copyButtonText": { + "message": "复制", + "description": "复制按钮的文本" + }, + "theme.SearchModal.askAiScreen.copyButtonCopiedText": { + "message": "已复制！", + "description": "复制按钮点击后显示的文本" + }, + "theme.SearchModal.askAiScreen.copyButtonTitle": { + "message": "复制", + "description": "复制按钮的标题" + }, + "theme.SearchModal.askAiScreen.likeButtonTitle": { + "message": "喜欢", + "description": "点赞按钮的标题" + }, + "theme.SearchModal.askAiScreen.dislikeButtonTitle": { + "message": "不喜欢", + "description": "点踩按钮的标题" + }, + "theme.SearchModal.askAiScreen.thanksForFeedbackText": { + "message": "感谢您的反馈！", + "description": "感谢反馈的文本" + }, + "theme.SearchModal.askAiScreen.preToolCallText": { + "message": "搜索中...", + "description": "调用工具前的文本" + }, + "theme.SearchModal.askAiScreen.duringToolCallText": { + "message": "正在搜索 ", + "description": "调用工具时的文本" + }, + "theme.SearchModal.askAiScreen.afterToolCallText": { + "message": "已搜索", + "description": "调用工具后的文本" + }, + "theme.SearchModal.footer.selectText": { + "message": "选择", + "description": "页脚的选择文本" + }, + "theme.SearchModal.footer.submitQuestionText": { + "message": "提交问题", + "description": "页脚的提交问题文本" + }, + "theme.SearchModal.footer.selectKeyAriaLabel": { + "message": "回车键", + "description": "页脚选择键的ARIA标签" + }, + "theme.SearchModal.footer.navigateText": { + "message": "导航", + "description": "页脚的导航文本" + }, + "theme.SearchModal.footer.navigateUpKeyAriaLabel": { + "message": "向上箭头", + "description": "页脚导航上键的ARIA标签" + }, + "theme.SearchModal.footer.navigateDownKeyAriaLabel": { + "message": "向下箭头", + "description": "页脚导航下键的ARIA标签" + }, + "theme.SearchModal.footer.closeText": { + "message": "关闭", + "description": "页脚的关闭文本" + }, + "theme.SearchModal.footer.closeKeyAriaLabel": { + "message": "Esc键", + "description": "页脚关闭键的ARIA标签" + }, + "theme.SearchModal.footer.searchByText": { + "message": "技术支持", + "description": "页脚的“技术支持”文本" + }, + "theme.SearchModal.footer.backToSearchText": { + "message": "返回搜索", + "description": "页脚的返回搜索文本" + }, + "theme.SearchModal.noResultsScreen.noResultsText": { + "message": "未找到结果：", + "description": "无结果时的文本" + }, + "theme.SearchModal.noResultsScreen.suggestedQueryText": { + "message": "尝试搜索：", + "description": "建议查询的文本" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsText": { + "message": "认为此查询应返回结果？", + "description": "报告缺失结果的文本" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": { + "message": "告诉我们。", + "description": "报告缺失结果的链接文本" + }, + "theme.SearchModal.placeholder": { + "message": "搜索文档", + "description": "DocSearch 弹出模态框输入框的占位符" + }, + "theme.blog.post.plurals": { + "message": "1 篇文章|{count} 篇文章", + "description": "“{count} 篇文章”的复数形式标签。根据语言支持使用多种复数形式（用“|”分隔）" + }, + "theme.blog.tagTitle": { + "message": "{nPosts} 篇文章标记为 \"{tagName}\"", + "description": "博客标签页面的标题" + }, + "theme.blog.author.pageTitle": { + "message": "{authorName} - {nPosts}", + "description": "博客作者页面的标题" + }, + "theme.blog.authorsList.pageTitle": { + "message": "作者", + "description": "作者页面的标题" + }, + "theme.blog.authorsList.viewAll": { + "message": "查看所有作者", + "description": "指向博客作者页面的链接标签" + }, + "theme.blog.author.noPosts": { + "message": "该作者尚未撰写任何文章。", + "description": "作者无博客文章时的文本" + }, + "theme.contentVisibility.unlistedBanner.title": { + "message": "非公开页面", + "description": "非公开内容横幅标题" + }, + "theme.contentVisibility.unlistedBanner.message": { + "message": "此页面为非公开。搜索引擎不会索引，只有拥有直接链接的用户可以访问。", + "description": "非公开内容横幅消息" + }, + "theme.contentVisibility.draftBanner.title": { + "message": "草稿页面", + "description": "草稿内容横幅标题" + }, + "theme.contentVisibility.draftBanner.message": { + "message": "此页面为草稿，仅在开发环境可见，生产构建中将被排除。", + "description": "草稿内容横幅消息" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "重试", + "description": "React 错误边界捕获错误时，重试渲染按钮的标签" + }, + "theme.common.skipToMainContent": { + "message": "跳转到主要内容", + "description": "用于无障碍访问的跳转到内容标签，允许通过键盘快速导航到主要内容" + }, + "theme.tags.tagsPageTitle": { + "message": "标签", + "description": "标签列表页面的标题" + } +} \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-blog/options.json b/i18n/zh/docusaurus-plugin-content-blog/options.json new file mode 100644 index 0000000..9239ff7 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-blog/options.json @@ -0,0 +1,14 @@ +{ + "title": { + "message": "Blog", + "description": "The title for the blog used in SEO" + }, + "description": { + "message": "Blog", + "description": "The description for the blog used in SEO" + }, + "sidebar.title": { + "message": "Recent posts", + "description": "The label for the left sidebar" + } +} diff --git a/i18n/zh/docusaurus-plugin-content-docs/current.json b/i18n/zh/docusaurus-plugin-content-docs/current.json new file mode 100644 index 0000000..54878e5 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current.json @@ -0,0 +1,62 @@ +{ + "version.label": { + "message": "下一个", + "description": "版本当前的标签" + }, + "sidebar.docs.category.What's new and migration": { + "message": "新特性和迁移", + "description": "侧边栏 'docs' 中类别 '新特性和迁移' 的标签" + }, + "sidebar.docs.category.What's new and migration.link.generated-index.title": { + "message": "新特性和迁移", + "description": "侧边栏 'docs' 中类别 '新特性和迁移' 的生成索引页面标题" + }, + "sidebar.docs.category.API": { + "message": "API", + "description": "侧边栏 'docs' 中类别 'API' 的标签" + }, + "sidebar.docs.category.RichText methods": { + "message": "富文本方法", + "description": "侧边栏 'docs' 中类别 '富文本方法' 的标签" + }, + "sidebar.docs.category.RichText internal API": { + "message": "富文本内部API", + "description": "侧边栏 'docs' 中类别 '富文本内部API' 的标签" + }, + "sidebar.docs.category.RichText internal API.link.generated-index.title": { + "message": "内部API概述", + "description": "侧边栏 'docs' 中类别 '富文本内部API' 的生成索引页面标题" + }, + "sidebar.docs.category.Event Bus methods": { + "message": "事件总线方法", + "description": "侧边栏 'docs' 中类别 '事件总线方法' 的标签" + }, + "sidebar.docs.category.State methods": { + "message": "状态方法", + "description": "侧边栏 'docs' 中类别 '状态方法' 的标签" + }, + "sidebar.docs.category.RichText events": { + "message": "富文本事件", + "description": "侧边栏 'docs' 中类别 '富文本事件' 的标签" + }, + "sidebar.docs.category.RichText properties": { + "message": "富文本属性", + "description": "侧边栏 'docs' 中类别 '富文本属性' 的标签" + }, + "sidebar.docs.category.Integration with frameworks": { + "message": "与框架集成", + "description": "侧边栏 'docs' 中类别 '与框架集成' 的标签" + }, + "sidebar.docs.category.Integration with frameworks.link.generated-index.title": { + "message": "与框架集成", + "description": "侧边栏 'docs' 中类别 '与框架集成' 的生成索引页面标题" + }, + "sidebar.docs.category.Guides": { + "message": "指南", + "description": "侧边栏 'docs' 中类别 '指南' 的标签" + }, + "sidebar.docs.category.Guides.link.generated-index.title": { + "message": "指南", + "description": "侧边栏 'docs' 中类别 '指南' 的生成索引页面标题" + } +} \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/default-styles.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/default-styles.md new file mode 100644 index 0000000..edfb7e0 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/default-styles.md @@ -0,0 +1,144 @@ +--- +sidebar_label: defaultStyles +title: defaultStyles 配置 +description: 探索 DHTMLX JavaScript RichText 库文档中的 defaultStyles 配置。查找开发者指南、API 参考，试用代码示例和在线演示，并免费下载 DHTMLX RichText 30 天试用版。 +--- + +# defaultStyles + +### 描述 + +@short: 可选。定义特定块类型的默认样式设置。 + +### 用法 + +~~~jsx {} +defaultStyles?: { + "*"?: { // 适用于所有块，允许您为所有块设置通用属性 + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + p?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + blockquote?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h1?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h2?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h3?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h4?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h5?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h6?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + } +}; +~~~ + +:::important +`defaultStyles` 属性本身并不会直接将 CSS 样式应用到块元素。要使样式生效，您需要另外添加对应的 CSS: + +```jsx title="index.js" +new richtext.Richtext("#root", { + defaultStyles: { + h2: { + "font-family": "Roboto", + "font-size": "28px", + color: "purple", + background: "#FFC0CB" + } + } +}); +``` + +```css title="index.css" + +``` + +在此示例中，所有 `h2` 块都设置为使用 `"Roboto"` 字体，字体大小为 28px，同时更改了文字颜色和背景色。对应的 CSS 样式也已应用到 `h2` 块。 +::: + +### 默认配置 + +~~~jsx +const defaultStyles = { + "*": { "font-family": "Arial" }, + p: { "font-size": "14px" }, + blockquote: { "font-size": "14px" }, + h1: { "font-size": "32px" }, + h2: { "font-size": "24px" }, + h3: { "font-size": "18px" }, + h4: { "font-size": "16px" }, + h5: { "font-size": "14px" }, + h6: { "font-size": "12px" } +}; +~~~ + +### 示例 + +~~~jsx {3-13} +// 初始化 RichText +new richtext.Richtext("#root", { + defaultStyles: { + h4: { + "font-family": "Roboto" + }, + h5: { + "font-family": "Roboto" + }, + h6: { + "font-family": "Roboto" + } + }, + // 其他配置属性 +}); +~~~ + +**更新日志:** 此属性在版本 2.0 中进行了更新 + +**相关文档:** [配置](guides/configuration.md) + +**相关示例:** [RichText. 更改排版默认值（字体、字体大小等）](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md new file mode 100644 index 0000000..a584088 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md @@ -0,0 +1,39 @@ +--- +sidebar_label: fullscreenMode +title: fullscreenMode 配置 +description: 探索 DHTMLX JavaScript RichText 库文档中的 fullscreenMode 配置。查看开发者指南、API 参考，尝试代码示例和在线演示，并免费下载 DHTMLX RichText 30 天试用版。 +--- + +# fullscreenMode + +### 描述 + +@short: 可选。启用 RichText 全屏模式。 + +### 用法 + +~~~jsx {} +fullscreenMode?: boolean; +~~~ + +### 默认配置 + +~~~jsx +fullscreenMode: false; +~~~ + +### 示例 + +~~~jsx {3} +// 初始化 RichText +new richtext.Richtext("#root", { + fullscreenMode: true + // 其他配置属性 +}); +~~~ + +**更新日志:** 此属性自 v2.0 版本引入。 + +**相关文档:** [配置](guides/configuration.md) + +**相关示例:** [RichText. 全工具栏](https://snippet.dhtmlx.com/ziynafp7?tag=richtext) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md new file mode 100644 index 0000000..ab89a2d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md @@ -0,0 +1,33 @@ +--- +sidebar_label: imageUploadUrl +title: imageUploadUrl 配置 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 imageUploadUrl 配置。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载免费的 30 天试用版 DHTMLX RichText。 +--- + +# imageUploadUrl + +### 描述 + +@short: 可选。定义用于上传图片的 URL 地址 + +### 用法 + +~~~jsx {} +imageUploadUrl?: string; +~~~ + +### 示例 + +~~~jsx {3} +// 初始化 RichText +new richtext.Richtext("#root", { + imageUploadUrl: "some URL" + // 其他配置属性 +}); +~~~ + +**更新日志:** 此属性在版本 2.0 中引入 + +**相关文章:** [配置](guides/configuration.md) + +**相关示例:** [RichText. 初始化](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/layout-mode.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/layout-mode.md new file mode 100644 index 0000000..46fb66d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/layout-mode.md @@ -0,0 +1,41 @@ +--- +sidebar_label: layoutMode +title: layoutMode 配置 +description: 探索 DHTMLX JavaScript RichText 库文档中的 layoutMode 配置。查看开发者指南、API 参考、代码示例、在线演示，并免费下载 DHTMLX RichText 30 天试用版。 +--- + +# layoutMode + +### 描述 + +@short: 可选。定义主编辑区域的布局样式。 + +### 用法 + +~~~jsx {} +layoutMode: "classic" | "document"; +~~~ + +`"classic"` 模式使编辑区域占满整个页面。`"document"` 模式模拟实际文档尺寸，支持 A4、A5、A6 和 A7 等格式。 + +### 默认配置 + +~~~jsx +layoutMode: "classic"; +~~~ + +### 示例 + +~~~jsx {3} +// 初始化 RichText +new richtext.Richtext("#root", { + layoutMode: "document" // 默认将 RichText 设置为 "document" 模式 + // 其他配置属性 +}); +~~~ + +**更新日志:** 该属性自 v2.0 版本引入，替代了旧的 `mode` 属性。 + +**相关文档:** [Configuration](guides/configuration.md) + +**相关示例:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/locale.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/locale.md new file mode 100644 index 0000000..dfaa676 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/locale.md @@ -0,0 +1,47 @@ +--- +sidebar_label: locale +title: locale 配置 +description: 探索 DHTMLX JavaScript RichText 库文档中的 locale 配置。查看开发者指南、API 参考，尝试代码示例和在线演示，并免费下载 DHTMLX RichText 30 天试用版。 +--- + +# locale + +### 描述 + +@short: 可选。一个包含 RichText 本地化标签的对象 + +:::info +**locale** 对象应包含所有 RichText 标签及其对应的翻译内容。 +::: + +### 用法 + +~~~jsx {} +locale?: object; +~~~ + +### 默认配置 + +默认情况下，RichText 使用 **英语** locale。您也可以选择设置自定义的 locale。 + +:::tip +要动态切换 locale，请使用 RichText 的 [**setLocale()**](api/methods/set-locale.md) 方法 +::: + +### 示例 + +~~~jsx {3} +// 初始化 RichText +const editor = new richtext.RichText("#root", { + locale: richtext.locales.cn // 初始设置为中文 locale + // locale: richtext.locales.en // 初始设置为英文 locale + // locale: richtext.locales.de // 初始设置为德文 locale + // 其他配置属性 +}); +~~~ + +**更新日志:** 该属性自 v2.0 版本引入 + +**相关文档:** [本地化](guides/localization.md) + +**相关示例:** [RichText. 本地化](https://snippet.dhtmlx.com/zxjrin3i?tag=richtext) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/menubar.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/menubar.md new file mode 100644 index 0000000..88cf371 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/menubar.md @@ -0,0 +1,33 @@ +--- +sidebar_label: menubar +title: menubar 配置 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 menubar 配置。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# menubar + +### 描述 + +@short: 可选。启用 RichText 顶部的菜单栏。 + +### 用法 + +~~~jsx {} +menubar?: boolean; +~~~ + +### 示例 + +~~~jsx {3} +// 初始化 RichText +new richtext.Richtext("#root", { + menubar: true + // 其他配置属性 +}); +~~~ + +**更新日志:** 此属性自 v2.0 版本引入 + +**相关文档:** [配置](guides/configuration.md) + +**相关示例:** [RichText. 带菜单栏的初始化](https://snippet.dhtmlx.com/tjryzka7?tag=richtext) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/toolbar.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/toolbar.md new file mode 100644 index 0000000..4861f3b --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/toolbar.md @@ -0,0 +1,219 @@ +--- +sidebar_label: toolbar +title: toolbar 配置 +description: 探索 DHTMLX JavaScript RichText 库文档中的 toolbar 配置。查看开发者指南、API 参考，尝试代码示例和实时演示，并获取 DHTMLX RichText 免费 30 天试用。 +--- + +# toolbar + +### 描述 + +@short: 可选。启用工具栏，让用户选择并设置显示的按钮。 + +### 用法 + +~~~jsx {} +toolbar?: boolean | Array any }>; +~~~ + +#### 工具栏中可用的按钮 + +以下是可以添加到 RichText 工具栏的按钮: + +| 按钮 | 描述 | +|---------------------|---------------------------------------------------------------------------| +| `undo` | 撤销最后一次用户操作。 | +| `redo` | 重做之前撤销的操作。 | +| `style` | 选择文本样式，如标题或段落。 | +| `font-family` | 更改选中文本的字体。 | +| `font-size` | 更改选中文本的字号。 | +| `bold` | 使选中文本加粗。 | +| `italic` | 使选中文本倾斜。 | +| `underline` | 给选中文本添加下划线。 | +| `strike` | 添加删除线效果。 | +| `subscript` | 格式化文本为下标。 | +| `superscript` | 格式化文本为上标。 | +| `text-color` | 更改文本颜色。 | +| `background-color` | 更改文本的背景高亮颜色。 | +| `align` | 设置文本对齐方式:左对齐、居中、右对齐或两端对齐。 | +| `indent` | 增加文本块缩进。 | +| `outdent` | 减少段落缩进。 | +| `line-height` | 调整行间距。 | +| `quote` | 格式化文本为引用块。 | +| `bulleted-list` | 创建无序列表。 | +| `numbered-list` | 创建有序列表。 | +| `link` | 插入超链接。 | +| `image` | 插入图片。 | +| `line` | 插入水平线。 | +| `clear` | 清除选中文本的所有格式。 | +| `print` | 打开打印对话框。 | +| `fullscreen` | 切换全屏模式。 | +| `mode` | 切换 [布局模式](api/config/layout-mode.md)（经典/文档）。 | +| `shortcuts` | 显示键盘快捷键列表。 | +| `separator` | 在工具栏组之间添加视觉分隔符。 | + +你可以用这些字符串来配置工具栏按钮，例如: + +~~~jsx {2-7} +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // 其他按钮 + ], + // 其他配置属性 +}); +~~~ + +#### 工具栏中的自定义按钮 + +自定义按钮可以作为对象设置，包含以下选项: + +- `type` - （必需）定义控件类型。选项有 `"button"`、`"richselect"`、`"colorpicker"`。 +- `id` - （可选）唯一控件 ID（不应与已有 ID 冲突）。 +- `label` - （可选）按钮的文本标签（显示在图标旁）。 +- `tooltip` - （可选）鼠标悬停时显示的文本（若未设置，默认为 label）。 +- `css` - （可选）控件的 CSS 类（默认类包括 wx-primary、wx-secondary）。 +- `handler` - （可选）按钮点击时触发的函数。 + +~~~jsx {6-32} +new richtext.Richtext("#root", { + toolbar: [ + // 按钮（字符串仅表示按钮） + "bold", + "italic", + // 预定义按钮（用户不能为这些按钮添加额外选项如标签或提示，只能使用 { type: "button", id: string }） + { + type: "button", + id: "fullscreen", + }, + // 用户必须为预定义控件指定正确的类型（例如 richselect/colorpicker） + // 类型错误的控件将不会被添加 + { + type: "richselect", // 如果写成 type: "button" - 会被忽略 + id: "mode", + }, + // 自定义按钮（仅支持这些选项） + // 目前只允许自定义按钮（不支持 richselect/colorpicker） + { + type: "button", + id: "some", + label: "Some", + handler: () => {/* 自定义逻辑 */} + }, + { + type: "button", + id: "other", + icon: "wxo-help", + label: "Other", + tooltip: "Some tooltip", + handler: () => {/* 自定义逻辑 */} + } + ], + // 其他配置属性 +}); +~~~ + +#### 隐藏工具栏 + +要隐藏工具栏，只需将 `toolbar` 属性设置为 `false`，如下所示: + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false + // 其他配置属性 +}); +~~~ + +### 默认配置 + +~~~jsx +const defaultToolbarButtons = { + "undo", + "redo", + "separator", + "style", + "separator", + "font-family", + "font-size", + "separator", + "bold", + "italic", + "underline", + "strike", + "separator", + "text-color", + "background-color", + "separator", + "align", + "line-height", + "outdent", + "indent", + "separator", + "bulleted-list", + "numbered-list", + "quote", + "separator", + "link", + "image", + "separator", + "clear", + "separator", + "fullscreen", + "mode" +}; +~~~ + +:::tip +默认的工具栏控件随 RichText 组件提供，可以通过 `richtext.defaultToolbarButtons` 访问。 + +```jsx{4} +// 初始化 RichText +new richtext.Richtext("#root", { + toolbar: [ + ...richtext.defaultToolbarButtons, + { + type: "button", + id: "btn1", // 自定义逻辑的唯一按钮 ID + icon: "wxo-help", // 图标，显示在标签旁 + css: "rounded", // 用于样式的 CSS 类（默认支持类：wx-primary, wx-secondary） + label: "Custom button", // 图标旁的按钮标签 + tooltip: "Some tooltip", // 悬停提示（缺省时为标签） + } + ] + // 其他配置属性 +}); +``` +::: + +### 示例 + +~~~jsx {3-18} +// 初始化 RichText +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // 自定义按钮（此处展示所有支持的选项） + // 目前只支持自定义按钮（不支持 richselect/colorpicker） + { + type: "button", + id: "btn1", // 自定义逻辑的唯一按钮 ID + icon: "wxo-help", // 图标，显示在标签旁 + css: "rounded", // 用于样式的 CSS 类（默认支持类：wx-primary, wx-secondary） + label: "Custom button", // 图标旁的按钮标签 + tooltip: "Some tooltip", // 悬停提示（缺省时为标签） + handler: () => ..., // 该按钮的自定义逻辑 + } + ] + // 其他配置属性 +}); +~~~ + +**变更日志:** 此属性在 v2.0 版本引入 + +**相关文档:** [配置](guides/configuration.md) + +**相关示例:** [RichText. 自定义控件和简化工具栏](https://snippet.dhtmlx.com/wda202ih?tag=richtext) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/value.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/value.md new file mode 100644 index 0000000..ac6add3 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/value.md @@ -0,0 +1,36 @@ +--- +sidebar_label: value +title: value 配置 +description: 浏览 DHTMLX JavaScript RichText 库文档中的 value 配置。查看开发者指南、API 参考，尝试代码示例和在线演示，并免费下载 DHTMLX RichText 30 天试用版。 +--- + +# value + +### 描述 + +@short: 可选。定义 RichText 编辑器区域内显示的初始内容。 + +:::tip +如需使用自定义格式设置内容，请使用内置的 [`setValue()`](api/methods/set-value.md) 方法。 +::: + +### 用法 + +~~~jsx {} +value?: string; +~~~ + +### 示例 + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" // 设置默认值（HTML 格式） + // 其他配置属性 +}); +~~~ + +**更新日志:** 此属性从版本 2.0 开始引入 + +**相关文档:** [配置](guides/configuration.md) + +**相关示例:** [RichText. 初始化](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/align.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/align.md new file mode 100644 index 0000000..31cc24d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/align.md @@ -0,0 +1,48 @@ +--- +sidebar_label: align +title: align 事件 +description: 探索 DHTMLX JavaScript RichText 库文档中的 align 事件。查看开发者指南、API 参考，尝试代码示例和在线演示，并免费下载 DHTMLX RichText 30 天试用版。 +--- + +# align + +### 描述 + +@short: 当通过菜单栏/工具栏或事件总线方法更新文本对齐时触发。 + +### 用法 + +~~~jsx {} +"align": ({ + align: "left" | "center" | "right" | "justify" +}) => boolean | void; +~~~ + +### 参数 + +**align** 事件的回调函数接收一个包含以下属性的对象: + +- `align` - 指定文本对齐方式，可选值为 `"left" | "center" | "right" | "justify"` + +:::info +内部事件可以通过 [**Event Bus methods**](api/overview/event_bus_methods_overview.md) 进行处理 +::: + +### 示例 + +~~~jsx {5-12} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 监听 "align" 事件 +editor.api.on("align", (obj) => { + console.log(`Align to: ${obj.align}`); +}); +// 设置文本对齐为左对齐 +editor.api.exec("align", { + align: "left" +}); +~~~ + +**更新日志:** 此事件在版本 2.0 中引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md new file mode 100644 index 0000000..f1fbbd7 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md @@ -0,0 +1,38 @@ +--- +sidebar_label: clear-text-format +title: clear-text-format 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 clear-text-format 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX RichText。 +--- + +# clear-text-format + +### 描述 + +@short: 当通过菜单栏、工具栏或事件总线方法移除文本格式时触发。 + +### 用法 + +~~~jsx {} +"clear-text-format": () => boolean | void; +~~~ + +:::info +要管理内部事件，您可以使用 [**事件总线方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-10} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "clear-text-format" 事件 +editor.api.on("clear-text-format", () => { + console.log("文本格式已被清除"); +}); +// 清除文本格式 +editor.api.exec("clear-text-format", {}); +~~~ + +**更新日志:** 此事件在 v2.0 版本中引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/copy.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/copy.md new file mode 100644 index 0000000..95de5a1 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/copy.md @@ -0,0 +1,36 @@ +--- +sidebar_label: 复制 +title: copy 事件 +description: 探索 DHTMLX JavaScript RichText 库中的 copy 事件文档。访问开发者指南、API 参考，试用在线演示和代码示例，并免费下载 DHTMLX RichText 的 30 天试用版。 +--- + +# copy + +### 描述 + +@short: 当选中文本被复制时触发 + +### 用法 + +~~~jsx {} +"copy": () => boolean | void; +~~~ + +:::info +要处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 监听 "copy" 事件 +editor.api.on("copy", () => { + console.log("选中的文本已被复制"); +}); +~~~ + +**更新日志:** 此事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/create-new.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/create-new.md new file mode 100644 index 0000000..424f67f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/create-new.md @@ -0,0 +1,44 @@ +--- +sidebar_label: create-new +title: create-new 事件 +description: 了解 DHTMLX JavaScript RichText 库中 create-new 事件的工作原理。探索开发者指南、API 参考，试用代码示例和在线演示，并获取 DHTMLX RichText 的免费 30 天试用。 +--- + +# create-new + +### 描述 + +@short: 当从菜单栏选择"新建"选项或通过事件总线方法触发时，会触发此事件。 + +### 用法 + +~~~jsx {} +"create-new": ({ reset?: boolean }) => boolean | void; +~~~ + +### 参数 + +**create-new** 事件的回调函数接受一个包含以下属性的对象: + +- `reset` - 指示在创建新文件时是否应重置历史记录。 + +:::info +要管理内部事件，您可以使用 [**事件总线方法**](api/overview/event_bus_methods_overview.md)。 +::: + +### 示例 + +~~~jsx {5-10} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "create-new" 事件 +editor.api.on("create-new", ({ reset }) => { + console.log(`文档已清空。历史记录已${reset ? "" : "未"}重置。`); +}); +// 创建新文件并重置历史记录 +editor.api.exec("create-new", { reset: true }); +~~~ + +**更新日志:** 此事件在 v2.0 版本中引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/cut.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/cut.md new file mode 100644 index 0000000..daf698e --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/cut.md @@ -0,0 +1,36 @@ +--- +sidebar_label: cut +title: cut 事件 +description: 探索 DHTMLX JavaScript RichText 库中的 cut 事件文档。查看开发者指南、API 参考，尝试代码示例和实时演示，并免费下载 DHTMLX RichText 的 30 天试用版。 +--- + +# cut + +### 描述 + +@short: 当选中文本被剪切时触发 + +### 用法 + +~~~jsx {} +"cut": () => boolean | void; +~~~ + +:::info +要管理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)。 +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "cut" 事件 +editor.api.on("cut", () => { + console.log("选中文本已被剪切"); +}); +~~~ + +**更新日志:** 该事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/delete-link.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/delete-link.md new file mode 100644 index 0000000..1d306fd --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/delete-link.md @@ -0,0 +1,36 @@ +--- +sidebar_label: delete-link +title: delete-link 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 delete-link 事件。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# delete-link + +### 描述 + +@short: 每当链接被删除时触发 + +### 用法 + +~~~jsx {} +"delete-link": () => boolean | void; +~~~ + +:::info +要管理内部事件，您可以参考 [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "delete-link" 事件 +editor.api.on("delete-link", () => { + console.log("链接已被删除"); +}); +~~~ + +**更新日志:** 此事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/export.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/export.md new file mode 100644 index 0000000..4f9686b --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/export.md @@ -0,0 +1,59 @@ +--- +sidebar_label: 导出 +title: export 事件 +description: 本节介绍 DHTMLX JavaScript RichText 库中的 export 事件。内容包括开发者指南、API 参考、代码示例、在线演示以及 DHTMLX RichText 的免费 30 天试用。 +--- + +# export + +### 描述 + +@short: 在从菜单栏选择"导出"选项或通过事件总线方法触发后触发。 + +### 用法 + +~~~jsx {} +"export": ({ options: IExportOptions; result?: any }) => boolean | void; + +interface IExportOptions { + format?: "docx" | "pdf"; + url?: string; + download?: boolean; + fileName?: string; +} +~~~ + +### 参数 + +**export** 事件的回调函数接收一个包含以下属性的对象: + +- `format` - 指定文件格式 +- `url` - 用于导出文件的基础 URL +- `download` - 指示在服务器响应后是否自动下载文件。如果设置为 "false"，文件不会自动下载，但可以通过事件对象中的 `result` 属性访问 blob 数据 +- `fileName` - 导出文件的名称 + +:::info +内部事件可以通过[**事件总线方法**](api/overview/event_bus_methods_overview.md)进行管理 +::: + +### 示例 + +~~~jsx {5-15} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 监听 "export" 事件 +editor.api.on("export", (obj) => { + console.log(obj); + console.log("文件已导出"); +}); +// 以 pdf 格式导出内容 +editor.api.exec("export", { + format: "pdf", + download: false, + fileName: "some file" +}); +~~~ + +**更新日志:** 此事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/import.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/import.md new file mode 100644 index 0000000..b88c049 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/import.md @@ -0,0 +1,47 @@ +--- +sidebar_label: 导入 +title: 导入事件 +description: 了解 DHTMLX JavaScript RichText 库中的导入事件。探索开发者指南、API 参考，试用代码示例和在线演示，并免费下载 DHTMLX RichText 30 天试用版。 +--- + +# 导入 + +### 描述 + +@short: 当从菜单栏选择"导入"选项或通过 Event Bus 方法触发时，会触发此事件。 + +### 用法 + +~~~jsx {} +"import": ({ html?: string }) => boolean | void; +~~~ + +### 参数 + +**import** 事件的回调函数接收一个包含以下参数的对象: + +- `html` - 包含 HTML 内容的字符串 + +:::info +要管理内部事件，可以使用[**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-13} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 监听 "import" 事件 +editor.api.on("import", (obj) => { + console.log(obj.html); + console.log("新值已导入"); +}); +// 执行导入操作 +editor.api.exec("import", { + html: "

some value

" // 内部调用 setValue +}); +~~~ + +**更新日志:** 此事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/indent.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/indent.md new file mode 100644 index 0000000..32709ba --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/indent.md @@ -0,0 +1,43 @@ +--- +sidebar_label: 缩进 +title: indent 事件 +description: 探索 DHTMLX JavaScript RichText 库文档中的 indent 事件。查看开发者指南、API 参考、代码示例、实时演示，并免费下载 30 天试用版的 DHTMLX RichText。 +--- + +# indent + +### 描述 + +@short: 当块缩进增加时触发 + +### 用法 + +~~~jsx {} +"indent": ({ step: number }) => boolean | void; +~~~ + +### 参数 + +**indent** 事件的回调函数接收一个包含以下属性的对象: + +- `step` - 缩进增加的数量 + +:::info +要管理内部事件，可以参考 [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "indent" 事件 +editor.api.on("indent", (obj) => { + console.log(obj); + console.log("缩进已增加"); +}); +~~~ + +**更新日志:** 此事件在版本 2.0 中引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-image.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-image.md new file mode 100644 index 0000000..274f425 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-image.md @@ -0,0 +1,50 @@ +--- +sidebar_label: insert-image +title: insert-image 事件 +description: 探索 DHTMLX JavaScript RichText 库文档中的 insert-image 事件。查看开发者指南、API 参考，尝试代码示例和在线演示，并免费下载 30 天试用版 DHTMLX RichText。 +--- + +# insert-image + +### 描述 + +@short: 当插入图片时触发 + +### 用法 + +~~~jsx {} +"insert-image": (IImageContext) => boolean | void; + +interface IImageContext { + id: TID; + value: string; + width: number; + height: number; + // 来自上传器上下文的额外属性，实际操作不必需 + name?: string; + file?: File; + status?: string; + selected: (ctx: IImageContext) => void; + uploaded: (ctx: IImageContext) => void; +} +~~~ + +:::info +要管理内部事件，可以参考 [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 监听 "insert-image" 事件 +editor.api.on("insert-image", (obj) => { + console.log(obj); + console.log("图片已插入"); +}); +~~~ + +**更新日志:** 此事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-line.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-line.md new file mode 100644 index 0000000..64befeb --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-line.md @@ -0,0 +1,36 @@ +--- +sidebar_label: insert-line +title: insert-line 事件 +description: 查找有关 DHTMLX JavaScript RichText 库中 insert-line 事件的详细信息。浏览开发者指南、API 参考，试用示例和在线演示，并免费下载 DHTMLX RichText 30 天试用版。 +--- + +# insert-line + +### 描述 + +@short: 当插入水平线时触发 + +### 用法 + +~~~jsx {} +"insert-line": () => boolean | void; +~~~ + +:::info +要使用内部事件，可以使用[**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 监听 "insert-line" 事件 +editor.api.on("insert-line", () => { + console.log("已插入水平线"); +}); +~~~ + +**更新日志:** 此事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-link.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-link.md new file mode 100644 index 0000000..bd048fb --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-link.md @@ -0,0 +1,43 @@ +--- +sidebar_label: insert-link +title: insert-link 事件 +description: 探索 DHTMLX JavaScript RichText 库文档中的 insert-link 事件。查看开发者指南、API 参考，尝试示例代码和在线演示，并免费下载 30 天试用版的 DHTMLX RichText。 +--- + +# insert-link + +### 描述 + +@short: 当插入链接时触发 + +### 用法 + +~~~jsx {} +"insert-link": ({ url: string }) => boolean | void; +~~~ + +### 参数 + +**update-link** 事件的回调函数接收一个包含以下参数的对象: + +- `url` - 被插入的链接地址 + +:::info +要管理内部事件，您可以使用 [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 监听 "insert-link" 事件 +editor.api.on("insert-link", (obj) => { + console.log(obj) + console.log("插入的链接为: " + obj.url); +}); +~~~ + +**更新日志:** 此事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-list.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-list.md new file mode 100644 index 0000000..ef61806 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-list.md @@ -0,0 +1,47 @@ +--- +sidebar_label: insert-list +title: insert-list 事件 +description: 探索 DHTMLX JavaScript RichText 库文档中的 insert-list 事件。查看开发者指南、API 参考，尝试代码示例和在线演示，并获得 DHTMLX RichText 的免费 30 天试用。 +--- + +# insert-list + +### 描述 + +@short: 当插入列表时触发 + +### 用法 + +~~~jsx {} +"insert-list": ({ type: TListType }) => boolean | void; + +type TListType = "bulleted" | "numbered"; +~~~ + +### 参数 + +**insert-list** 事件的回调函数接收一个包含以下参数的对象: + +- `type` - 指示插入的列表类型。可能的值为: + - `"bulleted"` - 项目符号列表 + - `"numbered"` - 编号列表 + +:::info +要管理内部事件，可以参考 [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 监听 "insert-list" 事件 +editor.api.on("insert-list", (obj) => { + console.log(obj.type); + console.log("列表已插入"); +}); +~~~ + +**更新日志:** 此事件自版本 2.0 引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/outdent.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/outdent.md new file mode 100644 index 0000000..4c41bb6 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/outdent.md @@ -0,0 +1,43 @@ +--- +sidebar_label: 减少缩进 +title: outdent 事件 +description: 探索 DHTMLX JavaScript RichText 库中的 outdent 事件文档。查看开发者指南、API 参考、代码示例、在线演示，并免费下载 DHTMLX RichText 30 天试用版。 +--- + +# outdent + +### 描述 + +@short: 当块级缩进减少时触发 + +### 用法 + +~~~jsx {} +"outdent": ({ step: number }) => boolean | void; +~~~ + +### 参数 + +**outdent** 事件的回调函数接收一个包含以下内容的对象: + +- `step` - 缩进减少的数量 + +:::info +要使用内部事件，可以参考 [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 监听 "outdent" 事件 +editor.api.on("outdent", (obj) => { + console.log(obj); + console.log("缩进已减少"); +}); +~~~ + +**更新日志:** 该事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/paste.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/paste.md new file mode 100644 index 0000000..bfa53a2 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/paste.md @@ -0,0 +1,36 @@ +--- +sidebar_label: 粘贴 +title: paste 事件 +description: 浏览 DHTMLX JavaScript RichText 库文档中的 paste 事件。访问开发者指南、API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天试用版。 +--- + +# paste + +### 描述 + +@short: 当内容被粘贴时触发 + +### 用法 + +~~~jsx {} +"paste": () => boolean | void; +~~~ + +:::info +要管理内部事件，请参考 [**事件总线方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "paste" 事件 +editor.api.on("paste", () => { + console.log("内容已被粘贴"); +}); +~~~ + +**更新日志:** 该事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/print.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/print.md new file mode 100644 index 0000000..e50edc8 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/print.md @@ -0,0 +1,36 @@ +--- +sidebar_label: print +title: print 事件 +description: 探索 DHTMLX JavaScript RichText 库中的 print 事件文档。查看开发者指南、API 参考，尝试代码示例和在线演示，并获取 DHTMLX RichText 的免费 30 天试用。 +--- + +# print + +### 描述 + +@short: 当文档开始打印时触发 + +### 用法 + +~~~jsx {} +"print": () => boolean | void; +~~~ + +:::info +如需管理内部事件，请参阅 [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { +// 配置属性 +}); +// 监听 "print" 事件 +editor.api.on("print", () => { + console.log("文档正在打印"); +}); +~~~ + +**更新日志:** 此事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/redo.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/redo.md new file mode 100644 index 0000000..78ccc82 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/redo.md @@ -0,0 +1,36 @@ +--- +sidebar_label: 重做 +title: redo 事件 +description: 探索 DHTMLX JavaScript RichText 库文档中的 redo 事件。查看开发者指南、API 参考、代码示例、在线演示，并免费下载 DHTMLX RichText 30 天试用版。 +--- + +# redo + +### 描述 + +@short: 当在菜单栏/工具栏中点击"重做"按钮或通过 Event Bus 方法激活时触发。 + +### 用法 + +~~~jsx {} +"redo": () => boolean | void; +~~~ + +:::info +要管理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "redo" 事件 +editor.api.on("redo", () => { + console.log("执行了重做操作"); +}); +~~~ + +**更新日志:** 此事件在版本 2.0 中引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/resize-image.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/resize-image.md new file mode 100644 index 0000000..7aeb6c6 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/resize-image.md @@ -0,0 +1,45 @@ +--- +sidebar_label: resize-image +title: resize-image 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 resize-image 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# resize-image + +### 描述 + +@short: 当图像被调整大小时触发 + +### 用法 + +~~~jsx {} +"resize-image": ({ id: number, width: number, height: number }) => boolean | void; +~~~ + +### 参数 + +**resize-image** 事件的回调函数接收一个包含以下属性的对象: + +- `id` - 图像的唯一标识符 +- `width` - 图像的新宽度 +- `height` - 图像的新高度 + +:::info +要处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { +// 配置属性 +}); +// 监听 "resize-image" 事件 +editor.api.on("resize-image", (obj) => { + console.log(obj); + console.log("图像已被调整大小") +}); +~~~ + +**更新日志:** 此事件在 v2.0 版本中引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-font-family.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-font-family.md new file mode 100644 index 0000000..dc7425d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-font-family.md @@ -0,0 +1,47 @@ +--- +sidebar_label: set-font-family +title: set-font-family 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 set-font-family 事件。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX RichText 的免费 30 天试用版本。 +--- + +# set-font-family + +### 描述 + +@short: 当设置字体系列时触发 + +### 用法 + +~~~jsx {} +"set-font-family": ({ fontFamily: string }) => boolean | void; +~~~ + +### 参数 + +**set-font-family** 事件的回调函数接收一个包含以下参数的对象: + +- `fontFamily` - 要应用的字体系列。可用选项包括:`"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"` + +:::info +要处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-13} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 监听 "set-font-family" 事件 +editor.api.on("set-font-family", (obj) => { + console.log(obj.fontFamily); + console.log("字体系列已更改"); +}); +// 设置新的字体系列 +editor.api.exec("set-font-family", { + fontFamily: "Roboto" +}); +~~~ + +**更新日志:** 此事件在 v2.0 中引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-font-size.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-font-size.md new file mode 100644 index 0000000..5fe67aa --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-font-size.md @@ -0,0 +1,47 @@ +--- +sidebar_label: 设置字体大小 +title: set-font-size 事件 +description: 探索 DHTMLX JavaScript RichText 库文档中的 set-font-size 事件。查看开发者指南、API 参考，试用演示，并免费下载 DHTMLX RichText 30 天免费试用版。 +--- + +# set-font-size + +### 描述 + +@short: 当设置字体大小时触发 + +### 用法 + +~~~jsx {} +"set-font-size": ({ fontSize: string }) => boolean | void; +~~~ + +### 参数 + +**set-font-size** 事件的回调函数接收一个包含以下参数的对象: + +- `fontSize` - 要应用的字体大小 + +:::info +要管理内部事件，可以参考 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-13} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 监听 "set-font-size" 事件 +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); + console.log("字体大小已更改"); +}); +// 设置新的字体大小 +editor.api.exec("set-font-size", { + fontSize: "11px" +}); +~~~ + +**更新日志:** 此事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-line-height.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-line-height.md new file mode 100644 index 0000000..f76cd48 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-line-height.md @@ -0,0 +1,47 @@ +--- +sidebar_label: set-line-height +title: set-line-height 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 set-line-height 事件。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天试用版。 +--- + +# set-line-height + +### 描述 + +@short: 每当设置行高时触发 + +### 用法 + +~~~jsx {} +"set-line-height": ({ lineHeight: string }) => boolean | void; +~~~ + +### 参数 + +**set-line-height** 事件的回调函数接收一个包含以下参数的对象: + +- `lineHeight` - 当前设置的行高值 + +:::info +要管理内部事件，您可以参考[**事件总线方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-13} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 监听 "set-line-height" 事件 +editor.api.on("set-line-height", (obj) => { + console.log(obj); + console.log("行高已更改"); +}); +// 设置新的行高 +editor.api.exec("set-line-height", { + lineHeight: "15px" +}); +~~~ + +**更新日志:** 该事件在 v2.0 版本中引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-color.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-color.md new file mode 100644 index 0000000..8bc6e8d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-color.md @@ -0,0 +1,54 @@ +--- +sidebar_label: set-text-color +title: set-text-color 事件 +description: 探索 DHTMLX JavaScript RichText 库文档中的 set-text-color 事件。查找开发者指南、API 参考、代码示例、在线演示，并获取 DHTMLX RichText 的免费 30 天试用。 +--- + +# set-text-color + +### 描述 + +@short: 当应用文本颜色和/或背景颜色时触发 + +### 用法 + +~~~jsx {} +"set-text-color": (ITextColor) => boolean | void; + +interface ITextColor { + color?: string; + background?: string; +} +~~~ + +### 参数 + +**set-text-color** 事件的回调函数接收一个包含以下属性的对象: + +- `color` - 文本颜色 +- `background` - 文本背景颜色 + +:::info +要管理内部事件，可以参考 [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-14} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 监听 "set-text-color" 事件 +editor.api.on("set-text-color", (obj) => { + console.log(obj); + console.log("文本颜色和/或背景颜色已更新"); +}); +// 设置文本颜色和背景 +editor.api.exec("set-text-color", { + color: "red", + background: "blue" +}); +~~~ + +**更新日志:** 本事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-format.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-format.md new file mode 100644 index 0000000..61fa9c2 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-format.md @@ -0,0 +1,58 @@ +--- +sidebar_label: set-text-format +title: set-text-format 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 set-text-format 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# set-text-format + +### 描述 + +@short: 当应用文本格式时触发 + +### 用法 + +~~~jsx {} +"set-text-format": (ITextFormat) => boolean | void; + +interface ITextFormat { + bold?: boolean; + italic?: boolean; + strike?: boolean; + underline?: boolean; +} +~~~ + +:::info +要管理内部事件，您可以参考 [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### 参数 + +**set-text-format** 事件的回调函数接收一个包含以下可选属性的对象: + +- `bold` - 表示加粗文本格式 +- `italic` - 表示斜体文本格式 +- `strike` - 表示删除线文本格式 +- `underline` - 表示下划线文本格式 + +### 示例 + +~~~jsx {5-14} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 监听 "set-text-format" 事件 +editor.api.on("set-text-format", (obj) => { + console.log(obj); + console.log("文本格式已更改"); +}); +// 应用斜体和加粗格式 +editor.api.exec("set-text-format", { + italic: true, + bold: true +}); +~~~ + +**更新日志:** 此事件自版本 2.0 引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-style.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-style.md new file mode 100644 index 0000000..927759a --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-style.md @@ -0,0 +1,49 @@ +--- +sidebar_label: set-text-style +title: set-text-style 事件 +description: 探索 DHTMLX JavaScript RichText 库中的 set-text-style 事件文档。查看开发者指南、API 参考，试用代码示例和在线演示，并免费下载 DHTMLX RichText 30 天试用版。 +--- + +# set-text-style + +### 描述 + +@short: 当应用文本样式时触发 + +### 用法 + +~~~jsx {} +"set-text-style": ({ tag: TBlockType }) => boolean | void; + +type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; +~~~ + +### 参数 + +**set-text-style** 事件的回调函数接收一个包含以下属性的对象: + +- `tag` - 指定正在应用的文本样式 + +:::info +要管理内部事件，您可以参考 [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-13} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 监听 "set-text-style" 事件 +editor.api.on("set-text-style", (obj) => { + console.log(obj.tag); + console.log("文本样式已更新"); +}); +// 更改文本样式 +editor.api.exec("set-text-style", { + tag: "blockquote" +}); +~~~ + +**更新日志:** 此事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/show-popup.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/show-popup.md new file mode 100644 index 0000000..25b200d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/show-popup.md @@ -0,0 +1,53 @@ +--- +sidebar_label: show-popup +title: show-popup 事件 +description: 探索 DHTMLX JavaScript RichText 库文档中的 show-popup 事件。查看开发者指南、API 参考，尝试代码示例、实时演示，并免费下载 DHTMLX RichText 的 30 天试用版。 +--- + +# show-popup + +### 描述 + +@short: 当弹出窗口显示或隐藏时触发 + +### 用法 + +~~~jsx {} +"show-popup": (IPopupConfig) => boolean | void; + +interface IPopupConfig { + type: "link" | null; + image?: boolean; +} +~~~ + +### 参数 + +**show-popup** 事件的回调函数接收一个包含以下属性的对象: + +- `type` - 指定弹出窗口的类型 +- `image` - 表示当前光标是否位于图片上方 + +:::info +要管理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-13} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "show-popup" 事件 +editor.api.on("show-popup", (obj) => { + console.log(obj); + console.log("弹出窗口已显示/隐藏"); +}); +// 在左侧显示链接类型的弹出窗口 +editor.api.exec("show-popup", { + type: "link" +}); +~~~ + +**更新日志:** 此事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/subscript.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/subscript.md new file mode 100644 index 0000000..5bfb7c6 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/subscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: 下标 +title: subscript 事件 +description: 探索 DHTMLX JavaScript RichText 库中的 subscript 事件。查看开发者指南、API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天试用版。 +--- + +# subscript + +### 描述 + +@short: 当在菜单栏/工具栏中点击"下标"按钮或通过事件总线方法调用时触发 + +### 用法 + +~~~jsx {} +"subscript": () => boolean | void; +~~~ + +:::info +要处理内部事件，可以使用 [**事件总线方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-10} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 监听 "subscript" 事件 +editor.api.on("subscript", () => { + console.log("已应用下标"); +}); +// 执行 "subscript" 事件 +editor.api.exec("subscript", {}); +~~~ + +**更新日志:** 此事件在 v2.0 中引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/superscript.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/superscript.md new file mode 100644 index 0000000..9996849 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/superscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: 上标 +title: superscript 事件 +description: 探索 DHTMLX JavaScript RichText 库中的 superscript 事件文档。查看开发者指南、API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的免费30天试用版。 +--- + +# superscript + +### 描述 + +@short: 当菜单栏或工具栏中的"上标"按钮被点击，或通过事件总线方法激活时，会触发此事件。 + +### 用法 + +~~~jsx {} +"superscript": () => boolean | void; +~~~ + +:::info +有关管理内部事件的信息，请参阅 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)。 +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "superscript" 事件 +editor.api.on("superscript", () => { + console.log("已应用上标"); +}); +// 触发 "superscript" 事件 +editor.api.exec("superscript", {}); +~~~ + +**更新日志:** 此事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md new file mode 100644 index 0000000..c2d3c34 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md @@ -0,0 +1,45 @@ +--- +sidebar_label: toggle-fullscreen-mode +title: toggle-fullscreen-mode 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 toggle-fullscreen-mode 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并免费下载 DHTMLX RichText 的 30 天评估版本。 +--- + +# toggle-fullscreen-mode + +### 描述 + +@short: 当切换全屏模式开关时触发 + +### 用法 + +~~~jsx {} +"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void; +~~~ + +### 参数 + +**toggle-fullscreen-mode** 事件的回调函数接受一个包含以下属性的对象: + +- `mode` - 指示是否启用了全屏模式 + +:::info +要管理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "toggle-fullscreen-mode" 事件 +editor.api.on("toggle-fullscreen-mode", (obj) => { + console.log(obj); + console.log("全屏模式已更改"); +}); +// 启用全屏模式 +editor.api.exec("toggle-fullscreen-mode", { mode: true }); +~~~ + +**更新日志:** 该事件在 v2.0 版本中引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md new file mode 100644 index 0000000..c4998b9 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md @@ -0,0 +1,45 @@ +--- +sidebar_label: toggle-layout-mode +title: toggle-layout-mode 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 toggle-layout-mode 事件。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天试用版。 +--- + +# toggle-layout-mode + +### 描述 + +@short: 每当布局模式切换时触发 + +### 用法 + +~~~jsx {} +"toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void; +~~~ + +### 参数 + +**toggle-layout-mode** 事件的回调函数接收一个包含以下参数的对象: + +- `mode` - 指示布局模式。可用选项为:`"classic" | "document"` + +:::info +要处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-11} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "toggle-layout-mode" 事件 +editor.api.on("toggle-layout-mode", (obj) => { + console.log(obj); + console.log("布局模式已更改"); +}); +// 设置为 "document" 布局模式 +editor.api.exec("toggle-layout-mode", { mode: "document" }); +~~~ + +**更新日志:** 该事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md new file mode 100644 index 0000000..92eeb7a --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md @@ -0,0 +1,45 @@ +--- +sidebar_label: toggle-shortcut-info +title: toggle-shortcut-info 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 toggle-shortcut-info 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# toggle-shortcut-info + +### 描述 + +@short: 当快捷键信息切换时触发 + +### 用法 + +~~~jsx {} +"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void; +~~~ + +### 参数 + +**toggle-shortcut-info** 事件的回调函数接收一个包含以下属性的对象: + +- `mode` - 控制快捷键信息的显示；`true` 显示快捷键信息弹窗，`false` 隐藏它 + +:::info +要管理内部事件，您可以参考 [**事件总线方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "toggle-shortcut-info" 事件 +editor.api.on("toggle-shortcut-info", (obj) => { + console.log(obj); + console.log("快捷键信息已显示"); +}); +// 启用快捷键信息 +editor.api.exec("toggle-shortcut-info", { mode: true }); +~~~ + +**更新日志:** 该事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/undo.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/undo.md new file mode 100644 index 0000000..cbb2cf0 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/undo.md @@ -0,0 +1,36 @@ +--- +sidebar_label: undo +title: undo 事件 +description: 探索 DHTMLX JavaScript RichText 库中的 undo 事件。查看开发者指南、API 参考，尝试代码示例和在线演示，并免费下载 30 天试用版的 DHTMLX RichText。 +--- + +# undo + +### 描述 + +@short: 当在菜单栏/工具栏中点击"撤销"按钮或通过 Event Bus 方法激活时触发。 + +### 用法 + +~~~jsx {} +"undo": () => boolean | void; +~~~ + +:::info +内部事件可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) 进行管理 +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 监听 "undo" 事件 +editor.api.on("undo", () => { + console.log("执行了撤销操作"); +}); +~~~ + +**更新日志:** 此事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/update-link.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/update-link.md new file mode 100644 index 0000000..8260b8f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/update-link.md @@ -0,0 +1,44 @@ +--- +sidebar_label: update-link +title: update-link 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 update-link 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版。 +--- + +# update-link + +### 描述 + +@short: 当链接被更新时触发 + +### 用法 + +~~~jsx {} +"update-link": ({ id: number, url: string }) => boolean | void; +~~~ + +### 参数 + +**update-link** 事件的回调函数接收一个包含以下属性的对象: + +- `id` - 链接的标识符 +- `url` - 更新后的链接地址 + +:::info +要管理内部事件，您可以参考[**事件总线方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "update-link" 事件 +editor.api.on("update-link", (obj) => { + console.log(obj); + console.log("以下链接已被更新:" + obj.url); +}); +~~~ + +**更新日志:** 此事件自 v2.0 版本引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/detach.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/detach.md new file mode 100644 index 0000000..0fc652b --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/detach.md @@ -0,0 +1,44 @@ +--- +sidebar_label: api.detach() +title: on 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 on 方法。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX RichText。 +--- + +# api.detach() + +### 描述 + +@short: 允许移除或分离事件处理程序 + +### 用法 + +~~~jsx {} +api.detach( tag: string ): void; +~~~ + +### 参数 + +- `tag` - （必需）指定操作标签的名称 + +### 事件 + +:::info +RichText 内部事件的完整列表请参见 [**这里**](api/overview/events_overview.md) +::: + +### 示例 + +~~~jsx {6-8,10} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); + +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}, { tag: "track" }); + +editor.api.detach("track"); +~~~ + +**更新日志:** 该方法在 v2.0 中进行了更新，移除了 `name` 和 `context` 参数 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/exec.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/exec.md new file mode 100644 index 0000000..8f23fbe --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/exec.md @@ -0,0 +1,46 @@ +--- +sidebar_label: api.exec() +title: exec 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 exec 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天试用版。 +--- + +# api.exec() + +### 描述 + +@short: 此方法用于触发编辑器内部事件。 + +### 用法 + +~~~jsx {} +api.exec( + event: string, + config: object +): void; +~~~ + +### 参数 + +- `event` - （必需）要触发的事件名称 +- `config` - （必需）包含触发事件参数的对象 + +### 事件 + +:::info +您可以在[**这里**](api/overview/events_overview.md)找到完整的 RichText 内部事件列表 +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 应用字体大小到文本 +editor.api.exec("set-font-size", { + fontSize: "16px" +}); +~~~ + +**更新日志:** 此方法首次引入于 v2.0 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md new file mode 100644 index 0000000..3948959 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.getReactiveState() +title: getReactiveState 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 getReactiveState 方法。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并免费下载 DHTMLX RichText 的 30 天试用版。 +--- + +# api.getReactiveState() + +### 描述 + +@short: 提供一个包含 RichText 响应式属性的对象。 + +### 用法 + +~~~jsx {} +api.getReactiveState(): object; +~~~ + +### 返回值 + +该方法返回一个包含以下属性的对象: + +~~~jsx {} +{ + cursorState: { subscribe: any }, + defaultStyles {...}, + document {...}, + fullscreen {...}, + history {...}, + layoutMode {...}, + popup {...}, + selection {...} +} +~~~ + +### 示例 + +~~~jsx {5-7} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 获取 RichText 的响应式状态 +const reactive_state = editor.api.getReactiveState(); +console.log(reactive_state) +~~~ + +**更新日志:** 此方法自版本 2.0 起引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/get-state.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/get-state.md new file mode 100644 index 0000000..6d94e9c --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/get-state.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.getState() +title: getState 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 getState 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并免费下载 30 天评估版的 DHTMLX RichText。 +--- + +# api.getState() + +### 描述 + +@short: 提供一个包含 RichText 当前 StateStore 属性的对象。 + +### 用法 + +~~~jsx {} +api.getState(): object; +~~~ + +### 返回值 + +该方法返回一个包含以下属性的对象: + +~~~jsx {} +{ + cursorState: {}, + defaultStyles: {}, + document: {}, + fullscreen: boolean, + history: [] + layoutMode: string, + popup: any, + selection: {} +} +~~~ + +### 示例 + +~~~jsx {5-7} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 获取 RichText 的当前状态 +const state = editor.api.getState(); +console.log(state); +~~~ + +**更新日志:** 该方法自 v2.0 版本起添加 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/intercept.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/intercept.md new file mode 100644 index 0000000..182673e --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/intercept.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.intercept() +title: intercept 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 intercept 方法。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天试用版。 +--- + +# api.intercept() + +### 描述 + +@short: 提供一种方式来捕获并阻止内部事件在继续执行之前发生。 + +### 用法 + +~~~jsx {} +api.intercept( + event: string, + callback: function +): void; +~~~ + +### 参数 + +- `event` - （必需）要拦截的事件名称 +- `callback` - （必需）事件发生时执行的函数（参数根据具体事件而定） + +### 事件 + +:::info +您可以在[**这里**](api/overview/events_overview.md)找到 RichText 内部事件的完整列表 +::: + +### 示例 + +~~~jsx {5-10} +// 创建 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 除了设置为 "36px" 外，阻止更改字体大小 +editor.api.intercept("set-font-size", (obj) => { + if(obj.fontSize !== "36px" ){ + return false; + } +}); +~~~ + +**更新日志:** 此方法自 v2.0 版本起添加 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/on.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/on.md new file mode 100644 index 0000000..0485290 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/on.md @@ -0,0 +1,46 @@ +--- +sidebar_label: api.on() +title: on 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 on 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天试用版。 +--- + +# api.on() + +### 描述 + +@short: 允许您为内部事件附加处理程序 + +### 用法 + +~~~jsx {} +api.on( + event: string, + handler: function +): void; +~~~ + +### 参数 + +- `event` - （必填）触发处理程序的事件名称 +- `handler` - （必填）事件触发时调用的函数（参数取决于具体事件） + +### 事件 + +:::info +您可以在[**这里**](api/overview/events_overview.md)找到完整的 RichText 内部事件列表 +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 监听 "set-font-size" 事件 +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}); +~~~ + +**更新日志:** 此方法在 v2.0 版本中进行了更新，移除了 `context` 参数 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/set-next.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/set-next.md new file mode 100644 index 0000000..ffb8b8f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/set-next.md @@ -0,0 +1,40 @@ +--- +sidebar_label: api.setNext() +title: setNext 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 setNext 方法。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# api.setNext() + +### 描述 + +@short: 此方法允许您将一个操作添加到事件总线（Event Bus）序列中。 + +### 用法 + +~~~jsx {} +api.setNext(next: any): void; +~~~ + +### 参数 + +- `next` - （必填）要添加到**事件总线**序列中的操作 + +### 示例 + +~~~jsx {10-11} +const server = "https://some-backend-url"; +// 假设您有一个名为 someServerService 的自定义服务器服务类 +const someServerService = new ServerDataService(server); + +fetch(server + "/data").then((res) => res.json()).then((data) => { + const editor = new richtext.Richtext("#root", { + value: data + }); + + // 将 someServerService 添加到组件的事件总线序列中 + editor.api.setNext(someServerService); +}); +~~~ + +**更新日志:** 此方法自 v2.0 版本起新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/destructor.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/destructor.md new file mode 100644 index 0000000..85c40a7 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/destructor.md @@ -0,0 +1,28 @@ +--- +sidebar_label: destructor() +title: destructor 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 destructor 方法。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天试用版。 +--- + +# destructor() + +### 描述 + +@short: 清除 RichText 组件的所有 HTML 元素并解除所有关联的事件。 + +### 用法 + +~~~jsx {} +destructor(): void; +~~~ + +### 示例 + +~~~jsx {5-6} +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); + +// 移除 RichText +editor.destructor(); +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/get-value.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/get-value.md new file mode 100644 index 0000000..611c533 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/get-value.md @@ -0,0 +1,43 @@ +--- +sidebar_label: getValue() +title: getValue 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 getValue 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载免费 30 天评估版本的 DHTMLX RichText。 +--- + +# getValue() + +### 描述 + +@short: 获取 RichText 编辑器当前的值 + +### 用法 + +~~~jsx {} +getValue(encoder?: any): string; +~~~ + +### 参数 + +- `encoder` - （可选）用于将 RichText 内容转换为特定格式的解析器。可用选项包括 `html`（默认）和 `text` + +要获取所需的编码器，请使用以下代码: + +```jsx +const toTextEncoder = richtext.text.toText; // 文本编码器 +const toHTMLEncoder = richtext.html.toHTML; // HTML 编码器 +``` + +### 示例 + +~~~jsx {6-8} +const editor = new richtext.Richtext("#root", { + value: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." // 设置默认值（HTML 格式） + // 其他配置属性 +}); + +const toTextEncoder = richtext.text.toText; +const editor_value = editor.getValue(toTextEncoder); +console.log(editor_value); +~~~ + +**更新日志:** 此方法在 v2.0 版本中进行了更新。移除了 `mode` 参数，新增了 `encoder` 参数 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-config.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-config.md new file mode 100644 index 0000000..fcd84f6 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-config.md @@ -0,0 +1,40 @@ +--- +sidebar_label: setConfig() +title: setConfig 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 setConfig 方法。浏览开发者指南和 API 参考，尝试代码示例和实时演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# setConfig() + +### 描述 + +@short: 使用新的配置设置更新 RichText 编辑器。 + +### 用法 + +~~~jsx {} +setConfig(config: { [key:any]: any }): void; +~~~ + +### 参数 + +- `config` - （必需）包含 RichText 配置选项的对象。完整属性列表请查看 [这里](api/overview/properties_overview.md) + +:::note +使用 `setConfig()` 方法时，任何之前设置但未包含在此次调用中的参数将保持不变。 +::: + +### 示例 + +~~~jsx {6-8} +const editor = new richtext.Richtext("#root", { + value: "

Some text

", + // 其他配置属性 +}); + +editor.setConfig({ + layoutMode: "document" +}); +~~~ + +**更新日志:** 此方法在 v2.0 中引入 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-locale.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-locale.md new file mode 100644 index 0000000..bd228e3 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-locale.md @@ -0,0 +1,41 @@ +--- +sidebar_label: setLocale() +title: setLocale 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 setLocale 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 免费的 30 天评估版本。 +--- + +# setLocale() + +### 描述 + +@short: 更新 RichText 的本地化设置 + +### 用法 + +~~~jsx {} +setLocale(null | locale?: object): void; +~~~ + +### 参数 + +- `null` - （可选）切换回默认语言环境（*英语*） +- `locale` - （可选）包含要应用的新语言环境数据的对象 + +:::info +`setLocale()` 方法用于更新 RichText 使用的语言环境。调用该方法时不传入任何参数（或传入 *null*）将会恢复为默认设置。 +::: + +### 示例 + +~~~jsx {5-6} +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); + +// 将 RichText 的语言环境设置为 "de" +editor.setLocale(de); +~~~ + +**更新日志:** 该方法自 v2.0 版本引入 + +**相关文档:** [Localization](guides/localization.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-value.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-value.md new file mode 100644 index 0000000..ed46484 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-value.md @@ -0,0 +1,44 @@ +--- +sidebar_label: setValue() +title: setValue 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 setValue 方法。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天试用版。 +--- + +# setValue() + +### 描述 + +@short: 使用新值更新 RichText 内容 + +### 用法 + +~~~jsx {} +setValue: (value: string, encoder?: any): void; +~~~ + +### 参数 + +- `value` - （必填）要插入到 RichText 中的内容 +- `encoder` - （可选）用于将 RichText 内容编码为特定格式的自定义解析器。可用格式包括:`html`（默认）和 `text` + +您可以通过以下方式获取所需的编码器: + +```jsx +const fromTextEncoder = richtext.text.fromText; // text 编码器 +const fromHTMLEncoder = richtext.html.fromHTML; // html 编码器 +``` + +### 示例 + +~~~jsx {7-8} +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); + +const editor_value = "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." + +const fromTextEncoder = richtext.text.fromText; +editor.setValue(editor_value, fromTextEncoder); +~~~ + +**更新日志:** 该方法在 v2.0 版本中进行了更新。移除了 `mode` 参数，新增了 `encoder` 参数。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md new file mode 100644 index 0000000..83a55ed --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md @@ -0,0 +1,18 @@ +--- +sidebar_label: 事件总线方法 +title: 事件总线方法 +description: 这里是 DHTMLX JavaScript RichText 库中 JavaScript RichText 文档的内部事件总线方法概述。探索开发者指南、API 参考，尝试代码示例和在线演示，并获取 DHTMLX RichText 的免费 30 天试用。 +--- + +# 事件总线方法 + +本节列出了与 DHTMLX RichText 编辑器内部事件总线相关的方法。 +这些方法适用于高级用例，允许通过内部事件系统实现自定义集成和行为。 + +| 名称 | 描述 | +| ------------------------------------------------- | -------------------------------------------- | +| [](../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) | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/events_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/events_overview.md new file mode 100644 index 0000000..937360c --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/events_overview.md @@ -0,0 +1,45 @@ +--- +sidebar_label: 事件总览 +title: 事件总览 +description: 在 DHTMLX JavaScript RichText 编辑器文档中查找完整的事件总览。探索开发者指南、API 参考，试用代码示例和实时演示，并获得 DHTMLX RichText 免费 30 天评估版。 +--- + +# 事件总览 + +这里列出了 DHTMLX RichText 编辑器触发的所有事件。 +这些事件允许您增强功能、监控用户操作或触发自定义响应。 + +| 名称 | 描述 | +| ------------------------------------------------------ | --------------------------------------------- | +| [](../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) | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/main_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/main_overview.md new file mode 100644 index 0000000..a0a8526 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/main_overview.md @@ -0,0 +1,97 @@ +--- +sidebar_label: API 概览 +title: API 概览 +description: 浏览 DHTMLX JavaScript RichText 库文档中的 JavaScript RichText API。访问开发者指南、API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 免费 30 天试用版。 +--- + +# API 概览 + +## RichText 构造函数 + +~~~js +new richtext.RichText("#root", { + // 配置参数 +}); +~~~ + +**参数**: + +- 一个 HTML 容器（例如 CSS 选择器或 DOM 元素） +- 一个配置对象（[参见属性](api/overview/properties_overview.md)） + +## RichText 方法 + +| 名称 | 描述 | +| ----------------------------------------------|---------------------------------------| +| [](../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) | + +## 事件总线方法 + +| 名称 | 描述 | +| ----------------------------------------------|---------------------------------------| +| [](../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) | + +## 状态方法 + +| 名称 | 描述 | +| ----------------------------------------------|---------------------------------------| +| [](../internal/get-state.md) | @getshort(../internal/get-state.md) | +| [](../internal/get-reactive-state.md) | @getshort(../internal/get-reactive-state.md) | + +## 事件 + +| 名称 | 描述 | +| ----------------------------------------------|---------------------------------------| +| [](../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) | + +## 属性 + +| 名称 | 描述 | +| ----------------------------------------------|---------------------------------------| +| [](../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) | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md new file mode 100644 index 0000000..3908ac9 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md @@ -0,0 +1,18 @@ +--- +sidebar_label: 方法概览 +title: 方法概览 +description: 在DHTMLX库文档中查找JavaScript RichText方法的总结。探索开发者指南、API参考，尝试代码示例和实时演示，并免费下载DHTMLX RichText的30天试用版。 +--- + +# 方法概览 + +以下是DHTMLX RichText编辑器中主要方法的简要介绍。 +本指南帮助您清晰了解每个方法的功能，并指引您查看详细描述和示例。 + +| 名称 | 描述 | +| ------------------------------------------------------ | --------------------------------- | +| [](../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) | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md new file mode 100644 index 0000000..6d5824b --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md @@ -0,0 +1,21 @@ +--- +sidebar_label: 属性概览 +title: 属性概览 +description: 浏览 DHTMLX JavaScript RichText 库文档中的 JavaScript RichText 属性概览。查看开发者指南、API 参考、示例代码、在线演示，并获取 DHTMLX RichText 免费 30 天试用。 +--- + +# 属性概览 + +这里列出了配置 DHTMLX RichText 编辑器时可用的所有属性。 +这些选项允许您自定义布局、工具栏、内容、本地化等。 + +| 名称 | 描述 | +| --------------------------------------------------------|----------------------------------------------| +| [](../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) | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md new file mode 100644 index 0000000..f3722a0 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md @@ -0,0 +1,15 @@ +--- +sidebar_label: 状态方法 +title: 状态方法 +description: 探索 DHTMLX JavaScript RichText 库文档中 JavaScript RichText 的内部状态方法概述。查看开发者指南、API 参考，尝试代码示例和实时演示，并下载 DHTMLX RichText 的免费 30 天试用版。 +--- + +# 状态方法 + +这里您可以找到用于访问和管理 DHTMLX RichText 编辑器内部状态的方法。 +这些方法在调试、与响应式框架协作或创建高级自定义功能时非常有用。 + +| 名称 | 描述 | +| ----------------------------------------------------------- | ----------------------------------------- | +| [](../internal/get-reactive-state.md) | @getshort(../internal/get-reactive-state.md) | +| [](../internal/get-state.md) | @getshort(../internal/get-state.md) | diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/configuration.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/configuration.md new file mode 100644 index 0000000..b8792c7 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/configuration.md @@ -0,0 +1,291 @@ +--- +sidebar_label: 配置 +title: 配置 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解配置方法。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版。 +--- + +# 配置 + +RichText 可以通过其 API 按照您的需求进行外观和功能设置。可用的配置选项包括: + +- 通过 [`menubar`](api/config/menubar.md) 属性显示或隐藏 **菜单栏** +- 使用 [`toolbar`](api/config/toolbar.md) 属性配置 **工具栏** +- 通过 [`fullscreenMode`](api/config/fullscreen-mode.md) 属性启用 **全屏模式** +- 使用 [`layoutMode`](api/config/layout-mode.md) 属性在 "classic"（经典）和 "document"（文档）模式间切换 **布局** +- 通过 [`value`](api/config/value.md) 属性设置 **初始值** +- 使用 [`locale`](api/config/locale.md) 属性选择 **初始语言** +- 通过 [`defaultStyles`](api/config/default-styles.md) 属性应用 **初始样式** + +## 布局模式 + +RichText 编辑器提供了两种布局模式，您可以根据内容选择适合的工作环境: + +- **"classic"（经典模式）** + +import classic_mode from '@site/static/img/richtext/classic_mode.png'; + +Classic mode + +- **"document"（文档模式）** + +import document_mode from '@site/static/img/richtext/document_mode.png'; + +Document mode + +要选择模式，只需在初始化组件时在 RichText 配置中设置 [`layoutMode`](api/config/layout-mode.md) 属性: + +~~~jsx +const editor = new richtext.Richtext("#root", { + layoutMode: "document" +}); +~~~ + +## 工具栏 + +RichText 的工具栏由多个控件组组成，您可以根据需求自定义这些控件。 + +### 默认工具栏控件 + +您可以在 RichText 工具栏中使用以下按钮和控件: + +| 按钮 | 描述 | +|---------------------|----------------------------------------------------------------------| +| `undo` | 撤销最近的用户操作 | +| `redo` | 重做已撤销的操作 | +| `style` | 选择文本样式（如标题、段落等） | +| `font-family` | 更改所选文本的字体 | +| `font-size` | 调整所选文本的字号 | +| `bold` | 加粗所选文本 | +| `italic` | 斜体所选文本 | +| `underline` | 给所选文本添加下划线 | +| `strike` | 添加删除线格式 | +| `subscript` | 将文本设置为下标 | +| `superscript` | 将文本设置为上标 | +| `text-color` | 更改文本颜色 | +| `background-color` | 更改文本的背景（高亮）颜色 | +| `align` | 设置文本对齐方式（左、中、右、两端对齐） | +| `indent` | 增加段落缩进 | +| `outdent` | 减少段落缩进 | +| `line-height` | 调整行间距 | +| `quote` | 将文本格式化为引用块 | +| `bulleted-list` | 创建无序列表 | +| `numbered-list` | 创建有序列表 | +| `link` | 插入或编辑超链接 | +| `image` | 插入图片 | +| `line` | 插入水平线 | +| `clear` | 清除所选文本的所有格式 | +| `print` | 打开打印对话框 | +| `fullscreen` | 切换全屏模式 | +| `mode` | 在经典/文档两种视图模式间切换 | +| `shortcuts` | 显示可用快捷键列表 | +| `separator` | 在控件之间添加视觉分隔符 | + +工具栏的布局通过 [`toolbar`](api/config/toolbar.md) 属性设置，该属性是一个包含所需控件名称字符串的数组。 + +~~~jsx {2-36} +new richtext.Richtext("#root", { + toolbar: [ + "undo", + "redo", + "separator", + "style", + "separator", + "font-family", + "font-size", + "separator", + "bold", + "italic", + "underline", + "strike", + "separator", + "text-color", + "background-color", + "separator", + "align", + "line-height", + "outdent", + "indent", + "separator", + "bulleted-list", + "numbered-list", + "quote", + "separator", + "link", + "image", + "separator", + "clear", + "separator", + "fullscreen", + "mode" + // other buttons + ], + // other configuration properties +}); +~~~ + +**相关示例:** [RichText. 自定义控件与简化工具栏](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### 自定义工具栏控件 + +如果您需要添加自定义控件，可以在 [`toolbar`](api/config/toolbar.md) 属性中包含带以下选项的对象: + +- `type` - （必填）设置自定义控件类型。可用类型有:"button"、"richselect"、"colorpicker" +- `id` - （可选）自定义控件 ID（不应与内置控件 ID 冲突） +- `label` - （可选）按钮标签（可配合图标使用） +- `tooltip` - （可选）鼠标悬停时显示的提示（未设置时使用 "label" 的值） +- `css` - （可选）控件的 CSS 类名（默认支持:wx-primary, wx-secondary） +- `handler` - （可选）按钮点击时执行的回调函数 + +~~~jsx {6-32} +new richtext.Richtext("#root", { + toolbar: [ + // 按钮（字符串仅表示按钮） + "bold", + "italic", + // 预定义按钮（用户不能为这些按钮定义其他选项（如 label、tooltip、options 等），仅支持 { type: "button", id: string }） + { + type: "button", + id: "fullscreen", + }, + // 如果想使用预定义控件（如 richselect/colorpicker），用户必须指定正确的 type + // 不匹配的 type 将被忽略（不会添加到工具栏） + { + type: "richselect", // type: "button" - 不正确，将被忽略 + id: "mode", + }, + // 自定义按钮（支持的选项如下） + // 目前仅支持自定义按钮（暂不支持自定义 richselect/colorpicker） + { + type: "button", + id: "some", + label: "Some", + handler: () => {/* custom logic */} + }, + { + type: "button", + id: "other", + icon: "wxo-help", + label: "Other", + tooltip: "Some tooltip", + handler: () => {/* custom logic */} + } + ], + // other configuration properties +}); +~~~ + +**相关示例:** [RichText. 自定义控件与简化工具栏](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### 隐藏工具栏 + +如需隐藏工具栏，只需将 [`toolbar`](api/config/toolbar.md) 属性设置为 `false`： + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false, + // other configuration properties +}); +~~~ + +## 默认样式 + +可以通过 [`defaultStyles`](api/config/default-styles.md) 属性为编辑器中的特定块类型设置默认样式值。 + +~~~jsx {} +defaultStyles?: boolean | { + "*"?: { // 影响所有块，可为所有这些块设置通用属性 + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + p?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + blockquote?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h1?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h2?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h3?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h4?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h5?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h6?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + } +}; +~~~ + +`defaultStyles` 属性实际上并不会为块应用 CSS--它只是设置样式值。您仍需单独添加 CSS 样式: + +```html title="index.html" +
+``` + +```jsx {2-9} title="index.js" +const editor = new richtext.Richtext("#root", { + defaultStyles: { + h2: { + "font-family": "Roboto", + "font-size": "28px", + color: "purple", + background: "#FFC0CB" + } + } +}); +``` + +```css title="index.css" +#root h2 { + font-family: Roboto; + font-size: 28px; + color: purple; + background: #FFC0CB; +} +``` + +在此示例中，所有 `h2` 块都将获得 "Roboto" 字体、28px 字号，以及指定的前景色和背景色。CSS 规则会应用到 `h2` 块上。 + +**相关示例:** [RichText. 更改排版（字体、字号等）的默认值](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/initialization.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/initialization.md new file mode 100644 index 0000000..3819836 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/initialization.md @@ -0,0 +1,63 @@ +--- +sidebar_label: 初始化 +title: 初始化 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解初始化相关内容。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并免费下载 DHTMLX RichText 的 30 天评估版。 +--- + +# 初始化 + +以下是一个简单的操作指南，帮助您在页面上设置 RichText，从而在您的应用中开始使用 RichText 编辑器。只需按照以下步骤即可完成设置: + +1. [在页面中引入 RichText 源文件](#引入源文件)。 +2. [创建 RichText 的容器](#创建容器)。 +3. [使用对象构造函数初始化 RichText](#初始化-richtext)。 + +## 引入源文件 + +首先，[下载软件包](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml)并将其解压到项目文件夹中的某个位置。 + +要使用 RichText，请将以下两个文件添加到您的页面中: + +- *richtext.js* +- *richtext.css* + +请确保使用您存放这些文件的正确路径: + +~~~html title="index.html" + + +~~~ + +## 创建容器 + +接下来，为 RichText 设置一个容器。为其指定一个 ID，例如 *"root"*: + +~~~jsx title="index.html" +
+~~~ + +## 初始化 RichText + +现在，使用 `richtext.Richtext` 构造函数来创建 RichText。此构造函数需要两个参数: + +- HTML 容器（使用您设置的 ID） +- 配置选项对象。[在此处查看完整配置列表](#配置属性) + +~~~jsx title="index.html" +// 创建 RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +~~~ + +### 配置属性 + +:::note +您可以在 [**这里**](api/overview/properties_overview.md) 查看 **RichText** 所有可用属性。 +::: + +## 示例 + +下面是一个快速示例，展示如何使用一些初始数据来设置 **RichText**: + + diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md new file mode 100644 index 0000000..9702560 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md @@ -0,0 +1,304 @@ +--- +sidebar_label: 与 Angular 集成 +title: 与 Angular 集成 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解与 Angular 的集成。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版。 +--- + +# 与 Angular 集成 + +:::tip +在开始之前，建议您先熟悉 **Angular** 的主要思想和模式。如需快速回顾，请查阅 [**Angular 文档**](https://v17.angular.io/docs)。 +::: + +DHTMLX RichText 与 **Angular** 配合良好。官方提供了代码示例，展示如何在 **Angular** 项目中使用 DHTMLX RichText。详情请查看 [**GitHub 示例**](https://github.com/DHTMLX/angular-richtext-demo)。 + +## 创建项目 + +:::info +在开始新项目之前，请确保已安装 [**Angular CLI**](https://v17.angular.io/cli) 和 [**Node.js**](https://nodejs.org/en/)。 +::: + +要使用 Angular CLI 创建新的 **my-angular-richtext-app** 项目，只需运行: + +~~~json +ng new my-angular-richtext-app +~~~ + +:::note +为了便于本指南演示，在创建 Angular 应用时请关闭服务端渲染（SSR）和静态站点生成（SSG/Prerendering）。 +::: + +该命令会完成所有必需的设置，无需额外安装步骤。 + +### 安装依赖 + +进入新创建的应用目录: + +~~~json +cd my-angular-richtext-app +~~~ + +使用 [**yarn**](https://yarnpkg.com/) 安装依赖并启动开发服务器: + +~~~json +yarn +yarn start +~~~ + +应用将在本地运行（例如 `http://localhost:3000`）。 + +## 创建 RichText 组件 + +接下来，获取 DHTMLX RichText 的源代码。请先停止应用，然后安装 RichText 包。 + +### 步骤 1. 安装包 + +下载 [**试用版 RichText 包**](how_to_start.md#installing-richtext-via-npm-or-yarn)，并按照 README 文件中的步骤操作。请注意:试用版有效期为 30 天。 + +### 步骤 2. 创建组件 + +要将 RichText 添加到您的应用中，请创建一个新的 Angular 组件。在 **src/app/** 下新建一个 **richtext** 文件夹，然后添加名为 **richtext.component.ts** 的新文件。 + +#### 导入源文件 + +打开 **richtext.component.ts**，引入 RichText 的源文件。导入路径如下: + +- 对于从本地文件夹安装的 PRO 版本: + +~~~jsx +import { Richtext} from 'dhx-richtext-package'; +~~~ + +- 对于试用版: + +~~~jsx +import { Richtext} from '@dhx/trial-richtext'; +~~~ + +本指南以 **试用版** 为例进行演示。 + +#### 设置容器并初始化 Richtext + +要在页面上显示 RichText，需要设置一个容器，并在构造函数中初始化组件: + +~~~jsx {} title="richtext.component.ts" +import { Richtext} from '@dhx/trial-richtext'; +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", // 在 "app.component.ts" 文件中以 形式引用的模板名称 + styleUrls: ["./richtext.component.css"], // 引入 css 文件 + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + // 初始化 RichText 的容器 + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: Richtext; + + ngOnInit() { + // 初始化 RichText 组件 + this._editor = new Richtext(this.richtext_container.nativeElement, {}); + } + + ngOnDestroy(): void { + this._editor.destructor(); // 销毁 RichText + } +} +~~~ + +#### 添加样式 + +为确保 RichText 显示正常，请添加所需的样式。在 **src/app/richtext/** 目录下创建 **richtext.component.css** 文件，并为 RichText 及其容器添加如下样式: + +~~~css title="richtext.component.css" +/* 导入 RichText 样式 */ +@import "@dhx/trial-richtext/dist/richtext.css"; + +/* 设置页面初始样式 */ +html, +body{ + height: 100%; + padding: 0; + margin: 0; +} + +/* 设置 RichText 容器样式 */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* 设置 RichText 组件样式 */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### 加载数据 + +要为 RichText 加载数据，只需提供一组数据。在 **src/app/richtext/** 下新建 **data.ts** 文件，并添加一些示例数据: + +~~~jsx {} title="data.ts" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +接下来，打开 ***richtext.component.ts***，导入数据文件，并在 `ngOnInit()` 方法中将数据属性设置到 RichText 的配置中，如下所示: + +~~~jsx {} title="richtext.component.ts" +import { Richtext} from '@dhx/trial-richtext'; +import { getData } from "./data"; // 导入数据 +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", + styleUrls: ["./richtext.component.css"], + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: RichText; + + ngOnInit() { + const { value } = getData(); // 初始化数据属性 + this._editor = new Richtext(this.richtext_container.nativeElement, { + value + // 其他配置属性 + }); + } + + ngOnDestroy(): void { + this._editor.destructor(); + } +} +~~~ + +另外，您也可以在 `ngOnInit()` 方法中使用 [`setValue()`](api/methods/set-value.md) 方法为 RichText 加载数据。 + +~~~jsx {} title="richtext.component.ts" +import { Richtext} from '@dhx/trial-richtext'; +import { getData } from "./data"; // 导入数据 +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", + styleUrls: ["./richtext.component.css"], + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: RichText; + + ngOnInit() { + const { value } = getData(); // 初始化数据属性 + this._editor = new Richtext(this.richtext_container.nativeElement, { + // 其他配置属性 + }); + + // 通过 setValue() 方法设置数据 + this._editor.setValue({ value }); + } + + ngOnDestroy(): void { + this._editor.destructor(); + } +} +~~~ + +至此，RichText 组件已搭建完成。当其被添加到页面时，RichText 会使用提供的数据进行初始化。您还可以根据需要添加其他配置选项。完整属性列表请参阅 [RichText API 文档](api/overview/main_overview.md)。 + +#### 事件处理 + +每当 RichText 中发生某些操作时，都会触发事件。您可以监听这些事件以执行自定义代码。完整事件列表请见 [事件 API 文档](api/overview/events_overview.md)。 + +编辑 **richtext.component.ts** 文件，并将 `ngOnInit()` 方法更新如下: + +~~~jsx {} title="richtext.component.ts" +// ... +ngOnInit() { + this._editor = new Richtext(this.richtext_container.nativeElement, {}); + + this._editor.api.on("print", () => { + console.log("The document is printing"); + }); +} + +ngOnDestroy(): void { + this._editor.destructor(); +} +~~~ + +### 步骤 3. 在应用中添加 RichText + +要在应用中使用 ***RichTextComponent***，请打开 ***src/app/app.component.ts*** 并将默认代码替换为: + +~~~jsx {} title="app.component.ts" +import { Component } from "@angular/core"; + +@Component({ + selector: "app-root", + template: `` +}) +export class AppComponent { + name = ""; +} +~~~ + +现在，在 ***src/app/*** 下创建 ***app.module.ts***，并按如下方式添加 *RichTextComponent*: + +~~~jsx {} title="app.module.ts" +import { NgModule } from "@angular/core"; +import { BrowserModule } from "@angular/platform-browser"; + +import { AppComponent } from "./app.component"; +import { RichTextComponent } from "./richtext/richtext.component"; + +@NgModule({ + declarations: [AppComponent, RichTextComponent], + imports: [BrowserModule], + bootstrap: [AppComponent] +}) +export class AppModule {} +~~~ + +最后，更新 ***src/main.ts***，代码如下: + +~~~jsx title="main.ts" +import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; +import { AppModule } from "./app/app.module"; +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.error(err)); +~~~ + +现在您可以启动应用，在页面上看到加载了数据的 RichText 组件。 + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +至此，DHTMLX RichText 与 Angular 的集成就完成了。您可以根据实际需求调整代码。完整示例可参考 [**GitHub**](https://github.com/DHTMLX/angular-richtext-demo)。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_react.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_react.md new file mode 100644 index 0000000..4b47d9d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_react.md @@ -0,0 +1,257 @@ +--- +sidebar_label: 与 React 集成 +title: 与 React 集成 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解与 React 的集成。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版。 +--- + +# 与 React 集成 + +:::tip +在阅读本指南之前，建议您具备一定的 [**React**](https://react.dev) 使用经验。如果需要快速回顾，可以查看 [**React 官方文档**](https://react.dev/learn)。 +::: + +DHTMLX RichText 能很好地与 **React** 集成。我们提供了在 React 应用中使用 DHTMLX RichText 的代码示例。更多细节请参考 [**GitHub 示例**](https://github.com/DHTMLX/react-richtext-demo)。 + +## 创建项目 + +:::info +在开始新项目之前，请确保已安装 [**Vite**](https://vite.dev/)（可选）和 [**Node.js**](https://nodejs.org/en/)。 +::: + +您可以创建一个基础的 **React** 项目，或使用 **Vite** 搭建 React 项目。本例中，项目名为 **my-react-richtext-app**: + +~~~json +npx create-react-app my-react-richtext-app +~~~ + +### 安装依赖 + +进入新建的应用文件夹: + +~~~json +cd my-react-richtext-app +~~~ + +接下来，使用您喜欢的包管理器安装依赖并启动开发服务器: + +- 使用 [**yarn**](https://yarnpkg.com/): + +~~~json +yarn +yarn start +~~~ + +- 使用 [**npm**](https://www.npmjs.com/): + +~~~json +npm install +npm run dev +~~~ + +应用将运行在本地服务器（如 `http://localhost:3000`）。 + +## 创建 RichText + +现在可以添加 DHTMLX RichText 相关代码。首先，停止应用并安装 RichText 包。 + +### 步骤 1. 安装包 + +下载 [**RichText 试用包**](how_to_start.md#installing-richtext-via-npm-or-yarn)，并按照 README 文件中的步骤操作。RichText 试用版可免费使用 30 天。 + +### 步骤 2. 创建组件 + +接下来，创建一个 React 组件以在应用中集成 RichText。在 ***src/*** 目录下新建文件 ***Richtext.jsx***。 + +#### 导入源文件 + +打开 ***Richtext.jsx*** 并导入 RichText 文件。请注意: + +- 如果您拥有 PRO 版本，并从本地文件夹安装 RichText，导入方式如下: + +~~~jsx title="Richtext.jsx" +import { Richtext} from 'dhx-richtext-package'; +import 'dhx-richtext-package/dist/richtext.css'; +~~~ + +- 对于试用版，使用如下导入方式: + +~~~jsx title="Richtext.jsx" +import { Richtext} from '@dhx/trial-richtext'; +import "@dhx/trial-richtext/dist/richtext.css"; +~~~ + +本指南以 **试用版** 为例进行演示。 + +#### 设置容器并添加 Richtext + +要在页面中展示 RichText，需要设置一个容器，并用构造函数初始化组件: + +~~~jsx {} title="Richtext.jsx" +import { useEffect, useRef } from "react"; +import { Richtext} from '@dhx/trial-richtext'; +import '@dhx/trial-richtext/dist/richtext.css'; // 引入 RichText 样式 + +export default function RichTextComponent(props) { + let richtext_container = useRef(); // 初始化 RichText 容器 + + useEffect(() => { + // 初始化 RichText 组件 + const editor = new Richtext(richtext_container.current, {}); + + return () => { + editor.destructor(); // 销毁 RichText + }; + }, []); + + return
+
+
+} +~~~ + +#### 添加样式 + +需要添加一些 CSS 以保证 RichText 正确显示。请在主 CSS 文件中加入如下样式: + +~~~css title="index.css" +/* 页面初始样式 */ +html, +body, +#root { + height: 100%; + padding: 0; + margin: 0; +} + +/* RichText 容器样式 */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* RichText 组件样式 */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### 加载数据 + +如需向 RichText 加载数据，请准备一份数据集。在 ***src/*** 文件夹下新建 ***data.js*** 文件并添加内容: + +~~~jsx {} title="data.js" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +然后，打开 ***App.js*** 并导入数据。将其作为 **prop** 传递给 `` 组件: + +~~~jsx {2,5-6} title="App.js" +import RichText from "./Richtext"; +import { getData } from "./data"; + +function App() { + const { value } = getData(); + return ; +} + +export default App; +~~~ + +现在，在 ***Richtext.jsx*** 文件中，在 RichText 配置中使用传入的 **prop**: + +~~~jsx {} title="Richtext.jsx" +import { useEffect, useRef } from "react"; +import { Richtext} from "@dhx/trial-richtext"; +import "@dhx/trial-richtext/dist/richtext.css"; + +export default function RichTextComponent(props) { + let richtext_container = useRef(); + + useEffect(() => { + const editor = new Richtext(richtext_container.current, { + value: props.value, // 应用 value + // 其他配置项 + }); + + return () => { + editor.destructor(); + }; + }, []); + + return
+
+
+} +~~~ + +如果需要，也可以在 `useEffect()` 内使用 [`setValue()`](api/methods/set-value.md) 方法加载数据: + +~~~jsx {} title="Richtext.jsx" +import { useEffect, useRef } from "react"; +import { Richtext} from "@dhx/trial-richtext"; +import "@dhx/trial-richtext/dist/richtext.css"; + +export default function RichTextComponent(props) { + let richtext_container = useRef(); + + let value = props.value; + + useEffect(() => { + const editor = new Richtext(richtext_container.current, { + // 配置项 + }); + + editor.setValue(value); + + return () => { + editor.destructor(); + }; + }, []); + + return
+
+
+} +~~~ + +此时，RichText 组件已配置完成。组件渲染时，将显示带有数据的 RichText 编辑器。您可以根据需要调整配置。完整的可用选项请参阅 [RichText API 文档](api/overview/main_overview.md)。 + +#### 事件处理 + +RichText 在用户交互时会触发事件。您可以利用这些事件执行自定义代码。完整的事件列表可在文档 [事件总览](api/overview/events_overview.md) 中查阅。 + +要处理事件，请按如下方式更新 ***Richtext.jsx***: + +~~~jsx {} title="Richtext.jsx" +// ... +useEffect(() => { + const editor = new Richtext(richtext_container.current, {}); + + editor.api.on("print", () => { + console.log("The document is printing"); + }); + + return () => { + editor.destructor(); + }; +}, []); +// ... +~~~ + +现在，您可以启动应用，在页面上看到带有数据的 RichText 组件。 + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +以上就是 DHTMLX RichText 与 React 集成的全部内容。您可以根据实际需求调整代码。如需更高级的示例，请参考 [**GitHub**](https://github.com/DHTMLX/react-richtext-demo)。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md new file mode 100644 index 0000000..57948d0 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md @@ -0,0 +1,267 @@ +--- +sidebar_label: 与 Svelte 集成 +title: 与 Svelte 集成 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解与 Svelte 的集成。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版。 +--- + +# 与 Svelte 集成 + +:::tip +阅读本指南前，建议您已了解 **Svelte** 的基础知识。如果需要快速复习，请查阅 [**Svelte 文档**](https://svelte.dev/)。 +::: + +DHTMLX RichText 可以很好地与 **Svelte** 集成。以下提供了一些实用的代码示例，展示如何在 Svelte 应用中使用 DHTMLX RichText。更多细节和示例可在 [**GitHub 示例**](https://github.com/DHTMLX/svelte-richtext-demo) 中找到。 + +## 创建项目 + +:::info +在开始新项目之前，请确保您已安装了 [**Vite**](https://vite.dev/)（可选）和 [**Node.js**](https://nodejs.org/en/)。 +::: + +有几种方式可以搭建 **Svelte** 项目: + +- 使用 [**SvelteKit**](https://kit.svelte.dev/) + +或 + +- 选择 **Svelte 和 Vite**（不使用 SvelteKit）: + +~~~json +npm create vite@latest +~~~ + +您可以在这篇[相关文章](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit)中了解更多细节。 + +### 安装依赖 + +我们假设项目名为 **my-svelte-richtext-app**，并进入该目录: + +~~~json +cd my-svelte-richtext-app +~~~ + +接下来，使用您喜欢的包管理器安装依赖并启动开发服务器: + +- 对于 [**yarn**](https://yarnpkg.com/): + +~~~json +yarn +yarn start +~~~ + +- 对于 [**npm**](https://www.npmjs.com/): + +~~~json +npm install +npm run dev +~~~ + +此时，应用应该已经在本地运行（例如，`http://localhost:3000`）。 + +## 创建 RichText 组件 + +您需要 DHTMLX RichText 的源代码。在继续之前，请停止应用并安装 RichText 包。 + +### 第一步:安装包 + +下载 [**试用版 RichText 包**](how_to_start.md#installing-richtext-via-npm-or-yarn)，并按照 README 文件中的步骤操作。试用版可使用 30 天。 + +### 第二步:创建组件 + +现在需要为 RichText 创建一个 Svelte 组件。在 ***src/*** 目录下新建文件 ***Richtext.svelte***。 + +#### 导入源文件 + +在 ***Richtext.svelte*** 文件中，导入 RichText 的源文件。根据您的版本，导入方式如下: + +- 如果是本地安装的 PRO 版本，使用以下路径: + +~~~html title="Richtext.svelte" + +~~~ + +- 如果是试用版，使用以下导入: + +~~~html title="Richtext.svelte" + + +
+
+
+~~~ + +#### 加载数据 + +要向 RichText 加载数据，需要准备一份数据集。在 ***src/*** 目录下创建 ***data.js*** 文件，并添加一些示例数据: + +~~~jsx {} title="data.ts" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +然后，在 ***App.svelte*** 中导入数据，并以 prop 形式传递给 `` 组件: + +~~~html {} title="App.svelte" + + + +~~~ + +接下来，更新 ***Richtext.svelte***，在 RichText 配置中使用传递的 **props**: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +另外，您也可以在 Svelte 的 `onMount()` 中使用 [`setValue()`](api/methods/set-value.md) 方法加载数据: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +此时，RichText 组件已设置完成，并会在页面加载时显示您的数据。您可以根据需要调整配置。更多选项请参考 [RichText API 文档](api/overview/main_overview.md)。 + +#### 事件处理 + +RichText 在执行操作时会触发事件，您可以监听这些事件以执行自定义代码。完整事件列表可参考 [events](api/overview/events_overview.md)。 + +要处理事件，可在 `onMount()` 方法中如下更新 ***Richtext.svelte***: + +~~~html {} title="Richtext.svelte" + + +// ... +~~~ + +### 第三步:将 RichText 添加到应用中 + +要在应用中使用该组件，打开 **App.svelte** 并用以下内容替换默认内容: + +~~~html title="App.svelte" + + + +~~~ + +现在，启动应用，您将在页面上看到载入数据的 RichText 组件。 + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +以上就是将 DHTMLX RichText 集成到 Svelte 的全部步骤。您可以根据实际需求调整代码。如果想查看更高级的示例，可以访问 [**GitHub**](https://github.com/DHTMLX/svelte-richtext-demo)。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md new file mode 100644 index 0000000..97de821 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md @@ -0,0 +1,283 @@ +--- +sidebar_label: 与 Vue 集成 +title: 与 Vue 集成 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解与 Vue 的集成。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版。 +--- + +# 与 Vue 集成 + +:::tip +在深入阅读本篇文档之前，建议您对 [**Vue**](https://vuejs.org/) 有基本的了解。如果需要复习，可以查阅 [**Vue 3 文档**](https://vuejs.org/guide/introduction.html#getting-started)。 +::: + +DHTMLX RichText 与 **Vue** 配合良好。我们提供了展示如何在 **Vue 3** 中使用 DHTMLX RichText 的代码示例。更多信息请参考 [**GitHub 示例**](https://github.com/DHTMLX/vue-richtext-demo)。 + +## 创建项目 + +:::info +在开始新项目之前，请确保已安装 [**Node.js**](https://nodejs.org/en/)。 +::: + +要搭建一个 **Vue** 项目，请使用以下命令: + +~~~json +npm create vue@latest +~~~ + +该命令会运行 `create-vue`，这是官方用于搭建 **Vue** 项目的工具。更多信息可查阅 [Vue.js 快速开始](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)。 + +本指南中，项目命名为 **my-vue-richtext-app**。 + +### 安装依赖 + +切换到应用目录: + +~~~json +cd my-vue-richtext-app +~~~ + +使用您喜欢的包管理器安装依赖并启动开发服务器: + +- 对于 [**yarn**](https://yarnpkg.com/): + +~~~jsx +yarn +yarn start // 或 yarn dev +~~~ + +- 对于 [**npm**](https://www.npmjs.com/): + +~~~json +npm install +npm run dev +~~~ + +应用应可在本地（例如 `http://localhost:3000`）访问。 + +## 创建 RichText + +接下来，您需要获取 DHTMLX RichText 的源码。请先停止应用，然后安装 RichText 包。 + +### 步骤 1. 安装包 + +下载 [**试用版 RichText 包**](how_to_start.md#installing-richtext-via-npm-or-yarn)，并按照 README 文件中的说明操作。试用版可使用 30 天。 + +### 步骤 2. 创建组件 + +创建一个 Vue 组件，将 RichText 添加到您的应用中。在 ***src/components/*** 目录下新建一个文件，命名为 ***Richtext.vue***。 + +#### 引入源码文件 + +打开 ***Richtext.vue*** 并引入 RichText 源码文件。请注意: + +- 如果您使用的是 PRO 版本，并从本地文件夹安装了 RichText，导入方式如下: + +~~~html title="Richtext.vue" + +~~~ + +- 对于试用版，导入方式如下: + +~~~html title="Richtext.vue" + +~~~ + +本教程演示如何设置 **试用版** RichText。 + +#### 设置容器并添加 Richtext + +要在页面上展示 RichText，需要设置一个容器，并使用构造函数初始化组件: + +~~~html {} title="Richtext.vue" + + + +~~~ + +#### 添加样式 + +为确保 RichText 正常显示，请在主 CSS 文件中为 RichText 及其容器添加必要样式: + +~~~css title="main.css" +/* 设置页面初始样式 */ +html, +body, +#app { /* 确保使用 #app 作为根容器 */ + height: 100%; + padding: 0; + margin: 0; +} + +/* 设置 RichText 容器样式 */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* 设置 RichText 组件样式 */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### 加载数据 + +如需向 RichText 加载数据，可以创建一个数据集。在 ***src/*** 目录下添加一个 ***data.js*** 文件，内容如下: + +~~~jsx {} title="data.ts" +export function getData() { + const value = ` +

RichText 2.0

+

Repository at https://git.webix.io/xbs/richtext

+

`; + return { value }; +} +~~~ + +然后，在 ***App.vue*** 中引入该数据，并通过 `data()` 方法进行初始化。将数据作为 **props** 传递给 `` 组件: + +~~~html {} title="App.vue" + + + +~~~ + +现在，回到 ***Richtext.vue***，在 RichText 配置中使用 **props**: + +~~~html {} title="Richtext.vue" + + + +~~~ + +或者，您也可以在 `mounted()` 钩子中使用 [`setValue()`](api/methods/set-value.md) 方法向 RichText 加载数据: + +~~~html {} title="Richtext.vue" + + + +~~~ + +此时，RichText 组件已设置完成。当其被添加到页面时，会使用您的数据进行初始化。您可以根据需要调整配置。完整的可用属性列表请参见 [RichText API 文档](api/overview/main_overview.md)。 + +#### 事件处理 + +RichText 组件在发生操作时会触发事件。您可以利用这些事件执行自定义代码。更多详情请查阅 [事件完整列表](api/overview/events_overview.md)。 + +在 ***Richtext.vue*** 中，您可以更新 `mounted()` 方法来处理事件: + +~~~html {} title="Richtext.vue" + + +// ... +~~~ + +现在，启动应用，您将在页面上看到带有数据的 RichText 组件。 + +import trial_richtext from '@site/static/img/trial_richtext.png'; + +Trial richtext + +这就是 DHTMLX RichText 与 Vue 集成的方式。您可以根据需要调整代码。想了解更高级的示例，请参见 [**GitHub**](https://github.com/DHTMLX/vue-richtext-demo)。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/localization.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/localization.md new file mode 100644 index 0000000..d02c75f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/localization.md @@ -0,0 +1,474 @@ +--- +sidebar_label: 本地化 +title: 本地化 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解本地化内容。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# 本地化 + +JavaScript RichText 界面中的所有标签都可以进行本地化。为此，您可以创建一个新的语言环境或调整现有语言环境，然后将其设置到 RichText 上。 + +## 默认语言环境 + +默认情况下，界面使用**英文**语言环境: + +~~~jsx +const en = { + richtext: { + // buttons/actions + Undo: "Undo", + Redo: "Redo", + Style: "Style", + "Font family": "Font family", + "Font size": "Font size", + Bold: "Bold", + Italic: "Italic", + Underline: "Underline", + Strikethrough: "Strikethrough", + Subscript: "Subscript", + Superscript: "Superscript", + "Text color": "Text color", + "Background color": "Background color", + "Left align": "Left align", + "Center align": "Center align", + "Right align": "Right align", + Justify: "Justify", + "Line height": "Line height", + Outdent: "Outdent", + Indent: "Indent", + "Insert link": "Insert link", + "Insert image": "Insert image", + "Insert horizontal line": "Insert horizontal line", + "Clear formatting": "Clear formatting", + Print: "Print", + "Fullscreen mode": "Fullscreen mode", + "Layout mode": "Layout mode", + "Classic mode": "Classic mode", + "Document mode": "Document mode", + + // menubar exclusive options + File: "File", + Import: "Import", + Export: "Export", + Edit: "Edit", + Cut: "Cut", + Copy: "Copy", + Paste: "Paste", + View: "View", + Insert: "Insert", + Format: "Format", + Help: "Help", + New: "New", + Link: "Link", + Image: "Image", + "Horizontal line": "Horizontal line", + Text: "Text", + "Heading 1": "Heading 1", + "Heading 2": "Heading 2", + "Heading 3": "Heading 3", + "Heading 4": "Heading 4", + "Heading 5": "Heading 5", + "Heading 6": "Heading 6", + Align: "Align", + Left: "Left", + Center: "Center", + Right: "Right", + Justified: "Justified", + "Keyboard shortcuts": "Keyboard shortcuts", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "Operation failed. Please check your browser's clipboard permissions.", + + // block style dropdown + Heading: "Heading", + Quote: "Quote", + Paragraph: "Paragraph", + "Text style": "Text style", + Lists: "Lists", + + normal: "normal", + default: "default", + + // lists + "Bulleted list": "Bulleted list", + "Numbered list": "Numbered list", + + // links + "Enter text to display": "Enter text to display", + "Paste link": "Paste link", + "Link copied to clipboard": "Link copied to clipboard", + + // shortcut groups + "Text formatting": "Text formatting", + Editing: "Editing", + "Special actions": "Special actions", + + // colors + Black: "Black", + Gray: "Gray", + White: "White", + Red: "Red", + Orange: "Orange", + Yellow: "Yellow", + Lime: "Lime", + Green: "Green", + Teal: "Teal", + Cyan: "Cyan", + Blue: "Blue", + Indigo: "Indigo", + Magenta: "Magenta", + + // shades + "Light gray": "Light gray", + "Medium gray": "Medium gray", + "Dark gray": "Dark gray", + "Light red": "Light red", + "Medium red": "Medium red", + "Dark red": "Dark red", + "Light orange": "Light orange", + "Medium orange": "Medium orange", + "Dark orange": "Dark orange", + "Light yellow": "Light yellow", + "Medium yellow": "Medium yellow", + "Dark yellow": "Dark yellow", + "Light lime": "Light lime", + "Medium lime": "Medium lime", + "Dark lime": "Dark lime", + "Light green": "Light green", + "Medium green": "Medium green", + "Dark green": "Dark green", + "Light teal": "Light teal", + "Medium teal": "Medium teal", + "Dark teal": "Dark teal", + "Light cyan": "Light cyan", + "Medium cyan": "Medium cyan", + "Dark cyan": "Dark cyan", + "Light blue": "Light blue", + "Medium blue": "Medium blue", + "Dark blue": "Dark blue", + "Light indigo": "Light indigo", + "Medium indigo": "Medium indigo", + "Dark indigo": "Dark indigo", + "Light magenta": "Light magenta", + "Medium magenta": "Medium magenta", + "Dark magenta": "Dark magenta" + } +}; +~~~ + +:::info +除了默认的 ***en*** 语言环境（*英语*），RichText 还内置了 ***de***（*德语*）和 ***cn***（*中文*）语言环境。 +::: + +
+de 语言环境 + +~~~jsx +const de = { + richtext: { + // buttons/actions + Undo: "Rückgängig", + Redo: "Wiederholen", + Style: "Stil", + "Font family": "Schriftart", + "Font size": "Schriftgröße", + Bold: "Fett", + Italic: "Kursiv", + Underline: "Unterstrichen", + Strikethrough: "Durchgestrichen", + Subscript: "Tiefgestellt", + Superscript: "Hochgestellt", + "Text color": "Textfarbe", + "Background color": "Hintergrundfarbe", + "Left align": "Linksbündig", + "Center align": "Zentriert", + "Right align": "Rechtsbündig", + Justify: "Blocksatz", + "Line height": "Zeilenhöhe", + Outdent: "Einzug verringern", + Indent: "Einzug erhöhen", + "Insert link": "Link einfügen", + "Insert image": "Bild einfügen", + "Insert horizontal line": "Horizontale Linie einfügen", + "Clear formatting": "Formatierung löschen", + Print: "Drucken", + "Fullscreen mode": "Vollbildmodus", + "Layout mode": "Layout-Modus", + "Classic mode": "Klassischer Modus", + "Document mode": "Dokumentenmodus", + + // menubar exclusive options + File: "Datei", + Import: "Importieren", + Export: "Exportieren", + Edit: "Bearbeiten", + Cut: "Ausschneiden", + Copy: "Kopieren", + Paste: "Einfügen", + View: "Ansicht", + Insert: "Einfügen", + Format: "Format", + Help: "Hilfe", + New: "Neu", + Link: "Link", + Image: "Bild", + "Horizontal line": "Horizontale Linie", + Text: "Text", + "Heading 1": "Überschrift 1", + "Heading 2": "Überschrift 2", + "Heading 3": "Überschrift 3", + "Heading 4": "Überschrift 4", + "Heading 5": "Überschrift 5", + "Heading 6": "Überschrift 6", + Align: "Ausrichten", + Left: "Links", + Center: "Zentriert", + Right: "Rechts", + Justified: "Blocksatz", + "Keyboard shortcuts": "Tastenkürzel", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "Operation fehlgeschlagen. Bitte überprüfen Sie die Berechtigungen für die Zwischenablage Ihres Browsers.", + + // block style dropdown + Heading: "Überschrift", + Quote: "Zitat", + Paragraph: "Absatz", + "Text style": "Textstil", + Lists: "Listen", + + normal: "normal", + default: "standard", + + // lists + "Bulleted list": "Liste mit Aufzählungszeichen", + "Numbered list": "Nummerierte Liste", + + // links + "Enter text to display": "Text zum Anzeigen eingeben", + "Paste link": "Link einfügen", + "Link copied to clipboard": "Link in die Zwischenablage kopiert", + + // shortcut groups + "Text formatting": "Textformatierung", + Editing: "Bearbeitung", + "Special actions": "Spezielle Aktionen", + + // colors + Black: "Schwarz", + Gray: "Grau", + White: "Weiß", + Red: "Rot", + Orange: "Orange", + Yellow: "Gelb", + Lime: "Limette", + Green: "Grün", + Teal: "Türkis", + Cyan: "Cyan", + Blue: "Blau", + Indigo: "Indigo", + Magenta: "Magenta", + + // shades + "Light gray": "Hellgrau", + "Medium gray": "Mittelgrau", + "Dark gray": "Dunkelgrau", + "Light red": "Hellrot", + "Medium red": "Mittelrot", + "Dark red": "Dunkelrot", + "Light orange": "Hellorange", + "Medium orange": "Mittelorange", + "Dark orange": "Dunkelorange", + "Light yellow": "Hellgelb", + "Medium yellow": "Mittleres Gelb", + "Dark yellow": "Dunkelgelb", + "Light lime": "Hellgrün", + "Medium lime": "Mittleres Grün", + "Dark lime": "Dunkelgrün", + "Light green": "Hellgrün", + "Medium green": "Mittleres Grün", + "Dark green": "Dunkelgrün", + "Light teal": "Hellblau", + "Medium teal": "Mittelblau", + "Dark teal": "Dunkelblau", + "Light cyan": "Hellcyan", + "Medium cyan": "Mittleres Cyan", + "Dark cyan": "Dunkelcyan", + "Light blue": "Hellblau", + "Medium blue": "Mittelblau", + "Dark blue": "Dunkelblau", + "Light indigo": "Hellindigo", + "Medium indigo": "Mittelindigo", + "Dark indigo": "Dunkelindigo", + "Light magenta": "Hellmagenta", + "Medium magenta": "Mittleres Magenta", + "Dark magenta": "Dunkelmagenta" + } +}; +~~~ +
+ +
+cn 语言环境 + +~~~jsx +const cn = { + richtext: { + // buttons/actions, + Undo: "撤销", + Redo: "重做", + Style: "样式", + "Font family": "字体", + "Font size": "字体大小", + Bold: "粗体", + Italic: "斜体", + Underline: "下划线", + Strikethrough: "删除线", + Subscript: "下标", + Superscript: "上标", + "Text color": "文本颜色", + "Background color": "背景颜色", + "Left align": "左对齐", + "Center align": "居中对齐", + "Right align": "右对齐", + Justify: "两端对齐", + "Line height": "行高", + Outdent: "减少缩进", + Indent: "增加缩进", + "Insert link": "插入链接", + "Insert image": "插入图片", + "Insert horizontal line": "插入水平线", + "Clear formatting": "清除格式", + Print: "打印", + "Fullscreen mode": "全屏模式", + "Layout mode": "布局模式", + "Classic mode": "经典模式", + "Document mode": "文档模式", + + // menubar exclusive options + File: "文件", + Import: "导入", + Export: "导出", + Edit: "编辑", + Cut: "剪切", + Copy: "复制", + Paste: "粘贴", + View: "视图", + Insert: "插入", + Format: "格式", + Help: "帮助", + New: "新建", + Link: "链接", + Image: "图片", + "Horizontal line": "水平线", + Text: "文本", + "Heading 1": "标题 1", + "Heading 2": "标题 2", + "Heading 3": "标题 3", + "Heading 4": "标题 4", + "Heading 5": "标题 5", + "Heading 6": "标题 6", + Align: "对齐", + Left: "左", + Center: "居中", + Right: "右", + Justified: "两端对齐", + "Keyboard shortcuts": "键盘快捷键", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "操作失败。请检查浏览器的剪贴板权限。", + + // block style dropdown + Heading: "标题", + Quote: "引用", + Paragraph: "段落", + "Text style": "文本样式", + Lists: "列表", + + normal: "普通的", + default: "默认", + + // lists + "Bulleted list": "项目符号列表", + "Numbered list": "编号列表", + + // links + "Enter text to display": "输入要显示的文本", + "Paste link": "粘贴链接", + "Link copied to clipboard": "链接已复制到剪贴板", + + // shortcut groups + "Text formatting": "文本格式化", + Editing: "编辑", + "Special actions": "特殊操作", + + // colors + Black: "黑色", + Gray: "灰色", + White: "白色", + Red: "红色", + Orange: "橙色", + Yellow: "黄色", + Lime: "酸橙色", + Green: "绿色", + Teal: "水鸭色", + Cyan: "青色", + Blue: "蓝色", + Indigo: "靛蓝色", + Magenta: "洋红色", + + // shades + "Light gray": "浅灰色", + "Medium gray": "中灰色", + "Dark gray": "深灰色", + "Light red": "浅红色", + "Medium red": "中红色", + "Dark red": "深红色", + "Light orange": "浅橙色", + "Medium orange": "中橙色", + "Dark orange": "深橙色", + "Light yellow": "浅黄色", + "Medium yellow": "中黄色", + "Dark yellow": "深黄色", + "Light lime": "浅酸橙色", + "Medium lime": "中酸橙色", + "Dark lime": "深酸橙色", + "Light green": "浅绿色", + "Medium green": "中绿色", + "Dark green": "深绿色", + "Light teal": "浅水鸭色", + "Medium teal": "中水鸭色", + "Dark teal": "深水鸭色", + "Light cyan": "浅青色", + "Medium cyan": "中青色", + "Dark cyan": "深青色", + "Light blue": "浅蓝色", + "Medium blue": "中蓝色", + "Dark blue": "深蓝色", + "Light indigo": "浅靛蓝色", + "Medium indigo": "中靛蓝色", + "Dark indigo": "深靛蓝色", + "Light magenta": "浅洋红色", + "Medium magenta": "中洋红色", + "Dark magenta": "深洋红色" + } +}; +~~~ +
+ +## 自定义语言环境 + +如需使用自定义语言环境: + +- 创建自定义语言环境（或更新默认语言环境），并为所需的所有标签添加翻译（可以是任何语言） + +- 通过 [`locale`](api/config/locale.md) 属性或 [`setLocale()`](api/methods/set-locale.md) 方法为 **RichText** 设置该语言环境 + +## 示例 + +以下代码片段展示了如何在不同语言环境之间切换: + + diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/stylization.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/stylization.md new file mode 100644 index 0000000..77a186c --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/stylization.md @@ -0,0 +1,89 @@ +--- +title: 样式 +sidebar_label: 样式 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解样式相关内容。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。 +--- + +# 样式 + +DHTMLX RichText 支持通过 CSS 变量或自定义样式针对特定部件进行样式调整，以适配各种外观需求。 + +下面将简要介绍如何设置**深色主题**，以及如何通过类名为编辑器的不同部分（如菜单栏、工具栏、弹出菜单和内容区域）自定义样式。 + +## 默认结构与类名 + +RichText 的 UI 布局主要依赖以下类名: + +| 类名 | 描述 | +|---------------------------|--------------------------------| +| `.wx-richtext` | RichText 组件的根容器 | +| `.wx-richtext-menubar` | 菜单栏的容器 | +| `.wx-richtext-menu` | 菜单栏下拉菜单的容器 | +| `.wx-richtext-toolbar` | 工具栏的容器 | +| `.wx-editor-area` | 主可编辑内容区域的容器 | + +您可以在 CSS 中使用这些类名来调整 RichText 编辑器的外观。 + +## 覆盖默认样式 + +要为 RichText 应用自定义样式，只需在 `#root` 容器或指定的子元素上更新 CSS 变量即可: + +```html +
+ + +``` + +:::note +此设置为编辑器提供了深色背景，更新了按钮和图标颜色，使界面在暗色 UI 下更易于辨识。 +::: + +## 支持的 CSS 变量列表 + +| 变量名 | 描述 | +|-----------------------------|--------------------------------------------| +| `--wx-background` | 编辑器和弹出菜单的背景色 | +| `--wx-background-alt` | 菜单栏的备用背景色 | +| `--wx-color-primary` | 链接、引用块以及图片缩放边框的强调色 | +| `--wx-color-font` | 主要字体颜色（适用于编辑器、菜单栏和工具栏）| +| `--wx-color-font-alt` | 备用字体颜色 | +| `--wx-color-font-disabled` | 禁用文本颜色（适用于菜单栏和工具栏元素） | +| `--wx-border` | 编辑器内通用的边框样式 | +| `--wx-color-secondary-hover`| 菜单栏和工具栏内按钮的悬停背景色 | +| `--wx-button-active` | 菜单栏和工具栏内按钮的激活背景色 | +| `--wx-icon-color` | 工具栏下拉箭头图标的颜色 | +| `--wx-popup-border` | 弹出元素的边框样式 | + +## 最佳实践 + +* 使用 `color-scheme: dark` 属性可以让原生输入框在暗色模式下显示更合适 +* 除非有特殊需求，建议不要随意修改布局相关的 CSS 属性（如 `display` 或 `position`） + +## 在线演示 + +下面是一个为 RichText 添加自定义样式的简单示例: + + + +**相关文档:** [Customization](guides/configuration.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/typescript_support.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/typescript_support.md new file mode 100644 index 0000000..04f8a68 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/typescript_support.md @@ -0,0 +1,19 @@ +--- +sidebar_label: TypeScript 支持 +title: TypeScript 支持 +description: 您可以在文档中了解如何将 TypeScript 与 DHTMLX JavaScript RichText 库结合使用。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并免费下载 DHTMLX RichText 30 天评估版。 +--- + +# TypeScript 支持 + +自 2.0 版本起，DHTMLX RichText 内置了 TypeScript 定义，因此 TypeScript 可以开箱即用。 + +:::note +Snippet Tool 可用于在线试用和演示。 +::: + +## 使用 TypeScript 的优势 + +将 DHTMLX RichText 与 TypeScript 结合使用，可以带来一些显著优势。 + +TypeScript 有助于让开发过程更加顺畅和可靠。类型检查与自动补全功能能够帮助您提前发现错误并提升开发效率。此外，TypeScript 还能为您在使用 DHTMLX RichText API 时，提供清晰的数据类型信息。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/zh/docusaurus-plugin-content-docs/current/how_to_start.md new file mode 100644 index 0000000..16475b5 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/how_to_start.md @@ -0,0 +1,113 @@ +--- +sidebar_label: 如何开始 +title: 如何开始 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解如何开始使用 DHTMLX RichText。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# 如何开始 + +以下是让 RichText 在页面上运行的简单步骤。 + +import classic_mode from '@site/static/img/richtext/classic_mode.png'; + +Classic mode + +## 第一步:引入源文件 + +首先，创建一个名为 *index.html* 的 HTML 文件，并在该文件中添加 RichText 的源文件。 + +您需要以下两个文件: + +- RichText 的 JS 文件 +- RichText 的 CSS 文件 + +~~~html {5-6} title="index.html" + + + + How to Start with RichText + + + + + + + +~~~ + +### 通过 npm 或 yarn 安装 RichText + +您可以通过 **yarn** 或 **npm** 将 RichText 添加到您的项目中。 + +#### 通过 npm 或 yarn 安装试用版 RichText + +:::info +如需使用 RichText 试用版，请获取 [**trial RichText package**](https://dhtmlx.com/docs/products/dhtmlxRichtext/download.shtml) 并参阅 *README* 文件中的步骤。请注意，试用版有效期为 30 天。 +::: + +#### 通过 npm 或 yarn 安装 PRO 版 RichText + +:::info +如需获取 PRO 版本，请前往 [Client's Area](https://dhtmlx.com/clients/) 并为 DHTMLX 私有 **npm** 生成您的登录名和密码。那里有详细的安装指南。只要您的专有 RichText 许可证处于有效状态，即可访问私有 **npm**。 +::: + +## 第二步:创建 RichText + +现在可以将 RichText 添加到页面上。首先为 RichText 创建一个 `
` 容器。操作如下: + +- 在 *index.html* 文件中添加一个 DIV 容器 +- 使用 `richtext.Richtext` 构造函数初始化 RichText + +该构造函数接受任何有效的 HTML 容器 CSS 选择器，以及您希望包含的配置对象。 + +~~~html {9,12-14} title="index.html" + + + + How to Start with RichText + + + + +
+ + + + +~~~ + +## 第三步:配置 RichText + +现在，您可以设置 RichText 启动时所需的配置选项。 + +首先，可通过 [`value`](api/config/value.md) 属性为编辑器设置初始数据。您还可以启用 [**menubar**](api/config/menubar.md)、自定义 [**toolbar**](api/config/toolbar.md)、设置 [**fullscreen**](api/config/fullscreen-mode.md) 和 [**layout**](api/config/layout-mode.md) 模式、选择新的 [**locale**](api/config/locale.md)，以及应用 [**default styles**](api/config/default-styles.md)。 + +~~~jsx {2-12} +const editor = new richtext.Richtext("#root", { + menubar: true, + toolbar: false, + fullscreenMode: true, + layoutMode: "document", + locale: richtext.locales.cn + defaultStyles: { + h4: { + "font-family": "Roboto" + }, + // other settings + } +}); +~~~ + +## 后续步骤 + +就是这样！通过这三个步骤，RichText 已经可以编辑内容。您可以立即开始使用，也可以继续探索 JavaScript RichText 的更多功能。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/index.md b/i18n/zh/docusaurus-plugin-content-docs/current/index.md new file mode 100644 index 0000000..dfd03df --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/index.md @@ -0,0 +1,154 @@ +--- +sidebar_label: RichText 概述 +title: RichText 概述 +slug: / +description: 您可以在文档中了解 DHTMLX JavaScript RichText 库的概览。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版。 +--- + +# RichText 概述 + +**DHTMLX RichText** 是一个轻量且灵活的 JavaScript WYSIWYG 编辑器。它旨在为现代 Web 应用提供简洁的编辑体验，拥有直观的界面、丰富的格式化工具，并可完全控制内容的展示方式。无论是用于 CMS、管理后台还是嵌入式文档编辑器，RichText 都可以灵活集成并适配不同项目需求。 + +**DHTMLX RichText** 具备以下特性: + +- 两种[**布局模式**](api/config/layout-mode.md) + +- 内容可保存为纯文本或 HTML + +- 可配置的[**工具栏**](api/config/toolbar.md)，支持内置及自定义按钮 + +- 可显示或隐藏的[**菜单栏**](api/config/menubar.md)，为静态展示 + +- 支持图片上传、丰富格式化、自定义样式及全屏编辑 + +- 提供[完整 API](api/overview/main_overview.md)，支持[事件处理](api/overview/event_bus_methods_overview.md)、[内容变更](api/overview/methods_overview.md)和[响应式状态管理](api/overview/state_methods_overview.md) + +RichText 可与任何框架搭配使用，包括 [React](guides/integration_with_react.md)、[Angular](guides/integration_with_angular.md)、[Vue](guides/integration_with_vue.md) 或 [Svelte](guides/integration_with_svelte.md)，适用于各种前端开发环境。 + +本手册涵盖安装、配置、使用以及个性化调整。您可以参考常见任务示例、[完整 API 文档](api/overview/main_overview.md)，并获取将 RichText 集成到不同应用的建议。 + +## RichText 结构 + +### 菜单栏 + +RichText 的菜单栏可便捷访问新建文档、打印、导入导出等编辑操作。默认情况下，菜单栏是隐藏的。 + +通过 [`menubar`](api/config/menubar.md) 属性可以控制菜单栏的显示与否。您可以开启或关闭菜单栏，但目前无法自定义菜单项。 + +import menubar from '@site/static/img/richtext/menubar.png'; + +Menubar + +### 工具栏 + +RichText 的工具栏让用户能够快速进行文本格式化和结构编辑。默认情况下，[工具栏](api/config/toolbar.md#默认配置)是开启的，并显示如加粗、斜体、字体设置、列表等常用控件。 + +通过 [`toolbar`](api/config/toolbar.md) 属性，您可以自定义显示哪些控件及其排列顺序。可以开启或关闭工具栏、重新排列默认按钮，或结合内置与自定义按钮设计专属工具栏。 + +import toolbar from '@site/static/img/richtext/toolbar.png'; + +Toolbar + +### 编辑区 + +RichText 的核心部分是编辑器本身，所有内容的创建与格式化都在此完成。您可以通过 [`value`](api/config/value.md)、[`layoutMode`](api/config/layout-mode.md) 和 [`defaultStyles`](api/config/default-styles.md) 等选项调整编辑器的外观和行为。RichText 支持自定义样式、图片插入，以及适应不同屏幕和需求的布局调整。 + +#### 两种工作模式 + +DHTMLX RichText 提供 "classic" 和 "document" 两种内容展示方式。您可根据编辑习惯选择合适模式，并通过 [`layoutMode`](api/config/layout-mode.md) 属性进行切换。 + +- **"classic"** + +import classic_mode from '@site/static/img/richtext/classic_mode.png'; + +Classic mode + +- **"document"** + +import document_mode from '@site/static/img/richtext/document_mode.png'; + +Document mode + +## 支持的格式 + +RichText 可将内容[读取](api/methods/set-value.md)和[保存](api/methods/get-value.md)为 **HTML** 或纯文本格式。 + +#### HTML 格式 + +import html_format from '@site/static/img/richtext/html_format.png'; + +HTML format + +#### 纯文本格式 + +import text_format from '@site/static/img/richtext/text_format.png'; + +Text format + +## 快捷键支持 + +RichText 支持多种常用快捷键，帮助提升编辑与格式化效率。快捷键遵循各平台的常规习惯，适用于 **Windows/Linux**（`Ctrl`）和 **macOS**（`⌘`）。 + +### 文本格式化 + +| 操作 | Windows/Linux | macOS | +|---------------|-----------------|---------------| +| 加粗* | `Ctrl+B` | `⌘B` | +| 斜体 | `Ctrl+I` | `⌘I` | +| 下划线 | `Ctrl+U` | `⌘U` | +| 删除线 | `Ctrl+Shift+X` | `⌘⇧X` | + +### 编辑操作 + +| 操作 | Windows/Linux | macOS | +|----------|--------------------------|---------------| +| 撤销 | `Ctrl+Z` | `⌘Z` | +| 重做 | `Ctrl+Y` / `Ctrl+Shift+Z`| `⌘Y` / `⌘⇧Z` | +| 剪切 | `Ctrl+X` | `⌘X` | +| 复制 | `Ctrl+C` | `⌘C` | +| 粘贴 | `Ctrl+V` | `⌘V` | + +### 特殊操作 + +| 操作 | Windows/Linux | macOS | +|--------------|---------------|-------| +| 插入链接 | `Ctrl+K` | `⌘K` | +| 打印 | `Ctrl+P` | `⌘P` | + +:::info +未来版本可能会新增更多快捷键。 +::: + +如需查看 RichText 全部快捷键，只需点击 **帮助**，选择 **快捷键**: + +import shortcut_reference from '@site/static/img/richtext/shortcut_reference.png'; + +Shortcut reference diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/news/migration.md b/i18n/zh/docusaurus-plugin-content-docs/current/news/migration.md new file mode 100644 index 0000000..fc05568 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/news/migration.md @@ -0,0 +1,167 @@ +--- +sidebar_label: 迁移到新版本 +title: 迁移到新版本 +description: 您可以在 DHTMLX JavaScript RichTExt 库的文档中了解如何迁移到新版本。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并免费下载 DHTMLX RichTExt 30 天评估版。 +--- + +# 迁移到新版本 + +## 1.2 -> 2.0 + +### 属性迁移 + +| 旧属性 | 替换为 | 说明 | +| ---------------- | --------------------------- | -------------------------------------------- | +| `customStats` | *(已移除)* | 在新版本 2.0 中不可用 | +| `toolbarBlocks` | `toolbar` | 现在支持更详细的工具栏结构 | +| `defaultStyles` | `defaultStyles`（已更新） | 结构现在基于每个块并且基于 CSS | +| `mode` | `layoutMode` | 替换为更严格的枚举类型设置 | + +### - `customStats` + +`customStats` 属性已不包含在最新的 RichText 版本中。这意味着内置的自定义统计（如字符数、单词数或句子数）已不再支持。 + +要处理文本统计，请自行获取编辑器内容并按需处理: + +```jsx +const content = editor.getValue(); +const wordCount = content.split(/\s+/).length; +``` + +### - `toolbarBlocks` → [`toolbar`](api/config/toolbar.md) + +在 **2.0** 之前，只能设置控件块： +```jsx{2} title="Before 2.0" +new dhx.RichText("#root", { + toolbarBlocks: ["undo", "style", "decoration", "colors", "align", "link"] +}); +``` + +从 **2.0** 开始，可以按需列出单个控件: +```jsx{2-4} title="From 2.0" +new richtext.Richtext("#root", { + toolbar: [ + "undo", "style", "bold", "italic", "underline", "text-color", + "align", "link" + ] +}); +``` + +### - [`defaultStyles`](api/config/default-styles.md) + +在 **2.0** 之前，工具栏选择控件的默认值如下： +```jsx title="Before 2.0" +defaultStyles: { + "font-family": "Tahoma", + "font-size": "14px" +} +``` + +从 **2.0** 开始，可以为特定块类型设置默认样式值: +```jsx title="From 2.0" +defaultStyles: { + "*": { + "font-family": "Tahoma", + "font-size": "14px" + }, + h1: { + "font-size": "32px", + "color": "#333" + } +} +``` + +:::note +`*` 键为所有内容设置基础默认值，任何特定元素（如 p、h1 或 blockquote）都可以在其基础上进行自定义。 +::: + +### - `mode` → [`layoutMode`](api/config/layout-mode.md) + +```jsx{2} title="Before 2.0" +new dhx.RichText("#root", { + mode: "document" +}); +``` + +```jsx{2} title="From 2.0" +new Richtext("#root", { + layoutMode: "document" // 或 "classic" +}); +``` + +现在，[`layoutMode`](api/config/layout-mode.md) 只接受 `"classic"` 或 `"document"`。 + +### 方法迁移 + +| 旧方法 | 新方法 | 说明 | +| ------------------------ | ------------------------------------ | ------------------------------------------------- | +| `getValue(mode)` | `getValue(encoder)` | 编码器替代字符串模式；编码器需单独导入 | +| `setValue(value, mode)` | `setValue(value, encoder)` | 编码器替代字符串模式；编码器需单独导入 | +| `getStats()` | *已移除* | 无替代方案；需手动实现 | +| `getEditorAPI()` | *已移除* | 内部方法；请使用公开 API | +| `fire()` | *已移除* | 替换为 `exec()` 和 `intercept()` | +| `on()`, `detach()` | ✅ 保留（`api.on`, `api.detach`） | 现在通过 `richtext.api` 访问 | +| `fullScreen()` | *已移除* | 使用 `fullscreenMode` 配置属性 | +| `exitFullScreen()` | *已移除* | 使用 `fullscreenMode` 配置属性 | +| `paint()` | *已移除* | 不再需要 | +| `destructor()` | ✅ 仍可用 | 未更改 | +| `setConfig()` | ✅ 新增 | 支持动态配置更新 | +| `setLocale()` | ✅ 新增 | 支持动态切换语言环境 | +| `getReactiveState()` | ✅ 新增 | 支持响应式状态跟踪 | +| `getState()` | ✅ 新增 | 提供当前静态配置状态 | +| `intercept()` | ✅ 新增 | 拦截内部动作 | +| `exec()` | ✅ 新增 | 执行内部动作 | + +### - [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md) + +```jsx title="Before 2.0" +... +editor.setValue("

Hello

", "html"); +editor.getValue("text"); +``` + +```jsx title="From 2.0" +const fromTextEncoder = richtext.text.fromText; +const fromHTMLEncoder = richtext.html.fromHTML; + +const toTextEncoder = richtext.text.toText; +const toHTMLEncoder = richtext.html.toHTML; +... +editor.setValue("

Hello

", fromHTMLEncoder); +editor.getValue(toTextEncoder); +``` + +:::note +调用 `getValue()` 和 `setValue()` 时不传递编码器也是可以的，默认会使用 HTML。 +::: + +### - [`on`](api/internal/on.md) / [`detach`](api/internal/detach.md) + +```jsx title="Before 2.0" +editor.events.on("Change", function(action, canUndo, canRedo){ + // your code here +}); + +editor.events.detach("Change"); +``` + +```jsx title="From 2.0" +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}, { tag: "track" }); + +editor.api.detach("track"); +``` + +### - `fire()` → 使用 [`exec()`](api/internal/exec.md) 和 [`intercept()`](api/internal/intercept.md) + +```jsx title="Before 2.0" +editor.events.fire("some-event", [data]); +``` + +```jsx title="From 2.0" +editor.api.exec("some-event", obj); + +// 阻止执行 +editor.api.intercept("some-event", (obj) => false); +``` diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/news/whats_new.md b/i18n/zh/docusaurus-plugin-content-docs/current/news/whats_new.md new file mode 100644 index 0000000..6320aab --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/news/whats_new.md @@ -0,0 +1,168 @@ +--- +sidebar_label: 最新动态 +title: 最新动态 +description: 在 DHTMLX RichText 的文档中查看最新更新和发布历史。您将找到指南、API 参考、代码示例、在线演示，以及 DHTMLX RichText 的 30 天免费试用下载。 +--- + +## 版本 2.0.4 + +发布日期:2025 年 10 月 15 日 + +### 修复 + +- 段落范围选择有时无法正常工作 +- 如果链接旁边有带链接的图片，链接弹窗不会显示 +- 启动时工具栏的值有时与实际内容不一致 + +## 版本 2.0.3 + +发布日期:2025 年 8 月 27 日 + +### 修复 + +- 点击水平线时可能会抛出脚本错误 +- 默认行高未正确设置 +- 某些内容样式存在重复选择器 +- 解析 HTML 时，纯文本块未能应用样式更改 +- 解析器跳过了 HTML 中转义的字体名称 +- 解析器忽略了 HTML 中的 `margin-left` 和 `line-height` + +## 版本 2.0.2 + +发布日期:2025 年 8 月 4 日 + +### 修复 + +- 更新了包内容 + +## 版本 2.0.1 + +发布日期:2025 年 7 月 30 日 + +### 修复 + +- 更新了 `defaultStyles` 属性的类型定义 + +## 版本 2.0 + +发布日期:2025 年 7 月 30 日 + +:::note +v1.2 API 与 v2.0 不兼容。详情请参阅 [**迁移指南**](news/migration.md)。 +::: + +### 新功能 + +- **新一代文本渲染** + 新引擎带来更流畅、更快、更精确的文本渲染 + +- **更细粒度的工具栏配置** + 工具栏现在完全可自定义: + - 可选择[单独的工具栏控件](guides/configuration.md#default-toolbar-controls)并设置其顺序 + - 添加您自己的[自定义控件](guides/configuration.md#custom-toolbar-controls) + +- **可选的 [menubar](api/config/menubar.md)** + 可在编辑器顶部添加经典菜单风格界面 + +- **增强的 [文档模式](guides/configuration.md#layout-modes)** + 现在支持不同的文档尺寸 + +- **图片支持** + - 通过[上传功能](api/config/image-upload-url.md)插入图片 + - 可在编辑器内[调整图片大小](api/events/resize-image.md) + +- **改进的链接体验** + 链接[弹窗交互](api/events/show-popup.md)已重新设计，更易于使用 + +- **新格式化工具** + - 文本对齐:**两端对齐** + - 插入[水平线](api/events/insert-line.md) + - [增加缩进](api/events/indent.md) / [减少缩进](api/events/outdent.md) + - 设置[行高](api/events/set-line-height.md) + - 使用 [subscript](api/events/subscript.md) / [superscript](api/events/superscript.md) + +- **列表管理** + 现在可以轻松[插入和管理列表](api/events/insert-list.md) + +- **导入/导出与打印** + - [导入 DOCX](api/events/import.md) 文件 + - [导出](api/events/export.md) 为 DOCX 或 PDF + - 可直接在编辑器内[打印](api/events/print.md) + +- **键盘快捷键** + 支持更多常用的格式化和编辑快捷键 + +### 新 API + +#### 新属性 + +- [`fullscreenMode`](api/config/fullscreen-mode.md) +- [`imageUploadUrl`](api/config/image-upload-url.md) +- [`layoutMode`](api/config/layout-mode.md) +- [`locale`](api/config/locale.md) +- [`menubar`](api/config/menubar.md) +- [`toolbar`](api/config/toolbar.md) +- [`value`](api/config/value.md) + +#### 新方法 + +- [`setConfig()`](api/methods/set-config.md) - 动态更新配置 +- [`setLocale()`](api/methods/set-locale.md) - 即时切换语言环境 + +#### 新内部方法 + +- [`api.exec()`](api/internal/exec.md) +- [`api.intercept()`](api/internal/intercept.md) +- [`api.getReactiveState()`](api/internal/get-reactive-state.md) +- [`api.getState()`](api/internal/get-state.md) + +#### 新事件 + +您可以在[这里](api/overview/events_overview.md)找到所有新事件的完整列表 + +### 已更新 API + +#### 已更新属性 + +- [`defaultStyles`](api/config/default-styles.md) + +#### 已更新方法 + +- [`setValue()`](api/methods/set-value.md) +- [`getValue()`](api/methods/get-value.md) + +#### 已更新内部方法 + +- [`api.detach()`](api/internal/detach.md) +- [`api.on()`](api/internal/on.md) + +## 已移除 API + +:::warning +请勿在项目中使用已移除的 API！
详情请查阅 [迁移](news/migration.md) 主题。 +::: + +### [已移除属性](news/migration.md#properties-migration) + +- [`customStats`](news/migration.md#--customstats) +- [`mode`](news/migration.md#--mode--layoutmode) +- [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar) + +### [已移除方法](news/migration.md#methods-migration) + +- `exitFullScreen()` +- `fullScreen()` +- `getEditorAPI()` +- `getStats()` +- `paint()` + +### 已移除内部方法 + +- [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept) + +### 已移除事件 + +- `Action` +- `Change` +- `selectionChange` +- `selectionRefresh` diff --git a/i18n/zh/docusaurus-theme-classic/footer.json b/i18n/zh/docusaurus-theme-classic/footer.json new file mode 100644 index 0000000..009052f --- /dev/null +++ b/i18n/zh/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "开发中心", + "description": "页脚中标题为“开发中心”的链接列标题" + }, + "link.title.Community": { + "message": "社区", + "description": "页脚中标题为“社区”的链接列标题" + }, + "link.title.Company": { + "message": "公司", + "description": "页脚中标题为“公司”的链接列标题" + }, + "link.item.label.Download RichText": { + "message": "下载 RichText", + "description": "页脚链接标签为“下载 RichText”，链接至 https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml" + }, + "link.item.label.Examples": { + "message": "示例", + "description": "页脚链接标签为“示例”，链接至 https://snippet.dhtmlx.com/t55alxiy?tag=richtext" + }, + "link.item.label.Blog": { + "message": "博客", + "description": "页脚链接标签为“博客”，链接至 https://dhtmlx.com/blog/tag/richtext/" + }, + "link.item.label.Forum": { + "message": "论坛", + "description": "页脚链接标签为“论坛”，链接至 https://forum.dhtmlx.com/c/richtext/" + }, + "link.item.label.GitHub": { + "message": "GitHub", + "description": "页脚链接标签为“GitHub”，链接至 https://github.com/DHTMLX" + }, + "link.item.label.Youtube": { + "message": "YouTube", + "description": "页脚链接标签为“YouTube”，链接至 https://www.youtube.com/user/dhtmlx" + }, + "link.item.label.Facebook": { + "message": "Facebook", + "description": "页脚链接标签为“Facebook”，链接至 https://www.facebook.com/dhtmlx" + }, + "link.item.label.Twitter": { + "message": "Twitter", + "description": "页脚链接标签为“Twitter”，链接至 https://twitter.com/dhtmlx" + }, + "link.item.label.Linkedin": { + "message": "领英", + "description": "页脚链接标签为“领英”，链接至 https://www.linkedin.com/groups/3345009/" + }, + "link.item.label.About us": { + "message": "关于我们", + "description": "页脚链接标签为“关于我们”，链接至 https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "联系我们", + "description": "页脚链接标签为“联系我们”，链接至 https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "许可", + "description": "页脚链接标签为“许可”，链接至 https://dhtmlx.com/docs/products/dhtmlxRichText/#editions-licenses" + } +} \ No newline at end of file diff --git a/i18n/zh/docusaurus-theme-classic/navbar.json b/i18n/zh/docusaurus-theme-classic/navbar.json new file mode 100644 index 0000000..06e5ac5 --- /dev/null +++ b/i18n/zh/docusaurus-theme-classic/navbar.json @@ -0,0 +1,26 @@ +{ + "title": { + "message": "JavaScript 富文本文档", + "description": "导航栏中的标题" + }, + "logo.alt": { + "message": "DHTMLX 富文本文档", + "description": "导航栏徽标的替代文本" + }, + "item.label.Examples": { + "message": "示例", + "description": "带有标签“示例”的导航栏项目" + }, + "item.label.Forum": { + "message": "论坛", + "description": "带有标签“论坛”的导航栏项目" + }, + "item.label.Support": { + "message": "支持", + "description": "带有标签“支持”的导航栏项目" + }, + "item.label.Download": { + "message": "下载", + "description": "带有标签“下载”的导航栏项目" + } +} \ No newline at end of file diff --git a/local_modules/dhx-md-data-parser/index.js b/local_modules/dhx-md-data-parser/index.js index 5f68410..5158158 100644 --- a/local_modules/dhx-md-data-parser/index.js +++ b/local_modules/dhx-md-data-parser/index.js @@ -25,7 +25,7 @@ const AT_NOTATION_FUNCTION_MATCH_REGEXP = /@(\w+)\((.*)\)/g; const BRACE_NOTATION_REGEXP = /\{\{(\w+)[(?:\r?\n|\r)\s]+((?:.|(?:\r?\n|\r))+?)\}\}/g; // [](link) -// e.g [Chart API Overview](api/api_overview.md) +// e.g [Chart API Overview](/api/api_overview.md) const EMPTY_LINK_REGEXP = /\[\]\(.+?\)/g; class FileDataParser { @@ -52,7 +52,7 @@ class FileDataParser { // const data = parse(this.#fileData); // TODO: Convert to jsx only the required html (which is not wrapped in js md markup e.g.). // TODO: Use node-html-parser to parse html in the string - // TODO: ~~~html ~~~ + // TODO:~~~html ~~~ this.#fileData = convert(this.#fileData); this.#findAndReplaceStrong(); } diff --git a/plugins/dhx-md-data-transformer-plugin.js b/plugins/dhx-md-data-transformer-plugin.js index 789ab3b..31188d5 100644 --- a/plugins/dhx-md-data-transformer-plugin.js +++ b/plugins/dhx-md-data-transformer-plugin.js @@ -17,7 +17,7 @@ module.exports = (context, options) => { module: { rules: [ { - include: [path.resolve(siteDir, 'docs')], + include: [path.resolve(siteDir, 'docs'), path.resolve(siteDir, 'i18n')], test: /(\.mdx?)$/, use: [ { diff --git a/retranslate.sh b/retranslate.sh new file mode 100755 index 0000000..6b99025 --- /dev/null +++ b/retranslate.sh @@ -0,0 +1,147 @@ +#!/bin/bash + +# Translation Update Script +# Usage: ./update_translations.sh + +set -e # Exit on any error + +# Check if required arguments are provided +if [ $# -ne 5 ]; then + echo "Usage: $0 " + echo " repo_path: Path to the git repository" + echo " source_folder: Source folder path relative to repo (e.g., 'docs/markdown')" + echo " target_folder: Target folder where processed results are stored" + echo " revision: Git revision to compare against (e.g., HEAD~1, commit_hash)" + echo " lang: target language" + exit 1 +fi + +REPO_PATH="$1" +SOURCE_FOLDER="$2" +TARGET_FOLDER="$3" +REVISION="$4" +LANG="$5" + +# Validate paths +if [ ! -d "$REPO_PATH" ]; then + echo "Error: Repository path '$REPO_PATH' does not exist" + exit 1 +fi + +if [ ! -d "$REPO_PATH/.git" ]; then + echo "Error: '$REPO_PATH' is not a git repository" + exit 1 +fi + +if [ ! -d "$TARGET_FOLDER" ]; then + echo "Error: Target folder '$TARGET_FOLDER' does not exist" + exit 1 +fi + +# Change to repository directory +cd "$REPO_PATH" + +# Verify revision exists +if ! git rev-parse --verify "$REVISION" >/dev/null 2>&1; then + echo "Error: Revision '$REVISION' does not exist in the repository" + exit 1 +fi + +echo "Repository: $REPO_PATH" +echo "Source folder: $SOURCE_FOLDER" +echo "Target folder: $TARGET_FOLDER" +echo "Comparing against revision: $REVISION ($(git rev-parse --short $REVISION))" +echo "Current revision: $(git rev-parse --short HEAD)" +echo "" + +# Get list of modified markdown files since the specified revision +echo "Finding modified markdown files since revision $REVISION..." +MODIFIED_FILES=$(git diff --name-only --diff-filter=AM "$REVISION" HEAD -- "$SOURCE_FOLDER" | grep '\.md$' || true) + +if [ -z "$MODIFIED_FILES" ]; then + echo "No modified markdown files found in '$SOURCE_FOLDER' since revision $REVISION" + exit 0 +fi + +echo "Found modified markdown files:" +echo "$MODIFIED_FILES" +echo "" + +# Process each modified file +while IFS= read -r file; do + if [ -z "$file" ]; then + continue + fi + + echo "Processing: $file" + + # Extract filename without path + filename=$(basename "$file") + + # Get original content from the specified revision + echo " Reading original content from revision $REVISION..." + TEMP_PROMPT_ORIGINAL=$(git show "$REVISION:$file" 2>/dev/null || echo "") + if [ -z "$TEMP_PROMPT_ORIGINAL" ]; then + echo " Warning: Could not get file content from revision $REVISION (file might be new)" + fi + + # Get diff content + echo " Creating diff..." + TEMP_PROMPT_DIFF=$(git diff "$REVISION" HEAD -- "$file" || echo "") + + # Find corresponding target file (processed result) and read its content + # Remove source folder prefix and look for the file in target folder + # Handle both cases: with and without trailing slash in SOURCE_FOLDER + if [[ "$file" == "$SOURCE_FOLDER/"* ]]; then + relative_path="${file#$SOURCE_FOLDER/}" + else + relative_path="${file#$SOURCE_FOLDER}" + relative_path="${relative_path#/}" # Remove leading slash if present + fi + target_file="$TARGET_FOLDER/$relative_path" + + echo " Reading previous translation..." + if [ -f "$target_file" ]; then + TEMP_PROMPT_TRANSLATION=$(cat "$target_file") + echo " Found existing target file: $target_file" + else + TEMP_PROMPT_TRANSLATION="" + echo " Warning: Target file not found: $target_file" + echo " Creating directory structure..." + mkdir -p "$(dirname "$target_file")" + echo " Attempt direct translation $file" + result=$(cat $file | gptit complete --model gpt-4.1 --prompt translate-v1/en-$LANG) + echo "$result" > "$target_file" + continue + fi + + # Export environment variables with content + export TEMP_PROMPT_ORIGINAL + export TEMP_PROMPT_TRANSLATION + export TEMP_PROMPT_DIFF + + echo "Environment variables set with content:" + echo " TEMP_PROMPT_ORIGINAL (${#TEMP_PROMPT_ORIGINAL} characters)" + echo " TEMP_PROMPT_TRANSLATION (${#TEMP_PROMPT_TRANSLATION} characters)" + echo " TEMP_PROMPT_DIFF (${#TEMP_PROMPT_DIFF} characters)" + echo "" + + result=$(gptit complete --prompt translate-v1/en-$LANG-update --model gpt-4.1 "") + # Save the result to the target file + if [ -n "$result" ]; then + echo "$result" > "$target_file" + echo " result (${#result} characters)" + echo " Updated target file: $target_file" + else + echo " Error: Processing returned empty result" + fi + + # Clean up environment variables for security + unset TEMP_PROMPT_ORIGINAL + unset TEMP_PROMPT_TRANSLATION + unset TEMP_PROMPT_DIFF + + echo "" +done <<< "$MODIFIED_FILES" + +echo "Processing completed!" \ No newline at end of file diff --git a/docs/assets/richtext/classic_mode.png b/static/img/richtext/classic_mode.png similarity index 100% rename from docs/assets/richtext/classic_mode.png rename to static/img/richtext/classic_mode.png diff --git a/docs/assets/richtext/document_mode.png b/static/img/richtext/document_mode.png similarity index 100% rename from docs/assets/richtext/document_mode.png rename to static/img/richtext/document_mode.png diff --git a/docs/assets/richtext/editor.png b/static/img/richtext/editor.png similarity index 100% rename from docs/assets/richtext/editor.png rename to static/img/richtext/editor.png diff --git a/docs/assets/richtext/html_format.png b/static/img/richtext/html_format.png similarity index 100% rename from docs/assets/richtext/html_format.png rename to static/img/richtext/html_format.png diff --git a/docs/assets/richtext/menubar.png b/static/img/richtext/menubar.png similarity index 100% rename from docs/assets/richtext/menubar.png rename to static/img/richtext/menubar.png diff --git a/docs/assets/richtext/shortcut_reference.png b/static/img/richtext/shortcut_reference.png similarity index 100% rename from docs/assets/richtext/shortcut_reference.png rename to static/img/richtext/shortcut_reference.png diff --git a/docs/assets/richtext/text_format.png b/static/img/richtext/text_format.png similarity index 100% rename from docs/assets/richtext/text_format.png rename to static/img/richtext/text_format.png diff --git a/docs/assets/richtext/toolbar.png b/static/img/richtext/toolbar.png similarity index 100% rename from docs/assets/richtext/toolbar.png rename to static/img/richtext/toolbar.png diff --git a/docs/assets/trial_richtext.png b/static/img/trial_richtext.png similarity index 100% rename from docs/assets/trial_richtext.png rename to static/img/trial_richtext.png