diff --git a/docs/api/config/image-upload-url.md b/docs/api/config/image-upload-url.md index 761b8c8..9fa2087 100644 --- a/docs/api/config/image-upload-url.md +++ b/docs/api/config/image-upload-url.md @@ -8,7 +8,19 @@ 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. Specifies the URL which will be used for image upload (from the toolbar, menubar, clipboard paste, or drag-and-drop) + +When the property is set, RichText uploads each inserted image to the given endpoint and inserts the URL returned by the server. + +When the property is omitted or set to a falsy value (`""`, `null`, `undefined`), RichText switches to **inline mode**: the image file is read on the client and embedded directly into the content as a base64 data URL — no server is required. Inline images larger than 1024×800 are proportionally downscaled to fit within these limits. + +:::note +Inline (base64) images are not preserved by the built-in DOCX / PDF [export](api/events/export.md). If you rely on export, supply an `imageUploadUrl` so that images reference an external location. +::: + +:::caution +Base64 encoding increases the encoded payload by roughly one third relative to the original file. A document with several large inline images grows accordingly, which affects the size of the value returned by [`getValue()`](api/methods/get-value.md), the memory footprint of the editor, and the cost of persisting or transferring the content. Prefer a server `imageUploadUrl` for documents that contain many or large images. +::: ### Usage @@ -18,16 +30,27 @@ imageUploadUrl?: string; ### Example +Upload images to a server endpoint: + ~~~jsx {3} // initialize RichText new richtext.Richtext("#root", { - imageUploadUrl: "some URL" + imageUploadUrl: "https://example.com/upload" + // other configuration properties +}); +~~~ + +Insert images inline as base64 (no server required) — omit the property or pass an empty string: + +~~~jsx {2} +new richtext.Richtext("#root", { + // imageUploadUrl is not set, images are inserted as base64 data URLs // other configuration properties }); ~~~ -**Change log:** The property was added in v2.0 +**Change log:** The property was added in v2.0. Starting with v2.1, the property is optional: when omitted, images are inserted inline as base64 data URLs. -**Related articles:** [Configuration](guides/configuration.md) +**Related articles:** [Configuration](guides/configuration.md), [Working with the server](guides/working_with_server.md) **Related sample:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) diff --git a/docs/api/config/locale.md b/docs/api/config/locale.md index 5a9fc14..8e68ea2 100644 --- a/docs/api/config/locale.md +++ b/docs/api/config/locale.md @@ -11,7 +11,7 @@ description: You can learn about the locale config in the documentation of the D @short: Optional. An object that includes localization labels of RichText :::info -The **locale** object needs to include all labels of RichText with the corresponding translations. +The `locale` object needs to include all labels of RichText with the corresponding translations. ::: ### Usage @@ -25,7 +25,7 @@ locale?: object; By default, RichText uses the **English** locale. You can set it to the custom locale as well. :::tip -To change the current locale dynamically, you can use the [**setLocale()**](api/methods/set-locale.md) method of RichText +To change the current locale dynamically, you can use the [`setLocale()`](api/methods/set-locale.md) method of RichText ::: ### Example diff --git a/docs/api/config/trigger-template.md b/docs/api/config/trigger-template.md new file mode 100644 index 0000000..81c83d9 --- /dev/null +++ b/docs/api/config/trigger-template.md @@ -0,0 +1,73 @@ +--- +sidebar_label: triggerTemplate +title: triggerTemplate Config +description: You can learn about the triggerTemplate 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. +--- + +# triggerTemplate + +### Description + +@short: Optional. Customizes how RichText renders items in the suggestion dropdown opened by a [`triggers`](api/config/triggers.md) entry + +By default, the dropdown shows each item's `label` as plain text. Use `triggerTemplate` to render richer rows — for example, an avatar plus a name and an email. + +### Usage + +~~~jsx {} +function triggerTemplate({ data, trigger }) { + return "HTML template of the suggestion item"; +}; +~~~ + +### Parameters + +The callback function takes an object with the following parameters: + +- `data` - the current suggestion item (`{ id, label, url }`, plus any custom fields you add to the trigger's `data` source) +- `trigger` - the trigger character that opened the dropdown (`"@"`, `"#"`, etc.) + +:::tip +The dropdown default width is `160px`. If you need more space for your template, add the `.wx-editor` parent in front of the selector: + +~~~css {} +.wx-editor .wx-suggest-anchor { + width: 220px; +} +~~~ +::: + +### Example + +The following code snippet configures two triggers: `@` for mentions and `#` for tags. Use `triggerTemplate` to expand the `trigger` value to render each dropdown differently. For the `@` dropdown the template returns a custom HTML row with an avatar (`data.image`), a nickname (`data.label`), and a full name (`data.name`). For the `#` trigger the template uses the `label`: + +~~~jsx {5-6,8-15} +const { template, Richtext } = richtext; + +new Richtext("#root", { + triggers: [ + { trigger: "@", data: people }, + { trigger: "#", data: tags } + ], + triggerTemplate: template(obj => { + if (obj.trigger === "@") { + return `
+ +
${obj.data.label}
+
${obj.data.name}
+
`; + } + // other triggers (for example, "#") use the plain label + return obj.data.label; + }) +}); +~~~ + +**Change log:** The property was added in v2.1 + +**Related samples:** + +- [RichText. Custom dropdown template per trigger](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext) +- [RichText. Emoji autocomplete](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) + +**Related articles:** [Mentions and tags](guides/mentions_and_tags.md) diff --git a/docs/api/config/triggers.md b/docs/api/config/triggers.md new file mode 100644 index 0000000..9c36fae --- /dev/null +++ b/docs/api/config/triggers.md @@ -0,0 +1,250 @@ +--- +sidebar_label: triggers +title: triggers Config +description: You can learn about the triggers 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. +--- + +# triggers + +### Description + +@short: Optional. Defines dropdown triggers for inserting mentions, tags, and other tokens + +When a user types a configured character (for example, `@` or `#`), RichText opens a dropdown with predefined items. When the user selects an item, RichText inserts it into the document as a non-editable token (``). + +### Usage + +~~~jsx {} +triggers?: Array<{ + trigger: string, + data: Array<{ id?: string | number; label?: string; url?: string }> + | ((query: string) => + Array<{ id?: string | number; label?: string; url?: string }> + | Promise>), + showTrigger?: boolean, + action?: (item) => void +}>; +~~~ + +### Parameters + +Each entry of the `triggers` array accepts the following fields: + +- `trigger` - (required) the character that opens the suggestion dropdown (for example, `"@"`, `"#"`, `"/"`, `"$"`) +- `data` - (required) the data source for the dropdown; can be an array, a sync function, or an async function. See [Data source forms](#data-source-forms) +- `showTrigger` - (optional) when `true` (default), RichText keeps the trigger character in the inserted token (for example, `@Alice`); when `false`, RichText inserts only `label` (for example, `Alice`) +- `action` - (optional) a custom callback called when a user selects an item. When set, RichText removes the typed trigger text (the trigger character plus the query) and calls `action(item)` **instead of** inserting a token. The callback receives the picked item and can insert any content instead of the selected one. The `action` parameter takes priority over `showTrigger`, which has no effect when `action` is set. See [Custom action](#custom-action) + +### Data source forms + +* **Static array** — RichText filters the array automatically by matching the query against `label` (case-insensitive, `startsWith`): + +~~~jsx {3-7} +new richtext.Richtext("#root", { + triggers: [{ + trigger: "@", + data: [ + { id: "alice", label: "Alice" }, + { id: "bob", label: "Bob" } + ] + }] +}); +~~~ + +* **Sync function** — RichText calls your function with the current `query` string; you do the filtering and return the matching array: + +~~~jsx {3-6} +new richtext.Richtext("#root", { + triggers: [{ + trigger: "#", + data: query => tags.filter(t => + t.label.toLowerCase().startsWith(query.toLowerCase()) + ) + }] +}); +~~~ + +* **Async function** — RichText calls your function with the current `query` string; return a `Promise` that resolves to the matching array. Useful for server-side search: + +~~~jsx {3-8} +new richtext.Richtext("#root", { + triggers: [{ + trigger: "+", + data: async query => { + const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`); + const users = await res.json(); + return users.map(u => ({ id: String(u.id), label: u.name, url: u.website })); + } + }] +}); +~~~ + +### Suggestion item fields + +Each item in `data` (or each item returned by a function) has the following fields: + +- `id` - (optional) unique identifier saved on the inserted token. If omitted, RichText generates an ID automatically +- `label` - (optional) the text shown in the dropdown and inserted into the document. Required only for the default rendering; with a custom [`triggerTemplate`](api/config/trigger-template.md) you can render items from other fields (for example, `template(({ data }) => data.id)`) and omit `label` +- `url` - (optional) URL associated with the item. RichText stores the URL as the inserted token's `href` attribute. `Ctrl+Click` on the token opens the link + +An item may also include any number of custom fields beyond `id`, `label`, and `url` (for example, `code` for an emoji, or `image` and `name` for an avatar). These extra fields are passed through to the [`triggerTemplate`](api/config/trigger-template.md) callback and to the `action` callback. + +### Rendered token + +When a user selects an item in the dropdown, RichText inserts a non-editable token element into the document: + +~~~html {} +@Alice +~~~ + +- `@` (in `data-token="@"`) - the item's `trigger` +- `alice` (in `data-token-id="alice"`) - the item's `id` +- `mailto:alice@example.com` (in `href="mailto:alice@example.com"`) - the item's `url` +- `@Alice` - the combination of `trigger` and `label`; with `showTrigger: false` it would be just `Alice` + +Use the `data-token` and `data-token-id` attributes to target tokens with CSS, for example, to highlight all mentions of a user: + +~~~css {} +.wx-editor-content a[data-token="@"][data-token-id="alice"] { + background: #fb8500; + color: #fff; +} +~~~ + +### Custom action + +By default, when a user picks an item, RichText inserts the item into the document as a token. Set the `action` parameter to run your code instead: RichText removes the typed trigger string (the trigger character and the query) and calls the `action(item)` callback with the picked item. No token is inserted, so you can decide what to add to the document (or run your custom code). The `action` parameter takes priority over `showTrigger`. When `action` is set, `showTrigger` is ignored. + +#### Add emoji + +A common use case is inserting an emoji from a `:` trigger, where each item contains a custom `code` field. Pair `action` with [`triggerTemplate`](api/config/trigger-template.md) so the dropdown shows the emoji itself instead of just its label: + +~~~jsx {8,12} +const { template, Richtext } = richtext; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: emoji, // [{ id: "apple", label: "apple", code: "1F34E" }, ...] + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // render the emoji itself (not just its label) in the dropdown + triggerTemplate: template(({ data }) => `${emojiFromCode(data.code)} ${data.label}`) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} +~~~ + +#### Group emoji by categories + +When the `data` parameter is a function, you are not limited to the built-in `label` matching. You can run your own filtering and keep category headers in the dropdown. Add header items that include a `label` field and do not include `code`. The `data` function first finds the emoji that match the query, then returns emoji together with the headers of the categories that still have matches: + +~~~jsx {18-26,31-33,41} +const { template, Richtext } = richtext; + +// header items carry no `code` field; emoji items include one +const emoji = [ + { id: "$smileys", label: "Smileys", category: 1 }, // category + { id: "grinning", label: "grinning", code: "1F600", category: 1 }, + { id: "smile", label: "smile", code: "1F604", category: 1 }, + { id: "$animals", label: "Animals", category: 2 }, // category + { id: "dog", label: "dog", code: "1F436", category: 2 }, + { id: "cat", label: "cat", code: "1F431", category: 2 } +]; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: query => { + const matched = emoji.filter(item => + item.code && + item.label.toLowerCase().startsWith(query.toLowerCase().trim()) + ); + const categories = new Set(matched.map(item => item.category)); + // keep matching emoji plus the headers of categories that still match + return emoji.filter(item => + item.code ? matched.includes(item) : categories.has(item.category) + ); + }, + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // render emoji rows normally and category headers in bold + triggerTemplate: template(({ data }) => + data.code ? `${emojiFromCode(data.code)} ${data.label}` : `${data.label}` + ) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} + +// headers have no `code` — ignore picks on them so they are never inserted +editor.api.intercept("insert-token", ({ data }) => !!data.code); +~~~ + +#### Add slash-style command menu + +You can use `action` to build a slash-style command menu (like `/` in Notion or Slack). Store a command name in each item's `id`, its options in a custom `config` field, and let the callback run it with [`api.exec`](api/internal/exec.md): + +~~~jsx {13} +// each item stores an api.exec action name in `id` and its parameters in `config` +const commands = [ + { id: "set-text-style", label: "Heading 1", config: { tag: "h1" } }, + { id: "insert-list", label: "Bulleted list", config: { type: "bulleted" } }, + { id: "insert-line", label: "Divider" } // no config → `|| {}` applies +]; + +const editor = new richtext.Richtext("#root", { + triggers: [ + { + trigger: "/", + data: commands, + action: item => editor.api.exec(item.id, item.config || {}) + } + ] +}); +~~~ + +### Example + +The following example sets up two triggers: `@` for mentions (each item carries a `url` that becomes the token's `href`) and `#` for tags (label only): + +~~~jsx {4,11} +new richtext.Richtext("#root", { + triggers: [ + { + trigger: "@", + data: [ + { id: "alice", label: "Alice", url: "mailto:alice@example.com" }, + { id: "bob", label: "Bob", url: "mailto:bob@example.com" } + ] + }, + { + trigger: "#", + data: [ + { id: "css", label: "CSS" }, + { id: "html", label: "HTML" } + ] + } + ] +}); +~~~ + +**Change log:** The property was added in v2.1 + +**Related samples:** + +- [RichText. Mentions, tags, and async lookup](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) +- [RichText. Custom dropdown template per trigger](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext) +- [RichText. Emoji autocomplete](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) +- [RichText. Slash commands](https://snippet.dhtmlx.com/e0mrmyam?tag=richtext) +- [RichText. Find and highlight mentions](https://snippet.dhtmlx.com/8y6zvzh2?tag=richtext) +- [RichText. Highlight all mentions](https://snippet.dhtmlx.com/2rbo12jx?tag=richtext) + +**Related articles:** [Mentions and tags](guides/mentions_and_tags.md) diff --git a/docs/api/events/align.md b/docs/api/events/align.md index c46be2f..db6ad3b 100644 --- a/docs/api/events/align.md +++ b/docs/api/events/align.md @@ -20,7 +20,7 @@ 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 of the `align` event can take an object with the following parameter: - `align` - a text alignment. You can specify one of the following values: `"left" | "center" | "right" | "justify"` diff --git a/docs/api/events/create-new.md b/docs/api/events/create-new.md index eb4676b..29c8f63 100644 --- a/docs/api/events/create-new.md +++ b/docs/api/events/create-new.md @@ -18,7 +18,7 @@ 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 of the `create-new` event can take an object with the following parameter: - `reset` - resets the history when creating a new file diff --git a/docs/api/events/export.md b/docs/api/events/export.md index 0691bd5..65af50b 100644 --- a/docs/api/events/export.md +++ b/docs/api/events/export.md @@ -25,7 +25,7 @@ interface IExportOptions { ### Parameters -The callback of **export** event can take an object with the following parameters: +The callback of `export` event can take an object with the following parameters: - `format` - a file format - `url` - a base URL for file export diff --git a/docs/api/events/hide-suggest.md b/docs/api/events/hide-suggest.md new file mode 100644 index 0000000..4f80dca --- /dev/null +++ b/docs/api/events/hide-suggest.md @@ -0,0 +1,51 @@ +--- +sidebar_label: hide-suggest +title: hide-suggest Event +description: You can learn about the hide-suggest 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. +--- + +# hide-suggest + +### Description + +@short: Fires when the suggestion dropdown closes + +The event fires when any of these happen: + +- the user picks an item from the dropdown +- the user presses `Escape` +- the cursor leaves the trigger context (for example, on `Backspace` past the trigger character) +- the current query returns no matches + +### Usage + +~~~jsx {} +"hide-suggest": () => boolean | void; +~~~ + +### Parameters + +The `hide-suggest` event callback does not receive any parameters. + +:::info +To handle internal events, use [**Event Bus methods**](api/overview/event_bus_methods_overview.md). +::: + +### Example + +~~~jsx {5-7} +// initialize RichText +const editor = new richtext.Richtext("#root", { + // configuration properties +}); +// subscribe to the "hide-suggest" event +editor.api.on("hide-suggest", () => { + console.log("Suggestion dropdown closed"); +}); +~~~ + +**Change log:** The event was added in v2.1 + +**Related sample:** [RichText. Mentions, tags, and async lookup](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +**Related articles:** [Mentions and tags](guides/mentions_and_tags.md) diff --git a/docs/api/events/import.md b/docs/api/events/import.md index d3dd7e2..4f1cbc3 100644 --- a/docs/api/events/import.md +++ b/docs/api/events/import.md @@ -18,7 +18,7 @@ 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 of `import` event can take an object with the following parameter: - `html` - a text value in the html format diff --git a/docs/api/events/indent.md b/docs/api/events/indent.md index 4d400de..ddebe4f 100644 --- a/docs/api/events/indent.md +++ b/docs/api/events/indent.md @@ -18,7 +18,7 @@ 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 of the `indent` event can take an object with the following parameters: - `step` - the step by which indentation was increased diff --git a/docs/api/events/insert-image.md b/docs/api/events/insert-image.md index 7898511..ca21475 100644 --- a/docs/api/events/insert-image.md +++ b/docs/api/events/insert-image.md @@ -8,7 +8,7 @@ description: You can learn about the insert-image event in the documentation of ### Description -@short: Fires when inserting image +@short: Fires when inserting an image (via the toolbar, menubar, clipboard paste, or drag-and-drop) ### Usage @@ -17,7 +17,7 @@ description: You can learn about the insert-image event in the documentation of interface IImageContext { id: TID; - value: string; + value: string; // image source: server URL when imageUploadUrl is set, or a base64 data URL when the image is inlined width: number; height: number; // extra props from uploader ctx, not required for the actual action @@ -29,6 +29,10 @@ interface IImageContext { } ~~~ +:::note +The `value` field holds either an external URL (when [`imageUploadUrl`](api/config/image-upload-url.md) is configured and the upload succeeds) or a base64 data URL (when `imageUploadUrl` is omitted and the image is inlined on the client). Handlers that process the source — for example, to rewrite the URL or validate the host — must account for both formats. +::: + :::info For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md) ::: diff --git a/docs/api/events/insert-link.md b/docs/api/events/insert-link.md index 1db8b8d..e994de0 100644 --- a/docs/api/events/insert-link.md +++ b/docs/api/events/insert-link.md @@ -18,7 +18,7 @@ description: You can learn about the insert-link event in the documentation of t ### Parameters -The callback of the **update-link** event can take an object with the following parameter: +The callback of the `insert-link` event can take an object with the following parameter: - `url` - the url to be inserted diff --git a/docs/api/events/insert-list.md b/docs/api/events/insert-list.md index 3be5f19..e34711e 100644 --- a/docs/api/events/insert-list.md +++ b/docs/api/events/insert-list.md @@ -20,7 +20,7 @@ type TListType = "bulleted" | "numbered"; ### Parameters -The callback of the **insert-list** event can take an object with the following parameter: +The callback of the `insert-list` event can take an object with the following parameter: - `type` - the type of the inserted list. You can specify the following values: - `"bulleted"` - bulleted list diff --git a/docs/api/events/insert-token.md b/docs/api/events/insert-token.md new file mode 100644 index 0000000..3cac4c9 --- /dev/null +++ b/docs/api/events/insert-token.md @@ -0,0 +1,61 @@ +--- +sidebar_label: insert-token +title: insert-token Event +description: You can learn about the insert-token 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. +--- + +# insert-token + +### Description + +@short: Fires after the user picks a suggestion item and RichText inserts it as a token + +The `insert-token` event fires after the user picks an item from a trigger dropdown (mentions, tags, or any custom trigger you set up through the [`triggers`](api/config/triggers.md) property). + +### Usage + +~~~jsx {} +"insert-token": ({ + data: { + id?: string | number, + label?: string, + url?: string, + // ...any custom fields from the trigger's data source + }, + trigger: string, + showTrigger?: boolean, + action?: (item) => void +}) => boolean | void; +~~~ + +### Parameters + +The callback of the `insert-token` event receives an object with the following fields: + +- `data` - the picked suggestion item. Contains the `id`, `label`, and `url` of the item, as well as any custom fields you added to the trigger's `data` source +- `trigger` - the trigger character that opened the dropdown (for example, `"@"` or `"#"`) +- `showTrigger` - when `false`, RichText inserts only `label`; otherwise the widget also shows the trigger character (default) +- `action` - a custom action defined for the matching [trigger](api/config/triggers.md). When set, the parameter takes priority over token insertion: RichText removes the typed text (the trigger character and the query) and calls `action(data)` instead of inserting a token. The `showTrigger` parameter has no effect in this case + +:::info +To handle internal events, 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 "insert-token" event +editor.api.on("insert-token", ({ data, trigger, showTrigger }) => { + console.log(`Inserted ${trigger}${data.label} (id: ${data.id})`); +}); +~~~ + +**Change log:** The event was added in v2.1 + +**Related sample:** [RichText. Mentions, tags, and async lookup](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +**Related articles:** [Mentions and tags](guides/mentions_and_tags.md) diff --git a/docs/api/events/outdent.md b/docs/api/events/outdent.md index 94f6245..64e8edc 100644 --- a/docs/api/events/outdent.md +++ b/docs/api/events/outdent.md @@ -18,7 +18,7 @@ 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 of the `outdent` event can take an object with the following parameter: - `step` - the step by which indentation was decreased diff --git a/docs/api/events/resize-image.md b/docs/api/events/resize-image.md index 9db126e..3a21d7f 100644 --- a/docs/api/events/resize-image.md +++ b/docs/api/events/resize-image.md @@ -18,7 +18,7 @@ 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 of the `resize-image` event can take an object with the following parameters: - `id` - the image ID - `width` - the image width diff --git a/docs/api/events/set-font-family.md b/docs/api/events/set-font-family.md index 9626bd7..29894c6 100644 --- a/docs/api/events/set-font-family.md +++ b/docs/api/events/set-font-family.md @@ -18,7 +18,7 @@ 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 of the `set-font-family` event can take an object with the following parameter: - `fontFamily` - a font family to be applied. The following fonts are available: `"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"` diff --git a/docs/api/events/set-font-size.md b/docs/api/events/set-font-size.md index 3c68fa6..27937c8 100644 --- a/docs/api/events/set-font-size.md +++ b/docs/api/events/set-font-size.md @@ -18,7 +18,7 @@ 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 of the `set-font-size` event can take an object with the following parameter: - `fontSize` - a font size to be applied diff --git a/docs/api/events/set-line-height.md b/docs/api/events/set-line-height.md index 0dc8832..f31ec22 100644 --- a/docs/api/events/set-line-height.md +++ b/docs/api/events/set-line-height.md @@ -18,7 +18,7 @@ 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 of the `set-line-height` event can take an object with the following parameter: - `lineHeight` - a line height diff --git a/docs/api/events/set-text-color.md b/docs/api/events/set-text-color.md index b846db2..b12ebc9 100644 --- a/docs/api/events/set-text-color.md +++ b/docs/api/events/set-text-color.md @@ -23,7 +23,7 @@ interface ITextColor { ### Parameters -The callback of the **set-text-color** event can take an object with the following parameters: +The callback of the `set-text-color` event can take an object with the following parameters: - `color` - a text color - `background` - a text background color diff --git a/docs/api/events/set-text-format.md b/docs/api/events/set-text-format.md index f3c2cd2..c2b6bc5 100644 --- a/docs/api/events/set-text-format.md +++ b/docs/api/events/set-text-format.md @@ -29,7 +29,7 @@ For handling inner events you can use [**Event Bus methods**](api/overview/event ### Parameters -The callback of the **set-text-format** event can take an object with the following parameters: +The callback of the `set-text-format` event can take an object with the following parameters: - `bold` - a bold text format - `italic` - an italic text format diff --git a/docs/api/events/set-text-style.md b/docs/api/events/set-text-style.md index 102eb5b..6c627ee 100644 --- a/docs/api/events/set-text-style.md +++ b/docs/api/events/set-text-style.md @@ -20,7 +20,7 @@ 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 of the `set-text-style` event can take an object with the following parameters: - `tag` - a text style diff --git a/docs/api/events/show-popup.md b/docs/api/events/show-popup.md index 3ecf004..7b4d95b 100644 --- a/docs/api/events/show-popup.md +++ b/docs/api/events/show-popup.md @@ -23,7 +23,7 @@ interface IPopupConfig { ### Parameters -The callback of the **show-popup** event can take an object with the following parameters: +The callback of the `show-popup` event can take an object with the following parameters: - `type` - a type of the popup - `image` - provides access to additional context (is the current cursor pointing at an image or not) diff --git a/docs/api/events/show-suggest.md b/docs/api/events/show-suggest.md new file mode 100644 index 0000000..2120a52 --- /dev/null +++ b/docs/api/events/show-suggest.md @@ -0,0 +1,64 @@ +--- +sidebar_label: show-suggest +title: show-suggest Event +description: You can learn about the show-suggest 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. +--- + +# show-suggest + +### Description + +@short: Fires when the suggestion dropdown opens for a configured trigger + +The `show-suggest` event fires after RichText resolves a non-empty list of items for the current trigger, just before the dropdown opens. Intercept the event to adjust the items, move the dropdown, or cancel it. + +### Usage + +~~~jsx {} +"show-suggest": ({ + trigger: string, + query: string, + items: Array<{ + id?: string | number, + label?: string, + url?: string, + // ...any custom fields from the trigger's data source + }>, + pos: DOMRect +}) => boolean | void; +~~~ + +### Parameters + +The callback of the `show-suggest` event receives an object with the following fields: + +- `trigger` - the trigger character that opened the dropdown +- `query` - the text typed after the trigger character (used to filter `items`) +- `items` - the resolved (and already filtered) list of suggestion items. Each item follows the [suggestion item shape](api/config/triggers.md#suggestion-item-fields): optional `id`, `label`, and `url`, plus any custom fields (such as `image` or `name`) used by [`triggerTemplate`](api/config/trigger-template.md) +- `pos` - a `DOMRect` describing the cursor position; used to place the dropdown on screen + +:::info +To handle internal events, use [**Event Bus methods**](api/overview/event_bus_methods_overview.md). +::: + +### Example + +~~~jsx {6-11} +// initialize RichText +const editor = new richtext.Richtext("#root", { + triggers: [{ trigger: "@", data: people }] + // other configuration properties +}); +// override the suggestion list before the dropdown opens +editor.api.intercept("show-suggest", (state) => { + if (state.trigger === "@" && state.query === "") { + return { ...state, items: state.items.slice(0, 5) }; + } +}); +~~~ + +**Change log:** The event was added in v2.1 + +**Related sample:** [RichText. Mentions, tags, and async lookup](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +**Related articles:** [Mentions and tags](guides/mentions_and_tags.md) diff --git a/docs/api/events/toggle-fullscreen-mode.md b/docs/api/events/toggle-fullscreen-mode.md index ad49e57..68a6561 100644 --- a/docs/api/events/toggle-fullscreen-mode.md +++ b/docs/api/events/toggle-fullscreen-mode.md @@ -18,7 +18,7 @@ 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 of the `toggle-fullscreen-mode` event can take an object with the following parameter: - `mode` - enables a fullscreen mode diff --git a/docs/api/events/toggle-layout-mode.md b/docs/api/events/toggle-layout-mode.md index e71b2df..5949f15 100644 --- a/docs/api/events/toggle-layout-mode.md +++ b/docs/api/events/toggle-layout-mode.md @@ -18,7 +18,7 @@ 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 of the `toggle-layout-mode` event can take an object with the following parameters: - `mode` - the layout mode. The following modes are available: `"classic" | "document"` diff --git a/docs/api/events/toggle-shortcut-info.md b/docs/api/events/toggle-shortcut-info.md index 4bc2ec6..de113b9 100644 --- a/docs/api/events/toggle-shortcut-info.md +++ b/docs/api/events/toggle-shortcut-info.md @@ -18,7 +18,7 @@ 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 of the `toggle-shortcut-info` event can take an object with the following parameter: - `mode` - enables a shortcut info; `true` to show shortcut info popup, `false` to hide shortcut info popup diff --git a/docs/api/events/update-link.md b/docs/api/events/update-link.md index 01072fb..40bffd6 100644 --- a/docs/api/events/update-link.md +++ b/docs/api/events/update-link.md @@ -18,7 +18,7 @@ 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 of the `update-link` event can take an object with the following parameters: - `id` - the link ID - `url` - the modified url diff --git a/docs/api/methods/get-value.md b/docs/api/methods/get-value.md index 4ed50ae..971bd9d 100644 --- a/docs/api/methods/get-value.md +++ b/docs/api/methods/get-value.md @@ -18,13 +18,14 @@ 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 used to encode the RichText's content into a custom format. The following formats are available: `html` (default), `text`, and `markdown` You can get the required encoder in the following way: ```jsx -const toTextEncoder = richtext.text.toText; // text encoder -const toHTMLEncoder = richtext.html.toHTML; // html encoder +const toTextEncoder = richtext.text.toText; // text encoder +const toHTMLEncoder = richtext.html.toHTML; // html encoder +const toMarkdownEncoder = richtext.markdown.toMarkdown; // markdown encoder ``` ### Example diff --git a/docs/api/methods/insert-value.md b/docs/api/methods/insert-value.md new file mode 100644 index 0000000..f2a4543 --- /dev/null +++ b/docs/api/methods/insert-value.md @@ -0,0 +1,50 @@ +--- +sidebar_label: insertValue() +title: insertValue Method +description: You can learn about the insertValue 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. +--- + +# insertValue() + +### Description + +@short: Inserts text, Markdown, or HTML content at the current cursor position or replaces the selected text + +### Usage + +~~~jsx {} +insertValue: (value: string, encoder?: any): void; +~~~ + +### Parameters + +- `value` - (required) a value to be inserted into the RichText at the current cursor position. If a selection is active, the selection is replaced with the new value +- `encoder` - (optional) a parser used to decode the inserted value. The following formats are available: `html` (default), `text`, and `markdown` + +You can get the required encoder in the following way: + +```jsx +const fromTextEncoder = richtext.text.fromText; // text encoder +const fromHTMLEncoder = richtext.html.fromHTML; // html encoder +const fromMarkdownEncoder = richtext.markdown.fromMarkdown; // markdown encoder +``` + +### Example + +~~~jsx {6} +const editor = new richtext.Richtext("#root", { + // configuration properties +}); + +// inserts an HTML link with custom attributes at the cursor position +editor.insertValue("link"); +~~~ + +The inserted content is added as a single history entry and can be reverted with one **Undo** step. + +**Change log:** The method was added in v2.1 + +**Related samples:** + +- [RichText. Insert content at cursor](https://snippet.dhtmlx.com/pew2g1ku?tag=richtext) +- [RichText. Working with different formats (Markdown, HTML, text)](https://snippet.dhtmlx.com/cne4kujn?tag=richtext) diff --git a/docs/api/methods/set-value.md b/docs/api/methods/set-value.md index 5d40f94..156df1d 100644 --- a/docs/api/methods/set-value.md +++ b/docs/api/methods/set-value.md @@ -19,13 +19,14 @@ 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` +- `encoder` - (optional) a custom parser used to decode the value from a custom format. The following formats are available: `html` (default), `text`, and `markdown` You can get the required encoder in the following way: ```jsx -const fromTextEncoder = richtext.text.fromText; // text encoder -const fromHTMLEncoder = richtext.html.fromHTML; // html encoder +const fromTextEncoder = richtext.text.fromText; // text encoder +const fromHTMLEncoder = richtext.html.fromHTML; // html encoder +const fromMarkdownEncoder = richtext.markdown.fromMarkdown; // markdown encoder ``` ### Example @@ -42,3 +43,5 @@ editor.setValue(editor_value, fromTextEncoder); ~~~ **Change log:** The method was updated in v2.0. The `mode` parameter was removed. The `encoder` parameter was added + +**Related sample:** [RichText. Working with different formats (Markdown, HTML, text)](https://snippet.dhtmlx.com/cne4kujn?tag=richtext) diff --git a/docs/api/overview/events_overview.md b/docs/api/overview/events_overview.md index 534ad01..be3831d 100644 --- a/docs/api/overview/events_overview.md +++ b/docs/api/overview/events_overview.md @@ -18,12 +18,14 @@ You can use these events to extend functionality, track user interaction, or tri | [](api/events/cut.md) | @getshort(api/events/cut.md) | | [](api/events/delete-link.md) | @getshort(api/events/delete-link.md) | | [](api/events/export.md) | @getshort(api/events/export.md) | +| [](api/events/hide-suggest.md) | @getshort(api/events/hide-suggest.md) | | [](api/events/import.md) | @getshort(api/events/import.md) | | [](api/events/indent.md) | @getshort(api/events/indent.md) | | [](api/events/insert-image.md) | @getshort(api/events/insert-image.md) | | [](api/events/insert-line.md) | @getshort(api/events/insert-line.md) | | [](api/events/insert-link.md) | @getshort(api/events/insert-link.md) | | [](api/events/insert-list.md) | @getshort(api/events/insert-list.md) | +| [](api/events/insert-token.md) | @getshort(api/events/insert-token.md) | | [](api/events/outdent.md) | @getshort(api/events/outdent.md) | | [](api/events/paste.md) | @getshort(api/events/paste.md) | | [](api/events/print.md) | @getshort(api/events/print.md) | @@ -36,6 +38,7 @@ You can use these events to extend functionality, track user interaction, or tri | [](api/events/set-text-format.md) | @getshort(api/events/set-text-format.md) | | [](api/events/set-text-style.md) | @getshort(api/events/set-text-style.md) | | [](api/events/show-popup.md) | @getshort(api/events/show-popup.md) | +| [](api/events/show-suggest.md) | @getshort(api/events/show-suggest.md) | | [](api/events/subscript.md) | @getshort(api/events/subscript.md) | | [](api/events/superscript.md) | @getshort(api/events/superscript.md) | | [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md)| diff --git a/docs/api/overview/main_overview.md b/docs/api/overview/main_overview.md index c89b2fc..9337cae 100644 --- a/docs/api/overview/main_overview.md +++ b/docs/api/overview/main_overview.md @@ -25,6 +25,7 @@ new richtext.RichText("#root", { | ----------------------------------------------|-------------------------------------------| | [](api/methods/get-value.md) | @getshort(api/methods/get-value.md) | | [](api/methods/set-value.md) | @getshort(api/methods/set-value.md) | +| [](api/methods/insert-value.md) | @getshort(api/methods/insert-value.md) | | [](api/methods/set-config.md) | @getshort(api/methods/set-config.md) | | [](api/methods/set-locale.md) | @getshort(api/methods/set-locale.md) | | [](api/methods/destructor.md) | @getshort(api/methods/destructor.md) | diff --git a/docs/api/overview/methods_overview.md b/docs/api/overview/methods_overview.md index b6b8f67..6c5c41b 100644 --- a/docs/api/overview/methods_overview.md +++ b/docs/api/overview/methods_overview.md @@ -14,5 +14,6 @@ Use this reference to quickly navigate to detailed descriptions of each method, | [](api/methods/destructor.md) | @getshort(api/methods/destructor.md) | | [](api/methods/get-value.md) | @getshort(api/methods/get-value.md) | | [](api/methods/set-value.md) | @getshort(api/methods/set-value.md) | +| [](api/methods/insert-value.md) | @getshort(api/methods/insert-value.md) | | [](api/methods/set-config.md) | @getshort(api/methods/set-config.md) | | [](api/methods/set-locale.md) | @getshort(api/methods/set-locale.md) | diff --git a/docs/api/overview/properties_overview.md b/docs/api/overview/properties_overview.md index 255a158..e545112 100644 --- a/docs/api/overview/properties_overview.md +++ b/docs/api/overview/properties_overview.md @@ -18,4 +18,6 @@ They help you control layout, toolbar, value, localization, and other aspects of | [](api/config/locale.md) | @getshort(api/config/locale.md) | | [](api/config/menubar.md) | @getshort(api/config/menubar.md) | | [](api/config/toolbar.md) | @getshort(api/config/toolbar.md) | +| [](api/config/trigger-template.md) | @getshort(api/config/trigger-template.md) | +| [](api/config/triggers.md) | @getshort(api/config/triggers.md) | | [](api/config/value.md) | @getshort(api/config/value.md) | diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 855ae27..71d92be 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -16,21 +16,22 @@ You can configure the RichText appearance and behavior with the following proper - [`locale`](api/config/locale.md) — apply a localization object on initialization - [`defaultStyles`](api/config/default-styles.md) — set default styles for specific block types - [`imageUploadUrl`](api/config/image-upload-url.md) — set the endpoint for image uploads +- [`triggers`](api/config/triggers.md) — enable @mentions, #tags, and custom dropdown triggers (see the [Mentions and tags](guides/mentions_and_tags.md) guide) ## Layout modes RichText supports two layout modes for the editing area: -- **"classic"** — the edit area fills the entire page +- `"classic"` — the edit area fills the entire page
-![Classic mode](./../assets/richtext/classic_mode.png) +![DHTMLX RichText editor in classic layout mode](/img/richtext/classic_mode.png)
-- **"document"** — the edit area mimics a document page +- `"document"` — the edit area mimics a document page
-![Document mode](./../assets/richtext/document_mode.png) +![DHTMLX RichText editor in document layout mode](/img/richtext/document_mode.png)
Set the [`layoutMode`](api/config/layout-mode.md) property during initialization to choose the mode: @@ -41,6 +42,8 @@ const editor = new richtext.Richtext("#root", { }); ~~~ +**Related sample:** [RichText. Document and classic modes](https://snippet.dhtmlx.com/jz8q432l?tag=richtext) + ## Toolbar The RichText toolbar groups controls into several blocks that you can customize. @@ -124,7 +127,7 @@ new richtext.Richtext("#root", { }); ~~~ -**Related sample:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) +**Related sample:** [RichText. Full toolbar](https://snippet.dhtmlx.com/ziynafp7?tag=richtext) ### Add custom toolbar controls @@ -201,6 +204,8 @@ new richtext.Richtext("#root", { }); ~~~ +**Related sample:** [RichText. Initialization with menubar](https://snippet.dhtmlx.com/tjryzka7?tag=richtext) + ## Set the initial content Use the [`value`](api/config/value.md) property to pass initial HTML content into the editor on initialization: @@ -214,6 +219,8 @@ new richtext.Richtext("#root", { To replace the content after initialization, or to load it in a non-HTML format with a custom encoder, call the [`setValue()`](api/methods/set-value.md) method. +**Related sample:** [RichText. Working with different formats (Markdown, HTML, text)](https://snippet.dhtmlx.com/cne4kujn?tag=richtext) + ## Set the initial locale Use the [`locale`](api/config/locale.md) property to apply a localization object on initialization: @@ -238,9 +245,13 @@ new richtext.Richtext("#root", { }); ~~~ -## Configure the image upload URL +## Configure image insertion + +RichText supports two modes for inserting images via the toolbar, menubar, paste, or drag-and-drop. The mode is selected automatically based on the [`imageUploadUrl`](api/config/image-upload-url.md) property. -Pass a URL to the [`imageUploadUrl`](api/config/image-upload-url.md) property to set the server endpoint for toolbar image uploads: +### Upload images to a server + +Pass a URL to the [`imageUploadUrl`](api/config/image-upload-url.md) property to upload each inserted image to your endpoint. RichText sends the file as `multipart/form-data` (field name `upload`) and inserts the URL returned by the server: ~~~jsx {2} new richtext.Richtext("#root", { @@ -249,6 +260,25 @@ new richtext.Richtext("#root", { }); ~~~ +### Insert images inline as base64 + +Omit [`imageUploadUrl`](api/config/image-upload-url.md) (or set it to an empty string) to embed images directly into the document content as base64 data URLs. No server is required: + +~~~jsx {2} +new richtext.Richtext("#root", { + // imageUploadUrl is not set, images are inserted inline + // other configuration properties +}); +~~~ + +Inline images larger than 1024×800 are displayed at a reduced size (the `width`/`height` attributes are capped to fit within these limits), but the embedded bytes are the original, full-resolution file — the client does not downscale or re-encode it. + +:::note +Inline (base64) images are not preserved by the built-in DOCX / PDF [export](api/events/export.md). If you rely on export, supply an `imageUploadUrl` so that images reference an external location. +::: + +See [Working with the server](guides/working_with_server.md) for the full request/response contract the upload endpoint must implement and a closer look at the inline-image fallback. + ## Configure default styles Use the [`defaultStyles`](api/config/default-styles.md) property to set default styles per block type. diff --git a/docs/guides/initialization.md b/docs/guides/initialization.md index 356b533..8876020 100644 --- a/docs/guides/initialization.md +++ b/docs/guides/initialization.md @@ -76,3 +76,5 @@ editor.destructor(); The example below initializes RichText with the menubar enabled: + +**Related sample:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md index e457d69..27feb32 100644 --- a/docs/guides/integration_with_angular.md +++ b/docs/guides/integration_with_angular.md @@ -294,7 +294,7 @@ platformBrowserDynamic() Start the app to see RichText render with data on the page.
-![RichText initialization](../assets/trial_richtext.png) +![DHTMLX RichText rendered in an Angular application with sample content](/img/trial_richtext.png)
You now have a working RichText integration in Angular. Customize the code to fit your needs. A complete example is available 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 73a882e..4ff70a5 100644 --- a/docs/guides/integration_with_react.md +++ b/docs/guides/integration_with_react.md @@ -247,7 +247,7 @@ useEffect(() => { Start the app to see RichText render with data on the page.
-![RichText initialization](../assets/trial_richtext.png) +![DHTMLX RichText rendered in a React application with sample content](/img/trial_richtext.png)
You now have a working RichText integration in React. Customize the code to fit your needs. A complete example is available on [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 3553b25..5cfd896 100644 --- a/docs/guides/integration_with_svelte.md +++ b/docs/guides/integration_with_svelte.md @@ -261,7 +261,7 @@ onDestroy(() => { Start the app to see RichText render with data on the page.
-![RichText initialization](../assets/trial_richtext.png) +![DHTMLX RichText rendered in a Svelte application with sample content](/img/trial_richtext.png)
You now have a working RichText integration in Svelte. Customize the code to fit your needs. A complete example is available on [GitHub](https://github.com/DHTMLX/svelte-richtext-demo). diff --git a/docs/guides/integration_with_vue.md b/docs/guides/integration_with_vue.md index 87d8ba3..631e882 100644 --- a/docs/guides/integration_with_vue.md +++ b/docs/guides/integration_with_vue.md @@ -271,7 +271,7 @@ export default { Start the app to see RichText render with data on the page.
-![RichText initialization](../assets/trial_richtext.png) +![DHTMLX RichText rendered in a Vue application with sample content](/img/trial_richtext.png)
You now have a working RichText integration in Vue. Customize the code to fit your needs. A complete example is available on [GitHub](https://github.com/DHTMLX/vue-richtext-demo). diff --git a/docs/guides/mentions_and_tags.md b/docs/guides/mentions_and_tags.md new file mode 100644 index 0000000..cc3121a --- /dev/null +++ b/docs/guides/mentions_and_tags.md @@ -0,0 +1,274 @@ +--- +sidebar_label: Mentions and tags +title: Mentions and tags +description: 'Learn how to configure @mentions, #tags, and custom dropdown triggers in DHTMLX RichText. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX RichText.' +--- + +# Mentions and tags + +RichText supports user-defined trigger characters that open a suggestion dropdown inside the document. When the user picks an item, RichText inserts a non-editable token into the document. Typical use cases: + +- `@` — mention a person +- `#` — apply a tag +- `/` — insert a command or template +- `$` — insert a financial ticker or variable +- `:` — insert an emoji + +Configure the behavior through the [`triggers`](api/config/triggers.md) property. Each entry binds one character to a data source. + +## Configure triggers + +Each trigger is an object `{ trigger, data, showTrigger?, action? }` within the [`triggers`](api/config/triggers.md) array. The [`data`](api/config/triggers.md#data-source-forms) field can take three forms: + +- A static array — RichText filters it automatically by `label` (case-insensitive, `startsWith`): + +~~~jsx {} +{ trigger: "@", data: people } +~~~ + +- A sync function — use it to filter results yourself: + +~~~jsx {} +{ + trigger: "#", + data: query => tags.filter(t => + t.label.toLowerCase().startsWith(query.toLowerCase()) + ) +} +~~~ + +- An async function — use it for server-side search: + +~~~jsx {} +{ + trigger: "+", + data: async query => { + const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`); + const users = await res.json(); + return users.map(u => ({ + id: String(u.id), + label: u.name, + url: u.website + })); + } +} +~~~ + +**Related sample:** [RichText. Mentions, tags, and async lookup](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +## Token rendering + +When the user picks an item from the dropdown, RichText inserts it as an `` element with two data attributes: + +~~~html {2-3} +@Alice +~~~ + +The token is a single non-editable node. `Backspace` deletes it in one step. RichText stores the `url` field in `href`, so `Ctrl+Click` on the token follows the link. + +You can style tokens with the `data-token` selector: + +~~~css {} +.wx-editor-content a[data-token="@"][data-token-id="alice"] { + background: #fb8500; + color: #fff; + border-radius: 3px; + padding: 0 2px; +} +~~~ + +**Related samples:** + +- [RichText. Find and highlight mentions](https://snippet.dhtmlx.com/8y6zvzh2?tag=richtext) +- [RichText. Highlight all mentions](https://snippet.dhtmlx.com/2rbo12jx?tag=richtext) + +## Hide the trigger character + +Set `showTrigger: false` on a trigger to insert only the item label, without the trigger symbol: + +~~~jsx {4} +{ + trigger: "/", + data: commands, + showTrigger: false +} +~~~ + +## Keyboard interaction + +Inside the suggestion dropdown you can use the following shortcuts: + +- `↑` / `↓` — move between items +- `Enter` — insert the active item +- `Escape` — close the dropdown without inserting + +## Listen to suggestion events + +Three events expose the dropdown lifecycle through the Event Bus: + +- [`insert-token`](api/events/insert-token.md) — fires when a user picks an item +- [`show-suggest`](api/events/show-suggest.md) — fires when the dropdown opens +- [`hide-suggest`](api/events/hide-suggest.md) — fires when the dropdown closes + +~~~jsx {5-7} +const editor = new richtext.Richtext("#root", { + triggers: [{ trigger: "@", data: people }] +}); + +editor.api.on("insert-token", ({ data, trigger, showTrigger }) => { + console.log(`Inserted ${trigger}${data.label} (id: ${data.id})`); +}); +~~~ + +## Customize the dropdown item + +By default the dropdown shows the `label` of each item. To render custom suggestions (for example, avatar, name and email) pass a template via the [`triggerTemplate`](api/config/trigger-template.md) property. + +### Example + +~~~jsx {1,4-9} +const { template } = richtext; + +new richtext.Richtext("#root", { + triggers: [{ trigger: "@", data: people }], + triggerTemplate: template(({ data, trigger }) => ` +
+
${trigger}${data.label}
+
${data.url || ""}
+
+ `) +}); +~~~ + +**Related sample:** [RichText. Custom dropdown template per trigger](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext) + +## Custom action on select + +By default, picking an item inserts it into the document as a token. To run your own code instead, add an `action` callback to the trigger. RichText removes the typed trigger text and calls `action(item)` with the picked item — no token is inserted, so you can decide what to add. + +:::note +`action` takes priority over `showTrigger`. When `action` is set, `showTrigger` is ignored. +::: + +### Add emoji + +A `:` trigger can insert an emoji, where each item includes a custom `code` field. Pair `action` with [`triggerTemplate`](api/config/trigger-template.md) so the dropdown shows the emoji instead of just its label: + +~~~jsx {18-20,24} +const { template, Richtext } = richtext; + +const emoji = [ + { + id: "apple", label: "apple", code: "1F34E" + }, + { + id: "blue_car", label: "blue_car", code: "1F699" + }, + { + id: "computer", label: "computer", code: "1F4BB" + } +]; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: emoji, // [{ id: "apple", label: "apple", code: "1F34E" }, ...] + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // render the emoji itself (not just its label) in the dropdown + triggerTemplate: template(({ data }) => `${emojiFromCode(data.code)} ${data.label}`) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} +~~~ + +**Related sample:** [RichText. Emoji autocomplete](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) + +### Group emoji by categories + +When the `data` parameter is a function, you are not limited to the built-in `label` matching. You can run your own filtering and keep category headers in the dropdown. Add header items that include a `label` field and do not include `code`. The `data` function first finds the emoji that match the query, then returns emoji together with the headers of the categories that still have matches: + +~~~jsx {17-26,31-33} +const { template, Richtext } = richtext; + +// header items carry no `code` field; emoji items include one +const emoji = [ + { id: "$smileys", label: "Smileys", category: 1 }, // category + { id: "grinning", label: "grinning", code: "1F600", category: 1 }, + { id: "smile", label: "smile", code: "1F604", category: 1 }, + { id: "$animals", label: "Animals", category: 2 }, // category + { id: "dog", label: "dog", code: "1F436", category: 2 }, + { id: "cat", label: "cat", code: "1F431", category: 2 } +]; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: query => { + const matched = emoji.filter(item => + item.code && + item.label.toLowerCase().startsWith(query.toLowerCase().trim()) + ); + const categories = new Set(matched.map(item => item.category)); + // keep matching emoji plus the headers of categories that still match + return emoji.filter(item => + item.code ? matched.includes(item) : categories.has(item.category) + ); + }, + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // render emoji rows normally and category headers in bold + triggerTemplate: template(({ data }) => + data.code ? `${emojiFromCode(data.code)} ${data.label}` : `${data.label}` + ) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} + +// headers have no `code` — ignore picks on them so they are never inserted +editor.api.intercept("insert-token", ({ data }) => !!data.code); +~~~ + +### Add slash-style command menu + +You can use `action` to build a slash-style command menu (like `/` in Notion or Slack). Store a command name in each item's `id`, its options in a custom `config` field, and let the callback run it with [`api.exec`](api/internal/exec.md): + +~~~jsx {13} +// each item stores an api.exec action name in `id` and its parameters in `config` +const commands = [ + { id: "set-text-style", label: "Heading 1", config: { tag: "h1" } }, + { id: "insert-list", label: "Bulleted list", config: { type: "bulleted" } }, + { id: "insert-line", label: "Divider" } // no config → `|| {}` applies +]; + +const editor = new richtext.Richtext("#root", { + triggers: [ + { + trigger: "/", + data: commands, + action: item => editor.api.exec(item.id, item.config || {}) + } + ] +}); +~~~ + +**Related sample:** [RichText. Slash commands](https://snippet.dhtmlx.com/e0mrmyam?tag=richtext) + +## Related API + +- [`triggers`](api/config/triggers.md) +- [`triggerTemplate`](api/config/trigger-template.md) +- [`insert-token`](api/events/insert-token.md) +- [`show-suggest`](api/events/show-suggest.md) +- [`hide-suggest`](api/events/hide-suggest.md) diff --git a/docs/guides/working_with_server.md b/docs/guides/working_with_server.md new file mode 100644 index 0000000..2b63dbc --- /dev/null +++ b/docs/guides/working_with_server.md @@ -0,0 +1,121 @@ +--- +sidebar_label: Working with the server +title: Working with the server +description: Learn how RichText communicates with a backend for image uploads, including the request/response contract and how to plug in your own server. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX RichText. +--- + +# Working with the server + +RichText runs entirely in the browser and does not need a backend for editing or saving content. Your application is free to persist the content of the editor wherever it wants. The one feature that benefits from a server is **image upload**: when a user inserts an image into the document, RichText can either embed the file inline in the content or post it to an HTTP endpoint and store a link to it. + +This guide explains: + +- what happens by default when no upload server is configured +- the exact HTTP contract the server has to implement +- how RichText uses the URL returned by the server +- how to try the feature against the demo backend + +## Default behavior: inline images + +If you do not set the [`imageUploadUrl`](api/config/image-upload-url.md) property, RichText falls back to inline images. When the user inserts an image, RichText reads the file in the browser, encodes the original file as a `data:image/...;base64,...` URL, and writes it directly into the editor content as the `src` of the `` element. RichText constrains the displayed size to fit within a 1024×800 box through the `width`/`height` attributes, but the embedded bytes are the original, full-resolution file — the client does not downscale or re-encode it. + +This works without any backend and is handy for quick demos, but it has clear limitations: + +- the encoded bytes live inside the document, so the saved HTML grows with every image +- the same image in two documents is stored twice — there is no shared resource to deduplicate +- because the bytes are not a separate resource, the server cannot serve them from a CDN or post-process them (resize, re-encode, scan) +- inline images are not preserved by the built-in DOCX / PDF [export](api/events/export.md) — if you rely on export, configure an upload server so images reference an external URL + +## Write your own server + +In production apps, point RichText at a server with [`imageUploadUrl`](api/config/image-upload-url.md): + +~~~jsx {2} +new richtext.Richtext("#root", { + imageUploadUrl: "https://example.com/upload" + // other configuration properties +}); +~~~ + +A minimal upload endpoint needs to: + +1. Accept a `multipart/form-data` POST with a file field named `upload`. +2. Validate the file (allowed types, maximum size). +3. Store the file somewhere the user's browser can fetch (a local disk served over HTTP, S3, a CDN, etc.). +4. Optionally resize or otherwise process the image. +5. Respond with a JSON object that contains `status: "server"`, `value` set to the public URL of the stored file, and the image's `width` and `height` in pixels. + +### What the client sends + +When [`imageUploadUrl`](api/config/image-upload-url.md) is set, RichText posts the selected file directly to that URL (it does not append `/images` or any other path), so the URL you pass is the full POST target. + +The request uses standard HTML form upload: + +- **Method:** `POST` +- **Content-Type:** `multipart/form-data` +- **Body:** one file field named `upload` + +### What the client expects back + +The server must reply with a JSON object. RichText reads the following fields: + +| Field | Type | Meaning | +| -------- | ------- | ----------------------------------------------------------------------- | +| `status` | string | Success marker — return `"server"` for a successful upload. The uploader uses this field to tell a completed upload from a failed one; any other value (for example `"error"`) marks the upload as failed. The inserted image itself is built from `value`, `width`, and `height`. | +| `value` | string | URL of the stored image. RichText writes this string verbatim into the document as the `src` of the inserted ``. | +| `width` | integer | Width used to size the inserted image, in pixels. | +| `height` | integer | Height used to size the inserted image, in pixels. | + +#### Successful response + +A successful upload returns the stored image URL and its dimensions: + +~~~json +{ + "status": "server", + "value": "https://cdn.example.com/uploads/abc123.png", + "width": 320, + "height": 207 +} +~~~ + +#### Failed upload + +A failed upload returns any status other than `"server"`: + +~~~json +{ + "status": "error" +} +~~~ + +### Serve the uploaded image + +The `value` URL is the only link between the upload and every later read of the document. RichText puts the URL straight into the document, so any client that opens the saved content (the editor itself, an export, a published page) fetches the image from that URL with a plain `GET`. + +That means: + +- the URL must be reachable from the user's browser, which usually means it has to be **absolute** +- the host can be different from the upload endpoint (for example, you can accept uploads on your own server and return a CDN or object-storage URL) +- if the image host is on a different origin, make sure it allows the page to load the image (CORS or simply public read access) +- the server must keep that URL working for as long as documents reference it; RichText does not cache or copy the bytes + +The URL layout itself is **not** part of the contract. As long as the browser can `GET` the URL and receive image bytes, the path, the query string, and even the scheme are entirely up to the backend. + +### Try it against the demo server + +A working backend that implements this contract is available to test the feature: + +~~~jsx +new richtext.Richtext("#root", { + imageUploadUrl: "https://docs.dhtmlx.com/richtext-backend/images" + // other configuration properties +}); +~~~ + +The demo server resizes large images, stores them on disk, and returns URLs it serves itself. It is intended for evaluation and demos only. Do not point production editors at it. + +**Related articles:** + +- [Configuration](guides/configuration.md) +- [`imageUploadUrl`](api/config/image-upload-url.md) diff --git a/docs/how_to_start.md b/docs/how_to_start.md index 2227c79..0c94de4 100644 --- a/docs/how_to_start.md +++ b/docs/how_to_start.md @@ -9,7 +9,7 @@ description: You can explore how to start working with DHTMLX RichText in the do This clear and comprehensive tutorial will guide your through the steps you need to take in order to get a fully functional RichText on a page.
-![DHTMLX RichText Classic Mode](./assets/richtext/classic_mode.png) +![DHTMLX RichText WYSIWYG editor running on a web page](/img/richtext/classic_mode.png)
## Step 1. Including source files @@ -86,7 +86,7 @@ As parameters, the constructor takes any valid CSS selector of HTML container wh Next you can specify configuration properties you want the RichText component to have when initialized. -To start working with RichText, first you need to provide the initial data for editor via the [`value`](api/config/value.md) property. Beside this, you can enable [**menubar**](api/config/menubar.md), customize [**toolbar**](api/config/toolbar.md), specify [**fullscreen**](api/config/fullscreen-mode.md) and [**layout**](api/config/layout-mode.md) modes, apply new [**locale**](api/config/locale.md) as well as [**default styles**](api/config/default-styles.md). +To start working with RichText, first you need to provide the initial data for editor via the [`value`](api/config/value.md) property. Beside this, you can enable [`menubar`](api/config/menubar.md), customize [`toolbar`](api/config/toolbar.md), specify [**fullscreen**](api/config/fullscreen-mode.md) and [**layout**](api/config/layout-mode.md) modes, apply new [`locale`](api/config/locale.md) as well as [**default styles**](api/config/default-styles.md). ~~~jsx {2-12} const editor = new richtext.Richtext("#root", { diff --git a/docs/index.md b/docs/index.md index d6a84fe..747b01d 100644 --- a/docs/index.md +++ b/docs/index.md @@ -13,13 +13,13 @@ description: You can have an overview of DHTMLX JavaScript RichText library in t - Two [**layout modes**](api/config/layout-mode.md) -- Content serialization to both plain text and HTML +- Content serialization to HTML, plain text, and Markdown -- Configurable [**toolbar**](api/config/toolbar.md) with built-in and custom buttons +- Configurable [`toolbar`](api/config/toolbar.md) with built-in and custom buttons -- Static [**menubar**](api/config/menubar.md) that can be shown or hidden +- Static [`menubar`](api/config/menubar.md) that can be shown or hidden -- Image uploading, rich formatting, custom styling, and full screen mode +- Image uploading with optional server [upload](api/config/image-upload-url.md) or inline base64 embedding, rich formatting, custom styling, and full screen mode - [Full API access](api/overview/main_overview.md) for [event handling](api/overview/event_bus_methods_overview.md), [content manipulation](api/overview/methods_overview.md), and [reactive state management](api/overview/state_methods_overview.md) @@ -36,7 +36,7 @@ The RichText menubar provides access to editing actions such as creating a new d Use the [`menubar`](api/config/menubar.md) property to toggle its visibility. While the menubar can be enabled or disabled, its contents are not configurable at this time.
-![Menubar](./assets/richtext/menubar.png) +![DHTMLX RichText menubar with document and file actions](/img/richtext/menubar.png)
### Toolbar @@ -46,7 +46,7 @@ The RichText toolbar provides quick access to text formatting and structural edi The [`toolbar`](api/config/toolbar.md) property allows you to fully customize the toolbar’s content and layout. You can enable or disable toolbar, rearrange default controls, or define a fully custom toolbar using an array of predefined button identifiers and custom button objects.
-![Toolbar](./assets/richtext/toolbar.png) +![DHTMLX RichText toolbar with text formatting controls](/img/richtext/toolbar.png)
### Editor @@ -57,34 +57,75 @@ The RichText editor is the central area where users create and format content. Y DHTMLX RichText can work with content in "classic" and "document" modes. You can choose the most suitable mode to feel comfortable while editing text. Use the [`layoutMode`](api/config/layout-mode.md) property to switch modes programatically. -- **"classic"** +- `"classic"`
-![Classic mode](./assets/richtext/classic_mode.png) +![DHTMLX RichText editor in classic layout mode](/img/richtext/classic_mode.png)
-- **"document"** +- `"document"`
-![Document mode](./assets/richtext/document_mode.png) +![DHTMLX RichText editor in document layout mode](/img/richtext/document_mode.png)
## Supported formats -The RichText editor supports [parsing](api/methods/set-value.md) and [serialization](api/methods/get-value.md) of content in the **HTML** and plain text formats. +The RichText editor supports [parsing](api/methods/set-value.md) and [serialization](api/methods/get-value.md) of content in the **HTML**, **plain text**, and **Markdown** formats. #### HTML format
-![HTML format](./assets/richtext/html_format.png) +![DHTMLX RichText content serialized to HTML format](/img/richtext/html_format.png)
#### Text format
-![Text format](./assets/richtext/text_format.png) +![DHTMLX RichText content serialized to plain text format](/img/richtext/text_format.png)
+#### Markdown format + +Pass the built-in `markdown` encoders to [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md) to load or serialize content as Markdown: + +~~~jsx +const editor = new richtext.Richtext("#root", { + value: "Hello world" + // other configuration properties +}); + +// load Markdown into the editor +editor.setValue("# Title\n\nParagraph", richtext.markdown.fromMarkdown); + +// read editor content as Markdown +const md = editor.getValue(richtext.markdown.toMarkdown); +~~~ + +:::note +Markdown support covers a limited subset of the syntax — common block and inline elements such as headings, paragraphs, line breaks, emphasis, blockquotes, lists, and links. Formatting that has no Markdown equivalent (font family, font size, colors, alignment, line height) is dropped on serialization. + +Nested inline structures are not supported, with the only exception of **bold inside italic**. Combinations such as bold inside a link, italic inside a list item, or multi-level (nested) lists will not render correctly. +::: + +## Copy and paste + +The RichText editor supports clipboard operations through standard system shortcuts (`Ctrl+C` / `Ctrl+X` / `Ctrl+V` on Windows/Linux, `⌘+C` / `⌘+X` / `⌘+V` on macOS), the corresponding [toolbar](api/config/toolbar.md) buttons, and the [menubar](api/config/menubar.md) entries. + +When content is copied or cut, RichText writes two representations to the system clipboard: + +- a **plain text** version for compatibility with simple targets (terminals, code editors, plain inputs) +- an **HTML** version that carries all inline and block formatting (bold, italic, underline, strikethrough, font family, font size, text and background color, headings, blockquotes, lists, alignment, indentation, line height, links, and images) + +Paste behavior depends on the source of the clipboard payload: + +- Pasting between two RichText instances (in the same document or on different pages) uses the HTML representation and preserves the original formatting. +- Pasting from any external source — including browsers, word processors, and other editors — is processed as plain text. The inserted content is added as text without external formatting. + +:::note +The toolbar **Paste** button uses the asynchronous Clipboard API, which exposes plain text only. To paste content copied from another RichText with its formatting preserved, use the `Ctrl+V` / `⌘+V` shortcut, which receives the full HTML payload directly from the browser's clipboard event. +::: + ## Keyboard shortcuts The RichText editor supports a set of common keyboard shortcuts for faster formatting and editing. The shortcuts follow platform conventions and are available on both **Windows/Linux** (`Ctrl`) and **macOS** (`⌘`). @@ -107,6 +148,15 @@ The RichText editor supports a set of common keyboard shortcuts for faster forma | Cut | `Ctrl+X` | `⌘X` | | Copy | `Ctrl+C` | `⌘C` | | Paste | `Ctrl+V` | `⌘V` | +| Delete word | `Ctrl+Backspace` / `Ctrl+Delete` | `⌥⌫` / `⌥⌦` | +| Delete line | — | `⌘⌫` / `⌘⌦` | + +### Indentation + +| Action | Windows/Linux | macOS | +|----------------------|---------------|-------| +| Indent block / nest list | `Tab` | `⇥` | +| Outdent block / lift list | `Shift+Tab` | `⇧⇥` | ### Special actions @@ -122,5 +172,5 @@ More shortcuts may be introduced in future updates. To get actual reference related to RichText keyboard shortcuts, press **Help** and select the **Keyboard shortcuts** option:
-![Keyboard shortcuts](./assets/richtext/shortcut_reference.png) +![DHTMLX RichText keyboard shortcuts reference window](/img/richtext/shortcut_reference.png)
diff --git a/docs/news/whats_new.md b/docs/news/whats_new.md index 635edd4..4252816 100644 --- a/docs/news/whats_new.md +++ b/docs/news/whats_new.md @@ -3,6 +3,45 @@ sidebar_label: What's new title: What's new description: You can explore what's new in DHTMLX RichText and its release history in the documentation of the DHTMLX JavaScript UI 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. --- + +## Version 2.1 + +Released on June 22, 2026 + +### New functionality + +- The [`imageUploadUrl`](api/config/image-upload-url.md) is optional: when omitted, images are inserted inline as base64 data URLs with no server required +- Drag-and-drop image insertion: drop an image file directly into the editor area +- Markdown support: parse and serialize editor content as Markdown via the `markdown` encoder in [`setValue()`](api/methods/set-value.md), [`getValue()`](api/methods/get-value.md), and [`insertValue()`](api/methods/insert-value.md) methods (see the [RichText. Working with different formats (Markdown, HTML, text)](https://snippet.dhtmlx.com/cne4kujn?tag=richtext) sample) +- Mentions, tags, and custom dropdown triggers via the [`triggers`](api/config/triggers.md) property: type a character such as `@`, `#`, `/`, or `:` to open a suggestion dropdown and insert the selected item as a non-editable token (see the [Mentions and tags](guides/mentions_and_tags.md) guide and the [RichText. Mentions, tags, and async lookup](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) sample) +- Custom rendering for suggestion items through the [`triggerTemplate`](api/config/trigger-template.md) property (for example, an avatar with a name and an email) (see the [RichText. Custom dropdown template per trigger](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext) sample) +- Custom action when a user selects a trigger: run your own code (insert an emoji, trigger a slash-style command, and more) instead of inserting a token (see the [RichText. Emoji autocomplete](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) and [RichText. Slash commands](https://snippet.dhtmlx.com/e0mrmyam?tag=richtext) samples) +- Clipboard support (copy, cut, and paste) that preserves formatting between RichText instances and inserts external content as plain text +- Word- and line-scope deletion shortcuts: delete the previous/next word with `Ctrl+Backspace` / `Ctrl+Delete` (Windows/Linux) or `Opt+Backspace` / `Opt+Delete` (macOS); delete the previous/next visual line with `Cmd+Backspace` / `Cmd+Delete` (macOS only) +- New hotkeys for changing block indentation: increase a block's indentation with `Tab` and decrease it with `Shift+Tab`; inside lists, the same keys nest and lift items + +### New API + +#### New properties + +- [`triggers`](api/config/triggers.md) — Defines dropdown triggers for inserting mentions, tags, and other tokens +- [`triggerTemplate`](api/config/trigger-template.md) — Customizes how RichText renders items in the suggestion dropdown + +#### New methods + +- [`insertValue()`](api/methods/insert-value.md) — Inserts text, Markdown, or HTML content at the cursor position or replaces the selected text (see the [RichText. Insert content at cursor](https://snippet.dhtmlx.com/pew2g1ku?tag=richtext) sample) + +#### New events + +- [`show-suggest`](api/events/show-suggest.md) — Fires when the suggestion dropdown opens for a configured trigger +- [`insert-token`](api/events/insert-token.md) — Fires after the user picks a suggestion item in the dropdown and RichText inserts it as a token +- [`hide-suggest`](api/events/hide-suggest.md) — Fires when the suggestion dropdown closes + +### Fixes + +- Issues with pasting inline content (including content placed inside or near inline elements such as mentions and images) +- Dropping an image onto itself throws an error + ## Version 2.0.6 Released on May 28, 2026 @@ -108,7 +147,7 @@ API of v1.2 is not compatible with v2.0. Refer to the [**migration guide**](news - **Granular toolbar configuration** Take full control of the toolbar: - Define [individual toolbar controls](guides/configuration.md/#default-toolbar-controls) and their order - - Add [custom controls](guides/configuration.md/#custom-toolbar-controls) + - Add [custom controls](guides/configuration.md/#add-custom-toolbar-controls) - **Optional [menubar](api/config/menubar.md)** Enable a classic menu-style interface on the top of the editor diff --git a/docusaurus.config.js b/docusaurus.config.js index 0beadf1..d50020e 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -189,6 +189,17 @@ const onAfterDataTransformation = (data) => { /** @type {import('@docusaurus/types').Config} */ const config = { + i18n: { + defaultLocale: 'en', + locales: ['en', 'ru', 'de', 'zh', 'ko'], + localeConfigs: { + en: { label: 'English', htmlLang: 'en-US' }, + ru: { label: 'Русский', htmlLang: 'ru' }, + de: { label: 'Deutsch', htmlLang: 'de' }, + zh: { label: '简体中文', htmlLang: 'zh-CN' }, + ko: { label: '한국어', htmlLang: 'ko' }, + }, + }, noIndex: false, title: 'DHTMLX RichText Documentation', tagline: 'DHTMLX RichText Documentation', @@ -214,7 +225,7 @@ const config = { docs: { sidebarPath: require.resolve('./sidebars.js'), // Please change this to your repo. - editUrl: 'https://github.com/DHTMLX/docs-richtext/edit/master/', + //editUrl: 'https://github.com/DHTMLX/docs-richtext/edit/master/', routeBasePath: '/', }, theme: { @@ -315,7 +326,12 @@ const config = { href: 'https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml', position: 'right' } - ] + , + { + type: 'localeDropdown', + position: 'right', + }, + ] }, footer: { "style": "dark", diff --git a/i18n/de/code.json b/i18n/de/code.json new file mode 100644 index 0000000..787d361 --- /dev/null +++ b/i18n/de/code.json @@ -0,0 +1,560 @@ +{ + "theme.ErrorPageContent.title": { + "message": "Die Seite ist abgestürzt.", + "description": "The title of the fallback page when the page crashed" + }, + "theme.BackToTopButton.buttonAriaLabel": { + "message": "Zurück nach oben scrollen", + "description": "The ARIA label for the back to top button" + }, + "theme.blog.archive.title": { + "message": "Archiv", + "description": "The page & hero title of the blog archive page" + }, + "theme.blog.archive.description": { + "message": "Archiv", + "description": "The page & hero description of the blog archive page" + }, + "theme.blog.paginator.navAriaLabel": { + "message": "Navigation der Blog-Listenseite", + "description": "The ARIA label for the blog pagination" + }, + "theme.blog.paginator.newerEntries": { + "message": "Neuere Einträge", + "description": "The label used to navigate to the newer blog posts page (previous page)" + }, + "theme.blog.paginator.olderEntries": { + "message": "Ältere Einträge", + "description": "The label used to navigate to the older blog posts page (next page)" + }, + "theme.blog.post.paginator.navAriaLabel": { + "message": "Blog Post Seiten Navigation", + "description": "The ARIA label for the blog posts pagination" + }, + "theme.blog.post.paginator.newerPost": { + "message": "Neuer Post", + "description": "The blog post button label to navigate to the newer/previous post" + }, + "theme.blog.post.paginator.olderPost": { + "message": "Älterer Post", + "description": "The blog post button label to navigate to the older/next post" + }, + "theme.tags.tagsPageLink": { + "message": "Alle Tags anzeigen", + "description": "The label of the link targeting the tag list page" + }, + "theme.colorToggle.ariaLabel.mode.system": { + "message": "Systemmodus", + "description": "The name for the system color mode" + }, + "theme.colorToggle.ariaLabel.mode.light": { + "message": "heller Modus", + "description": "The name for the light color mode" + }, + "theme.colorToggle.ariaLabel.mode.dark": { + "message": "dunkler Modus", + "description": "The name for the dark color mode" + }, + "theme.colorToggle.ariaLabel": { + "message": "Umschalten zwischen dunkler und heller Ansicht (momentan {mode})", + "description": "The ARIA label for the color mode toggle" + }, + "theme.docs.DocCard.categoryDescription.plurals": { + "message": "1 Eintrag|{count} Einträge", + "description": "The default description for a category card in the generated index about how many items this category includes" + }, + "theme.docs.breadcrumbs.navAriaLabel": { + "message": "Brotkrümelnavigation", + "description": "The ARIA label for the breadcrumbs" + }, + "theme.docs.paginator.navAriaLabel": { + "message": "Dokumentation Seiten", + "description": "The ARIA label for the docs pagination" + }, + "theme.docs.paginator.previous": { + "message": "Zurück", + "description": "The label used to navigate to the previous doc" + }, + "theme.docs.paginator.next": { + "message": "Weiter", + "description": "The label used to navigate to the next doc" + }, + "theme.docs.tagDocListPageTitle.nDocsTagged": { + "message": "Ein doc getaggt|{count} docs getaggt", + "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} mit \"{tagName}\"", + "description": "The title of the page for a docs tag" + }, + "theme.docs.versionBadge.label": { + "message": "Version: {versionLabel}" + }, + "theme.docs.versions.unreleasedVersionLabel": { + "message": "Das ist die unveröffentlichte Dokumentation für {siteTitle} {versionLabel}.", + "description": "The label used to tell the user that he's browsing an unreleased doc version" + }, + "theme.docs.versions.unmaintainedVersionLabel": { + "message": "Das ist die Dokumentation für {siteTitle} {versionLabel} und wird nicht weiter gewartet.", + "description": "The label used to tell the user that he's browsing an unmaintained doc version" + }, + "theme.docs.versions.latestVersionSuggestionLabel": { + "message": "Für die aktuellste Dokumentation bitte auf {latestVersionLink} ({versionLabel}) gehen.", + "description": "The label used to tell the user to check the latest version" + }, + "theme.docs.versions.latestVersionLinkLabel": { + "message": "letzte Version", + "description": "The label used for the latest version suggestion link label" + }, + "theme.common.editThisPage": { + "message": "Diese Seite bearbeiten", + "description": "The link label to edit the current page" + }, + "theme.common.headingLinkTitle": { + "message": "Direkter Link zur {heading}", + "description": "Title for link to heading" + }, + "theme.lastUpdated.atDate": { + "message": " am {date}", + "description": "The words used to describe on which date a page has been last updated" + }, + "theme.lastUpdated.byUser": { + "message": " von {user}", + "description": "The words used to describe by who the page has been last updated" + }, + "theme.lastUpdated.lastUpdatedAtBy": { + "message": "Letztes Update{atDate}{byUser}", + "description": "The sentence used to display when a page has been last updated, and by who" + }, + "theme.navbar.mobileVersionsDropdown.label": { + "message": "Versionen", + "description": "The label for the navbar versions dropdown on mobile view" + }, + "theme.NotFound.title": { + "message": "Seite nicht gefunden", + "description": "The title of the 404 page" + }, + "theme.tags.tagsListLabel": { + "message": "Schlagwörter:", + "description": "The label alongside a tag list" + }, + "theme.admonition.caution": { + "message": "vorsicht", + "description": "The default label used for the Caution admonition (:::caution)" + }, + "theme.admonition.danger": { + "message": "gefahr", + "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": "hinweis", + "description": "The default label used for the Note admonition (:::note)" + }, + "theme.admonition.tip": { + "message": "tipp", + "description": "The default label used for the Tip admonition (:::tip)" + }, + "theme.admonition.warning": { + "message": "Warnung", + "description": "The default label used for the Warning admonition (:::warning)" + }, + "theme.AnnouncementBar.closeButtonAriaLabel": { + "message": "Schließen", + "description": "The ARIA label for close button of announcement bar" + }, + "theme.blog.sidebar.navAriaLabel": { + "message": "Navigation der letzten Beiträge im Blog", + "description": "The ARIA label for recent posts in the blog sidebar" + }, + "theme.DocSidebarItem.expandCategoryAriaLabel": { + "message": "Kategorie '{label}' in der Seitenleiste aufklappen", + "description": "The ARIA label to expand the sidebar category" + }, + "theme.DocSidebarItem.collapseCategoryAriaLabel": { + "message": "Kategorie '{label}' in der Seitenleiste einklappen", + "description": "The ARIA label to collapse the sidebar category" + }, + "theme.IconExternalLink.ariaLabel": { + "message": "(wird in neuem Tab geöffnet)", + "description": "The ARIA label for the external link icon" + }, + "theme.NavBar.navAriaLabel": { + "message": "Hauptnavigation", + "description": "The ARIA label for the main navigation" + }, + "theme.navbar.mobileLanguageDropdown.label": { + "message": "Sprachen", + "description": "The label for the mobile language switcher dropdown" + }, + "theme.NotFound.p1": { + "message": "Wir konnten nicht finden, wonach Sie gesucht haben.", + "description": "The first paragraph of the 404 page" + }, + "theme.NotFound.p2": { + "message": "Bitte kontaktieren Sie den Besitzer der Seite, die Sie mit der ursprünglichen URL verlinkt hat, und teilen Sie ihm mit, dass der Link nicht mehr funktioniert.", + "description": "The 2nd paragraph of the 404 page" + }, + "theme.TOCCollapsible.toggleButtonLabel": { + "message": "Auf dieser Seite", + "description": "The label used by the button on the collapsible TOC component" + }, + "theme.blog.post.readMore": { + "message": "Mehr lesen", + "description": "The label used in blog post item excerpts to link to full blog posts" + }, + "theme.blog.post.readMoreLabel": { + "message": "Mehr lesen über {title}", + "description": "The ARIA label for the link to full blog posts from excerpts" + }, + "theme.blog.post.readingTime.plurals": { + "message": "Eine Minute Lesezeit|{readingTime} Minuten Lesezeit", + "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": "Kopieren", + "description": "The copy button label on code blocks" + }, + "theme.CodeBlock.copied": { + "message": "Kopiert", + "description": "The copied button label on code blocks" + }, + "theme.CodeBlock.copyButtonAriaLabel": { + "message": "In die Zwischenablage kopieren", + "description": "The ARIA label for copy code blocks button" + }, + "theme.CodeBlock.wordWrapToggle": { + "message": "Zeilenumbruch umschalten", + "description": "The title attribute for toggle word wrapping button of code block lines" + }, + "theme.docs.breadcrumbs.home": { + "message": "Startseite", + "description": "The ARIA label for the home page in the breadcrumbs" + }, + "theme.docs.sidebar.collapseButtonTitle": { + "message": "Seitenleiste einklappen", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.collapseButtonAriaLabel": { + "message": "Seitenleiste einklappen", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.navAriaLabel": { + "message": "Dokumentations-Seitenleiste", + "description": "The ARIA label for the sidebar navigation" + }, + "theme.docs.sidebar.closeSidebarButtonAriaLabel": { + "message": "Navigationsleiste schließen", + "description": "The ARIA label for close button of mobile sidebar" + }, + "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { + "message": "← Zurück zum Hauptmenü", + "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": "Navigationsleiste umschalten", + "description": "The ARIA label for hamburger menu button of mobile navigation" + }, + "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": { + "message": "Dropdown aufklappen", + "description": "The ARIA label of the button to expand the mobile dropdown navbar item" + }, + "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": { + "message": "Dropdown einklappen", + "description": "The ARIA label of the button to collapse the mobile dropdown navbar item" + }, + "theme.docs.sidebar.expandButtonTitle": { + "message": "Seitenleiste ausklappen", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.docs.sidebar.expandButtonAriaLabel": { + "message": "Seitenleiste ausklappen", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.SearchBar.seeAll": { + "message": "Alle {count} Ergebnisse anzeigen" + }, + "theme.SearchPage.documentsFound.plurals": { + "message": "Ein Dokument gefunden|{count} Dokumente gefunden", + "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": "Suchergebnisse für \"{query}\"", + "description": "The search page title for non-empty query" + }, + "theme.SearchPage.emptyResultsTitle": { + "message": "Suche in der Dokumentation", + "description": "The search page title for empty query" + }, + "theme.SearchPage.inputPlaceholder": { + "message": "Geben Sie hier Ihre Suche ein", + "description": "The placeholder for search page input" + }, + "theme.SearchPage.inputLabel": { + "message": "Suche", + "description": "The ARIA label for search page input" + }, + "theme.SearchPage.algoliaLabel": { + "message": "Unterstützt von Algolia", + "description": "The description label for Algolia mention" + }, + "theme.SearchPage.noResultsText": { + "message": "Es wurden keine Ergebnisse gefunden", + "description": "The paragraph for empty search result" + }, + "theme.SearchPage.fetchingNewResults": { + "message": "Neue Ergebnisse abrufen...", + "description": "The paragraph for fetching new search results" + }, + "theme.SearchBar.label": { + "message": "Suche", + "description": "The ARIA label and placeholder for search button" + }, + "theme.SearchModal.searchBox.resetButtonTitle": { + "message": "Suchanfrage löschen", + "description": "The label and ARIA label for search box reset button" + }, + "theme.SearchModal.searchBox.cancelButtonText": { + "message": "Abbrechen", + "description": "The label and ARIA label for search box cancel button" + }, + "theme.SearchModal.searchBox.placeholderText": { + "message": "Dokumentation durchsuchen", + "description": "The placeholder text for the main search input field" + }, + "theme.SearchModal.searchBox.placeholderTextAskAi": { + "message": "Eine weitere Frage stellen...", + "description": "The placeholder text when in AI question mode" + }, + "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": { + "message": "Antwort wird erstellt...", + "description": "The placeholder text for search box when AI is streaming an answer" + }, + "theme.SearchModal.searchBox.enterKeyHint": { + "message": "Suchen", + "description": "The hint for the search box enter key text" + }, + "theme.SearchModal.searchBox.enterKeyHintAskAi": { + "message": "Eingabe", + "description": "The hint for the Ask AI search box enter key text" + }, + "theme.SearchModal.searchBox.searchInputLabel": { + "message": "Suchen", + "description": "The ARIA label for search input" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonText": { + "message": "Zurück zur Stichwortsuche", + "description": "The text for back to keyword search button" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": { + "message": "Zurück zur Stichwortsuche", + "description": "The ARIA label for back to keyword search button" + }, + "theme.SearchModal.startScreen.recentSearchesTitle": { + "message": "Zuletzt gesucht", + "description": "The title for recent searches" + }, + "theme.SearchModal.startScreen.noRecentSearchesText": { + "message": "Keine kürzlichen Suchanfragen", + "description": "The text when there are no recent searches" + }, + "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": { + "message": "Diese Suche speichern", + "description": "The title for save recent search button" + }, + "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": { + "message": "Diese Suche aus dem Verlauf entfernen", + "description": "The title for remove recent search button" + }, + "theme.SearchModal.startScreen.favoriteSearchesTitle": { + "message": "Favoriten", + "description": "The title for favorite searches" + }, + "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": { + "message": "Diese Suche aus den Favoriten entfernen", + "description": "The title for remove favorite search button" + }, + "theme.SearchModal.startScreen.recentConversationsTitle": { + "message": "Letzte Unterhaltungen", + "description": "The title for recent conversations" + }, + "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": { + "message": "Diese Unterhaltung aus dem Verlauf entfernen", + "description": "The title for remove recent conversation button" + }, + "theme.SearchModal.errorScreen.titleText": { + "message": "Ergebnisse konnten nicht abgerufen werden", + "description": "The title for error screen" + }, + "theme.SearchModal.errorScreen.helpText": { + "message": "Möglicherweise sollten Sie Ihre Netzwerkverbindung überprüfen.", + "description": "The help text for error screen" + }, + "theme.SearchModal.resultsScreen.askAiPlaceholder": { + "message": "KI fragen: ", + "description": "The placeholder text for Ask AI input" + }, + "theme.SearchModal.askAiScreen.disclaimerText": { + "message": "Antworten werden mit KI generiert, die Fehler machen kann. Überprüfen Sie die Antworten.", + "description": "The disclaimer text for AI answers" + }, + "theme.SearchModal.askAiScreen.relatedSourcesText": { + "message": "Verwandte Quellen", + "description": "The text for related sources" + }, + "theme.SearchModal.askAiScreen.thinkingText": { + "message": "Denkt nach...", + "description": "The text when AI is thinking" + }, + "theme.SearchModal.askAiScreen.copyButtonText": { + "message": "Kopieren", + "description": "The text for copy button" + }, + "theme.SearchModal.askAiScreen.copyButtonCopiedText": { + "message": "Kopiert!", + "description": "The text for copy button when copied" + }, + "theme.SearchModal.askAiScreen.copyButtonTitle": { + "message": "Kopieren", + "description": "The title for copy button" + }, + "theme.SearchModal.askAiScreen.likeButtonTitle": { + "message": "Gefällt mir", + "description": "The title for like button" + }, + "theme.SearchModal.askAiScreen.dislikeButtonTitle": { + "message": "Gefällt mir nicht", + "description": "The title for dislike button" + }, + "theme.SearchModal.askAiScreen.thanksForFeedbackText": { + "message": "Vielen Dank für Ihr Feedback!", + "description": "The text for thanks for feedback" + }, + "theme.SearchModal.askAiScreen.preToolCallText": { + "message": "Suche läuft...", + "description": "The text before tool call" + }, + "theme.SearchModal.askAiScreen.duringToolCallText": { + "message": "Suche nach ", + "description": "The text during tool call" + }, + "theme.SearchModal.askAiScreen.afterToolCallText": { + "message": "Gesucht nach", + "description": "The text after tool call" + }, + "theme.SearchModal.footer.selectText": { + "message": "to select", + "description": "The select text for footer" + }, + "theme.SearchModal.footer.submitQuestionText": { + "message": "Frage absenden", + "description": "The submit question text for footer" + }, + "theme.SearchModal.footer.selectKeyAriaLabel": { + "message": "Eingabetaste", + "description": "The ARIA label for select key in footer" + }, + "theme.SearchModal.footer.navigateText": { + "message": "to navigate", + "description": "The navigate text for footer" + }, + "theme.SearchModal.footer.navigateUpKeyAriaLabel": { + "message": "Pfeil nach oben", + "description": "The ARIA label for navigate up key in footer" + }, + "theme.SearchModal.footer.navigateDownKeyAriaLabel": { + "message": "Pfeil nach unten", + "description": "The ARIA label for navigate down key in footer" + }, + "theme.SearchModal.footer.closeText": { + "message": "to close", + "description": "The close text for footer" + }, + "theme.SearchModal.footer.closeKeyAriaLabel": { + "message": "Escape-Taste", + "description": "The ARIA label for close key in footer" + }, + "theme.SearchModal.footer.searchByText": { + "message": "Bereitgestellt von", + "description": "The 'Powered by' text for footer" + }, + "theme.SearchModal.footer.backToSearchText": { + "message": "Zurück zur Suche", + "description": "The back to search text for footer" + }, + "theme.SearchModal.noResultsScreen.noResultsText": { + "message": "No results for", + "description": "The text when there are no results" + }, + "theme.SearchModal.noResultsScreen.suggestedQueryText": { + "message": "Versuchen Sie, nach Folgendem zu suchen", + "description": "The text for suggested query" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsText": { + "message": "Glauben Sie, dass diese Suchanfrage Ergebnisse liefern sollte?", + "description": "The text for reporting missing results" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": { + "message": "Sagen Sie uns Bescheid.", + "description": "The link text for reporting missing results" + }, + "theme.SearchModal.placeholder": { + "message": "Dokumentation durchsuchen", + "description": "The placeholder of the input of the DocSearch pop-up modal" + }, + "theme.blog.post.plurals": { + "message": "Ein 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} getaggt mit \"{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": "Autoren", + "description": "The title of the authors page" + }, + "theme.blog.authorsList.viewAll": { + "message": "Alle Autoren anzeigen", + "description": "The label of the link targeting the blog authors page" + }, + "theme.blog.author.noPosts": { + "message": "Dieser Autor hat noch keine Beiträge verfasst.", + "description": "The text for authors with 0 blog post" + }, + "theme.contentVisibility.unlistedBanner.title": { + "message": "Nicht gelistete Seite", + "description": "The unlisted content banner title" + }, + "theme.contentVisibility.unlistedBanner.message": { + "message": "Diese Seite ist nicht gelistet. Suchmaschinen werden sie nicht indexieren, und nur Benutzer mit einem direkten Link können auf sie zugreifen.", + "description": "The unlisted content banner message" + }, + "theme.contentVisibility.draftBanner.title": { + "message": "Entwurfsseite", + "description": "The draft content banner title" + }, + "theme.contentVisibility.draftBanner.message": { + "message": "Diese Seite ist ein Entwurf. Sie ist nur in der Entwicklungsumgebung sichtbar und wird vom Produktions-Build ausgeschlossen.", + "description": "The draft content banner message" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "Nochmal versuchen", + "description": "The label of the button to try again rendering when the React error boundary captures an error" + }, + "theme.common.skipToMainContent": { + "message": "Zum Hauptinhalt springen", + "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": "Schlagwörter", + "description": "The title of the tag list page" + } +} diff --git a/i18n/de/docusaurus-plugin-content-blog/options.json b/i18n/de/docusaurus-plugin-content-blog/options.json new file mode 100644 index 0000000..0199e5c --- /dev/null +++ b/i18n/de/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": "Neueste Beiträge", + "description": "The label for the left sidebar" + } +} diff --git a/i18n/de/docusaurus-plugin-content-docs/current.json b/i18n/de/docusaurus-plugin-content-docs/current.json new file mode 100644 index 0000000..a7d7531 --- /dev/null +++ b/i18n/de/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": "Neuigkeiten und 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": "Neuigkeiten und 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-Methoden", + "description": "The label for category 'RichText methods' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText internal API": { + "message": "Interne RichText-API", + "description": "The label for category 'RichText internal API' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText internal API.link.generated-index.title": { + "message": "Übersicht der internen API", + "description": "The generated-index page title for category 'RichText internal API' in sidebar 'docs'" + }, + "sidebar.docs.category.Event Bus methods": { + "message": "Event-Bus-Methoden", + "description": "The label for category 'Event Bus methods' in sidebar 'docs'" + }, + "sidebar.docs.category.State methods": { + "message": "State-Methoden", + "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-Eigenschaften", + "description": "The label for category 'RichText properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Integration with frameworks": { + "message": "Integration mit Frameworks", + "description": "The label for category 'Integration with frameworks' in sidebar 'docs'" + }, + "sidebar.docs.category.Integration with frameworks.link.generated-index.title": { + "message": "Integration mit Frameworks", + "description": "The generated-index page title for category 'Integration with frameworks' in sidebar 'docs'" + }, + "sidebar.docs.category.Guides": { + "message": "Anleitungen", + "description": "The label for category 'Guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Guides.link.generated-index.title": { + "message": "Anleitungen", + "description": "The generated-index page title for category 'Guides' in sidebar 'docs'" + } +} diff --git a/i18n/de/docusaurus-plugin-content-docs/current/.sync b/i18n/de/docusaurus-plugin-content-docs/current/.sync new file mode 100644 index 0000000..ae89b0d --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/.sync @@ -0,0 +1 @@ +8c89a96ada89b69f200dac7f3e5b216cc76aa8db diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/default-styles.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/default-styles.md new file mode 100644 index 0000000..df5f9fe --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/default-styles.md @@ -0,0 +1,144 @@ +--- +sidebar_label: defaultStyles +title: defaultStyles Konfiguration +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die defaultStyles-Konfiguration. Lesen Sie Entwickleranleitungen und API-Referenzen, probieren Sie Code-Beispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# defaultStyles + +### Beschreibung {#description} + +@short: Optional. Legt Standard-Stilwerte für bestimmte Block-Typen fest + +### Verwendung {#usage} + +~~~jsx {} +defaultStyles?: { + "*"?: { // betrifft alle Blöcke und ermöglicht es, gemeinsame Eigenschaften für all diese Blöcke festzulegen + "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[Wichtig] +Die Eigenschaft `defaultStyles` setzt KEINE tatsächlichen CSS-Stile auf die betroffenen Blöcke. CSS-Stile müssen separat angewendet werden: + +```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 diesem Beispiel wird allen `h2`-Blöcken die Schriftfamilie `"Roboto"` mit einer Schriftgröße von 28px zugewiesen, wobei sowohl die Vordergrund- als auch die Hintergrundfarbe geändert werden. CSS-Stile werden den `h2`-Blöcken ebenfalls zugewiesen. +::: + +### Standardkonfiguration {#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" } +}; +~~~ + +### Beispiel {#example} + +~~~jsx {3-13} +// RichText initialisieren +new richtext.Richtext("#root", { + defaultStyles: { + h4: { + "font-family": "Roboto" + }, + h5: { + "font-family": "Roboto" + }, + h6: { + "font-family": "Roboto" + } + }, + // weitere Konfigurationseigenschaften +}); +~~~ + +**Änderungsprotokoll:** Die Eigenschaft wurde in v2.0 aktualisiert + +**Verwandte Artikel:** [Konfiguration](guides/configuration.md) + +**Verwandtes Beispiel:** [RichText. Standardwert für Typografie ändern (Schriftart, Schriftgröße usw.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md new file mode 100644 index 0000000..6861807 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md @@ -0,0 +1,39 @@ +--- +sidebar_label: fullscreenMode +title: fullscreenMode-Konfiguration +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die fullscreenMode-Konfiguration. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# fullscreenMode + +### Beschreibung {#description} + +@short: Optional. Aktiviert den Vollbildmodus von RichText + +### Verwendung {#usage} + +~~~jsx {} +fullscreenMode?: boolean; +~~~ + +### Standardkonfiguration {#default-config} + +~~~jsx +fullscreenMode: false; +~~~ + +### Beispiel {#example} + +~~~jsx {3} +// RichText initialisieren +new richtext.Richtext("#root", { + fullscreenMode: true + // weitere Konfigurationseigenschaften +}); +~~~ + +**Änderungsprotokoll:** Die Eigenschaft wurde in v2.0 hinzugefügt + +**Verwandte Artikel:** [Konfiguration](guides/configuration.md) + +**Verwandtes Beispiel:** [RichText. Vollständige Symbolleiste](https://snippet.dhtmlx.com/ziynafp7?tag=richtext) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md new file mode 100644 index 0000000..894aa49 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md @@ -0,0 +1,56 @@ +--- +sidebar_label: imageUploadUrl +title: imageUploadUrl Config +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die imageUploadUrl-Konfiguration. Durchsuchen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# imageUploadUrl + +### Beschreibung {#description} + +@short: Optional. Gibt die URL an, die für den Bild-Upload verwendet wird (über Toolbar, Menüleiste, Zwischenablage-Einfügen oder Drag-and-Drop) + +Wenn die Eigenschaft gesetzt ist, lädt RichText jedes eingefügte Bild an den angegebenen Endpunkt hoch und fügt die vom Server zurückgegebene URL ein. + +Wenn die Eigenschaft weggelassen oder auf einen falschen Wert gesetzt wird (`""`, `null`, `undefined`), wechselt RichText in den **Inline-Modus**: Die Bilddatei wird clientseitig gelesen und direkt als Base64-Daten-URL in den Inhalt eingebettet – kein Server erforderlich. Inline-Bilder, die größer als 1024×800 sind, werden proportional verkleinert, um innerhalb dieser Grenzen zu bleiben. + +:::note[Hinweis] +Inline-Bilder (Base64) werden beim integrierten DOCX-/PDF-[Export](api/events/export.md) nicht beibehalten. Wenn Sie auf den Export angewiesen sind, geben Sie eine `imageUploadUrl` an, damit Bilder auf einen externen Speicherort verweisen. +::: + +:::caution[Vorsicht] +Die Base64-Kodierung vergrößert die kodierte Nutzlast im Vergleich zur Originaldatei um etwa ein Drittel. Ein Dokument mit mehreren großen Inline-Bildern wächst entsprechend, was die Größe des von [`getValue()`](api/methods/get-value.md) zurückgegebenen Werts, den Speicherbedarf des Editors und den Aufwand für das Speichern oder Übertragen des Inhalts beeinflusst. Verwenden Sie für Dokumente mit vielen oder großen Bildern bevorzugt eine server-seitige `imageUploadUrl`. +::: + +### Verwendung {#usage} + +~~~jsx {} +imageUploadUrl?: string; +~~~ + +### Beispiel {#example} + +Bilder an einen Server-Endpunkt hochladen: + +~~~jsx {3} +// RichText initialisieren +new richtext.Richtext("#root", { + imageUploadUrl: "https://example.com/upload" + // andere Konfigurationseigenschaften +}); +~~~ + +Bilder inline als Base64 einfügen (kein Server erforderlich) – lassen Sie die Eigenschaft weg oder übergeben Sie einen leeren String: + +~~~jsx {2} +new richtext.Richtext("#root", { + // imageUploadUrl ist nicht gesetzt, Bilder werden als Base64-Daten-URLs eingefügt + // andere Konfigurationseigenschaften +}); +~~~ + +**Änderungsprotokoll:** Die Eigenschaft wurde in v2.0 hinzugefügt. Ab v2.1 ist die Eigenschaft optional: Wenn sie weggelassen wird, werden Bilder inline als Base64-Daten-URLs eingefügt. + +**Verwandte Artikel:** [Konfiguration](guides/configuration.md), [Arbeiten mit dem Server](guides/working_with_server.md) + +**Verwandtes Beispiel:** [RichText. Initialisierung](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/layout-mode.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/layout-mode.md new file mode 100644 index 0000000..779d6e3 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/layout-mode.md @@ -0,0 +1,41 @@ +--- +sidebar_label: layoutMode +title: layoutMode Konfiguration +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die layoutMode-Konfiguration. Lesen Sie Entwickleranleitungen und API-Referenzen, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# layoutMode + +### Beschreibung {#description} + +@short: Optional. Legt den Layout-Modus für den Haupteditorbereich fest + +### Verwendung {#usage} + +~~~jsx {} +layoutMode: "classic" | "document"; +~~~ + +Der Modus `"classic"` füllt den gesamten Bearbeitungsbereich aus. Der Modus `"document"` zeigt den Bearbeitungsbereich als Dokumentseite an. + +### Standardkonfiguration {#default-config} + +~~~jsx +layoutMode: "classic"; +~~~ + +### Beispiel {#example} + +~~~jsx {3} +// RichText initialisieren +new richtext.Richtext("#root", { + layoutMode: "document" // initialisiert RichText standardmäßig im "document"-Modus + // weitere Konfigurationseigenschaften +}); +~~~ + +**Änderungsprotokoll:** Die Eigenschaft wurde in v2.0 anstelle der entfernten Eigenschaft `mode` hinzugefügt + +**Verwandte Artikel:** [Konfiguration](guides/configuration.md) + +**Verwandtes Beispiel:** [RichText. Initialisierung](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/locale.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/locale.md new file mode 100644 index 0000000..e7dcd41 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/locale.md @@ -0,0 +1,47 @@ +--- +sidebar_label: locale +title: locale Konfiguration +description: Sie können mehr über die locale-Konfiguration in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# locale + +### Beschreibung {#description} + +@short: Optional. Ein Objekt, das Lokalisierungsbeschriftungen von RichText enthält + +:::info[Info] +Das `locale`-Objekt muss alle Beschriftungen von RichText mit den entsprechenden Übersetzungen enthalten. +::: + +### Verwendung {#usage} + +~~~jsx {} +locale?: object; +~~~ + +### Standardkonfiguration {#default-config} + +Standardmäßig verwendet RichText die **englische** Locale. Sie können auch eine benutzerdefinierte Locale festlegen. + +:::tip[Tipp] +Um die aktuelle Locale dynamisch zu ändern, können Sie die Methode [`setLocale()`](api/methods/set-locale.md) von RichText verwenden +::: + +### Beispiel {#example} + +~~~jsx {3} +// RichText initialisieren +const editor = new richtext.RichText("#root", { + locale: richtext.locales.cn // die chinesische Locale wird initial gesetzt + // locale: richtext.locales.en // die englische Locale wird initial gesetzt + // locale: richtext.locales.de // die deutsche Locale wird initial gesetzt + // weitere Konfigurationseigenschaften +}); +~~~ + +**Änderungsprotokoll:** Die Eigenschaft wurde in v2.0 hinzugefügt + +**Verwandte Artikel:** [Lokalisierung](guides/localization.md) + +**Verwandtes Beispiel:** [RichText. Lokalisierung](https://snippet.dhtmlx.com/zxjrin3i?tag=richtext) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/menubar.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/menubar.md new file mode 100644 index 0000000..0bafddc --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/menubar.md @@ -0,0 +1,33 @@ +--- +sidebar_label: menubar +title: menubar Konfiguration +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die menubar-Konfiguration. Lesen 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. +--- + +# menubar + +### Beschreibung {#description} + +@short: Optional. Aktiviert die obere Menüleiste von RichText + +### Verwendung {#usage} + +~~~jsx {} +menubar?: boolean; +~~~ + +### Beispiel {#example} + +~~~jsx {3} +// RichText initialisieren +new richtext.Richtext("#root", { + menubar: true + // weitere Konfigurationseigenschaften +}); +~~~ + +**Änderungsprotokoll:** Die Eigenschaft wurde in v2.0 hinzugefügt + +**Verwandte Artikel:** [Konfiguration](guides/configuration.md) + +**Verwandtes Beispiel:** [RichText. Initialisierung mit Menüleiste](https://snippet.dhtmlx.com/tjryzka7?tag=richtext) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/toolbar.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/toolbar.md new file mode 100644 index 0000000..6124308 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/toolbar.md @@ -0,0 +1,219 @@ +--- +sidebar_label: toolbar +title: toolbar Konfiguration +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die toolbar-Konfiguration. Lesen Sie Entwickleranleitungen und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# toolbar + +### Beschreibung {#description} + +@short: Optional. Aktiviert die Toolbar und erlaubt es, die darin angezeigten Schaltflächen anzugeben und zu konfigurieren + +### Verwendung {#usage} + +~~~jsx {} +toolbar?: boolean | Array any }>; +~~~ + +#### Verfügbare Schaltflächen in der Toolbar {#available-buttons-within-toolbar} + +Sie können die folgenden Schaltflächen in der RichText-Toolbar angeben: + +| Schaltfläche | Beschreibung | +|---------------------|-----------------------------------------------------------------------------| +| `undo` | Macht die zuletzt ausgeführte Benutzeraktion rückgängig. | +| `redo` | Stellt die zuvor rückgängig gemachte Aktion wieder her. | +| `style` | Ermöglicht die Auswahl von Textstilen (z. B. Überschriften, Absatz usw.). | +| `font-family` | Ändert die Schriftart des ausgewählten Texts. | +| `font-size` | Passt die Größe des ausgewählten Texts an. | +| `bold` | Wendet fette Formatierung auf den ausgewählten Text an. | +| `italic` | Wendet kursive Formatierung auf den ausgewählten Text an. | +| `underline` | Unterstreicht den ausgewählten Text. | +| `strike` | Wendet eine Durchstreichung an. | +| `subscript` | Formatiert den Text als tiefgestellten Text. | +| `superscript` | Formatiert den Text als hochgestellten Text. | +| `text-color` | Ändert die Textfarbe. | +| `background-color` | Ändert die Hintergrundfarbe (Hervorhebungsfarbe) des Texts. | +| `align` | Legt die Textausrichtung fest (links, zentriert, rechts, Blocksatz). | +| `indent` | Erhöht den Einzug des Textblocks. | +| `outdent` | Verringert den Absatzeinzug. | +| `line-height` | Passt den Zeilenabstand an. | +| `quote` | Formatiert den Text als Blockzitat. | +| `bulleted-list` | Schaltet die Aufzählungsliste ein/aus | +| `numbered-list` | Schaltet die nummerierte Liste ein/aus | +| `link` | Fügt einen Hyperlink ein. | +| `image` | Fügt ein Bild ein. | +| `line` | Fügt eine horizontale Linie ein. | +| `clear` | Entfernt alle Formatierungen des ausgewählten Texts. | +| `print` | Öffnet den Druckdialog. | +| `fullscreen` | Schaltet den Vollbildmodus um. | +| `mode` | Wechselt zwischen [Layout-Modi](api/config/layout-mode.md) (klassisch/Dokument)| +| `shortcuts` | Zeigt eine Liste der verfügbaren Tastaturkürzel an. | +| `separator` | Fügt einen visuellen Trenner zwischen Toolbar-Gruppen ein. | + +Sie können diese Zeichenketten wie folgt zur Konfiguration der Toolbar-Schaltflächen verwenden: + +~~~jsx {2-7} +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // weitere Schaltflächen + ], + // weitere Konfigurationseigenschaften +}); +~~~ + +#### Benutzerdefinierte Schaltflächen in der Toolbar {#custom-buttons-within-toolbar} + +Sie können benutzerdefinierte Schaltflächen als Objekte mit folgenden Parametern angeben: + +- `type` - (erforderlich) gibt den benutzerdefinierten Steuerelementtyp an. Folgende Typen sind verfügbar: `"button"`, `"richselect"`, `"colorpicker"` +- `id` - (optional) eine benutzerdefinierte Steuerelement-ID (darf nicht mit einer vorhandenen Steuerelement-ID übereinstimmen) +- `label` - (optional) eine Schaltflächenbeschriftung (wird mit einem Symbol kombiniert) +- `tooltip` - (optional) ein Tooltip, der beim Hover angezeigt wird (falls nicht angegeben, wird der Wert aus „label" verwendet) +- `css` - (optional) ein CSS-Klassenname, der dem Steuerelement zugewiesen wird (unterstützte Standardklassen: wx-primary, wx-secondary) +- `handler` - (optional) eine Callback-Funktion, die beim Klicken auf die Schaltfläche ausgeführt wird + +~~~jsx {6-32} +new richtext.Richtext("#root", { + toolbar: [ + // Schaltflächen (Zeichenketten repräsentieren nur Schaltflächen) + "bold", + "italic", + // vordefinierte Schaltflächen (der Benutzer kann keine weiteren Optionen für diese festlegen (keine Beschriftungen, Tooltips, Optionen usw.), daher nur ({ type: "button", id: string }) + { + type: "button", + id: "fullscreen", + }, + // der Benutzer muss den richtigen Typ angeben, wenn er ein vordefiniertes Steuerelement verwenden möchte (z. B. richselect/colorpicker) + // nicht übereinstimmende Typen werden ignoriert (nicht zur Toolbar hinzugefügt) + { + type: "richselect", // type: "button" - falsch, wird ignoriert + id: "mode", + }, + // benutzerdefinierte Schaltflächen (unterstützte Optionen sind unten aufgeführt) + // der Benutzer kann nur benutzerdefinierte Schaltflächen definieren (derzeit keine Unterstützung für richselect/colorpicker) + { + type: "button", + id: "some", + label: "Some", + handler: () => {/* benutzerdefinierte Logik */} + }, + { + type: "button", + id: "other", + icon: "wxo-help", + label: "Other", + tooltip: "Some tooltip", + handler: () => {/* benutzerdefinierte Logik */} + } + ], + // weitere Konfigurationseigenschaften +}); +~~~ + +#### Toolbar ausblenden {#hide-toolbar} + +Wenn Sie die Toolbar ausblenden möchten, setzen Sie die Eigenschaft `toolbar` wie folgt auf `false`: + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false + // weitere Konfigurationseigenschaften +}); +~~~ + +### Standardkonfiguration {#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[Tipp] +Die Standard-Toolbar-Steuerelemente werden vom RichText-Widget exportiert und sind über `richtext.defaultToolbarButtons` zugänglich. + +```jsx{4} +// RichText initialisieren +new richtext.Richtext("#root", { + toolbar: [ + ...richtext.defaultToolbarButtons, + { + type: "button", + id: "btn1", // Schaltflächen-ID (darf nicht mit vorhandenen Schaltflächen-IDs übereinstimmen, wenn Sie benutzerdefinierte Logik anwenden möchten) + icon: "wxo-help", // Schaltflächensymbol (wird mit der Beschriftung kombiniert) + css: "rounded", // CSS-Klassenname, der dem Steuerelement zugewiesen wird (unterstützte Standardklassen: wx-primary, wx-secondary) + label: "Custom button", // Schaltflächenbeschriftung (wird mit dem Symbol kombiniert) + tooltip: "Some tooltip", // Tooltip, der beim Hover angezeigt wird (falls nicht angegeben, wird der Wert aus „label" verwendet) + } + ] + // weitere Konfigurationseigenschaften +}); +``` +::: + +### Beispiel {#example} + +~~~jsx {3-18} +// RichText initialisieren +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // benutzerdefinierte Schaltflächen (alle unterstützten Optionen werden unten verwendet) + // der Benutzer kann nur benutzerdefinierte Schaltflächen definieren (derzeit keine Unterstützung für richselect/colorpicker) + { + type: "button", + id: "btn1", // Schaltflächen-ID (darf nicht mit vorhandenen Schaltflächen-IDs übereinstimmen, wenn Sie benutzerdefinierte Logik anwenden möchten) + icon: "wxo-help", // Schaltflächensymbol (wird mit der Beschriftung kombiniert) + css: "rounded", // CSS-Klassenname, der dem Steuerelement zugewiesen wird (unterstützte Standardklassen: wx-primary, wx-secondary) + label: "Custom button", // Schaltflächenbeschriftung (wird mit dem Symbol kombiniert) + tooltip: "Some tooltip", // Tooltip, der beim Hover angezeigt wird (falls nicht angegeben, wird der Wert aus „label" verwendet) + handler: () => ..., // benutzerdefinierte Logik für diese Schaltfläche + } + ] + // weitere Konfigurationseigenschaften +}); +~~~ + +**Änderungsprotokoll:** Die Eigenschaft wurde in v2.0 hinzugefügt + +**Verwandte Artikel:** [Konfiguration](guides/configuration.md) + +**Verwandtes Beispiel:** [RichText. Benutzerdefiniertes Steuerelement und vereinfachte Toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/trigger-template.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/trigger-template.md new file mode 100644 index 0000000..d7693f5 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/trigger-template.md @@ -0,0 +1,73 @@ +--- +sidebar_label: triggerTemplate +title: triggerTemplate Config +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die triggerTemplate-Konfiguration. Durchsuchen Sie Entwicklerleitfäden und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# triggerTemplate + +### Beschreibung {#description} + +@short: Optional. Passt an, wie RichText Einträge im Vorschlags-Dropdown rendert, das durch einen [`triggers`](api/config/triggers.md)-Eintrag geöffnet wird + +Standardmäßig zeigt das Dropdown den `label`-Wert jedes Eintrags als einfachen Text an. Verwenden Sie `triggerTemplate`, um aufwendigere Zeilen zu rendern – zum Beispiel einen Avatar zusammen mit einem Namen und einer E-Mail-Adresse. + +### Verwendung {#usage} + +~~~jsx {} +function triggerTemplate({ data, trigger }) { + return "HTML template of the suggestion item"; +}; +~~~ + +### Parameter {#parameters} + +Die Callback-Funktion nimmt ein Objekt mit den folgenden Parametern entgegen: + +- `data` - das aktuelle Vorschlags-Element (`{ id, label, url }`, zuzüglich beliebiger benutzerdefinierter Felder, die Sie der `data`-Quelle des Triggers hinzufügen) +- `trigger` - das Trigger-Zeichen, das das Dropdown geöffnet hat (`"@"`, `"#"` usw.) + +:::tip[Tipp] +Die Standard-Breite des Dropdowns beträgt `160px`. Wenn Sie für Ihr Template mehr Platz benötigen, fügen Sie den übergeordneten Selektor `.wx-editor` vor dem Selektor ein: + +~~~css {} +.wx-editor .wx-suggest-anchor { + width: 220px; +} +~~~ +::: + +### Beispiel {#example} + +Der folgende Code-Ausschnitt konfiguriert zwei Trigger: `@` für Erwähnungen und `#` für Tags. Verwenden Sie `triggerTemplate`, um den `trigger`-Wert auszuwerten und jedes Dropdown unterschiedlich zu rendern. Für das `@`-Dropdown gibt das Template eine benutzerdefinierte HTML-Zeile mit einem Avatar (`data.image`), einem Nickname (`data.label`) und einem vollständigen Namen (`data.name`) zurück. Für den `#`-Trigger verwendet das Template den `label`: + +~~~jsx {5-6,8-15} +const { template, Richtext } = richtext; + +new Richtext("#root", { + triggers: [ + { trigger: "@", data: people }, + { trigger: "#", data: tags } + ], + triggerTemplate: template(obj => { + if (obj.trigger === "@") { + return `
+ +
${obj.data.label}
+
${obj.data.name}
+
`; + } + // andere Trigger (zum Beispiel "#") verwenden den einfachen Label + return obj.data.label; + }) +}); +~~~ + +**Änderungsprotokoll:** Die Eigenschaft wurde in v2.1 hinzugefügt + +**Verwandte Beispiele:** + +- [RichText. Benutzerdefiniertes Dropdown-Template pro Trigger](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext) +- [RichText. Emoji-Autovervollständigung](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) + +**Verwandte Artikel:** [Erwähnungen und Tags](guides/mentions_and_tags.md) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/triggers.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/triggers.md new file mode 100644 index 0000000..fe08e44 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/triggers.md @@ -0,0 +1,250 @@ +--- +sidebar_label: triggers +title: triggers Config +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die triggers-Konfiguration. Lesen Sie Entwickleranleitungen und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# triggers + +### Beschreibung {#description} + +@short: Optional. Definiert Dropdown-Trigger zum Einfügen von Erwähnungen, Tags und anderen Token + +Wenn ein Benutzer ein konfiguriertes Zeichen eingibt (beispielsweise `@` oder `#`), öffnet RichText ein Dropdown mit vordefinierten Elementen. Wählt der Benutzer ein Element aus, fügt RichText es als nicht editierbaren Token (``) in das Dokument ein. + +### Verwendung {#usage} + +~~~jsx {} +triggers?: Array<{ + trigger: string, + data: Array<{ id?: string | number; label?: string; url?: string }> + | ((query: string) => + Array<{ id?: string | number; label?: string; url?: string }> + | Promise>), + showTrigger?: boolean, + action?: (item) => void +}>; +~~~ + +### Parameter {#parameters} + +Jeder Eintrag des `triggers`-Arrays akzeptiert die folgenden Felder: + +- `trigger` - (erforderlich) das Zeichen, das das Vorschlags-Dropdown öffnet (beispielsweise `"@"`, `"#"`, `"/"`, `"$"`) +- `data` - (erforderlich) die Datenquelle für das Dropdown; kann ein Array, eine synchrone Funktion oder eine asynchrone Funktion sein. Siehe [Datenquellen-Formen](#data-source-forms) +- `showTrigger` - (optional) wenn `true` (Standard), behält RichText das Trigger-Zeichen im eingefügten Token (beispielsweise `@Alice`); wenn `false`, fügt RichText nur das `label` ein (beispielsweise `Alice`) +- `action` - (optional) ein benutzerdefinierter Callback, der aufgerufen wird, wenn ein Benutzer ein Element auswählt. Wenn gesetzt, entfernt RichText den eingetippten Trigger-Text (das Trigger-Zeichen plus die Abfrage) und ruft `action(item)` **anstelle** des Einfügens eines Tokens auf. Der Callback empfängt das ausgewählte Element und kann stattdessen beliebigen Inhalt einfügen. Der `action`-Parameter hat Vorrang vor `showTrigger`, das keine Wirkung hat, wenn `action` gesetzt ist. Siehe [Benutzerdefinierte Aktion](#custom-action) + +### Datenquellen-Formen {#data-source-forms} + +* **Statisches Array** — RichText filtert das Array automatisch, indem es die Abfrage mit `label` abgleicht (Groß-/Kleinschreibung-unabhängig, `startsWith`): + +~~~jsx {3-7} +new richtext.Richtext("#root", { + triggers: [{ + trigger: "@", + data: [ + { id: "alice", label: "Alice" }, + { id: "bob", label: "Bob" } + ] + }] +}); +~~~ + +* **Synchrone Funktion** — RichText ruft Ihre Funktion mit dem aktuellen `query`-String auf; Sie führen die Filterung durch und geben das passende Array zurück: + +~~~jsx {3-6} +new richtext.Richtext("#root", { + triggers: [{ + trigger: "#", + data: query => tags.filter(t => + t.label.toLowerCase().startsWith(query.toLowerCase()) + ) + }] +}); +~~~ + +* **Asynchrone Funktion** — RichText ruft Ihre Funktion mit dem aktuellen `query`-String auf; geben Sie ein `Promise` zurück, das zum passenden Array aufgelöst wird. Nützlich für die serverseitige Suche: + +~~~jsx {3-8} +new richtext.Richtext("#root", { + triggers: [{ + trigger: "+", + data: async query => { + const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`); + const users = await res.json(); + return users.map(u => ({ id: String(u.id), label: u.name, url: u.website })); + } + }] +}); +~~~ + +### Felder eines Vorschlags-Elements {#suggestion-item-fields} + +Jedes Element in `data` (oder jedes von einer Funktion zurückgegebene Element) verfügt über folgende Felder: + +- `id` - (optional) eindeutiger Bezeichner, der im eingefügten Token gespeichert wird. Wenn weggelassen, generiert RichText automatisch eine ID +- `label` - (optional) der im Dropdown angezeigte und in das Dokument eingefügte Text. Nur für das Standard-Rendering erforderlich; mit einem benutzerdefinierten [`triggerTemplate`](api/config/trigger-template.md) können Sie Elemente aus anderen Feldern rendern (beispielsweise `template(({ data }) => data.id)`) und `label` weglassen +- `url` - (optional) URL, die dem Element zugeordnet ist. RichText speichert die URL als `href`-Attribut des eingefügten Tokens. `Ctrl+Click` auf den Token öffnet den Link + +Ein Element kann auch eine beliebige Anzahl benutzerdefinierter Felder über `id`, `label` und `url` hinaus enthalten (beispielsweise `code` für ein Emoji oder `image` und `name` für einen Avatar). Diese zusätzlichen Felder werden an den [`triggerTemplate`](api/config/trigger-template.md)-Callback und an den `action`-Callback weitergegeben. + +### Gerenderter Token {#rendered-token} + +Wenn ein Benutzer ein Element im Dropdown auswählt, fügt RichText ein nicht editierbares Token-Element in das Dokument ein: + +~~~html {} +@Alice +~~~ + +- `@` (in `data-token="@"`) - der `trigger` des Elements +- `alice` (in `data-token-id="alice"`) - die `id` des Elements +- `mailto:alice@example.com` (in `href="mailto:alice@example.com"`) - die `url` des Elements +- `@Alice` - die Kombination aus `trigger` und `label`; mit `showTrigger: false` wäre es nur `Alice` + +Verwenden Sie die Attribute `data-token` und `data-token-id`, um Token mit CSS anzusprechen, beispielsweise um alle Erwähnungen eines Benutzers hervorzuheben: + +~~~css {} +.wx-editor-content a[data-token="@"][data-token-id="alice"] { + background: #fb8500; + color: #fff; +} +~~~ + +### Benutzerdefinierte Aktion {#custom-action} + +Standardmäßig fügt RichText das ausgewählte Element als Token in das Dokument ein. Setzen Sie den `action`-Parameter, um stattdessen Ihren eigenen Code auszuführen: RichText entfernt den eingetippten Trigger-String (das Trigger-Zeichen und die Abfrage) und ruft den `action(item)`-Callback mit dem ausgewählten Element auf. Es wird kein Token eingefügt, sodass Sie selbst entscheiden können, was dem Dokument hinzugefügt wird (oder Ihren eigenen Code ausführen). Der `action`-Parameter hat Vorrang vor `showTrigger`. Wenn `action` gesetzt ist, wird `showTrigger` ignoriert. + +#### Emoji einfügen {#add-emoji} + +Ein häufiger Anwendungsfall ist das Einfügen eines Emojis über einen `:`-Trigger, wobei jedes Element ein benutzerdefiniertes `code`-Feld enthält. Kombinieren Sie `action` mit [`triggerTemplate`](api/config/trigger-template.md), damit das Dropdown das Emoji selbst anzeigt und nicht nur sein Label: + +~~~jsx {8,12} +const { template, Richtext } = richtext; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: emoji, // [{ id: "apple", label: "apple", code: "1F34E" }, ...] + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // das Emoji selbst (nicht nur seine Beschriftung) im Dropdown anzeigen + triggerTemplate: template(({ data }) => `${emojiFromCode(data.code)} ${data.label}`) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} +~~~ + +#### Emoji nach Kategorien gruppieren {#group-emoji-by-categories} + +Wenn der `data`-Parameter eine Funktion ist, sind Sie nicht auf den eingebauten `label`-Abgleich beschränkt. Sie können eine eigene Filterung vornehmen und Kategorieüberschriften im Dropdown behalten. Fügen Sie Header-Elemente hinzu, die ein `label`-Feld enthalten, aber kein `code`. Die `data`-Funktion findet zunächst die Emojis, die zur Abfrage passen, und gibt dann die Emojis zusammen mit den Überschriften der Kategorien zurück, die noch Treffer enthalten: + +~~~jsx {18-26,31-33,41} +const { template, Richtext } = richtext; + +// Header-Elemente haben kein `code`-Feld; Emoji-Elemente enthalten eines +const emoji = [ + { id: "$smileys", label: "Smileys", category: 1 }, // Kategorie + { id: "grinning", label: "grinning", code: "1F600", category: 1 }, + { id: "smile", label: "smile", code: "1F604", category: 1 }, + { id: "$animals", label: "Animals", category: 2 }, // Kategorie + { id: "dog", label: "dog", code: "1F436", category: 2 }, + { id: "cat", label: "cat", code: "1F431", category: 2 } +]; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: query => { + const matched = emoji.filter(item => + item.code && + item.label.toLowerCase().startsWith(query.toLowerCase().trim()) + ); + const categories = new Set(matched.map(item => item.category)); + // passende Emojis behalten plus die Überschriften der Kategorien, die noch Treffer enthalten + return emoji.filter(item => + item.code ? matched.includes(item) : categories.has(item.category) + ); + }, + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // Emoji-Zeilen normal und Kategorieüberschriften fett darstellen + triggerTemplate: template(({ data }) => + data.code ? `${emojiFromCode(data.code)} ${data.label}` : `${data.label}` + ) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} + +// Überschriften haben kein `code` — Auswahl auf ihnen ignorieren, damit sie nie eingefügt werden +editor.api.intercept("insert-token", ({ data }) => !!data.code); +~~~ + +#### Slash-Befehlsmenü hinzufügen {#add-slash-style-command-menu} + +Sie können `action` verwenden, um ein Slash-Befehlsmenü zu erstellen (wie `/` in Notion oder Slack). Speichern Sie einen Befehlsnamen in der `id` jedes Elements, seine Optionen in einem benutzerdefinierten `config`-Feld, und lassen Sie den Callback ihn mit [`api.exec`](api/internal/exec.md) ausführen: + +~~~jsx {13} +// jedes Element speichert einen api.exec-Aktionsnamen in `id` und seine Parameter in `config` +const commands = [ + { id: "set-text-style", label: "Heading 1", config: { tag: "h1" } }, + { id: "insert-list", label: "Bulleted list", config: { type: "bulleted" } }, + { id: "insert-line", label: "Divider" } // keine Konfiguration → `|| {}` wird angewendet +]; + +const editor = new richtext.Richtext("#root", { + triggers: [ + { + trigger: "/", + data: commands, + action: item => editor.api.exec(item.id, item.config || {}) + } + ] +}); +~~~ + +### Beispiel {#example} + +Das folgende Beispiel richtet zwei Trigger ein: `@` für Erwähnungen (jedes Element enthält eine `url`, die zum `href` des Tokens wird) und `#` für Tags (nur Label): + +~~~jsx {4,11} +new richtext.Richtext("#root", { + triggers: [ + { + trigger: "@", + data: [ + { id: "alice", label: "Alice", url: "mailto:alice@example.com" }, + { id: "bob", label: "Bob", url: "mailto:bob@example.com" } + ] + }, + { + trigger: "#", + data: [ + { id: "css", label: "CSS" }, + { id: "html", label: "HTML" } + ] + } + ] +}); +~~~ + +**Änderungsprotokoll:** Die Eigenschaft wurde in v2.1 hinzugefügt + +**Verwandte Beispiele:** + +- [RichText. Erwähnungen, Tags und asynchrone Suche](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) +- [RichText. Benutzerdefinierte Dropdown-Vorlage pro Trigger](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext) +- [RichText. Emoji-Autovervollständigung](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) +- [RichText. Slash-Befehle](https://snippet.dhtmlx.com/e0mrmyam?tag=richtext) +- [RichText. Erwähnungen suchen und hervorheben](https://snippet.dhtmlx.com/8y6zvzh2?tag=richtext) +- [RichText. Alle Erwähnungen hervorheben](https://snippet.dhtmlx.com/2rbo12jx?tag=richtext) + +**Verwandte Artikel:** [Erwähnungen und Tags](guides/mentions_and_tags.md) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/config/value.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/value.md new file mode 100644 index 0000000..96dbcf1 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/value.md @@ -0,0 +1,36 @@ +--- +sidebar_label: value +title: value Config +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die value-Konfiguration. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# value + +### Beschreibung {#description} + +@short: Optional. Legt den Anfangswert (Inhalt) fest, der im Editorbereich von RichText angezeigt wird + +:::tip[Tipp] +Wenn Sie den Wert (Inhalt) in einem benutzerdefinierten Format setzen möchten, verwenden Sie die integrierte Methode [`setValue()`](api/methods/set-value.md). +::: + +### Verwendung {#usage} + +~~~jsx {} +value?: string; +~~~ + +### Beispiel {#example} + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" // setzt den Standardwert (HTML-Format) + // weitere Konfigurationseigenschaften +}); +~~~ + +**Änderungsprotokoll:** Die Eigenschaft wurde in v2.0 hinzugefügt + +**Verwandte Artikel:** [Konfiguration](guides/configuration.md) + +**Verwandtes Beispiel:** [RichText. Initialisierung](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/align.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/align.md new file mode 100644 index 0000000..b915e4e --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/align.md @@ -0,0 +1,48 @@ +--- +sidebar_label: align +title: align Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das align-Event. Entwicklerhandbücher und API-Referenz, Code-Beispiele und Live-Demos sowie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText stehen zur Verfügung. +--- + +# align + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn die Textausrichtung über die Menüleiste/Toolbar oder Event-Bus-Methoden geändert wird + +### Verwendung {#usage} + +~~~jsx {} +"align": ({ + align: "left" | "center" | "right" | "justify" +}) => boolean | void; +~~~ + +### Parameter {#parameters} + +Der Callback des `align`-Events kann ein Objekt mit dem folgenden Parameter entgegennehmen: + +- `align` - eine Textausrichtung. Sie können einen der folgenden Werte angeben: `"left" | "center" | "right" | "justify"` + +:::info[Info] +Zur Behandlung interner Events können Sie [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-12} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "align"-Event abonnieren +editor.api.on("align", (obj) => { + console.log(`Ausrichten auf: ${obj.align}`); +}); +// den Text linksbündig ausrichten +editor.api.exec("align", { + align: "left" +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md new file mode 100644 index 0000000..4e51592 --- /dev/null +++ b/i18n/de/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: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über das clear-text-format-Event. Entwicklerhandbücher und API-Referenz, Code-Beispiele und Live-Demos – laden Sie außerdem eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# clear-text-format + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn eine Textformatierung über die Menüleiste/Symbolleiste oder Event-Bus-Methoden aufgehoben wird + +### Verwendung {#usage} + +~~~jsx {} +"clear-text-format": () => boolean | void; +~~~ + +:::info[Info] +Zur Verarbeitung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-10} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// Das "clear-text-format"-Event abonnieren +editor.api.on("clear-text-format", () => { + console.log("Text format was cleared"); +}); +// Textformatierung aufheben +editor.api.exec("clear-text-format", {}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/copy.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/copy.md new file mode 100644 index 0000000..36dc669 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/copy.md @@ -0,0 +1,36 @@ +--- +sidebar_label: copy +title: copy Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das copy-Event. Durchsuchen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# copy + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn ausgewählter Text kopiert wird + +### Verwendung {#usage} + +~~~jsx {} +"copy": () => boolean | void; +~~~ + +:::info[Info] +Zur Verarbeitung interner Events können Sie [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-8} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "copy"-Event abonnieren +editor.api.on("copy", () => { + console.log("Selected text was copied"); +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/create-new.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/create-new.md new file mode 100644 index 0000000..acd2f70 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/create-new.md @@ -0,0 +1,44 @@ +--- +sidebar_label: create-new +title: create-new Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über das create-new-Event. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# create-new + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn die Option „Neu" in der Menüleiste oder über Event-Bus-Methoden aufgerufen wird + +### Verwendung {#usage} + +~~~jsx {} +"create-new": ({ reset?: boolean }) => boolean | void; +~~~ + +### Parameter {#parameters} + +Der Callback des `create-new`-Events kann ein Objekt mit folgendem Parameter entgegennehmen: + +- `reset` - setzt den Verlauf zurück, wenn eine neue Datei erstellt wird + +:::info[Info] +Für die Verarbeitung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-10} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das „create-new"-Event abonnieren +editor.api.on("create-new", ({ reset }) => { + console.log(`Document has been cleared. History has ${reset ? "" : "not"} been reset.`); +}); +// neue Datei erstellen und den Verlauf zurücksetzen +editor.api.exec("create-new", { reset: true }); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/cut.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/cut.md new file mode 100644 index 0000000..268588c --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/cut.md @@ -0,0 +1,36 @@ +--- +sidebar_label: cut +title: cut Event +description: Sie können mehr über das cut-Event in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# cut + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn ausgewählter Text ausgeschnitten wird + +### Verwendung {#usage} + +~~~jsx {} +"cut": () => boolean | void; +~~~ + +:::info[Info] +Zur Behandlung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-8} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// Das "cut"-Event abonnieren +editor.api.on("cut", () => { + console.log("Selected text was cut"); +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/delete-link.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/delete-link.md new file mode 100644 index 0000000..ee96725 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/delete-link.md @@ -0,0 +1,36 @@ +--- +sidebar_label: delete-link +title: delete-link Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das delete-link Event. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# delete-link + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn ein Link gelöscht wird + +### Verwendung {#usage} + +~~~jsx {} +"delete-link": () => boolean | void; +~~~ + +:::info[Info] +Zur Behandlung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-8} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "delete-link"-Event abonnieren +editor.api.on("delete-link", () => { + console.log("The link was deleted"); +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/export.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/export.md new file mode 100644 index 0000000..7c09441 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/export.md @@ -0,0 +1,59 @@ +--- +sidebar_label: export +title: export Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das export-Event. Entwicklerhandbücher und API-Referenz durchsuchen, Code-Beispiele und Live-Demos ausprobieren und eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunterladen. +--- + +# export + +### Beschreibung {#description} + +@short: Wird ausgelöst, nachdem die Option „Export" in der Menüleiste oder über Event-Bus-Methoden aufgerufen wurde + +### Verwendung {#usage} + +~~~jsx {} +"export": ({ options: IExportOptions; result?: any }) => boolean | void; + +interface IExportOptions { + format?: "docx" | "pdf"; + url?: string; + download?: boolean; + fileName?: string; +} +~~~ + +### Parameter {#parameters} + +Der Callback des `export`-Events kann ein Objekt mit den folgenden Parametern entgegennehmen: + +- `format` - ein Dateiformat +- `url` - eine Basis-URL für den Dateiexport +- `download` - ermöglicht es dem Benutzer anzugeben, ob die Datei nach Empfang der Server-Antwort heruntergeladen werden soll. Ist die Eigenschaft auf „false" gesetzt, wird die Datei nicht heruntergeladen; stattdessen kann der Benutzer die Blob-Daten aus dem Event-Objekt abrufen (siehe die Eigenschaft `result` in der Event-Definition) +- `fileName` - ein Dateiname für den Export + +:::info[Info] +Zur Behandlung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-15} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das „export"-Event abonnieren +editor.api.on("export", (obj) => { + console.log(obj); + console.log("The file was exported"); +}); +// Wert als PDF-Datei exportieren +editor.api.exec("export", { + format: "pdf", + download: false, + fileName: "some file" +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/hide-suggest.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/hide-suggest.md new file mode 100644 index 0000000..de0a626 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/hide-suggest.md @@ -0,0 +1,51 @@ +--- +sidebar_label: hide-suggest +title: hide-suggest Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über das hide-suggest Event. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# hide-suggest + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn das Vorschläge-Dropdown geschlossen wird + +Das Event wird ausgelöst, wenn eines der folgenden Ereignisse eintritt: + +- der Benutzer wählt ein Element aus dem Dropdown aus +- der Benutzer drückt `Escape` +- der Cursor verlässt den Trigger-Kontext (zum Beispiel durch `Backspace` vor dem Trigger-Zeichen) +- die aktuelle Suchanfrage keine Treffer liefert + +### Verwendung {#usage} + +~~~jsx {} +"hide-suggest": () => boolean | void; +~~~ + +### Parameter {#parameters} + +Der `hide-suggest`-Event-Callback erhält keine Parameter. + +:::info[Info] +Um interne Events zu verarbeiten, verwenden Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md). +::: + +### Beispiel {#example} + +~~~jsx {5-7} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "hide-suggest"-Event abonnieren +editor.api.on("hide-suggest", () => { + console.log("Suggestion dropdown closed"); +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.1 hinzugefügt + +**Verwandtes Beispiel:** [RichText. Erwähnungen, Tags und asynchrone Suche](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +**Verwandte Artikel:** [Erwähnungen und Tags](guides/mentions_and_tags.md) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/import.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/import.md new file mode 100644 index 0000000..0f55f0f --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/import.md @@ -0,0 +1,47 @@ +--- +sidebar_label: import +title: import Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das import-Event. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# import + +### Beschreibung {#description} + +@short: Wird ausgelöst, nachdem die Option "Import" in der Menüleiste oder über Event-Bus-Methoden aufgerufen wird + +### Verwendung {#usage} + +~~~jsx {} +"import": ({ html?: string }) => boolean | void; +~~~ + +### Parameter {#parameters} + +Der Callback des `import`-Events kann ein Objekt mit folgendem Parameter entgegennehmen: + +- `html` - ein Textwert im HTML-Format + +:::info[Info] +Zur Behandlung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-13} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "import"-Event abonnieren +editor.api.on("import", (obj) => { + console.log(obj.html); + console.log("The new value was imported"); +}); +// neuen Wert importieren +editor.api.exec("import", { + html: "

some value

" // ruft einfach setValue auf +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/indent.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/indent.md new file mode 100644 index 0000000..36723cb --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/indent.md @@ -0,0 +1,43 @@ +--- +sidebar_label: indent +title: indent Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das indent-Event. Lesen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# indent + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn der Block-Einzug erhöht wird + +### Verwendung {#usage} + +~~~jsx {} +"indent": ({ step: number }) => boolean | void; +~~~ + +### Parameter {#parameters} + +Der Callback des `indent`-Events kann ein Objekt mit den folgenden Parametern entgegennehmen: + +- `step` - der Schritt, um den der Einzug erhöht wurde + +:::info[Info] +Zur Behandlung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden. +::: + +### Beispiel {#example} + +~~~jsx {5-9} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "indent"-Event abonnieren +editor.api.on("indent", (obj) => { + console.log(obj); + console.log("The indention was increased"); +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-image.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-image.md new file mode 100644 index 0000000..224666f --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-image.md @@ -0,0 +1,54 @@ +--- +sidebar_label: insert-image +title: insert-image Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das insert-image-Event. Entwicklerhandbücher und API-Referenz, Code-Beispiele und Live-Demos sowie eine kostenlose 30-Tage-Testversion von DHTMLX RichText. +--- + +# insert-image + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn ein Bild eingefügt wird (über die Toolbar, die Menüleiste, die Zwischenablage oder Drag-and-Drop) + +### Verwendung {#usage} + +~~~jsx {} +"insert-image": (IImageContext) => boolean | void; + +interface IImageContext { + id: TID; + value: string; // Bildquelle: Server-URL, wenn imageUploadUrl gesetzt ist, oder eine Base64-Daten-URL, wenn das Bild eingebettet ist + width: number; + height: number; + // zusätzliche Props aus dem Uploader-Kontext, für die eigentliche Aktion nicht erforderlich + name?: string; + file?: File; + status?: string; + selected: (ctx: IImageContext) => void; + uploaded: (ctx: IImageContext) => void; +} +~~~ + +:::note[Hinweis] +Das Feld `value` enthält entweder eine externe URL (wenn [`imageUploadUrl`](api/config/image-upload-url.md) konfiguriert ist und der Upload erfolgreich war) oder eine Base64-Daten-URL (wenn `imageUploadUrl` weggelassen wird und das Bild clientseitig eingebettet wird). Handler, die die Quelle verarbeiten – zum Beispiel um die URL umzuschreiben oder den Host zu validieren – müssen beide Formate berücksichtigen. +::: + +:::info[Info] +Zur Handhabung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden. +::: + +### Beispiel {#example} + +~~~jsx {5-9} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "insert-image"-Event abonnieren +editor.api.on("insert-image", (obj) => { + console.log(obj); + console.log("The image was inserted"); +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-line.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-line.md new file mode 100644 index 0000000..112f635 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-line.md @@ -0,0 +1,36 @@ +--- +sidebar_label: insert-line +title: insert-line Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das insert-line-Event. Entwicklerhandbücher und API-Referenz, Code-Beispiele und Live-Demos sowie eine kostenlose 30-Tage-Testversion von DHTMLX RichText stehen zur Verfügung. +--- + +# insert-line + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn eine horizontale Linie eingefügt wird + +### Verwendung {#usage} + +~~~jsx {} +"insert-line": () => boolean | void; +~~~ + +:::info[Info] +Zur Verarbeitung der internen Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden. +::: + +### Beispiel {#example} + +~~~jsx {5-8} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das „insert-line"-Event abonnieren +editor.api.on("insert-line", () => { + console.log("The horizontal line was inserted"); +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-link.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-link.md new file mode 100644 index 0000000..200a477 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-link.md @@ -0,0 +1,43 @@ +--- +sidebar_label: insert-link +title: insert-link Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das insert-link-Event. Entwicklerhandbücher und API-Referenz, Code-Beispiele und Live-Demos sowie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText stehen zum Download bereit. +--- + +# insert-link + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn ein Link eingefügt wird + +### Verwendung {#usage} + +~~~jsx {} +"insert-link": ({ url: string }) => boolean | void; +~~~ + +### Parameter {#parameters} + +Der Callback des `insert-link`-Events kann ein Objekt mit folgendem Parameter entgegennehmen: + +- `url` - die einzufügende URL + +:::info[Info] +Zur Behandlung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden. +::: + +### Beispiel {#example} + +~~~jsx {5-9} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "insert-link"-Event abonnieren +editor.api.on("insert-link", (obj) => { + console.log(obj) + console.log("The following link was inserted: " + obj.url); +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-list.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-list.md new file mode 100644 index 0000000..1c8dc1e --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-list.md @@ -0,0 +1,47 @@ +--- +sidebar_label: insert-list +title: insert-list Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das insert-list-Event. Lesen Sie Entwickleranleitungen und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# insert-list + +### Beschreibung {#description} + +@short: Wird beim Einfügen einer Liste ausgelöst + +### Verwendung {#usage} + +~~~jsx {} +"insert-list": ({ type: TListType }) => boolean | void; + +type TListType = "bulleted" | "numbered"; +~~~ + +### Parameter {#parameters} + +Der Callback des `insert-list`-Events kann ein Objekt mit dem folgenden Parameter entgegennehmen: + +- `type` - der Typ der eingefügten Liste. Sie können folgende Werte angeben: + - `"bulleted"` - Aufzählungsliste + - `"numbered"` - nummerierte Liste + +:::info[Info] +Zur Verarbeitung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden. +::: + +### Beispiel {#example} + +~~~jsx {5-9} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "insert-list"-Event abonnieren +editor.api.on("insert-list", (obj) => { + console.log(obj.type); + console.log("The list was inserted"); +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-token.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-token.md new file mode 100644 index 0000000..17a3db4 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-token.md @@ -0,0 +1,61 @@ +--- +sidebar_label: insert-token +title: insert-token Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das insert-token-Event. Lesen Sie Entwickleranleitungen und API-Referenzen, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# insert-token + +### Beschreibung {#description} + +@short: Wird ausgelöst, nachdem der Benutzer ein Vorschlagelement ausgewählt hat und RichText es als Token einfügt + +Das `insert-token`-Event wird ausgelöst, nachdem der Benutzer ein Element aus einem Trigger-Dropdown auswählt (Erwähnungen, Tags oder einen benutzerdefinierten Trigger, den Sie über die Eigenschaft [`triggers`](api/config/triggers.md) eingerichtet haben). + +### Verwendung {#usage} + +~~~jsx {} +"insert-token": ({ + data: { + id?: string | number, + label?: string, + url?: string, + // ...beliebige benutzerdefinierte Felder aus der Datenquelle des Triggers + }, + trigger: string, + showTrigger?: boolean, + action?: (item) => void +}) => boolean | void; +~~~ + +### Parameter {#parameters} + +Der Callback des `insert-token`-Events erhält ein Objekt mit folgenden Feldern: + +- `data` - das ausgewählte Vorschlagelement. Enthält `id`, `label` und `url` des Elements sowie alle benutzerdefinierten Felder, die Sie der `data`-Quelle des Triggers hinzugefügt haben +- `trigger` - das Trigger-Zeichen, das das Dropdown geöffnet hat (zum Beispiel `"@"` oder `"#"`) +- `showTrigger` - wenn `false`, fügt RichText nur `label` ein; andernfalls zeigt das Widget auch das Trigger-Zeichen an (Standard) +- `action` - eine benutzerdefinierte Aktion, die für den passenden [Trigger](api/config/triggers.md) definiert wurde. Wenn gesetzt, hat dieser Parameter Vorrang vor der Token-Einfügung: RichText entfernt den eingegebenen Text (das Trigger-Zeichen und die Abfrage) und ruft stattdessen `action(data)` auf, anstatt ein Token einzufügen. Der Parameter `showTrigger` hat in diesem Fall keine Wirkung + +:::info[Info] +Verwenden Sie zur Verarbeitung interner Events die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md). +::: + +### Beispiel {#example} + +~~~jsx {5-8} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "insert-token"-Event abonnieren +editor.api.on("insert-token", ({ data, trigger, showTrigger }) => { + console.log(`Inserted ${trigger}${data.label} (id: ${data.id})`); +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.1 hinzugefügt + +**Verwandtes Beispiel:** [RichText. Erwähnungen, Tags und asynchrone Suche](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +**Verwandte Artikel:** [Erwähnungen und Tags](guides/mentions_and_tags.md) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/outdent.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/outdent.md new file mode 100644 index 0000000..1078f09 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/outdent.md @@ -0,0 +1,43 @@ +--- +sidebar_label: outdent +title: outdent Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über das outdent-Event. Entwicklerhandbücher und API-Referenz, Code-Beispiele und Live-Demos sowie eine kostenlose 30-Tage-Testversion von DHTMLX RichText. +--- + +# outdent + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn der Block-Einzug verringert wird + +### Verwendung {#usage} + +~~~jsx {} +"outdent": ({ step: number }) => boolean | void; +~~~ + +### Parameter {#parameters} + +Der Callback des `outdent`-Events kann ein Objekt mit folgendem Parameter entgegennehmen: + +- `step` - der Schritt, um den der Einzug verringert wurde + +:::info[Info] +Zur Behandlung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-9} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "outdent"-Event abonnieren +editor.api.on("outdent", (obj) => { + console.log(obj); + console.log("The indention was decreased"); +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/paste.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/paste.md new file mode 100644 index 0000000..a662d09 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/paste.md @@ -0,0 +1,36 @@ +--- +sidebar_label: paste +title: paste Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das paste-Event. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# paste + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn Inhalt eingefügt wird + +### Verwendung {#usage} + +~~~jsx {} +"paste": () => boolean | void; +~~~ + +:::info[Info] +Zur Behandlung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden. +::: + +### Beispiel {#example} + +~~~jsx {5-8} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "paste"-Event abonnieren +editor.api.on("paste", () => { + console.log("Content was pasted"); +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/print.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/print.md new file mode 100644 index 0000000..ad12e54 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/print.md @@ -0,0 +1,36 @@ +--- +sidebar_label: print +title: print Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das print-Event. Entdecken Sie Entwicklerhandbücher und API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# print + +### Beschreibung {#description} + +@short: Wird beim Drucken des Dokuments ausgelöst + +### Verwendung {#usage} + +~~~jsx {} +"print": () => boolean | void; +~~~ + +:::info[Info] +Zur Behandlung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-8} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { +// Konfigurationseigenschaften +}); +// das "print"-Event abonnieren +editor.api.on("print", () => { + console.log("The document is printing"); +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/redo.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/redo.md new file mode 100644 index 0000000..a68a03b --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/redo.md @@ -0,0 +1,36 @@ +--- +sidebar_label: redo +title: redo Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das redo-Event. Lesen Sie Entwicklerhandbücher und API-Referenz, testen Sie Code-Beispiele und Live-Demos, und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# redo + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn die Schaltfläche „Redo" in der Menüleiste/Toolbar gedrückt oder über Event-Bus-Methoden aufgerufen wird + +### Verwendung {#usage} + +~~~jsx {} +"redo": () => boolean | void; +~~~ + +:::info[Info] +Zum Behandeln interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-8} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das „redo"-Event abonnieren +editor.api.on("redo", () => { + console.log("Redo operation was performed"); +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/resize-image.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/resize-image.md new file mode 100644 index 0000000..106f3f3 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/resize-image.md @@ -0,0 +1,45 @@ +--- +sidebar_label: resize-image +title: resize-image Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das resize-image-Event. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# resize-image + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn ein Bild in der Größe geändert wird + +### Verwendung {#usage} + +~~~jsx {} +"resize-image": ({ id: number, width: number, height: number }) => boolean | void; +~~~ + +### Parameter {#parameters} + +Der Callback des `resize-image`-Events kann ein Objekt mit den folgenden Parametern entgegennehmen: + +- `id` - die Bild-ID +- `width` - die Breite des Bildes +- `height` - die Höhe des Bildes + +:::info[Info] +Zur Verarbeitung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-9} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { +// Konfigurationseigenschaften +}); +// das "resize-image"-Event abonnieren +editor.api.on("resize-image", (obj) => { + console.log(obj); + console.log("The image was resized") +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-font-family.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-font-family.md new file mode 100644 index 0000000..e4e5710 --- /dev/null +++ b/i18n/de/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: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das set-font-family-Event. Lesen Sie Entwickleranleitungen und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# set-font-family + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn eine Schriftfamilie gesetzt wird + +### Verwendung {#usage} + +~~~jsx {} +"set-font-family": ({ fontFamily: string }) => boolean | void; +~~~ + +### Parameter {#parameters} + +Der Callback des `set-font-family`-Events kann ein Objekt mit folgendem Parameter entgegennehmen: + +- `fontFamily` - eine anzuwendende Schriftfamilie. Folgende Schriftarten stehen zur Verfügung: `"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"` + +:::info[Info] +Zur Verarbeitung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden. +::: + +### Beispiel {#example} + +~~~jsx {5-13} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "set-font-family"-Event abonnieren +editor.api.on("set-font-family", (obj) => { + console.log(obj.fontFamily); + console.log("The font family was changed"); +}); +// neue Schriftfamilie anwenden +editor.api.exec("set-font-family", { + fontFamily: "Roboto" +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-font-size.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-font-size.md new file mode 100644 index 0000000..839fa21 --- /dev/null +++ b/i18n/de/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: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das set-font-size-Event. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# set-font-size + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn eine Schriftgröße festgelegt wird + +### Verwendung {#usage} + +~~~jsx {} +"set-font-size": ({ fontSize: string }) => boolean | void; +~~~ + +### Parameter {#parameters} + +Der Callback des `set-font-size`-Events kann ein Objekt mit dem folgenden Parameter entgegennehmen: + +- `fontSize` - eine anzuwendende Schriftgröße + +:::info[Info] +Zur Behandlung interner Events können Sie [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-13} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// Das "set-font-size"-Event abonnieren +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); + console.log("The font size was changed"); +}); +// Neue Schriftgröße anwenden +editor.api.exec("set-font-size", { + fontSize: "11px" +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-line-height.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-line-height.md new file mode 100644 index 0000000..ec038d2 --- /dev/null +++ b/i18n/de/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: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das set-line-height-Event. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# set-line-height + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn eine Zeilenhöhe gesetzt wird + +### Verwendung {#usage} + +~~~jsx {} +"set-line-height": ({ lineHeight: string }) => boolean | void; +~~~ + +### Parameter {#parameters} + +Der Callback des `set-line-height`-Events kann ein Objekt mit dem folgenden Parameter entgegennehmen: + +- `lineHeight` - eine Zeilenhöhe + +:::info[Info] +Zur Verarbeitung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-13} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "set-line-height"-Event abonnieren +editor.api.on("set-line-height", (obj) => { + console.log(obj); + console.log("The line height was changed"); +}); +// eine neue Zeilenhöhe anwenden +editor.api.exec("set-line-height", { + lineHeight: "15px" +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-text-color.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-text-color.md new file mode 100644 index 0000000..6e5c027 --- /dev/null +++ b/i18n/de/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: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das set-text-color-Event. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# set-text-color + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn eine Textfarbe und/oder eine Texthintergrundfarbe gesetzt wird + +### Verwendung {#usage} + +~~~jsx {} +"set-text-color": (ITextColor) => boolean | void; + +interface ITextColor { + color?: string; + background?: string; +} +~~~ + +### Parameter {#parameters} + +Der Callback des `set-text-color`-Events kann ein Objekt mit den folgenden Parametern entgegennehmen: + +- `color` - eine Textfarbe +- `background` - eine Texthintergrundfarbe + +:::info[Info] +Zur Verarbeitung der internen Events können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-14} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "set-text-color"-Event abonnieren +editor.api.on("set-text-color", (obj) => { + console.log(obj); + console.log("The text color and/or background text color were changed"); +}); +// Textfarbe und Hintergrund anwenden +editor.api.exec("set-text-color", { + color: "red", + background: "blue" +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-text-format.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-text-format.md new file mode 100644 index 0000000..31c49e0 --- /dev/null +++ b/i18n/de/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: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das set-text-format-Event. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# set-text-format + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn ein Textformat gesetzt wird + +### Verwendung {#usage} + +~~~jsx {} +"set-text-format": (ITextFormat) => boolean | void; + +interface ITextFormat { + bold?: boolean; + italic?: boolean; + strike?: boolean; + underline?: boolean; +} +~~~ + +:::info[Info] +Zur Verarbeitung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Parameter {#parameters} + +Der Callback des `set-text-format`-Events kann ein Objekt mit folgenden Parametern entgegennehmen: + +- `bold` - ein Fettdruck-Textformat +- `italic` - ein kursives Textformat +- `strike` - ein durchgestrichenes Textformat +- `underline` - ein unterstrichenes Textformat + +### Beispiel {#example} + +~~~jsx {5-14} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "set-text-format"-Event abonnieren +editor.api.on("set-text-format", (obj) => { + console.log(obj); + console.log("The text format was changed"); +}); +// das "italic"- und Fettdruck-Textformat anwenden +editor.api.exec("set-text-format", { + italic: true, + bold: true +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-text-style.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/set-text-style.md new file mode 100644 index 0000000..0341eab --- /dev/null +++ b/i18n/de/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: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das set-text-style-Event. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# set-text-style + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn ein Textstil gesetzt wird + +### Verwendung {#usage} + +~~~jsx {} +"set-text-style": ({ tag: TBlockType }) => boolean | void; + +type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; +~~~ + +### Parameter {#parameters} + +Der Callback des `set-text-style`-Events kann ein Objekt mit den folgenden Parametern entgegennehmen: + +- `tag` - ein Textstil + +:::info[Info] +Zur Verarbeitung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden. +::: + +### Beispiel {#example} + +~~~jsx {5-13} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "set-text-style"-Event abonnieren +editor.api.on("set-text-style", (obj) => { + console.log(obj.tag); + console.log("The text style was changed"); +}); +// neuen Textstil anwenden +editor.api.exec("set-text-style", { + tag: "blockquote" +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/show-popup.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/show-popup.md new file mode 100644 index 0000000..1e9609a --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/show-popup.md @@ -0,0 +1,53 @@ +--- +sidebar_label: show-popup +title: show-popup Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das show-popup-Event. Lesen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Code-Beispiele und Live-Demos, und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# show-popup + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn ein Popup angezeigt oder ausgeblendet wird + +### Verwendung {#usage} + +~~~jsx {} +"show-popup": (IPopupConfig) => boolean | void; + +interface IPopupConfig { + type: "link" | null; + image?: boolean; +} +~~~ + +### Parameter {#parameters} + +Der Callback des `show-popup`-Events kann ein Objekt mit den folgenden Parametern entgegennehmen: + +- `type` - der Typ des Popups +- `image` - gibt Zugriff auf zusätzlichen Kontext (zeigt, ob der aktuelle Cursor auf ein Bild zeigt oder nicht) + +:::info[Info] +Zur Behandlung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden. +::: + +### Beispiel {#example} + +~~~jsx {5-13} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "show-popup"-Event abonnieren +editor.api.on("show-popup", (obj) => { + console.log(obj); + console.log("The popup was shown/hidden"); +}); +// show-popup den Text links anzeigen +editor.api.exec("show-popup", { + type: "link" +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/show-suggest.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/show-suggest.md new file mode 100644 index 0000000..afbccd9 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/show-suggest.md @@ -0,0 +1,64 @@ +--- +sidebar_label: show-suggest +title: show-suggest Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das show-suggest-Event. Entwicklerhandbücher und API-Referenz, Code-Beispiele und Live-Demos sowie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText stehen zur Verfügung. +--- + +# show-suggest + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn das Vorschlag-Dropdown für einen konfigurierten Trigger geöffnet wird + +Das `show-suggest`-Event wird ausgelöst, nachdem RichText eine nicht leere Liste von Einträgen für den aktuellen Trigger aufgelöst hat, kurz bevor das Dropdown geöffnet wird. Fangen Sie das Event ab, um die Einträge anzupassen, das Dropdown zu verschieben oder es abzubrechen. + +### Verwendung {#usage} + +~~~jsx {} +"show-suggest": ({ + trigger: string, + query: string, + items: Array<{ + id?: string | number, + label?: string, + url?: string, + // ...beliebige benutzerdefinierte Felder aus der Datenquelle des Triggers + }>, + pos: DOMRect +}) => boolean | void; +~~~ + +### Parameter {#parameters} + +Der Callback des `show-suggest`-Events empfängt ein Objekt mit den folgenden Feldern: + +- `trigger` – das Trigger-Zeichen, das das Dropdown geöffnet hat +- `query` – der nach dem Trigger-Zeichen eingegebene Text (wird zum Filtern der `items` verwendet) +- `items` – die aufgelöste (und bereits gefilterte) Liste der Vorschlagseinträge. Jeder Eintrag folgt der [Form eines Vorschlagseintrags](api/config/triggers.md#suggestion-item-fields): optionale Felder `id`, `label` und `url` sowie beliebige benutzerdefinierte Felder (z. B. `image` oder `name`), die von [`triggerTemplate`](api/config/trigger-template.md) verwendet werden +- `pos` – ein `DOMRect`, der die Cursor-Position beschreibt; wird verwendet, um das Dropdown auf dem Bildschirm zu positionieren + +:::info[Info] +Um interne Events zu verarbeiten, verwenden Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md). +::: + +### Beispiel {#example} + +~~~jsx {6-11} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + triggers: [{ trigger: "@", data: people }] + // weitere Konfigurationseigenschaften +}); +// Vorschlagsliste überschreiben, bevor das Dropdown geöffnet wird +editor.api.intercept("show-suggest", (state) => { + if (state.trigger === "@" && state.query === "") { + return { ...state, items: state.items.slice(0, 5) }; + } +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.1 hinzugefügt + +**Verwandtes Beispiel:** [RichText. Erwähnungen, Tags und asynchrone Suche](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +**Verwandte Artikel:** [Erwähnungen und Tags](guides/mentions_and_tags.md) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/subscript.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/subscript.md new file mode 100644 index 0000000..a5edae9 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/subscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: subscript +title: subscript Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das subscript-Event. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# subscript + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn die Schaltfläche „Subscript" in der Menüleiste/Toolbar oder über Event-Bus-Methoden gedrückt wird + +### Verwendung {#usage} + +~~~jsx {} +"subscript": () => boolean | void; +~~~ + +:::info[Info] +Zur Verarbeitung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-10} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "subscript"-Event abonnieren +editor.api.on("subscript", () => { + console.log("Subscript was applied"); +}); +// das "subscript"-Event auslösen +editor.api.exec("subscript", {}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/superscript.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/superscript.md new file mode 100644 index 0000000..96ddb30 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/superscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: superscript +title: superscript Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das superscript-Event. Entwicklerhandbücher und API-Referenz, Code-Beispiele und Live-Demos sowie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText. +--- + +# superscript + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn die Schaltfläche „Hochgestellt" in der Menüleiste/Toolbar oder über Event-Bus-Methoden gedrückt wird + +### Verwendung {#usage} + +~~~jsx {} +"superscript": () => boolean | void; +~~~ + +:::info[Info] +Zur Behandlung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-9} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// Das „superscript"-Event abonnieren +editor.api.on("superscript", () => { + console.log("Superscript was applied"); +}); +// Das „superscript"-Event auslösen +editor.api.exec("superscript", {}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md new file mode 100644 index 0000000..6046579 --- /dev/null +++ b/i18n/de/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: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das toggle-fullscreen-mode-Event. Durchsuchen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# toggle-fullscreen-mode + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn der Vollbildmodus umgeschaltet wird + +### Verwendung {#usage} + +~~~jsx {} +"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void; +~~~ + +### Parameter {#parameters} + +Der Callback des `toggle-fullscreen-mode`-Events kann ein Objekt mit dem folgenden Parameter entgegennehmen: + +- `mode` - aktiviert den Vollbildmodus + +:::info[Info] +Zur Verarbeitung der internen Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-9} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "toggle-fullscreen-mode"-Event abonnieren +editor.api.on("toggle-fullscreen-mode", (obj) => { + console.log(obj); + console.log("The full screen mode was changed"); +}); +// den Vollbildmodus aktivieren +editor.api.exec("toggle-fullscreen-mode", { mode: true }); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md new file mode 100644 index 0000000..7affce5 --- /dev/null +++ b/i18n/de/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: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das toggle-layout-mode-Event. Lesen Sie Entwicklerleitfäden und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# toggle-layout-mode + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn der Layout-Modus umgeschaltet wird + +### Verwendung {#usage} + +~~~jsx {} +"toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void; +~~~ + +### Parameter {#parameters} + +Der Callback des `toggle-layout-mode`-Events kann ein Objekt mit folgenden Parametern entgegennehmen: + +- `mode` - der Layout-Modus. Folgende Modi sind verfügbar: `"classic" | "document"` + +:::info[Info] +Zur Behandlung interner Events können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden. +::: + +### Beispiel {#example} + +~~~jsx {5-11} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// Das "toggle-layout-mode"-Event abonnieren +editor.api.on("toggle-layout-mode", (obj) => { + console.log(obj); + console.log("The layout mode was changed"); +}); +// Den "document"-Layout-Modus setzen +editor.api.exec("toggle-layout-mode", { mode: "document" }); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-list.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-list.md new file mode 100644 index 0000000..58ca418 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-list.md @@ -0,0 +1,56 @@ +--- +sidebar_label: toggle-list +title: toggle-list Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das toggle-list-Event. Lesen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# toggle-list + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn ein Benutzer eine Liste für die ausgewählten Blöcke aktiviert oder deaktiviert + +Das `toggle-list`-Event steuert die kontextabhängigen Schaltflächen für nummerierte und ungeordnete Listen. Anstatt eine neue Liste einzufügen, analysiert das Event die aktuelle Auswahl und wählt automatisch eines von vier Verhaltensweisen: + +| Modus | Wann es ausgelöst wird | Ergebnis | +| --------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | +| **Einschließen** | Die Auswahl umfasst nur Absätze | Jeder Absatz wird zu einem Listenelement innerhalb eines neuen Listen-Containers | +| **Ausschließen** | Jedes ausgewählte Element befindet sich in einer Liste des angeklickten Typs | Die Elemente werden wieder zu Absätzen; der Listen-Container wird entfernt | +| **Konvertieren** | Jedes ausgewählte Element befindet sich in einer Liste, aber mindestens eine Liste hat den anderen Typ | Die Liste wechselt ihren Typ (ungeordnet ↔ nummeriert) an Ort und Stelle | +| **Gemischt** | Die Auswahl enthält sowohl Absätze als auch Listenelemente | Absätze werden zu Elementen und alles wird in einer Liste des angegebenen Typs zusammengeführt | + +### Verwendung {#usage} + +~~~jsx {} +"toggle-list": ({ type: TListType }) => boolean | void; + +type TListType = "bulleted" | "numbered"; +~~~ + +### Parameter {#parameters} + +Der Callback des `toggle-list`-Events kann ein Objekt mit folgendem Parameter entgegennehmen: + +- `type` - der Typ der Liste, die umgeschaltet werden soll. Die folgenden Werte sind möglich: + - `"bulleted"` - ungeordnete (nicht nummerierte) Liste + - `"numbered"` - geordnete (nummerierte) Liste + +:::info[Info] +Um interne Events zu verarbeiten, verwenden Sie [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) +::: + +### Beispiel {#example} + +~~~jsx {5-9} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "toggle-list"-Event abonnieren +editor.api.on("toggle-list", (obj) => { + console.log(obj.type); + console.log("The list was toggled"); +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0.6 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md new file mode 100644 index 0000000..42b4aaf --- /dev/null +++ b/i18n/de/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: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das toggle-shortcut-info-Event. Durchsuchen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# toggle-shortcut-info + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn die Shortcut-Info ein- oder ausgeblendet wird + +### Verwendung {#usage} + +~~~jsx {} +"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void; +~~~ + +### Parameter {#parameters} + +Der Callback des `toggle-shortcut-info`-Events kann ein Objekt mit folgendem Parameter entgegennehmen: + +- `mode` - aktiviert eine Shortcut-Info; `true`, um das Shortcut-Info-Popup anzuzeigen, `false`, um es auszublenden + +:::info[Info] +Zur Verarbeitung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-9} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// Das "toggle-shortcut-info"-Event abonnieren +editor.api.on("toggle-shortcut-info", (obj) => { + console.log(obj); + console.log("The shortcut info was shown"); +}); +// Die Shortcut-Info aktivieren +editor.api.exec("toggle-shortcut-info", { mode: true }); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/undo.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/undo.md new file mode 100644 index 0000000..f5ec596 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/undo.md @@ -0,0 +1,36 @@ +--- +sidebar_label: undo +title: undo Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das undo-Event. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# undo + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn die Schaltfläche „Undo" in der Menüleiste/Toolbar gedrückt oder über Event-Bus-Methoden aufgerufen wird + +### Verwendung {#usage} + +~~~jsx {} +"undo": () => boolean | void; +~~~ + +:::info[Info] +Zur Verarbeitung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-8} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das „undo"-Event abonnieren +editor.api.on("undo", () => { + console.log("Undo operation was performed"); +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/events/update-link.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/update-link.md new file mode 100644 index 0000000..354c8cb --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/update-link.md @@ -0,0 +1,44 @@ +--- +sidebar_label: update-link +title: update-link Event +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das update-link-Event. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Code-Beispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# update-link + +### Beschreibung {#description} + +@short: Wird ausgelöst, wenn ein Link aktualisiert wird + +### Verwendung {#usage} + +~~~jsx {} +"update-link": ({ id: number, url: string }) => boolean | void; +~~~ + +### Parameter {#parameters} + +Der Callback des `update-link`-Events kann ein Objekt mit den folgenden Parametern entgegennehmen: + +- `id` - die Link-ID +- `url` - die geänderte URL + +:::info[Info] +Zur Verarbeitung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel {#example} + +~~~jsx {5-9} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "update-link"-Event abonnieren +editor.api.on("update-link", (obj) => { + console.log(obj); + console.log("The following link was updated:" + obj.url); +}); +~~~ + +**Änderungsprotokoll:** Das Event wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/internal/detach.md b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/detach.md new file mode 100644 index 0000000..306b258 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/detach.md @@ -0,0 +1,44 @@ +--- +sidebar_label: api.detach() +title: on-Methode +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die on-Methode. Lesen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# api.detach() + +### Beschreibung {#description} + +@short: Ermöglicht das Entfernen/Trennen von Event-Handlern + +### Verwendung {#usage} + +~~~jsx {} +api.detach( tag: string ): void; +~~~ + +### Parameter {#parameters} + +- `tag` - (erforderlich) der Name des Action-Tags + +### Events {#events} + +:::info[Info] +Die vollständige Liste der internen RichText-Events finden Sie [**hier**](api/overview/events_overview.md) +::: + +### Beispiel {#example} + +~~~jsx {6-8,10} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); + +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}, { tag: "track" }); + +editor.api.detach("track"); +~~~ + +**Änderungsprotokoll:** Die Methode wurde in v2.0 aktualisiert. Die Parameter `name` und `context` wurden entfernt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/internal/exec.md b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/exec.md new file mode 100644 index 0000000..5287e68 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/exec.md @@ -0,0 +1,46 @@ +--- +sidebar_label: api.exec() +title: exec-Methode +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die exec-Methode. Lesen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# api.exec() + +### Beschreibung {#description} + +@short: Ermöglicht das Auslösen interner Events + +### Verwendung {#usage} + +~~~jsx {} +api.exec( + event: string, + config: object +): void; +~~~ + +### Parameter {#parameters} + +- `event` - (erforderlich) ein auszulösendes Event +- `config` - (erforderlich) das Konfigurationsobjekt mit Parametern (siehe das auszulösende Event) + +### Events {#events} + +:::info[Info] +Die vollständige Liste der internen RichText-Events finden Sie [**hier**](api/overview/events_overview.md) +::: + +### Beispiel {#example} + +~~~jsx {5-8} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// Schriftgröße des Textes festlegen +editor.api.exec("set-font-size", { + fontSize: "16px" +}); +~~~ + +**Änderungsprotokoll:** Die Methode wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md new file mode 100644 index 0000000..749ca3a --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.getReactiveState() +title: getReactiveState-Methode +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die getReactiveState-Methode. Lesen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# api.getReactiveState() + +### Beschreibung {#description} + +@short: Gibt ein Objekt mit den reaktiven Eigenschaften von RichText zurück + +### Verwendung {#usage} + +~~~jsx {} +api.getReactiveState(): object; +~~~ + +### Rückgabewert {#returns} + +Die Methode gibt ein Objekt mit den folgenden Parametern zurück: + +~~~jsx {} +{ + cursorState: { subscribe: any }, + defaultStyles {...}, + document {...}, + fullscreen {...}, + history {...}, + layoutMode {...}, + popup {...}, + selection {...} +} +~~~ + +### Beispiel {#example} + +~~~jsx {5-7} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// den Reaktiven Zustand von RichText abrufen +const reactive_state = editor.api.getReactiveState(); +console.log(reactive_state) +~~~ + +**Änderungsprotokoll:** Die Methode wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/internal/get-state.md b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/get-state.md new file mode 100644 index 0000000..84a76d1 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/get-state.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.getState() +title: getState-Methode +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die getState-Methode. Lesen 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. +--- + +# api.getState() + +### Beschreibung {#description} + +@short: Gibt ein Objekt mit den StateStore-Eigenschaften von RichText zurück + +### Verwendung {#usage} + +~~~jsx {} +api.getState(): object; +~~~ + +### Rückgabewert {#returns} + +Die Methode gibt ein Objekt mit den folgenden Parametern zurück: + +~~~jsx {} +{ + cursorState: {}, + defaultStyles: {}, + document: {}, + fullscreen: boolean, + history: [] + layoutMode: string, + popup: any, + selection: {} +} +~~~ + +### Beispiel {#example} + +~~~jsx {5-7} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// Status von RichText abrufen +const state = editor.api.getState(); +console.log(state); +~~~ + +**Änderungsprotokoll:** Die Methode wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/internal/intercept.md b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/intercept.md new file mode 100644 index 0000000..88d3370 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/intercept.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.intercept() +title: intercept-Methode +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die intercept-Methode. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# api.intercept() + +### Beschreibung {#description} + +@short: Ermöglicht das Abfangen und Verhindern interner Events + +### Verwendung {#usage} + +~~~jsx {} +api.intercept( + event: string, + callback: function +): void; +~~~ + +### Parameter {#parameters} + +- `event` - (erforderlich) ein auszulösendes Event +- `callback` - (erforderlich) ein auszuführender Callback (die Callback-Argumente hängen vom ausgelösten Event ab) + +### Events {#events} + +:::info[Info] +Die vollständige Liste der internen RichText-Events finden Sie [**hier**](api/overview/events_overview.md) +::: + +### Beispiel {#example} + +~~~jsx {5-10} +// RichText erstellen +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// Änderung der Schriftgröße verhindern +editor.api.intercept("set-font-size", (obj) => { + if(obj.fontSize !== "36px" ){ + return false; + } +}); +~~~ + +**Änderungsprotokoll:** Die Methode wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/internal/on.md b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/on.md new file mode 100644 index 0000000..c91ab71 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/on.md @@ -0,0 +1,46 @@ +--- +sidebar_label: api.on() +title: on-Methode +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die on-Methode. Lesen Sie Entwickleranleitungen und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# api.on() + +### Beschreibung {#description} + +@short: Ermöglicht das Anbinden eines Handlers an interne Events + +### Verwendung {#usage} + +~~~jsx {} +api.on( + event: string, + handler: function +): void; +~~~ + +### Parameter {#parameters} + +- `event` - (erforderlich) ein auszulösendes Event +- `handler` - (erforderlich) ein anzubindender Handler (die Handler-Argumente hängen vom auszulösenden Event ab) + +### Events {#events} + +:::info[Info] +Die vollständige Liste der internen RichText-Events finden Sie [**hier**](api/overview/events_overview.md) +::: + +### Beispiel {#example} + +~~~jsx {5-8} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "set-font-size"-Event abonnieren +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}); +~~~ + +**Änderungsprotokoll:** Die Methode wurde in v2.0 aktualisiert. Der Parameter `context` wurde entfernt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/internal/set-next.md b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/set-next.md new file mode 100644 index 0000000..b4a01cf --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/set-next.md @@ -0,0 +1,40 @@ +--- +sidebar_label: api.setNext() +title: setNext-Methode +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die setNext-Methode. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# api.setNext() + +### Beschreibung {#description} + +@short: Ermöglicht das Hinzufügen einer Aktion in die Event-Bus-Reihenfolge + +### Verwendung {#usage} + +~~~jsx {} +api.setNext(next: any): void; +~~~ + +### Parameter {#parameters} + +- `next` - (erforderlich) die Aktion, die in die **Event Bus**-Reihenfolge aufgenommen werden soll + +### Beispiel {#example} + +~~~jsx {10-11} +const server = "https://some-backend-url"; +// Angenommen, Sie haben eine benutzerdefinierte Server-Service-Klasse namens someServerService +const someServerService = new ServerDataService(server); + +fetch(server + "/data").then((res) => res.json()).then((data) => { + const editor = new richtext.Richtext("#root", { + value: data + }); + + // someServerService in die Event Bus-Reihenfolge des Widgets integrieren + editor.api.setNext(someServerService); +}); +~~~ + +**Änderungsprotokoll:** Die Methode wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/methods/destructor.md b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/destructor.md new file mode 100644 index 0000000..ff68650 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/destructor.md @@ -0,0 +1,28 @@ +--- +sidebar_label: destructor() +title: destructor-Methode +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die destructor-Methode. Durchsuchen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# destructor() + +### Beschreibung {#description} + +@short: Entfernt alle HTML-Elemente von RichText und trennt alle zugehörigen Events + +### Verwendung {#usage} + +~~~jsx {} +destructor(): void; +~~~ + +### Beispiel {#example} + +~~~jsx {5-6} +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); + +// RichText entfernen +editor.destructor(); +~~~ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/methods/get-value.md b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/get-value.md new file mode 100644 index 0000000..391cd23 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/get-value.md @@ -0,0 +1,44 @@ +--- +sidebar_label: getValue() +title: getValue()-Methode +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die getValue-Methode. Sehen Sie sich Entwickleranleitungen und die API-Referenz an, probieren Sie Codebeispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# getValue() + +### Beschreibung {#description} + +@short: Gibt den Wert des RichText zurück + +### Verwendung {#usage} + +~~~jsx {} +getValue(encoder?: any): string; +~~~ + +### Parameter {#parameters} + +- `encoder` - (optional) ein Parser zum Kodieren des RichText-Inhalts in ein benutzerdefiniertes Format. Folgende Formate sind verfügbar: `html` (Standard), `text` und `markdown` + +Den erforderlichen Encoder erhalten Sie auf folgende Weise: + +```jsx +const toTextEncoder = richtext.text.toText; // Text-Encoder +const toHTMLEncoder = richtext.html.toHTML; // HTML-Encoder +const toMarkdownEncoder = richtext.markdown.toMarkdown; // Markdown-Encoder +``` + +### Beispiel {#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." // setzt den Standardwert (HTML-Format) + // weitere Konfigurationseigenschaften +}); + +const toTextEncoder = richtext.text.toText; +const editor_value = editor.getValue(toTextEncoder); +console.log(editor_value); +~~~ + +**Änderungsprotokoll:** Die Methode wurde in v2.0 aktualisiert. Der Parameter `mode` wurde entfernt. Der Parameter `encoder` wurde hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/methods/insert-value.md b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/insert-value.md new file mode 100644 index 0000000..7db9be3 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/insert-value.md @@ -0,0 +1,50 @@ +--- +sidebar_label: insertValue() +title: insertValue-Methode +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die insertValue-Methode. Lesen Sie Entwickleranleitungen und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# insertValue() + +### Beschreibung {#description} + +@short: Fügt Text, Markdown oder HTML-Inhalt an der aktuellen Cursorposition ein oder ersetzt den markierten Text + +### Verwendung {#usage} + +~~~jsx {} +insertValue: (value: string, encoder?: any): void; +~~~ + +### Parameter {#parameters} + +- `value` - (erforderlich) ein Wert, der an der aktuellen Cursorposition in das RichText eingefügt wird. Ist eine Auswahl aktiv, wird diese durch den neuen Wert ersetzt +- `encoder` - (optional) ein Parser zum Dekodieren des eingefügten Werts. Folgende Formate stehen zur Verfügung: `html` (Standard), `text` und `markdown` + +Den benötigten Encoder erhalten Sie auf folgende Weise: + +```jsx +const fromTextEncoder = richtext.text.fromText; // Text-Encoder +const fromHTMLEncoder = richtext.html.fromHTML; // HTML-Encoder +const fromMarkdownEncoder = richtext.markdown.fromMarkdown; // Markdown-Encoder +``` + +### Beispiel {#example} + +~~~jsx {6} +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); + +// fügt einen HTML-Link mit benutzerdefinierten Attributen an der Cursorposition ein +editor.insertValue("link"); +~~~ + +Der eingefügte Inhalt wird als einzelner Verlaufseintrag hinzugefügt und kann mit einem einzigen **Rückgängig**-Schritt wiederhergestellt werden. + +**Änderungsprotokoll:** Die Methode wurde in v2.1 hinzugefügt + +**Verwandte Beispiele:** + +- [RichText. Inhalt an Cursorposition einfügen](https://snippet.dhtmlx.com/pew2g1ku?tag=richtext) +- [RichText. Arbeiten mit verschiedenen Formaten (Markdown, HTML, Text)](https://snippet.dhtmlx.com/cne4kujn?tag=richtext) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-config.md b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-config.md new file mode 100644 index 0000000..c079377 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-config.md @@ -0,0 +1,40 @@ +--- +sidebar_label: setConfig() +title: setConfig-Methode +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die setConfig-Methode. Lesen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# setConfig() + +### Beschreibung {#description} + +@short: Wendet neue Konfigurationsparameter auf RichText an + +### Verwendung {#usage} + +~~~jsx {} +setConfig(config: { [key:any]: any }): void; +~~~ + +### Parameter {#parameters} + +- `config` - (erforderlich) das Objekt der RichText-Konfigurationsparameter. Die vollständige Liste der Eigenschaften finden Sie [hier](api/overview/properties_overview.md) + +:::note[Hinweis] +Die Methode `setConfig()` behält alle zuvor festgelegten Parameter bei, die beim Aufruf von `setConfig()` nicht explizit angegeben werden. +::: + +### Beispiel {#example} + +~~~jsx {6-8} +const editor = new richtext.Richtext("#root", { + value: "

Some text

", + // weitere Konfigurationseigenschaften +}); + +editor.setConfig({ + layoutMode: "document" +}); +~~~ + +**Änderungsprotokoll:** Die Methode wurde in v2.0 hinzugefügt diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-locale.md b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-locale.md new file mode 100644 index 0000000..52106e5 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-locale.md @@ -0,0 +1,41 @@ +--- +sidebar_label: setLocale() +title: setLocale-Methode +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die setLocale-Methode. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# setLocale() + +### Beschreibung {#description} + +@short: Wendet ein neues Gebietsschema auf RichText an + +### Verwendung {#usage} + +~~~jsx {} +setLocale(null | locale?: object): void; +~~~ + +### Parameter {#parameters} + +- `null` - (optional) setzt das Standard-Gebietsschema zurück (*Englisch*) +- `locale` - (optional) das Objekt mit den Daten des neuen Gebietsschemas, das angewendet werden soll + +:::info[Info] +Verwenden Sie die Methode `setLocale()`, um ein neues Gebietsschema auf RichText anzuwenden. Um RichText auf das Standard-Gebietsschema zurückzusetzen, rufen Sie die Methode `setLocale()` ohne Argumente auf (oder mit dem Wert *null*). +::: + +### Beispiel {#example} + +~~~jsx {5-6} +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); + +// das Gebietsschema "de" auf RichText anwenden +editor.setLocale(de); +~~~ + +**Änderungsprotokoll:** Die Methode wurde in v2.0 hinzugefügt + +**Verwandte Artikel:** [Lokalisierung](guides/localization.md) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-value.md b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-value.md new file mode 100644 index 0000000..f81e809 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-value.md @@ -0,0 +1,47 @@ +--- +sidebar_label: setValue() +title: setValue-Methode +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek können Sie mehr über die setValue-Methode erfahren. Sehen Sie sich Entwicklerleitfäden und die API-Referenz an, testen Sie Code-Beispiele und Live-Demos, und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# setValue() + +### Beschreibung {#description} + +@short: Wendet einen neuen Wert auf RichText an + +### Verwendung {#usage} + +~~~jsx {} +setValue: (value: string, encoder?: any): void; +~~~ + +### Parameter {#parameters} + +- `value` - (erforderlich) ein Wert, der in den RichText eingefügt werden soll +- `encoder` - (optional) ein benutzerdefinierter Parser zum Dekodieren des Werts aus einem benutzerdefinierten Format. Folgende Formate sind verfügbar: `html` (Standard), `text` und `markdown` + +Den erforderlichen Encoder erhalten Sie auf folgende Weise: + +```jsx +const fromTextEncoder = richtext.text.fromText; // Text-Encoder +const fromHTMLEncoder = richtext.html.fromHTML; // HTML-Encoder +const fromMarkdownEncoder = richtext.markdown.fromMarkdown; // Markdown-Encoder +``` + +### Beispiel {#example} + +~~~jsx {7-8} +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); + +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); +~~~ + +**Änderungsprotokoll:** Die Methode wurde in v2.0 aktualisiert. Der Parameter `mode` wurde entfernt. Der Parameter `encoder` wurde hinzugefügt + +**Verwandtes Beispiel:** [RichText. Arbeiten mit verschiedenen Formaten (Markdown, HTML, Text)](https://snippet.dhtmlx.com/cne4kujn?tag=richtext) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md new file mode 100644 index 0000000..149153d --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md @@ -0,0 +1,18 @@ +--- +sidebar_label: Event Bus-Methoden +title: Event Bus-Methoden +description: Eine Übersicht der internen Event Bus-Methoden des DHTMLX JavaScript RichText-Editors. Entwicklerhandbücher und API-Referenz, Code-Beispiele und Live-Demos sowie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText. +--- + +# Event Bus-Methoden {#event-bus-methods} + +Diese Seite enthält eine Liste der Methoden des internen Event Bus des DHTMLX RichText-Editors. +Diese Methoden sind für erweiterte Integrationen und benutzerdefiniertes Verhalten auf Basis des internen Event-Systems vorgesehen. + +| Name | Beschreibung | +| ------------------------------------------------- | -------------------------------------------- | +| [](api/internal/detach.md) | @getshort(api/internal/detach.md) | +| [](api/internal/exec.md) | @getshort(api/internal/exec.md) | +| [](api/internal/intercept.md) | @getshort(api/internal/intercept.md) | +| [](api/internal/on.md) | @getshort(api/internal/on.md) | +| [](api/internal/set-next.md) | @getshort(api/internal/set-next.md) | diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/overview/events_overview.md b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/events_overview.md new file mode 100644 index 0000000..14d12ee --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/events_overview.md @@ -0,0 +1,49 @@ +--- +sidebar_label: Ereignisübersicht +title: Ereignisübersicht +description: Sie finden eine Ereignisübersicht für JavaScript RichText in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek. Durchsuchen Sie Entwicklerleitfäden und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# Ereignisübersicht {#events-overview} + +Diese Seite listet alle Events auf, die vom DHTMLX RichText-Editor ausgelöst werden. +Sie können diese Events verwenden, um Funktionen zu erweitern, Benutzerinteraktionen zu verfolgen oder benutzerdefiniertes Verhalten auszulösen. + +| Name | Beschreibung | +| ------------------------------------------------------ | --------------------------------------------- | +| [](api/events/align.md) | @getshort(api/events/align.md) | +| [](api/events/clear-text-format.md) | @getshort(api/events/clear-text-format.md) | +| [](api/events/copy.md) | @getshort(api/events/copy.md) | +| [](api/events/create-new.md) | @getshort(api/events/create-new.md) | +| [](api/events/cut.md) | @getshort(api/events/cut.md) | +| [](api/events/delete-link.md) | @getshort(api/events/delete-link.md) | +| [](api/events/export.md) | @getshort(api/events/export.md) | +| [](api/events/hide-suggest.md) | @getshort(api/events/hide-suggest.md) | +| [](api/events/import.md) | @getshort(api/events/import.md) | +| [](api/events/indent.md) | @getshort(api/events/indent.md) | +| [](api/events/insert-image.md) | @getshort(api/events/insert-image.md) | +| [](api/events/insert-line.md) | @getshort(api/events/insert-line.md) | +| [](api/events/insert-link.md) | @getshort(api/events/insert-link.md) | +| [](api/events/insert-list.md) | @getshort(api/events/insert-list.md) | +| [](api/events/insert-token.md) | @getshort(api/events/insert-token.md) | +| [](api/events/outdent.md) | @getshort(api/events/outdent.md) | +| [](api/events/paste.md) | @getshort(api/events/paste.md) | +| [](api/events/print.md) | @getshort(api/events/print.md) | +| [](api/events/redo.md) | @getshort(api/events/redo.md) | +| [](api/events/resize-image.md) | @getshort(api/events/resize-image.md) | +| [](api/events/set-font-family.md) | @getshort(api/events/set-font-family.md) | +| [](api/events/set-font-size.md) | @getshort(api/events/set-font-size.md) | +| [](api/events/set-line-height.md) | @getshort(api/events/set-line-height.md) | +| [](api/events/set-text-color.md) | @getshort(api/events/set-text-color.md) | +| [](api/events/set-text-format.md) | @getshort(api/events/set-text-format.md) | +| [](api/events/set-text-style.md) | @getshort(api/events/set-text-style.md) | +| [](api/events/show-popup.md) | @getshort(api/events/show-popup.md) | +| [](api/events/show-suggest.md) | @getshort(api/events/show-suggest.md) | +| [](api/events/subscript.md) | @getshort(api/events/subscript.md) | +| [](api/events/superscript.md) | @getshort(api/events/superscript.md) | +| [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md)| +| [](api/events/toggle-layout-mode.md) | @getshort(api/events/toggle-layout-mode.md) | +| [](api/events/toggle-list.md) | @getshort(api/events/toggle-list.md) | +| [](api/events/toggle-shortcut-info.md) | @getshort(api/events/toggle-shortcut-info.md) | +| [](api/events/undo.md) | @getshort(api/events/undo.md) | +| [](api/events/update-link.md) | @getshort(api/events/update-link.md) | diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/overview/main_overview.md b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/main_overview.md new file mode 100644 index 0000000..8e87f91 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/main_overview.md @@ -0,0 +1,98 @@ +--- +sidebar_label: API-Übersicht +title: API-Übersicht +description: Eine API-Übersicht der JavaScript RichText-Komponente finden Sie in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek. Durchsuchen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# API-Übersicht {#api-overview} + +## RichText-Konstruktor {#richtext-constructor} + +~~~js +new richtext.RichText("#root", { + // Konfigurationsparameter +}); +~~~ + +**Parameter**: + +- ein HTML-Container (z. B. CSS-Selektor oder DOM-Element) +- ein Konfigurationsobjekt ([siehe Eigenschaften](api/overview/properties_overview.md)) + +## RichText-Methoden {#richtext-methods} + +| Name | Beschreibung | +| ----------------------------------------------|-------------------------------------------| +| [](api/methods/get-value.md) | @getshort(api/methods/get-value.md) | +| [](api/methods/set-value.md) | @getshort(api/methods/set-value.md) | +| [](api/methods/insert-value.md) | @getshort(api/methods/insert-value.md) | +| [](api/methods/set-config.md) | @getshort(api/methods/set-config.md) | +| [](api/methods/set-locale.md) | @getshort(api/methods/set-locale.md) | +| [](api/methods/destructor.md) | @getshort(api/methods/destructor.md) | + +## Event-Bus-Methoden {#event-bus-methods} + +| Name | Beschreibung | +| ----------------------------------------------|-------------------------------------------| +| [](api/internal/exec.md) | @getshort(api/internal/exec.md) | +| [](api/internal/intercept.md) | @getshort(api/internal/intercept.md) | +| [](api/internal/on.md) | @getshort(api/internal/on.md) | +| [](api/internal/detach.md) | @getshort(api/internal/detach.md) | +| [](api/internal/set-next.md) | @getshort(api/internal/set-next.md) | + +## State-Methoden {#state-methods} + +| Name | Beschreibung | +| ----------------------------------------------|-------------------------------------------| +| [](api/internal/get-state.md) | @getshort(api/internal/get-state.md) | +| [](api/internal/get-reactive-state.md) | @getshort(api/internal/get-reactive-state.md) | + +## Events {#events} + +| Name | Beschreibung | +| ----------------------------------------------|-------------------------------------------| +| [](api/events/align.md) | @getshort(api/events/align.md) | +| [](api/events/clear-text-format.md) | @getshort(api/events/clear-text-format.md) | +| [](api/events/copy.md) | @getshort(api/events/copy.md) | +| [](api/events/create-new.md) | @getshort(api/events/create-new.md) | +| [](api/events/cut.md) | @getshort(api/events/cut.md) | +| [](api/events/delete-link.md) | @getshort(api/events/delete-link.md) | +| [](api/events/export.md) | @getshort(api/events/export.md) | +| [](api/events/import.md) | @getshort(api/events/import.md) | +| [](api/events/indent.md) | @getshort(api/events/indent.md) | +| [](api/events/insert-image.md) | @getshort(api/events/insert-image.md) | +| [](api/events/insert-line.md) | @getshort(api/events/insert-line.md) | +| [](api/events/insert-link.md) | @getshort(api/events/insert-link.md) | +| [](api/events/insert-list.md) | @getshort(api/events/insert-list.md) | +| [](api/events/outdent.md) | @getshort(api/events/outdent.md) | +| [](api/events/paste.md) | @getshort(api/events/paste.md) | +| [](api/events/print.md) | @getshort(api/events/print.md) | +| [](api/events/redo.md) | @getshort(api/events/redo.md) | +| [](api/events/resize-image.md) | @getshort(api/events/resize-image.md) | +| [](api/events/set-font-family.md) | @getshort(api/events/set-font-family.md) | +| [](api/events/set-font-size.md) | @getshort(api/events/set-font-size.md) | +| [](api/events/set-line-height.md) | @getshort(api/events/set-line-height.md) | +| [](api/events/set-text-color.md) | @getshort(api/events/set-text-color.md) | +| [](api/events/set-text-format.md) | @getshort(api/events/set-text-format.md) | +| [](api/events/set-text-style.md) | @getshort(api/events/set-text-style.md) | +| [](api/events/show-popup.md) | @getshort(api/events/show-popup.md) | +| [](api/events/subscript.md) | @getshort(api/events/subscript.md) | +| [](api/events/superscript.md) | @getshort(api/events/superscript.md) | +| [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md) | +| [](api/events/toggle-layout-mode.md) | @getshort(api/events/toggle-layout-mode.md) | +| [](api/events/toggle-shortcut-info.md) | @getshort(api/events/toggle-shortcut-info.md) | +| [](api/events/undo.md) | @getshort(api/events/undo.md) | +| [](api/events/update-link.md) | @getshort(api/events/update-link.md) | + +## Eigenschaften {#properties} + +| Name | Beschreibung | +| ----------------------------------------------|-------------------------------------------| +| [](api/config/default-styles.md) | @getshort(api/config/default-styles.md) | +| [](api/config/fullscreen-mode.md) | @getshort(api/config/fullscreen-mode.md) | +| [](api/config/image-upload-url.md) | @getshort(api/config/image-upload-url.md) | +| [](api/config/layout-mode.md) | @getshort(api/config/layout-mode.md) | +| [](api/config/locale.md) | @getshort(api/config/locale.md) | +| [](api/config/menubar.md) | @getshort(api/config/menubar.md) | +| [](api/config/toolbar.md) | @getshort(api/config/toolbar.md) | +| [](api/config/value.md) | @getshort(api/config/value.md) | diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md new file mode 100644 index 0000000..6a6f904 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md @@ -0,0 +1,19 @@ +--- +sidebar_label: Methodenübersicht +title: Methodenübersicht +description: Eine Übersicht der Methoden des JavaScript RichText finden Sie in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek. Entwicklerleitfäden und API-Referenz durchsuchen, Code-Beispiele und Live-Demos ausprobieren und eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunterladen. +--- + +# Methodenübersicht {#methods-overview} + +Diese Seite bietet eine Zusammenfassung der wichtigsten Methoden des DHTMLX RichText-Editors. +Nutzen Sie diese Referenz, um schnell zu den detaillierten Beschreibungen der einzelnen Methoden zu navigieren, deren Zweck zu verstehen und Verwendungsbeispiele einzusehen. + +| Name | Beschreibung | +| ------------------------------------------------------ | ----------------------------------------- | +| [](api/methods/destructor.md) | @getshort(api/methods/destructor.md) | +| [](api/methods/get-value.md) | @getshort(api/methods/get-value.md) | +| [](api/methods/set-value.md) | @getshort(api/methods/set-value.md) | +| [](api/methods/insert-value.md) | @getshort(api/methods/insert-value.md) | +| [](api/methods/set-config.md) | @getshort(api/methods/set-config.md) | +| [](api/methods/set-locale.md) | @getshort(api/methods/set-locale.md) | diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md new file mode 100644 index 0000000..e50f60a --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md @@ -0,0 +1,23 @@ +--- +sidebar_label: Eigenschaften-Übersicht +title: Eigenschaften-Übersicht +description: Sie finden eine Eigenschaften-Übersicht des JavaScript RichText in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# Eigenschaften-Übersicht {#properties-overview} + +Diese Seite listet alle Konfigurationseigenschaften auf, die bei der Initialisierung des DHTMLX RichText-Editors verwendet werden können. +Sie ermöglichen es Ihnen, Layout, Toolbar, Wert, Lokalisierung und weitere Aspekte des Editors zu steuern. + +| Name | Beschreibung | +| --------------------------------------------------------|-----------------------------------------------| +| [](api/config/default-styles.md) | @getshort(api/config/default-styles.md) | +| [](api/config/fullscreen-mode.md) | @getshort(api/config/fullscreen-mode.md) | +| [](api/config/image-upload-url.md) | @getshort(api/config/image-upload-url.md) | +| [](api/config/layout-mode.md) | @getshort(api/config/layout-mode.md) | +| [](api/config/locale.md) | @getshort(api/config/locale.md) | +| [](api/config/menubar.md) | @getshort(api/config/menubar.md) | +| [](api/config/toolbar.md) | @getshort(api/config/toolbar.md) | +| [](api/config/trigger-template.md) | @getshort(api/config/trigger-template.md) | +| [](api/config/triggers.md) | @getshort(api/config/triggers.md) | +| [](api/config/value.md) | @getshort(api/config/value.md) | diff --git a/i18n/de/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md new file mode 100644 index 0000000..c03974b --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md @@ -0,0 +1,15 @@ +--- +sidebar_label: State-Methoden +title: State-Methoden +description: Eine Übersicht der internen State-Methoden von JavaScript RichText finden Sie in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek. Durchsuchen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# State-Methoden {#state-methods} + +Diese Seite listet Methoden für den Zugriff auf und die Arbeit mit dem internen State des DHTMLX RichText-Editors auf. +Diese Methoden sind nützlich für das Debugging, die Integration mit reaktiven Systemen oder die Implementierung erweiterter benutzerdefinierter Logik. + +| Name | Beschreibung | +| ----------------------------------------------------------- | ------------------------------------------------- | +| [](api/internal/get-reactive-state.md) | @getshort(api/internal/get-reactive-state.md) | +| [](api/internal/get-state.md) | @getshort(api/internal/get-state.md) | diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/configuration.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/configuration.md new file mode 100644 index 0000000..4fb999a --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/configuration.md @@ -0,0 +1,377 @@ +--- +sidebar_label: Konfiguration +title: Konfiguration +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über die Konfiguration. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# Konfiguration {#configuration} + +Sie können das Erscheinungsbild und das Verhalten von RichText mit den folgenden Eigenschaften konfigurieren: + +- [`menubar`](api/config/menubar.md) — Menüleiste oben ein- oder ausblenden +- [`toolbar`](api/config/toolbar.md) — Sichtbarkeit der Symbolleiste und Schaltflächen konfigurieren +- [`fullscreenMode`](api/config/fullscreen-mode.md) — Editor im Vollbildmodus starten +- [`layoutMode`](api/config/layout-mode.md) — zwischen dem Layout `"classic"` und `"document"` wechseln +- [`value`](api/config/value.md) — anfänglichen HTML-Inhalt festlegen +- [`locale`](api/config/locale.md) — ein Lokalisierungsobjekt bei der Initialisierung anwenden +- [`defaultStyles`](api/config/default-styles.md) — Standardstile für bestimmte Blocktypen festlegen +- [`imageUploadUrl`](api/config/image-upload-url.md) — Endpunkt für Bild-Uploads festlegen +- [`triggers`](api/config/triggers.md) — @Erwähnungen, #Tags und benutzerdefinierte Dropdown-Trigger aktivieren (siehe Handbuch [Erwähnungen und Tags](guides/mentions_and_tags.md)) + +## Layout-Modi {#layout-modes} + +RichText unterstützt zwei Layout-Modi für den Bearbeitungsbereich: + +- `"classic"` — der Bearbeitungsbereich füllt die gesamte Seite aus + +
+![DHTMLX RichText-Editor im klassischen Layout-Modus](/img/richtext/classic_mode.png) +
+ +- `"document"` — der Bearbeitungsbereich imitiert eine Dokumentseite + +
+![DHTMLX RichText-Editor im Dokumentmodus](/img/richtext/document_mode.png) +
+ +Legen Sie die Eigenschaft [`layoutMode`](api/config/layout-mode.md) bei der Initialisierung fest, um den Modus auszuwählen: + +~~~jsx +const editor = new richtext.Richtext("#root", { + layoutMode: "document" +}); +~~~ + +**Verwandtes Beispiel:** [RichText. Dokument- und klassischer Modus](https://snippet.dhtmlx.com/jz8q432l?tag=richtext) + +## Symbolleiste {#toolbar} + +Die RichText-Symbolleiste gruppiert Steuerelemente in mehrere Blöcke, die Sie anpassen können. + +### Standardmäßige Symbolleistensteuerelemente {#default-toolbar-controls} + +Sie können die folgenden Schaltflächen und Steuerelemente in die RichText-Symbolleiste aufnehmen: + +| Schaltfläche | Beschreibung | +|---------------------|-----------------------------------------------------------------------------| +| `undo` | Macht die letzte Benutzeraktion rückgängig | +| `redo` | Stellt die zuvor rückgängig gemachte Aktion wieder her | +| `style` | Wählt einen Textstil aus (z. B. Überschrift, Absatz, Blockzitat) | +| `font-family` | Ändert die Schriftart des ausgewählten Textes | +| `font-size` | Passt die Größe des ausgewählten Textes an | +| `bold` | Wendet Fettformatierung auf den ausgewählten Text an | +| `italic` | Wendet Kursivformatierung auf den ausgewählten Text an | +| `underline` | Unterstreicht den ausgewählten Text | +| `strike` | Wendet Durchstreichformatierung an | +| `subscript` | Formatiert den Text als tiefgestellt | +| `superscript` | Formatiert den Text als hochgestellt | +| `text-color` | Ändert die Textfarbe | +| `background-color` | Ändert die Hintergrundfarbe (Hervorhebung) des Textes | +| `align` | Legt die Textausrichtung fest (links, zentriert, rechts, Blocksatz) | +| `indent` | Erhöht den Absatzeinzug | +| `outdent` | Verringert den Absatzeinzug | +| `line-height` | Passt den Zeilenabstand (Zeilenhöhe) an | +| `quote` | Formatiert den Text als Blockzitat | +| `bulleted-list` | Erstellt eine Liste mit Aufzählungszeichen | +| `numbered-list` | Erstellt eine nummerierte Liste | +| `link` | Fügt einen Hyperlink ein oder bearbeitet ihn | +| `image` | Fügt ein Bild ein | +| `line` | Fügt eine horizontale Linie ein | +| `clear` | Entfernt alle Formatierungen aus dem ausgewählten Text | +| `print` | Öffnet den Druckdialog | +| `fullscreen` | Schaltet den Vollbildmodus um | +| `mode` | Wechselt zwischen den beiden Layout-Modi: `classic` und `document` | +| `shortcuts` | Zeigt eine Liste der verfügbaren Tastenkombinationen an | +| `separator` | Fügt einen visuellen Trenner zwischen Steuerelementen ein | + +Verwenden Sie die Eigenschaft [`toolbar`](api/config/toolbar.md), um die Symbolleiste als Array von Steuerelement-Namensstrings zu definieren: + +~~~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" + // andere Schaltflächen + ], + // andere Konfigurationseigenschaften +}); +~~~ + +**Verwandtes Beispiel:** [RichText. Vollständige Symbolleiste](https://snippet.dhtmlx.com/ziynafp7?tag=richtext) + +### Benutzerdefinierte Symbolleistensteuerelemente hinzufügen {#add-custom-toolbar-controls} + +Übergeben Sie ein Objekt an das [`toolbar`](api/config/toolbar.md)-Array mit einem der folgenden Felder: + +- `type: string` — erforderlich. Steuerelementtyp: `"button"`, `"richselect"` oder `"colorpicker"` +- `id: string` — optional. Benutzerdefinierte Steuerelement-ID; darf nicht mit bestehenden Steuerelement-IDs übereinstimmen +- `icon: string` — optional. Symbol-Klassenname; wird mit dem Label kombiniert +- `label: string` — optional. Schaltflächenbeschriftung; wird mit dem Symbol kombiniert +- `tooltip: string` — optional. Tooltip, der beim Hover erscheint; standardmäßig wird `label` verwendet, wenn nicht festgelegt +- `css: string` — optional. CSS-Klasse für das Steuerelement. Integrierte Klassen: `wx-primary`, `wx-secondary` +- `handler: () => void` — optional. Callback, der beim Klick ausgeführt wird + +Das folgende Beispiel kombiniert integrierte Schaltflächen, ein vordefiniertes Steuerelement vom Typ `richselect` und zwei benutzerdefinierte Schaltflächen: + +~~~jsx {6-32} +new richtext.Richtext("#root", { + toolbar: [ + // String-Einträge repräsentieren integrierte Schaltflächen + "bold", + "italic", + // vordefinierte Schaltflächen akzeptieren nur { type: "button", id: string } + { + type: "button", + id: "fullscreen", + }, + // für vordefinierte richselect/colorpicker-Steuerelemente den passenden Typ setzen + // Einträge mit einem nicht passenden Typ werden ignoriert + { + type: "richselect", // type: "button" würde hier ignoriert werden + id: "mode", + }, + // benutzerdefinierte Schaltflächen (richselect/colorpicker werden für benutzerdefinierte Steuerelemente nicht unterstützt) + { + type: "button", + id: "some", + label: "Some", + handler: () => {/* benutzerdefinierte Logik */} + }, + { + type: "button", + id: "other", + icon: "wxo-help", + label: "Other", + tooltip: "Some tooltip", + handler: () => {/* benutzerdefinierte Logik */} + } + ], + // andere Konfigurationseigenschaften +}); +~~~ + +**Verwandtes Beispiel:** [RichText. Benutzerdefiniertes Steuerelement und vereinfachte Symbolleiste](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### Symbolleiste ausblenden {#hide-the-toolbar} + +Setzen Sie die Eigenschaft [`toolbar`](api/config/toolbar.md) auf `false`, um die Symbolleiste auszublenden: + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false, + // andere Konfigurationseigenschaften +}); +~~~ + +## Menüleiste anzeigen {#show-the-menubar} + +Aktivieren Sie die Eigenschaft [`menubar`](api/config/menubar.md), um die obere Menüleiste über der Symbolleiste anzuzeigen. Der Standardwert ist `false`. + +~~~jsx {2} +new richtext.Richtext("#root", { + menubar: true + // andere Konfigurationseigenschaften +}); +~~~ + +**Verwandtes Beispiel:** [RichText. Initialisierung mit Menüleiste](https://snippet.dhtmlx.com/tjryzka7?tag=richtext) + +## Anfänglichen Inhalt festlegen {#set-the-initial-content} + +Verwenden Sie die Eigenschaft [`value`](api/config/value.md), um bei der Initialisierung anfänglichen HTML-Inhalt in den Editor zu übergeben: + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" + // andere Konfigurationseigenschaften +}); +~~~ + +Um den Inhalt nach der Initialisierung zu ersetzen oder ihn in einem Nicht-HTML-Format mit einem benutzerdefinierten Encoder zu laden, rufen Sie die Methode [`setValue()`](api/methods/set-value.md) auf. + +**Verwandtes Beispiel:** [RichText. Arbeiten mit verschiedenen Formaten (Markdown, HTML, Text)](https://snippet.dhtmlx.com/cne4kujn?tag=richtext) + +## Anfängliche Sprache festlegen {#set-the-initial-locale} + +Verwenden Sie die Eigenschaft [`locale`](api/config/locale.md), um bei der Initialisierung ein Lokalisierungsobjekt anzuwenden: + +~~~jsx {2} +new richtext.Richtext("#root", { + locale: richtext.locales.cn + // andere Konfigurationseigenschaften +}); +~~~ + +Weitere Informationen und dynamisches Umschalten der Sprache mit [`setLocale()`](api/methods/set-locale.md) finden Sie im Handbuch [Lokalisierung](guides/localization.md). + +## Im Vollbildmodus starten {#start-in-fullscreen-mode} + +Setzen Sie die Eigenschaft [`fullscreenMode`](api/config/fullscreen-mode.md) auf `true`, um den Editor bei der Initialisierung im Vollbildmodus zu öffnen. Der Standardwert ist `false`. + +~~~jsx {2} +new richtext.Richtext("#root", { + fullscreenMode: true + // andere Konfigurationseigenschaften +}); +~~~ + +## Bildeinfügung konfigurieren {#configure-image-insertion} + +RichText unterstützt zwei Modi zum Einfügen von Bildern über die Symbolleiste, die Menüleiste, Einfügen oder Drag-and-Drop. Der Modus wird automatisch anhand der Eigenschaft [`imageUploadUrl`](api/config/image-upload-url.md) ausgewählt. + +### Bilder auf einen Server hochladen {#upload-images-to-a-server} + +Übergeben Sie eine URL an die Eigenschaft [`imageUploadUrl`](api/config/image-upload-url.md), um jedes eingefügte Bild an Ihren Endpunkt hochzuladen. RichText sendet die Datei als `multipart/form-data` (Feldname `upload`) und fügt die vom Server zurückgegebene URL ein: + +~~~jsx {2} +new richtext.Richtext("#root", { + imageUploadUrl: "https://example.com/upload" + // andere Konfigurationseigenschaften +}); +~~~ + +### Bilder inline als Base64 einfügen {#insert-images-inline-as-base64} + +Lassen Sie [`imageUploadUrl`](api/config/image-upload-url.md) weg (oder setzen Sie es auf einen leeren String), um Bilder direkt als Base64-Daten-URLs in den Dokumentinhalt einzubetten. Es ist kein Server erforderlich: + +~~~jsx {2} +new richtext.Richtext("#root", { + // imageUploadUrl ist nicht gesetzt, Bilder werden inline eingefügt + // andere Konfigurationseigenschaften +}); +~~~ + +Inline-Bilder, die größer als 1024×800 sind, werden in reduzierter Größe angezeigt (die Attribute `width`/`height` werden auf diese Grenzen begrenzt), aber die eingebetteten Bytes sind die ursprüngliche Datei in voller Auflösung — der Client skaliert sie nicht herunter oder kodiert sie neu. + +:::note[Hinweis] +Inline-Bilder (Base64) bleiben beim integrierten DOCX-/PDF-[Export](api/events/export.md) nicht erhalten. Wenn Sie auf den Export angewiesen sind, geben Sie eine `imageUploadUrl` an, damit Bilder auf einen externen Speicherort verweisen. +::: + +Unter [Arbeiten mit dem Server](guides/working_with_server.md) finden Sie den vollständigen Request/Response-Vertrag, den der Upload-Endpunkt implementieren muss, sowie eine ausführlichere Beschreibung des Inline-Bild-Fallbacks. + +## Standardstile konfigurieren {#configure-default-styles} + +Verwenden Sie die Eigenschaft [`defaultStyles`](api/config/default-styles.md), um Standardstile pro Blocktyp festzulegen. + +Die Eigenschaft [`defaultStyles`](api/config/default-styles.md) hat die folgende Typsignatur: + +~~~jsx {} +defaultStyles?: boolean | { + "*"?: { // gilt für alle Blöcke; legt gemeinsame Eigenschaften für jeden Block fest + "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; + } +}; +~~~ + +Die Eigenschaft [`defaultStyles`](api/config/default-styles.md) wendet kein CSS auf die betroffenen Blöcke an. Wenden Sie passende CSS-Stile separat an: + +```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; +} +``` + +In diesem Beispiel verwenden alle `h2`-Blöcke die Schriftfamilie `"Roboto"` mit 28px, lila Text und rosa Hintergrund. Die passende CSS-Regel wendet dieselben Werte auf die gerenderten `h2`-Elemente an. + +**Verwandtes Beispiel:** [RichText. Standardwert für Typografie ändern (Schriftart, Schriftgröße usw.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/initialization.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/initialization.md new file mode 100644 index 0000000..4e7ada5 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/initialization.md @@ -0,0 +1,80 @@ +--- +sidebar_label: Initialisierung +title: Initialisierung +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über die Initialisierung. Lesen Sie Entwicklerleitfäden und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# Initialisierung {#initialization} + +Diese Anleitung erklärt, wie Sie RichText in eine Seite einbinden. Führen Sie die folgenden Schritte aus, um einen einsatzbereiten Editor zu erhalten: + +1. [Quelldateien in die Seite einbinden](#include-the-source-files). +2. [Einen Container für RichText erstellen](#create-a-container). +3. [RichText initialisieren](#initialize-richtext). + +## Quelldateien einbinden {#include-the-source-files} + +Fügen Sie die JavaScript- und CSS-Dateien von RichText zu Ihrem Projekt hinzu. [Laden Sie das Paket herunter](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml) und entpacken Sie den Inhalt in Ihren Projektordner. + +Um RichText zu erstellen, binden Sie zwei Quelldateien in Ihre Seite ein: + +- *richtext.js* +- *richtext.css* + +Verweisen Sie in Ihrem HTML auf diese Dateien. Passen Sie die relativen Pfade an Ihre Ordnerstruktur an: + +~~~html title="index.html" + + +~~~ + +## Container erstellen {#create-a-container} + +Fügen Sie einen Container für RichText mit einer ID wie *"root"* hinzu: + +~~~jsx title="index.html" +
+~~~ + +## RichText initialisieren {#initialize-richtext} + +Initialisieren Sie RichText mit dem Konstruktor `richtext.Richtext`. Der Konstruktor akzeptiert zwei Parameter: + +- einen Container — einen CSS-Selektor oder ein DOM-Element +- ein Konfigurationsobjekt mit den Editor-Eigenschaften. Siehe die [vollständige Liste der Eigenschaften](#configuration-properties) unten + +Das folgende Beispiel initialisiert RichText im Container `#root`: + +~~~jsx title="index.html" +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +~~~ + +### Konfigurationseigenschaften {#configuration-properties} + +Fügen Sie Konfigurationsoptionen als Schlüssel des Konfigurationsobjekts hinzu. + +:::note[Hinweis] +Die vollständige Liste der Konfigurationseigenschaften finden Sie in der [Eigenschaften-Übersicht](api/overview/properties_overview.md). +::: + +## RichText-Instanz zerstören {#destroy-the-richtext-instance} + +Rufen Sie die Methode [`destructor()`](api/methods/destructor.md) auf, um das RichText-HTML zu entfernen und alle zugehörigen Events zu trennen: + +~~~jsx +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); + +editor.destructor(); +~~~ + +## Beispiel {#example} + +Das folgende Beispiel initialisiert RichText mit aktivierter Menüleiste: + + + +**Verwandtes Beispiel:** [RichText. Initialisierung](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) 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..59e726d --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md @@ -0,0 +1,300 @@ +--- +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. Lesen Sie Entwicklerleitfäden und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus, und laden Sie eine kostenlose 30-tägige Evaluierungsversion von DHTMLX RichText herunter. +--- + +# Integration mit Angular {#integration-with-angular} + +:::tip[Tipp] +Stellen Sie sicher, dass Sie mit den grundlegenden Angular-Konzepten und -Mustern vertraut sind. Zur Auffrischung lesen Sie die [Angular-Dokumentation](https://v17.angular.io/docs). +::: + +DHTMLX RichText funktioniert mit Angular. Ein vollständiges Code-Beispiel finden Sie in der [GitHub-Demo](https://github.com/DHTMLX/angular-richtext-demo). + +## Projekt erstellen {#create-a-project} + +:::info[Info] +Installieren Sie [Angular CLI](https://v17.angular.io/cli) und [Node.js](https://nodejs.org/en/), bevor Sie ein neues Projekt erstellen. +::: + +Erstellen Sie ein neues *my-angular-richtext-app*-Projekt mit Angular CLI: + +~~~bash +ng new my-angular-richtext-app +~~~ + +:::note[Hinweis] +Deaktivieren Sie Server-Side Rendering (SSR) und Static Site Generation (SSG/Prerendering), wenn Sie die Angular CLI während der Projekterstellung dazu auffordert. +::: + +Der Befehl installiert alle notwendigen Tools. Es sind keine weiteren Befehle erforderlich. + +### Abhängigkeiten installieren {#install-dependencies} + +Wechseln Sie in das neue App-Verzeichnis: + +~~~bash +cd my-angular-richtext-app +~~~ + +Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver mit dem [yarn](https://yarnpkg.com/) Paketmanager: + +~~~bash +yarn +yarn start +~~~ + +Die App läuft auf localhost (zum Beispiel `http://localhost:3000`). + +## RichText erstellen {#create-richtext} + +Beenden Sie die App und installieren Sie das RichText-Paket. + +### Schritt 1. Paket installieren {#step-1-install-the-package} + +Laden Sie das [RichText-Testpaket](/how_to_start/#installing-richtext-via-npm-or-yarn) herunter und folgen Sie den Schritten in der README-Datei. Die Testlizenz ist 30 Tage gültig. + +### Schritt 2. Komponente erstellen {#step-2-create-the-component} + +Erstellen Sie eine Angular-Komponente, um RichText zur Anwendung hinzuzufügen. Erstellen Sie im Verzeichnis *src/app/* den Ordner *richtext* und fügen Sie eine neue Datei namens *richtext.component.ts* hinzu. + +#### Quelldateien importieren {#import-source-files} + +Öffnen Sie *richtext.component.ts* und importieren Sie die RichText-Quelldateien. + +Für die PRO-Version, die aus einem lokalen Ordner installiert wurde, verwenden Sie: + +~~~jsx +import { Richtext } from 'dhx-richtext-package'; +~~~ + +Für die Testversion verwenden Sie: + +~~~jsx +import { Richtext } from '@dhx/trial-richtext'; +~~~ + +Dieses Tutorial verwendet die Testversion von RichText. + +#### Container festlegen und RichText initialisieren {#set-the-container-and-initialize-richtext} + +Legen Sie ein Container-Element für RichText fest und initialisieren Sie die Komponente mit dem `Richtext`-Konstruktor innerhalb von `ngOnInit()`. Rufen Sie die Methode [`destructor()`](api/methods/destructor.md) innerhalb von `ngOnDestroy()` auf, um aufzuräumen: + +~~~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", // den "richtext"-Selektor in app.component.ts als verwenden + styleUrls: ["./richtext.component.css"], // CSS-Datei einbinden + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + // Container für RichText + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: Richtext; + + ngOnInit() { + // RichText-Komponente initialisieren + this._editor = new Richtext(this.richtext_container.nativeElement, {}); + } + + ngOnDestroy(): void { + this._editor.destructor(); // RichText zerstören + } +} +~~~ + +#### Styles hinzufügen {#add-styles} + +Erstellen Sie die Datei *richtext.component.css* im Verzeichnis *src/app/richtext/* mit den Styles für RichText und seinen Container: + +~~~css title="richtext.component.css" +/* RichText-Styles importieren */ +@import "@dhx/trial-richtext/dist/richtext.css"; + +/* Basis-Seitenstyles */ +html, +body{ + height: 100%; + padding: 0; + margin: 0; +} + +/* RichText-Container */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* RichText-Widget */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### Daten laden {#load-data} + +Stellen Sie Daten für RichText bereit. Erstellen Sie die Datei *data.ts* im Verzeichnis *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 }; +} +~~~ + +Öffnen Sie *richtext.component.ts*. Importieren Sie die Daten und übergeben Sie die `value`-Eigenschaft an die RichText-Konfiguration innerhalb von `ngOnInit()`: + +~~~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(); // Wert aus dem Datenmodul extrahieren + this._editor = new Richtext(this.richtext_container.nativeElement, { + value + // weitere Konfigurationseigenschaften + }); + } + + ngOnDestroy(): void { + this._editor.destructor(); + } +} +~~~ + +Alternativ können Sie die Methode [`setValue()`](api/methods/set-value.md) innerhalb von `ngOnInit()` aufrufen, 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(); // Wert aus dem Datenmodul extrahieren + this._editor = new Richtext(this.richtext_container.nativeElement, { + // weitere Konfigurationseigenschaften + }); + + // Daten über die Methode setValue() anwenden + this._editor.setValue(value); + } + + ngOnDestroy(): void { + this._editor.destructor(); + } +} +~~~ + +Die RichText-Komponente ist einsatzbereit. Angular rendert den Editor mit Daten, wenn das ``-Element eingebunden wird. Die vollständige Liste der Konfigurationsoptionen finden Sie in der [RichText-API-Übersicht](api/overview/main_overview.md). + +#### Events behandeln {#handle-events} + +RichText löst Events bei Benutzeraktionen aus. Abonnieren Sie Events mit der Methode [`api.on()`](api/internal/on.md), um auf Benutzereingaben zu reagieren. Weitere Informationen finden Sie in der [vollständigen Event-Liste](api/overview/events_overview.md). + +Öffnen Sie *richtext.component.ts* und aktualisieren Sie die Methode `ngOnInit()`. Das folgende Beispiel protokolliert eine Meldung bei jedem [`print`](api/events/print.md)-Event: + +~~~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(); +} +~~~ + +### Schritt 3. RichText zur App hinzufügen {#step-3-add-richtext-to-the-app} + +Öffnen Sie *src/app/app.component.ts* und ersetzen Sie den Standardcode durch den ``-Selektor: + +~~~jsx {} title="app.component.ts" +import { Component } from "@angular/core"; + +@Component({ + selector: "app-root", + template: `` +}) +export class AppComponent { + name = ""; +} +~~~ + +Erstellen Sie *src/app/app.module.ts* und deklarieren Sie die `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 {} +~~~ + +Öffnen Sie *src/main.ts* und ersetzen Sie den Inhalt durch den Bootstrap-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)); +~~~ + +Starten Sie die App, um zu sehen, wie RichText mit Daten auf der Seite gerendert wird. + +
+![In einer Angular-Anwendung gerendertes DHTMLX RichText mit Beispielinhalt](/img/trial_richtext.png) +
+ +Sie haben jetzt eine funktionierende RichText-Integration in Angular. Passen Sie den Code an Ihre Bedürfnisse an. Ein vollständiges Beispiel ist auf [GitHub](https://github.com/DHTMLX/angular-richtext-demo) verfügbar. 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..ce284cb --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_react.md @@ -0,0 +1,253 @@ +--- +sidebar_label: Integration mit React +title: Integration mit React +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie, wie Sie RichText mit React integrieren. Lesen Sie Entwickleranleitungen und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# Integration mit React {#integration-with-react} + +:::tip[Tipp] +Stellen Sie sicher, dass Sie mit den grundlegenden [React](https://react.dev)-Konzepten und -Mustern vertraut sind. Zur Auffrischung lesen Sie die [React-Dokumentation](https://react.dev/learn). +::: + +DHTMLX RichText funktioniert mit React. Ein vollständiges Codebeispiel finden Sie in der [GitHub-Demo](https://github.com/DHTMLX/react-richtext-demo). + +## Projekt erstellen {#create-a-project} + +:::info[Info] +Installieren Sie [Node.js](https://nodejs.org/en/) und (optional) [Vite](https://vite.dev/), bevor Sie ein neues Projekt erstellen. +::: + +Erstellen Sie mit Create React App ein neues *my-react-richtext-app*-Projekt: + +~~~bash +npx create-react-app my-react-richtext-app +~~~ + +### Abhängigkeiten installieren {#install-dependencies} + +Wechseln Sie in das neue App-Verzeichnis: + +~~~bash +cd my-react-richtext-app +~~~ + +Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver mit einem Paketmanager. + +Für [yarn](https://yarnpkg.com/) führen Sie aus: + +~~~bash +yarn +yarn start +~~~ + +Für [npm](https://www.npmjs.com/) führen Sie aus: + +~~~bash +npm install +npm start +~~~ + +Die App läuft auf localhost (zum Beispiel `http://localhost:3000`). + +## RichText erstellen {#create-richtext} + +Stoppen Sie die App und installieren Sie das RichText-Paket. + +### Schritt 1. Paket installieren {#step-1-install-the-package} + +Laden Sie das [RichText-Testpaket](/how_to_start/#installing-richtext-via-npm-or-yarn) herunter und folgen Sie den Schritten in der README-Datei. Die Testlizenz ist 30 Tage gültig. + +### Schritt 2. Komponente erstellen {#step-2-create-the-component} + +Erstellen Sie eine React-Komponente, um RichText zur Anwendung hinzuzufügen. Erstellen Sie im Verzeichnis *src/* eine neue Datei namens *Richtext.jsx*. + +#### Quelldateien importieren {#import-source-files} + +Öffnen Sie *Richtext.jsx* und importieren Sie die RichText-Quelldateien. + +Für die PRO-Version, die aus einem lokalen Ordner installiert wurde, verwenden Sie: + +~~~jsx title="Richtext.jsx" +import { Richtext } from 'dhx-richtext-package'; +import 'dhx-richtext-package/dist/richtext.css'; +~~~ + +Für die Testversion verwenden Sie: + +~~~jsx title="Richtext.jsx" +import { Richtext } from '@dhx/trial-richtext'; +import "@dhx/trial-richtext/dist/richtext.css"; +~~~ + +Dieses Tutorial verwendet die Testversion von RichText. + +#### Container festlegen und RichText initialisieren {#set-the-container-and-initialize-richtext} + +Legen Sie ein Container-Element für RichText fest und initialisieren Sie die Komponente mit dem `Richtext`-Konstruktor innerhalb von `useEffect()`. Rufen Sie die [`destructor()`](api/methods/destructor.md)-Methode in der Cleanup-Funktion auf, um RichText zu entfernen: + +~~~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 + + useEffect(() => { + // RichText-Komponente initialisieren + const editor = new Richtext(richtext_container.current, {}); + + return () => { + editor.destructor(); // RichText zerstören + }; + }, []); + + return
+
+
+} +~~~ + +#### Styles hinzufügen {#add-styles} + +Fügen Sie die Styles für RichText und seinen Container zur Haupt-CSS-Datei des Projekts hinzu: + +~~~css title="index.css" +/* Basis-Seitenstile */ +html, +body, +#root { + height: 100%; + padding: 0; + margin: 0; +} + +/* RichText-Container */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* RichText-Widget */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### Daten laden {#load-data} + +Stellen Sie Daten für RichText bereit. Erstellen Sie die Datei *data.js* im Verzeichnis *src/*: + +~~~jsx {} title="data.js" +export function getData() { + const value = ` +

RichText 2.0

+

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

+

`; + return { value }; +} +~~~ + +Öffnen Sie *App.js* und importieren Sie die Daten. Übergeben Sie den Wert als Prop an die ``-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; +~~~ + +Öffnen Sie *Richtext.jsx* und übergeben Sie `props.value` an die 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
+
+
+} +~~~ + +Alternativ können Sie die [`setValue()`](api/methods/set-value.md)-Methode innerhalb von `useEffect()` aufrufen, um Daten in RichText 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
+
+
+} +~~~ + +Die RichText-Komponente ist einsatzbereit. React rendert den Editor mit Daten, wenn das ``-Element eingebunden wird. Die vollständige Liste der Konfigurationsoptionen finden Sie in der [RichText-API-Übersicht](api/overview/main_overview.md). + +#### Events behandeln {#handle-events} + +RichText löst Events bei Benutzeraktionen aus. Abonnieren Sie Events mit der [`api.on()`](api/internal/on.md)-Methode, um auf Benutzereingaben zu reagieren. Siehe die [vollständige Event-Liste](api/overview/events_overview.md). + +Öffnen Sie *Richtext.jsx* und aktualisieren Sie den `useEffect()`-Hook. Das folgende Beispiel protokolliert bei jedem [`print`](api/events/print.md)-Event eine Meldung: + +~~~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(); + }; +}, []); +// ... +~~~ + +Starten Sie die App, um zu sehen, wie RichText mit Daten auf der Seite gerendert wird. + +
+![In einer React-Anwendung gerendertes DHTMLX RichText mit Beispielinhalt](/img/trial_richtext.png) +
+ +Sie verfügen nun über eine funktionierende RichText-Integration in React. Passen Sie den Code an Ihre Anforderungen an. Ein vollständiges Beispiel ist auf [GitHub](https://github.com/DHTMLX/react-richtext-demo) verfügbar. 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..db6ba6f --- /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 alles über die Integration mit Svelte. Lesen Sie Entwickleranleitungen und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# Integration mit Svelte {#integration-with-svelte} + +:::tip[Tipp] +Stellen Sie sicher, dass Sie mit den grundlegenden [Svelte](https://svelte.dev/)-Konzepten und -Mustern vertraut sind. Zur Auffrischung lesen Sie die [Svelte-Dokumentation](https://svelte.dev/docs). +::: + +DHTMLX RichText funktioniert mit Svelte. Ein vollständiges Codebeispiel finden Sie in der [GitHub-Demo](https://github.com/DHTMLX/svelte-richtext-demo). + +## Projekt erstellen {#create-a-project} + +:::info[Info] +Installieren Sie [Node.js](https://nodejs.org/en/) und (optional) [Vite](https://vite.dev/), bevor Sie ein neues Projekt erstellen. +::: + +Dieses Tutorial verwendet ein Vite-basiertes Svelte-Projekt. Für SvelteKit und andere Optionen lesen Sie die [Svelte-Projektanleitung](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit). + +Starten Sie ein neues Vite-Projekt: + +~~~bash +npm create vite@latest +~~~ + +### Abhängigkeiten installieren {#install-dependencies} + +Wenn der Scaffolder nach einem Projektnamen fragt, verwenden Sie *my-svelte-richtext-app*. Wechseln Sie dann in das neue Verzeichnis: + +~~~bash +cd my-svelte-richtext-app +~~~ + +Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver mit einem Paketmanager. + +Für [yarn](https://yarnpkg.com/) führen Sie aus: + +~~~bash +yarn +yarn dev +~~~ + +Für [npm](https://www.npmjs.com/) führen Sie aus: + +~~~bash +npm install +npm run dev +~~~ + +Die Anwendung läuft auf localhost (zum Beispiel `http://localhost:3000`). + +## RichText erstellen {#create-richtext} + +Stoppen Sie die Anwendung und installieren Sie das RichText-Paket. + +### Schritt 1. Paket installieren {#step-1-install-the-package} + +Laden Sie das [RichText-Testpaket](/how_to_start/#installing-richtext-via-npm-or-yarn) herunter und folgen Sie den Schritten in der README-Datei. Die Testlizenz ist 30 Tage lang gültig. + +### Schritt 2. Komponente erstellen {#step-2-create-the-component} + +Erstellen Sie eine Svelte-Komponente, um RichText zur Anwendung hinzuzufügen. Erstellen Sie im Verzeichnis *src/* eine neue Datei namens *Richtext.svelte*. + +#### Quelldateien importieren {#import-source-files} + +Öffnen Sie *Richtext.svelte* und importieren Sie die RichText-Quelldateien. + +Für die PRO-Version, die aus einem lokalen Ordner installiert wurde, verwenden Sie: + +~~~html title="Richtext.svelte" + +~~~ + +Für die Testversion verwenden Sie: + +~~~html title="Richtext.svelte" + +~~~ + +Dieses Tutorial verwendet die Testversion von RichText. + +#### Container festlegen und RichText initialisieren {#set-the-container-and-initialize-richtext} + +Legen Sie ein Container-Element für RichText fest und initialisieren Sie die Komponente innerhalb von `onMount()`. Rufen Sie die Methode [`destructor()`](api/methods/destructor.md) innerhalb von `onDestroy()` auf, um RichText zu entfernen: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +#### Stile hinzufügen {#add-styles} + +Fügen Sie die Stile für RichText und seinen Container zur CSS-Hauptdatei des Projekts hinzu (zum Beispiel *src/app.css*): + +~~~css title="app.css" +/* Basis-Seitenstile */ +html, +body { + height: 100%; + padding: 0; + margin: 0; +} + +/* RichText-Container */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* RichText-Widget */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### Daten laden {#load-data} + +Stellen Sie Daten für RichText bereit. Erstellen Sie die Datei *data.js* im Verzeichnis *src/*: + +~~~jsx {} title="data.js" +export function getData() { + const value = ` +

RichText 2.0

+

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

+

`; + return { value }; +} +~~~ + +Öffnen Sie *App.svelte*, importieren Sie die Daten und übergeben Sie den Wert als Prop an die ``-Komponente: + +~~~html {} title="App.svelte" + + + +~~~ + +Öffnen Sie *Richtext.svelte* und übergeben Sie den Prop-Wert an die RichText-Konfiguration: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +Alternativ können Sie die Methode [`setValue()`](api/methods/set-value.md) innerhalb von `onMount()` aufrufen, um Daten in RichText zu laden: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +Die RichText-Komponente ist einsatzbereit. Svelte rendert den Editor mit Daten, wenn das ``-Element eingebunden wird. Die vollständige Liste der Konfigurationsoptionen finden Sie in der [RichText-API-Übersicht](api/overview/main_overview.md). + +#### Events verarbeiten {#handle-events} + +RichText löst Events bei Benutzeraktionen aus. Abonnieren Sie Events mit der Methode [`api.on()`](api/internal/on.md), um auf Benutzereingaben zu reagieren. Lesen Sie die [vollständige Liste der Events](api/overview/events_overview.md). + +Öffnen Sie *Richtext.svelte* und aktualisieren Sie den `onMount()`-Hook. Das folgende Beispiel protokolliert eine Meldung bei jedem [`print`](api/events/print.md)-Event: + +~~~html {} title="Richtext.svelte" + + +// ... +~~~ + +Starten Sie die Anwendung, um zu sehen, wie RichText mit Daten auf der Seite gerendert wird. + +
+![In einer Svelte-Anwendung gerendertes DHTMLX RichText mit Beispielinhalt](/img/trial_richtext.png) +
+ +Sie haben jetzt eine funktionierende RichText-Integration in Svelte. Passen Sie den Code an Ihre Anforderungen an. Ein vollständiges Beispiel ist auf [GitHub](https://github.com/DHTMLX/svelte-richtext-demo) verfügbar. 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..70d4f8d --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md @@ -0,0 +1,277 @@ +--- +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. Lesen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# Integration mit Vue {#integration-with-vue} + +:::tip[Tipp] +Stellen Sie sicher, dass Sie mit den grundlegenden [Vue](https://vuejs.org/)-Konzepten und -Mustern vertraut sind. Zur Auffrischung lesen Sie die [Vue 3-Dokumentation](https://vuejs.org/guide/introduction.html#getting-started). +::: + +DHTMLX RichText funktioniert mit Vue. Ein vollständiges Codebeispiel finden Sie in der [GitHub-Demo](https://github.com/DHTMLX/vue-richtext-demo). + +## Projekt erstellen {#create-a-project} + +:::info[Info] +Installieren Sie [Node.js](https://nodejs.org/en/) vor dem Erstellen eines neuen Projekts. +::: + +Erstellen Sie ein Vue-Projekt mit dem offiziellen Scaffolding-Tool: + +~~~bash +npm create vue@latest +~~~ + +Der Befehl installiert und startet `create-vue`. Wenn der Scaffolder nach einem Projektnamen fragt, verwenden Sie *my-vue-richtext-app*. Weitere Informationen finden Sie im [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application). + +### Abhängigkeiten installieren {#install-dependencies} + +Wechseln Sie in das App-Verzeichnis: + +~~~bash +cd my-vue-richtext-app +~~~ + +Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver mit einem Paketmanager. + +Für [yarn](https://yarnpkg.com/) führen Sie aus: + +~~~bash +yarn +yarn dev +~~~ + +Für [npm](https://www.npmjs.com/) führen Sie aus: + +~~~bash +npm install +npm run dev +~~~ + +Die App läuft auf localhost (zum Beispiel `http://localhost:3000`). + +## RichText erstellen {#create-richtext} + +Stoppen Sie die App und installieren Sie das RichText-Paket. + +### Schritt 1. Paket installieren {#step-1-install-the-package} + +Laden Sie das [RichText-Testpaket](/how_to_start/#installing-richtext-via-npm-or-yarn) herunter und befolgen Sie die Schritte in der README-Datei. Die Testlizenz ist 30 Tage gültig. + +### Schritt 2. Komponente erstellen {#step-2-create-the-component} + +Erstellen Sie eine Vue-Komponente, um RichText zur Anwendung hinzuzufügen. Erstellen Sie im Verzeichnis *src/components/* eine neue Datei namens *Richtext.vue*. + +#### Quelldateien importieren {#import-source-files} + +Öffnen Sie *Richtext.vue* und importieren Sie die RichText-Quelldateien. + +Für die PRO-Version, die aus einem lokalen Ordner installiert wurde, verwenden Sie: + +~~~html title="Richtext.vue" + +~~~ + +Für die Testversion verwenden Sie: + +~~~html title="Richtext.vue" + +~~~ + +Dieses Tutorial verwendet die Testversion von RichText. + +#### Container festlegen und RichText initialisieren {#set-the-container-and-initialize-richtext} + +Legen Sie ein Container-Element für RichText fest und initialisieren Sie die Komponente mit dem `Richtext`-Konstruktor in `mounted()`. Rufen Sie die Methode [`destructor()`](api/methods/destructor.md) in `unmounted()` auf, um RichText zu entfernen: + +~~~html {} title="Richtext.vue" + + + +~~~ + +#### Stile hinzufügen {#add-styles} + +Fügen Sie die Stile für RichText und seinen Container zur Haupt-CSS-Datei des Projekts hinzu: + +~~~css title="main.css" +/* Basis-Seitenstile */ +html, +body, +#app { /* den #app-Root-Container verwenden */ + height: 100%; + padding: 0; + margin: 0; +} + +/* RichText-Container */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* RichText-Widget */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### Daten laden {#load-data} + +Stellen Sie Daten für RichText bereit. Erstellen Sie die Datei *data.js* im Verzeichnis *src/*: + +~~~jsx {} title="data.js" +export function getData() { + const value = ` +

RichText 2.0

+

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

+

`; + return { value }; +} +~~~ + +Öffnen Sie *App.vue*, importieren Sie die Daten und initialisieren Sie sie über die Methode `data()`. Übergeben Sie den Wert als Prop an die ``-Komponente: + +~~~html {} title="App.vue" + + + +~~~ + +Öffnen Sie *Richtext.vue* und übergeben Sie den Prop-Wert an die RichText-Konfiguration: + +~~~html {} title="Richtext.vue" + + + +~~~ + +Alternativ können Sie die Methode [`setValue()`](api/methods/set-value.md) in `mounted()` aufrufen, um Daten in RichText zu laden: + +~~~html {} title="Richtext.vue" + + + +~~~ + +Die RichText-Komponente ist einsatzbereit. Vue rendert den Editor mit Daten, wenn das ``-Element eingebunden wird. Die vollständige Liste der Konfigurationsoptionen finden Sie in der [RichText API-Übersicht](api/overview/main_overview.md). + +#### Events verarbeiten {#handle-events} + +RichText löst Events bei Benutzeraktionen aus. Abonnieren Sie Events mit der Methode [`api.on()`](api/internal/on.md), um auf Benutzereingaben zu reagieren. Weitere Informationen finden Sie in der [vollständigen Event-Liste](api/overview/events_overview.md). + +Öffnen Sie *Richtext.vue* und aktualisieren Sie den `mounted()`-Hook. Das folgende Beispiel protokolliert bei jedem [`print`](api/events/print.md)-Event eine Meldung: + +~~~html {} title="Richtext.vue" + + +// ... +~~~ + +Starten Sie die App, um zu sehen, wie RichText mit Daten auf der Seite gerendert wird. + +
+![In einer Vue-Anwendung gerendertes DHTMLX RichText mit Beispielinhalt](/img/trial_richtext.png) +
+ +Sie verfügen nun über eine funktionierende RichText-Integration in Vue. Passen Sie den Code an Ihre Bedürfnisse an. Ein vollständiges Beispiel ist auf [GitHub](https://github.com/DHTMLX/vue-richtext-demo) verfügbar. 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..0f61157 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/localization.md @@ -0,0 +1,495 @@ +--- +sidebar_label: Lokalisierung +title: Lokalisierung +description: Sie können mehr über die Lokalisierung in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Durchsuchen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# Lokalisierung {#localization} + +RichText unterstützt die Lokalisierung aller Schnittstellenbeschriftungen. Erstellen Sie ein neues Locale oder modifizieren Sie ein eingebautes, und wenden Sie das Ergebnis über die Editor-Konfiguration an. + +## Standard-Locale {#default-locale} + +Standardmäßig verwendet RichText das englische Locale: + +~~~jsx +const en = { + richtext: { + // Schaltflächen/Aktionen + 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", + + // exklusive Menüleisten-Optionen + 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", + + // Zwischenablage + "Operation failed. Please check your browser's clipboard permissions.": + "Operation failed. Please check your browser's clipboard permissions.", + + // Dropdown für Blockstile + Heading: "Heading", + Quote: "Quote", + Paragraph: "Paragraph", + "Text style": "Text style", + Lists: "Lists", + + normal: "normal", + default: "default", + + // Listen + "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", + + // Tastenkürzel-Gruppen + "Text formatting": "Text formatting", + Editing: "Editing", + "Special actions": "Special actions", + + // Farben + 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", + + // Farbabstufungen + "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[Info] +RichText wird auch mit den eingebauten deutschen (`de`) und chinesischen (`cn`) Locales ausgeliefert. Sie können auf jedes eingebaute Locale über den Namespace `richtext.locales` zugreifen: `richtext.locales.en`, `richtext.locales.de`, `richtext.locales.cn`. +::: + +
+de locale + +~~~jsx +const de = { + richtext: { + // Schaltflächen/Aktionen + 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", + + // exklusive Menüleisten-Optionen + 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", + + // Zwischenablage + "Operation failed. Please check your browser's clipboard permissions.": + "Operation fehlgeschlagen. Bitte überprüfen Sie die Berechtigungen für die Zwischenablage Ihres Browsers.", + + // Dropdown für Blockstile + Heading: "Überschrift", + Quote: "Zitat", + Paragraph: "Absatz", + "Text style": "Textstil", + Lists: "Listen", + + normal: "normal", + default: "standard", + + // Listen + "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", + + // Tastenkürzel-Gruppen + "Text formatting": "Textformatierung", + Editing: "Bearbeitung", + "Special actions": "Spezielle Aktionen", + + // Farben + 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", + + // Farbabstufungen + "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: { + // Schaltflächen/Aktionen + 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": "文档模式", + + // exklusive Menüleisten-Optionen + 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": "键盘快捷键", + + // Zwischenablage + "Operation failed. Please check your browser's clipboard permissions.": + "操作失败。请检查浏览器的剪贴板权限。", + + // Dropdown für Blockstile + Heading: "标题", + Quote: "引用", + Paragraph: "段落", + "Text style": "文本样式", + Lists: "列表", + + normal: "普通的", + default: "默认", + + // Listen + "Bulleted list": "项目符号列表", + "Numbered list": "编号列表", + + // Links + "Enter text to display": "输入要显示的文本", + "Paste link": "粘贴链接", + "Link copied to clipboard": "链接已复制到剪贴板", + + // Tastenkürzel-Gruppen + "Text formatting": "文本格式化", + Editing: "编辑", + "Special actions": "特殊操作", + + // Farben + Black: "黑色", + Gray: "灰色", + White: "白色", + Red: "红色", + Orange: "橙色", + Yellow: "黄色", + Lime: "酸橙色", + Green: "绿色", + Teal: "水鸭色", + Cyan: "青色", + Blue: "蓝色", + Indigo: "靛蓝色", + Magenta: "洋红色", + + // Farbabstufungen + "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": "深洋红色" + } +}; +~~~ +
+ +## Benutzerdefiniertes Locale anwenden {#apply-a-custom-locale} + +Erstellen Sie ein Locale-Objekt (oder modifizieren Sie ein eingebautes) mit Übersetzungen für alle Schnittstellenbeschriftungen. Wenden Sie das Locale bei der Initialisierung an oder wechseln Sie es zur Laufzeit, wie unten beschrieben. + +### Locale bei der Initialisierung anwenden {#apply-the-locale-at-initialization} + +Übergeben Sie das Locale an die Eigenschaft [`locale`](api/config/locale.md) in der Konstruktor-Konfiguration: + +~~~jsx +const editor = new richtext.Richtext("#root", { + locale: richtext.locales.de + // weitere Konfigurationseigenschaften +}); +~~~ + +### Locale zur Laufzeit wechseln {#switch-the-locale-at-runtime} + +Rufen Sie die Methode [`setLocale()`](api/methods/set-locale.md) auf, um das Locale nach der Initialisierung zu ändern: + +~~~jsx +editor.setLocale(richtext.locales.cn); +~~~ + +Um das standardmäßige englische Locale wiederherzustellen, rufen Sie [`setLocale()`](api/methods/set-locale.md) ohne Argumente oder mit `null` auf: + +~~~jsx +editor.setLocale(); +~~~ + +## Beispiel {#example} + +Das folgende Beispiel wechselt zwischen mehreren RichText-Locales: + + diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/mentions_and_tags.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/mentions_and_tags.md new file mode 100644 index 0000000..d56b725 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/mentions_and_tags.md @@ -0,0 +1,274 @@ +--- +sidebar_label: Erwähnungen und Tags +title: Erwähnungen und Tags +description: 'Erfahren Sie, wie Sie @-Erwähnungen, #-Tags und benutzerdefinierte Dropdown-Trigger in DHTMLX RichText konfigurieren. Lesen Sie Entwickleranleitungen und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter.' +--- + +# Erwähnungen und Tags {#mentions-and-tags} + +RichText unterstützt benutzerdefinierte Trigger-Zeichen, die ein Vorschlag-Dropdown im Dokument öffnen. Wenn der Benutzer ein Element auswählt, fügt RichText ein nicht bearbeitbares Token in das Dokument ein. Typische Anwendungsfälle: + +- `@` — eine Person erwähnen +- `#` — einen Tag anwenden +- `/` — einen Befehl oder eine Vorlage einfügen +- `$` — ein Finanzsymbol oder eine Variable einfügen +- `:` — ein Emoji einfügen + +Konfigurieren Sie das Verhalten über die Eigenschaft [`triggers`](api/config/triggers.md). Jeder Eintrag bindet ein Zeichen an eine Datenquelle. + +## Trigger konfigurieren {#configure-triggers} + +Jeder Trigger ist ein Objekt `{ trigger, data, showTrigger?, action? }` innerhalb des [`triggers`](api/config/triggers.md)-Arrays. Das Feld [`data`](api/config/triggers.md#data-source-forms) kann drei Formen annehmen: + +- Ein statisches Array — RichText filtert es automatisch nach `label` (Groß-/Kleinschreibung wird ignoriert, `startsWith`): + +~~~jsx {} +{ trigger: "@", data: people } +~~~ + +- Eine synchrone Funktion — verwenden Sie diese, um Ergebnisse selbst zu filtern: + +~~~jsx {} +{ + trigger: "#", + data: query => tags.filter(t => + t.label.toLowerCase().startsWith(query.toLowerCase()) + ) +} +~~~ + +- Eine asynchrone Funktion — verwenden Sie diese für die serverseitige Suche: + +~~~jsx {} +{ + trigger: "+", + data: async query => { + const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`); + const users = await res.json(); + return users.map(u => ({ + id: String(u.id), + label: u.name, + url: u.website + })); + } +} +~~~ + +**Verwandtes Beispiel:** [RichText. Erwähnungen, Tags und asynchrone Suche](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +## Token-Darstellung {#token-rendering} + +Wenn der Benutzer ein Element aus dem Dropdown auswählt, fügt RichText es als ``-Element mit zwei Datenattributen ein: + +~~~html {2-3} +@Alice +~~~ + +Das Token ist ein einzelner nicht bearbeitbarer Knoten. `Backspace` löscht es in einem Schritt. RichText speichert das Feld `url` in `href`, sodass `Strg+Klick` auf das Token dem Link folgt. + +Sie können Tokens mit dem Selektor `data-token` gestalten: + +~~~css {} +.wx-editor-content a[data-token="@"][data-token-id="alice"] { + background: #fb8500; + color: #fff; + border-radius: 3px; + padding: 0 2px; +} +~~~ + +**Verwandte Beispiele:** + +- [RichText. Erwähnungen suchen und hervorheben](https://snippet.dhtmlx.com/8y6zvzh2?tag=richtext) +- [RichText. Alle Erwähnungen hervorheben](https://snippet.dhtmlx.com/2rbo12jx?tag=richtext) + +## Trigger-Zeichen ausblenden {#hide-the-trigger-character} + +Setzen Sie `showTrigger: false` auf einem Trigger, um nur die Element-Beschriftung ohne das Trigger-Symbol einzufügen: + +~~~jsx {4} +{ + trigger: "/", + data: commands, + showTrigger: false +} +~~~ + +## Tastaturinteraktion {#keyboard-interaction} + +Im Vorschlag-Dropdown können Sie die folgenden Tastenkürzel verwenden: + +- `↑` / `↓` — zwischen Elementen navigieren +- `Enter` — das aktive Element einfügen +- `Escape` — das Dropdown schließen ohne einzufügen + +## Vorschlags-Events abhören {#listen-to-suggestion-events} + +Drei Events stellen den Dropdown-Lebenszyklus über den Event Bus bereit: + +- [`insert-token`](api/events/insert-token.md) — wird ausgelöst, wenn ein Benutzer ein Element auswählt +- [`show-suggest`](api/events/show-suggest.md) — wird ausgelöst, wenn das Dropdown geöffnet wird +- [`hide-suggest`](api/events/hide-suggest.md) — wird ausgelöst, wenn das Dropdown geschlossen wird + +~~~jsx {5-7} +const editor = new richtext.Richtext("#root", { + triggers: [{ trigger: "@", data: people }] +}); + +editor.api.on("insert-token", ({ data, trigger, showTrigger }) => { + console.log(`Inserted ${trigger}${data.label} (id: ${data.id})`); +}); +~~~ + +## Dropdown-Element anpassen {#customize-the-dropdown-item} + +Standardmäßig zeigt das Dropdown die `label`-Eigenschaft jedes Elements an. Um benutzerdefinierte Vorschläge darzustellen (z. B. Avatar, Name und E-Mail-Adresse), übergeben Sie eine Vorlage über die Eigenschaft [`triggerTemplate`](api/config/trigger-template.md). + +### Beispiel {#example} + +~~~jsx {1,4-9} +const { template } = richtext; + +new richtext.Richtext("#root", { + triggers: [{ trigger: "@", data: people }], + triggerTemplate: template(({ data, trigger }) => ` +
+
${trigger}${data.label}
+
${data.url || ""}
+
+ `) +}); +~~~ + +**Verwandtes Beispiel:** [RichText. Benutzerdefinierte Dropdown-Vorlage pro Trigger](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext) + +## Benutzerdefinierte Aktion bei Auswahl {#custom-action-on-select} + +Standardmäßig wird ein ausgewähltes Element als Token in das Dokument eingefügt. Um stattdessen eigenen Code auszuführen, fügen Sie dem Trigger einen `action`-Callback hinzu. RichText entfernt den eingegebenen Trigger-Text und ruft `action(item)` mit dem ausgewählten Element auf — es wird kein Token eingefügt, sodass Sie selbst entscheiden können, was hinzugefügt wird. + +:::note[Hinweis] +`action` hat Vorrang vor `showTrigger`. Wenn `action` gesetzt ist, wird `showTrigger` ignoriert. +::: + +### Emoji einfügen {#add-emoji} + +Ein `:` Trigger kann ein Emoji einfügen, wobei jedes Element ein benutzerdefiniertes Feld `code` enthält. Kombinieren Sie `action` mit [`triggerTemplate`](api/config/trigger-template.md), damit das Dropdown das Emoji statt nur seiner Beschriftung anzeigt: + +~~~jsx {18-20,24} +const { template, Richtext } = richtext; + +const emoji = [ + { + id: "apple", label: "apple", code: "1F34E" + }, + { + id: "blue_car", label: "blue_car", code: "1F699" + }, + { + id: "computer", label: "computer", code: "1F4BB" + } +]; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: emoji, // [{ id: "apple", label: "apple", code: "1F34E" }, ...] + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // das Emoji selbst (nicht nur seine Beschriftung) im Dropdown anzeigen + triggerTemplate: template(({ data }) => `${emojiFromCode(data.code)} ${data.label}`) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} +~~~ + +**Verwandtes Beispiel:** [RichText. Emoji-Autovervollständigung](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) + +### Emoji nach Kategorien gruppieren {#group-emoji-by-categories} + +Wenn der Parameter `data` eine Funktion ist, sind Sie nicht auf den integrierten `label`-Abgleich beschränkt. Sie können eigene Filterlogik implementieren und Kategorieüberschriften im Dropdown beibehalten. Fügen Sie Header-Elemente hinzu, die ein `label`-Feld enthalten, aber kein `code`-Feld. Die `data`-Funktion sucht zunächst die passenden Emoji und gibt diese dann zusammen mit den Überschriften der Kategorien zurück, die noch Treffer enthalten: + +~~~jsx {17-26,31-33} +const { template, Richtext } = richtext; + +// Header-Elemente haben kein `code`-Feld; Emoji-Elemente enthalten eines +const emoji = [ + { id: "$smileys", label: "Smileys", category: 1 }, // Kategorie + { id: "grinning", label: "grinning", code: "1F600", category: 1 }, + { id: "smile", label: "smile", code: "1F604", category: 1 }, + { id: "$animals", label: "Animals", category: 2 }, // Kategorie + { id: "dog", label: "dog", code: "1F436", category: 2 }, + { id: "cat", label: "cat", code: "1F431", category: 2 } +]; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: query => { + const matched = emoji.filter(item => + item.code && + item.label.toLowerCase().startsWith(query.toLowerCase().trim()) + ); + const categories = new Set(matched.map(item => item.category)); + // passende Emojis behalten plus die Überschriften der Kategorien, die noch Treffer enthalten + return emoji.filter(item => + item.code ? matched.includes(item) : categories.has(item.category) + ); + }, + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // Emoji-Zeilen normal und Kategorieüberschriften fett darstellen + triggerTemplate: template(({ data }) => + data.code ? `${emojiFromCode(data.code)} ${data.label}` : `${data.label}` + ) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} + +// Überschriften haben kein `code` — Auswahl auf ihnen ignorieren, damit sie nie eingefügt werden +editor.api.intercept("insert-token", ({ data }) => !!data.code); +~~~ + +### Slash-Befehlsmenü hinzufügen {#add-slash-style-command-menu} + +Sie können `action` verwenden, um ein Slash-Befehlsmenü zu erstellen (wie `/` in Notion oder Slack). Speichern Sie einen Befehlsnamen in der `id` jedes Elements, dessen Optionen in einem benutzerdefinierten Feld `config`, und lassen Sie den Callback ihn mit [`api.exec`](api/internal/exec.md) ausführen: + +~~~jsx {13} +// jedes Element speichert einen api.exec-Aktionsnamen in `id` und seine Parameter in `config` +const commands = [ + { id: "set-text-style", label: "Heading 1", config: { tag: "h1" } }, + { id: "insert-list", label: "Bulleted list", config: { type: "bulleted" } }, + { id: "insert-line", label: "Divider" } // keine Konfiguration → `|| {}` wird angewendet +]; + +const editor = new richtext.Richtext("#root", { + triggers: [ + { + trigger: "/", + data: commands, + action: item => editor.api.exec(item.id, item.config || {}) + } + ] +}); +~~~ + +**Verwandtes Beispiel:** [RichText. Slash-Befehle](https://snippet.dhtmlx.com/e0mrmyam?tag=richtext) + +## Verwandte API {#related-api} + +- [`triggers`](api/config/triggers.md) +- [`triggerTemplate`](api/config/trigger-template.md) +- [`insert-token`](api/events/insert-token.md) +- [`show-suggest`](api/events/show-suggest.md) +- [`hide-suggest`](api/events/hide-suggest.md) 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..f3d3baa --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/stylization.md @@ -0,0 +1,93 @@ +--- +title: Gestaltung +sidebar_label: Gestaltung +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über die Gestaltungsmöglichkeiten. Durchsuchen Sie Entwicklerhandbücher und API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# Gestaltung {#styling} + +Passen Sie das Erscheinungsbild von DHTMLX RichText an, indem Sie CSS-Variablen am Container des Editors und seinen Unterelementen überschreiben. + +Dieses Handbuch zeigt, wie Sie ein **dunkles Theme** anwenden und die Menüleiste, Symbolleiste, Popups und den Inhaltsbereich mit CSS-Klassenselektoren ansprechen. + +## Standardstruktur und Klassennamen {#default-structure-and-class-names} + +RichText verwendet die folgenden Kernklassen zur Strukturierung der Benutzeroberfläche: + +| Klassenname | Beschreibung | +|------------------------|---------------------------------------------------| +| `.wx-richtext` | Root-Container 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 Symbolleiste | +| `.wx-editor-area` | Container für den Hauptbereich zum Bearbeiten von Inhalten | + +Verwenden Sie diese Klassen in benutzerdefinierten CSS-Selektoren, um das Erscheinungsbild des Editors zu überschreiben. + +## Standardstile überschreiben {#override-default-styles} + +Um die Standardstile zu überschreiben, definieren Sie CSS-Variablen am `#root`-Container oder an bestimmten Unterelementen neu: + +```html +
+ + +``` + +:::note[Hinweis] +Diese Stile setzen einen dunklen Hintergrund, passen Button- und Icon-Farben an und verbessern die Lesbarkeit für dunkle UI-Themes. +::: + +## Unterstützte CSS-Variablen {#supported-css-variables} + +| Variablenname | Beschreibung | +| ---------------------------- | -------------------------------------------------- | +| `--wx-background` | Hintergrundfarbe des Editors und der Popups | +| `--wx-background-alt` | Alternativer Hintergrund für die Menüleiste | +| `--wx-color-primary` | Akzentfarbe für Links, Blockzitate und Bildgrößen-Handles | +| `--wx-color-font` | Hauptschriftfarbe (für Editor, Menüleiste und Symbolleiste) | +| `--wx-color-font-alt` | Alternative Schriftfarbe | +| `--wx-color-font-disabled` | Farbe für deaktivierten Text (für Elemente der Menü- und Symbolleiste) | +| `--wx-border` | Rahmenstil, der im gesamten Editor verwendet wird | +| `--wx-color-secondary-hover` | Hover-Hintergrund für Buttons in Menü- und Symbolleiste | +| `--wx-button-active` | Aktiver Hintergrund für Buttons in Menü- und Symbolleiste | +| `--wx-icon-color` | Farbe der Dropdown-Pfeil-Icons in der Symbolleiste | +| `--wx-popup-border` | Rahmen für Popup-Elemente | + +## Best Practices {#best-practices} + +* Verwenden Sie `color-scheme: dark`, um die native Eingabe-Gestaltung im Dunkelmodus zu verbessern +* Vermeiden Sie es, layout-bezogene Eigenschaften (wie `display`, `position`) ohne triftigen Grund zu ändern + +:::tip[Tipp] +Für typografische Einstellungen je Tag (Schriftfamilie, Schriftgröße, Farbe, Hintergrund bei `h1`, `p`, `blockquote` und anderen Block-Tags) verwenden Sie die Konfigurationseigenschaft [`defaultStyles`](api/config/default-styles.md) mit passenden CSS-Regeln. Das vollständige Muster finden Sie im [Konfigurationshandbuch](guides/configuration.md#configure-default-styles). +::: + +## Live-Demo {#live-demo} + +Das folgende Beispiel wendet einen benutzerdefinierten Stil auf RichText an: + + + +**Verwandte Artikel:** [Konfiguration](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..f844286 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/typescript_support.md @@ -0,0 +1,38 @@ +--- +sidebar_label: TypeScript-Unterstützung +title: TypeScript-Unterstützung +description: Sie können in der Dokumentation erfahren, wie Sie TypeScript mit der DHTMLX JavaScript RichText-Bibliothek verwenden. Entdecken Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Code-Beispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# TypeScript-Unterstützung {#typescript-support} + +Seit v2.0 wird DHTMLX RichText mit integrierten TypeScript-Definitionen ausgeliefert, die keine zusätzliche Einrichtung erfordern. + +:::note[Hinweis] +Probieren Sie den Editor im Snippet Tool aus. +::: + +## Vorteile von TypeScript {#advantages-of-typescript} + +TypeScript mit DHTMLX RichText bietet Ihnen: + +- Typsicherheit — der Compiler erkennt eine fehlerhafte Verwendung von Konfigurationseigenschaften und Methodenargumenten bereits zur Build-Zeit +- Autovervollständigung — Ihre IDE schlägt beim Tippen gültige Eigenschaftsnamen, Methodensignaturen und Wertetypen vor +- selbstdokumentierende API — Typannotationen am Konfigurationsobjekt und an Methoden dienen gleichzeitig als Inline-Dokumentation + +## RichText in TypeScript initialisieren {#initialize-richtext-in-typescript} + +Das folgende Beispiel initialisiert RichText in TypeScript mit Autovervollständigung aus den mitgelieferten Typdefinitionen: + +~~~ts +import { Richtext } from "@dhx/richtext"; + +const editor = new Richtext("#root", { + menubar: true, + layoutMode: "document" +}); +~~~ + +## API-Typen referenzieren {#reference-api-types} + +Die TypeScript-Signaturen aller Konfigurationseigenschaften finden Sie in der [Eigenschaften-Übersicht](api/overview/properties_overview.md). Methodensignaturen finden Sie in der [Methoden-Übersicht](api/overview/methods_overview.md). diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/working_with_server.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/working_with_server.md new file mode 100644 index 0000000..447e113 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/working_with_server.md @@ -0,0 +1,121 @@ +--- +sidebar_label: Arbeiten mit dem Server +title: Arbeiten mit dem Server +description: Erfahren Sie, wie RichText mit einem Backend für Bild-Uploads kommuniziert, einschließlich des Request/Response-Vertrags und wie Sie Ihren eigenen Server einbinden. Durchsuchen Sie Entwickler-Guides und API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# Arbeiten mit dem Server {#working-with-the-server} + +RichText läuft vollständig im Browser und benötigt kein Backend zum Bearbeiten oder Speichern von Inhalten. Ihre Anwendung kann den Inhalt des Editors frei speichern, wo immer sie möchte. Die einzige Funktion, die von einem Server profitiert, ist der **Bild-Upload**: Wenn ein Benutzer ein Bild in das Dokument einfügt, kann RichText die Datei entweder inline in den Inhalt einbetten oder an einen HTTP-Endpunkt senden und einen Link darauf speichern. + +Dieser Guide erklärt: + +- was standardmäßig passiert, wenn kein Upload-Server konfiguriert ist +- den genauen HTTP-Vertrag, den der Server implementieren muss +- wie RichText die vom Server zurückgegebene URL verwendet +- wie Sie die Funktion mit dem Demo-Backend ausprobieren können + +## Standardverhalten: Inline-Bilder {#default-behavior-inline-images} + +Wenn Sie die Eigenschaft [`imageUploadUrl`](api/config/image-upload-url.md) nicht setzen, fällt RichText auf Inline-Bilder zurück. Wenn der Benutzer ein Bild einfügt, liest RichText die Datei im Browser, kodiert die Originaldatei als `data:image/...;base64,...`-URL und schreibt diese direkt als `src` des ``-Elements in den Editor-Inhalt. RichText begrenzt die angezeigte Größe über die Attribute `width`/`height` auf einen 1024×800-Bereich, aber die eingebetteten Bytes sind die originale Datei in voller Auflösung — der Client skaliert oder kodiert sie nicht um. + +Dies funktioniert ohne jedes Backend und ist praktisch für schnelle Demos, hat aber klare Einschränkungen: + +- die kodierten Bytes leben im Dokument, daher wächst das gespeicherte HTML mit jedem Bild +- dasselbe Bild in zwei Dokumenten wird zweimal gespeichert — es gibt keine gemeinsame Ressource zur Deduplizierung +- da die Bytes keine separate Ressource sind, kann der Server sie weder über ein CDN ausliefern noch nachbearbeiten (skalieren, umkodieren, scannen) +- Inline-Bilder werden durch den integrierten DOCX/PDF-[Export](api/events/export.md) nicht erhalten — wenn Sie auf den Export angewiesen sind, konfigurieren Sie einen Upload-Server, damit Bilder auf eine externe URL verweisen + +## Eigenen Server schreiben {#write-your-own-server} + +Verweisen Sie RichText in Produktionsanwendungen mit [`imageUploadUrl`](api/config/image-upload-url.md) auf einen Server: + +~~~jsx {2} +new richtext.Richtext("#root", { + imageUploadUrl: "https://example.com/upload" + // andere Konfigurationseigenschaften +}); +~~~ + +Ein minimaler Upload-Endpunkt muss: + +1. Einen `multipart/form-data`-POST mit einem Dateifeld namens `upload` akzeptieren. +2. Die Datei validieren (erlaubte Typen, maximale Größe). +3. Die Datei an einem Ort speichern, von dem der Browser des Benutzers sie abrufen kann (eine über HTTP bereitgestellte lokale Festplatte, S3, ein CDN usw.). +4. Das Bild optional skalieren oder anderweitig verarbeiten. +5. Mit einem JSON-Objekt antworten, das `status: "server"` enthält, `value` auf die öffentliche URL der gespeicherten Datei setzt sowie die `width` und `height` des Bildes in Pixeln. + +### Was der Client sendet {#what-the-client-sends} + +Wenn [`imageUploadUrl`](api/config/image-upload-url.md) gesetzt ist, sendet RichText die ausgewählte Datei direkt an diese URL (ohne `/images` oder einen anderen Pfad anzuhängen), sodass die übergebene URL das vollständige POST-Ziel ist. + +Die Anfrage verwendet einen Standard-HTML-Formular-Upload: + +- **Methode:** `POST` +- **Content-Type:** `multipart/form-data` +- **Body:** ein Dateifeld namens `upload` + +### Was der Client zurückerwartet {#what-the-client-expects-back} + +Der Server muss mit einem JSON-Objekt antworten. RichText liest die folgenden Felder: + +| Feld | Typ | Bedeutung | +| -------- | ------- | ------------------------------------------------------------------------- | +| `status` | string | Erfolgsmarkierung — geben Sie `"server"` bei einem erfolgreichen Upload zurück. Der Uploader verwendet dieses Feld, um einen abgeschlossenen Upload von einem fehlgeschlagenen zu unterscheiden; jeder andere Wert (zum Beispiel `"error"`) markiert den Upload als fehlgeschlagen. Das eingefügte Bild selbst wird aus `value`, `width` und `height` erstellt. | +| `value` | string | URL des gespeicherten Bildes. RichText schreibt diese Zeichenkette unverändert als `src` des eingefügten `` in das Dokument. | +| `width` | integer | Breite des eingefügten Bildes in Pixeln. | +| `height` | integer | Höhe des eingefügten Bildes in Pixeln. | + +#### Erfolgreiche Antwort {#successful-response} + +Ein erfolgreicher Upload gibt die gespeicherte Bild-URL und ihre Abmessungen zurück: + +~~~json +{ + "status": "server", + "value": "https://cdn.example.com/uploads/abc123.png", + "width": 320, + "height": 207 +} +~~~ + +#### Fehlgeschlagener Upload {#failed-upload} + +Ein fehlgeschlagener Upload gibt einen anderen Status als `"server"` zurück: + +~~~json +{ + "status": "error" +} +~~~ + +### Hochgeladenes Bild bereitstellen {#serve-the-uploaded-image} + +Die `value`-URL ist die einzige Verbindung zwischen dem Upload und jedem späteren Lesen des Dokuments. RichText fügt die URL direkt in das Dokument ein, sodass jeder Client, der den gespeicherten Inhalt öffnet (der Editor selbst, ein Export, eine veröffentlichte Seite), das Bild über ein einfaches `GET` von dieser URL abruft. + +Das bedeutet: + +- die URL muss vom Browser des Benutzers erreichbar sein, was in der Regel bedeutet, dass sie **absolut** sein muss +- der Host kann sich vom Upload-Endpunkt unterscheiden (zum Beispiel können Sie Uploads auf Ihrem eigenen Server akzeptieren und eine CDN- oder Object-Storage-URL zurückgeben) +- wenn sich der Bild-Host auf einem anderen Origin befindet, stellen Sie sicher, dass er dem Browser das Laden des Bildes erlaubt (CORS oder einfach öffentlicher Lesezugriff) +- der Server muss diese URL so lange verfügbar halten, wie Dokumente auf sie verweisen; RichText speichert die Bytes nicht zwischen und kopiert sie nicht + +Das URL-Layout selbst ist **nicht** Teil des Vertrags. Solange der Browser die URL per `GET` abrufen und Bild-Bytes empfangen kann, sind Pfad, Query-String und sogar das Schema vollständig dem Backend überlassen. + +### Mit dem Demo-Server ausprobieren {#try-it-against-the-demo-server} + +Ein funktionierendes Backend, das diesen Vertrag implementiert, steht zum Testen der Funktion zur Verfügung: + +~~~jsx +new richtext.Richtext("#root", { + imageUploadUrl: "https://docs.dhtmlx.com/richtext-backend/images" + // andere Konfigurationseigenschaften +}); +~~~ + +Der Demo-Server skaliert große Bilder, speichert sie auf der Festplatte und gibt URLs zurück, die er selbst ausliefert. Er ist nur für die Evaluierung und Demos gedacht. Verwenden Sie ihn nicht für Produktions-Editoren. + +**Verwandte Artikel:** + +- [Konfiguration](guides/configuration.md) +- [`imageUploadUrl`](api/config/image-upload-url.md) 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..562f81f --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/how_to_start.md @@ -0,0 +1,109 @@ +--- +sidebar_label: Erste Schritte +title: Erste Schritte +description: Erfahren Sie, wie Sie mit DHTMLX RichText arbeiten – in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek. Lesen Sie Entwicklerhandbücher und API-Referenzen, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# Erste Schritte {#how-to-start} + +Dieses klare und umfassende Tutorial führt Sie durch die Schritte, die erforderlich sind, um einen voll funktionsfähigen RichText auf einer Seite einzurichten. + +
+![DHTMLX RichText WYSIWYG-Editor auf einer Webseite](/img/richtext/classic_mode.png) +
+ +## Schritt 1. Quelldateien einbinden {#step-1-including-source-files} + +Erstellen Sie zunächst eine HTML-Datei und nennen Sie sie *index.html*. Binden Sie dann die RichText-Quelldateien in die erstellte Datei ein. + +Es werden zwei Dateien benötigt: + +- die JS-Datei von RichText +- die CSS-Datei von RichText + +~~~html {5-6} title="index.html" + + + + How to Start with RichText + + + + + + + +~~~ + +### RichText über npm oder yarn installieren {#installing-richtext-via-npm-or-yarn} + +Sie können JavaScript RichText mithilfe des Paketmanagers **yarn** oder **npm** in Ihr Projekt importieren. + +#### Testversion von RichText über npm oder yarn installieren {#installing-trial-richtext-via-npm-or-yarn} + +:::info[Info] +Wenn Sie die Testversion von RichText verwenden möchten, laden Sie das [**RichText-Testpaket**](https://dhtmlx.com/docs/products/dhtmlxRichtext/download.shtml) herunter und befolgen Sie die im *README*-File beschriebenen Schritte. Beachten Sie, dass die Testversion von RichText nur 30 Tage lang verfügbar ist. +::: + +#### PRO-Version von RichText über npm oder yarn installieren {#installing-pro-richtext-via-npm-or-yarn} + +:::info[Info] +Sie können direkt im [Kundenbereich](https://dhtmlx.com/clients/) auf das private DHTMLX-**npm** zugreifen, indem Sie Ihren Login und Ihr Passwort für **npm** generieren. Eine detaillierte Installationsanleitung ist ebenfalls dort verfügbar. Bitte beachten Sie, dass der Zugang zum privaten **npm** nur aktiv ist, solange Ihre proprietäre RichText-Lizenz gültig ist. +::: + +## Schritt 2. RichText erstellen {#step-2-creating-richtext} + +Jetzt können Sie RichText zur Seite hinzufügen. Erstellen Sie zunächst den `
`-Container für RichText. Gehen Sie dazu wie folgt vor: + +- Definieren Sie einen DIV-Container in der Datei *index.html* +- Initialisieren Sie RichText mithilfe des Konstruktors `richtext.Richtext` + +Der Konstruktor nimmt als Parameter einen gültigen CSS-Selektor des HTML-Containers, in den RichText eingefügt wird, sowie die entsprechenden Konfigurationsobjekte entgegen. + +~~~html {9,12-14} title="index.html" + + + + How to Start with RichText + + + + +
+ + + + +~~~ + +## Schritt 3. RichText konfigurieren {#step-3-configuring-richtext} + +Als Nächstes können Sie Konfigurationseigenschaften festlegen, die die RichText-Komponente bei der Initialisierung haben soll. + +Um mit RichText arbeiten zu können, müssen Sie zunächst die initialen Daten für den Editor über die Eigenschaft [`value`](api/config/value.md) bereitstellen. Darüber hinaus können Sie die [`menubar`](api/config/menubar.md) aktivieren, die [`toolbar`](api/config/toolbar.md) anpassen, den [**Vollbildmodus**](api/config/fullscreen-mode.md) und den [**Layout-Modus**](api/config/layout-mode.md) festlegen, eine neue [`locale`](api/config/locale.md) sowie [**Standardstile**](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" + }, + // weitere Einstellungen + } +}); +~~~ + +## Wie geht es weiter {#whats-next} + +Das war es schon. Nur drei einfache Schritte, und Sie verfügen über ein praktisches Werkzeug zur Bearbeitung von Inhalten. Jetzt können Sie mit Ihren Inhalten arbeiten oder die Welt von JavaScript RichText weiter erkunden. 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..fd0a302 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/index.md @@ -0,0 +1,176 @@ +--- +sidebar_label: RichText-Übersicht +title: RichText-Übersicht +slug: / +description: Hier finden Sie eine Übersicht der DHTMLX JavaScript RichText-Bibliothek. Durchsuchen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-tägige Testversion von DHTMLX RichText herunter. +--- + +# RichText-Übersicht {#richtext-overview} + +**DHTMLX RichText** ist ein flexibler und schlanker WYSIWYG-Editor, der mit JavaScript entwickelt wurde. RichText wurde entwickelt, um ein nahtloses Bearbeitungserlebnis in modernen Webanwendungen zu bieten, und zeichnet sich durch eine übersichtliche Benutzeroberfläche, umfangreiche Formatierungsmöglichkeiten und vollständige Kontrolle über das Inhalts-Rendering aus. Ob Sie ein CMS, ein internes Administrationswerkzeug oder einen eingebetteten Dokumenten-Editor erstellen – RichText lässt sich problemlos integrieren und an Ihre Anforderungen anpassen. + +Die **DHTMLX RichText**-Komponente bietet folgende Funktionen: + +- Zwei [**Layout-Modi**](api/config/layout-mode.md) + +- Inhaltsserialisierung in HTML, Klartext und Markdown + +- Konfigurierbare [`toolbar`](api/config/toolbar.md) mit integrierten und benutzerdefinierten Schaltflächen + +- Statische [`menubar`](api/config/menubar.md), die ein- oder ausgeblendet werden kann + +- Bild-Upload mit optionalem Server-[Upload](api/config/image-upload-url.md) oder eingebetteter Base64-Kodierung, umfangreiche Formatierung, benutzerdefinierte Gestaltung und Vollbildmodus + +- [Vollständiger API-Zugriff](api/overview/main_overview.md) für [Event-Handling](api/overview/event_bus_methods_overview.md), [Inhaltsbearbeitung](api/overview/methods_overview.md) und [reaktives Zustandsmanagement](api/overview/state_methods_overview.md) + +RichText ist Framework-unabhängig und lässt sich problemlos in die Frameworks [React](guides/integration_with_react.md), [Angular](guides/integration_with_angular.md), [Vue](guides/integration_with_vue.md) und [Svelte](guides/integration_with_svelte.md) integrieren, was es für ein breites Spektrum von Front-End-Ökosystemen geeignet macht. + +Diese Dokumentation bietet detaillierte Anleitungen zu Installation, Konfiguration, Verwendung und Anpassung. Sie finden Beispiele für gängige Szenarien, [vollständige API-Referenzen](api/overview/main_overview.md) und Best Practices für die Einbettung von RichText in Ihre Anwendung. + +## RichText-Struktur {#richtext-structure} + +### Menüleiste {#menubar} + +Die RichText-Menüleiste bietet Zugriff auf Bearbeitungsaktionen wie das Erstellen eines neuen Dokuments, Drucken, Importieren/Exportieren von Inhalten und mehr. Sie ist standardmäßig ausgeblendet. + +Verwenden Sie die Eigenschaft [`menubar`](api/config/menubar.md), um die Sichtbarkeit umzuschalten. Die Menüleiste kann zwar aktiviert oder deaktiviert werden, ihr Inhalt ist jedoch derzeit nicht konfigurierbar. + +
+![DHTMLX RichText-Menüleiste mit Dokument- und Dateiaktionen](/img/richtext/menubar.png) +
+ +### Toolbar {#toolbar} + +Die RichText-Toolbar bietet schnellen Zugriff auf Textformatierungs- und Strukturbearbeitungsfunktionen. Standardmäßig ist die [Toolbar](api/config/toolbar.md#default-config) aktiviert und zeigt einen vordefinierten Satz häufig verwendeter Steuerelemente an, wie Fett, Kursiv, Schriftarteinstellungen, Listenformatierung und mehr. + +Die Eigenschaft [`toolbar`](api/config/toolbar.md) ermöglicht es Ihnen, den Inhalt und das Layout der Toolbar vollständig anzupassen. Sie können die Toolbar aktivieren oder deaktivieren, Standard-Steuerelemente neu anordnen oder eine vollständig benutzerdefinierte Toolbar mit einem Array aus vordefinierten Schaltflächen-IDs und benutzerdefinierten Schaltflächen-Objekten definieren. + +
+![DHTMLX RichText-Symbolleiste mit Steuerelementen zur Textformatierung](/img/richtext/toolbar.png) +
+ +### Editor {#editor} + +Der RichText-Editor ist der zentrale Bereich, in dem Benutzer Inhalte erstellen und formatieren. Sie können das Erscheinungsbild und das Verhalten des Editors über Konfigurationsoptionen wie [`value`](api/config/value.md), [`layoutMode`](api/config/layout-mode.md) und [`defaultStyles`](api/config/default-styles.md) steuern. RichText unterstützt außerdem benutzerdefinierte Gestaltung, Bild-Einbettung und responsive Layout-Anpassungen, um den Anforderungen Ihrer Anwendung gerecht zu werden. + +#### Zwei Arbeitsmodi {#two-working-modes} + +DHTMLX RichText kann mit Inhalten im „Klassisch"- und „Dokument"-Modus arbeiten. Sie können den am besten geeigneten Modus wählen, um beim Bearbeiten von Text komfortabel zu arbeiten. Verwenden Sie die Eigenschaft [`layoutMode`](api/config/layout-mode.md), um den Modus programmatisch zu wechseln. + +- `"classic"` + +
+![DHTMLX RichText-Editor im klassischen Layout-Modus](/img/richtext/classic_mode.png) +
+ +- `"document"` + +
+![DHTMLX RichText-Editor im Dokumentmodus](/img/richtext/document_mode.png) +
+ +## Unterstützte Formate {#supported-formats} + +Der RichText-Editor unterstützt das [Einlesen](api/methods/set-value.md) und die [Serialisierung](api/methods/get-value.md) von Inhalten in den Formaten **HTML**, **Klartext** und **Markdown**. + +#### HTML-Format {#html-format} + +
+![DHTMLX RichText-Inhalt serialisiert im HTML-Format](/img/richtext/html_format.png) +
+ +#### Textformat {#text-format} + +
+![DHTMLX RichText-Inhalt serialisiert als reiner Text](/img/richtext/text_format.png) +
+ +#### Markdown-Format {#markdown-format} + +Übergeben Sie die integrierten `markdown`-Encoder an [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md), um Inhalte als Markdown zu laden oder zu serialisieren: + +~~~jsx +const editor = new richtext.Richtext("#root", { + value: "Hello world" + // weitere Konfigurationseigenschaften +}); + +// Markdown in den Editor laden +editor.setValue("# Title\n\nParagraph", richtext.markdown.fromMarkdown); + +// Editor-Inhalt als Markdown lesen +const md = editor.getValue(richtext.markdown.toMarkdown); +~~~ + +:::note[Hinweis] +Die Markdown-Unterstützung deckt eine begrenzte Teilmenge der Syntax ab – gängige Block- und Inline-Elemente wie Überschriften, Absätze, Zeilenumbrüche, Betonung, Blockzitate, Listen und Links. Formatierungen ohne Markdown-Entsprechung (Schriftfamilie, Schriftgröße, Farben, Ausrichtung, Zeilenhöhe) gehen bei der Serialisierung verloren. + +Verschachtelte Inline-Strukturen werden nicht unterstützt, mit der einzigen Ausnahme von **Fett innerhalb von Kursiv**. Kombinationen wie Fett innerhalb eines Links, Kursiv innerhalb eines Listenelements oder mehrstufige (verschachtelte) Listen werden nicht korrekt dargestellt. +::: + +## Kopieren und Einfügen {#copy-and-paste} + +Der RichText-Editor unterstützt Zwischenablage-Operationen über Standard-Systemkürzel (`Ctrl+C` / `Ctrl+X` / `Ctrl+V` unter Windows/Linux, `⌘+C` / `⌘+X` / `⌘+V` unter macOS), die entsprechenden [Toolbar](api/config/toolbar.md)-Schaltflächen und die Einträge der [Menüleiste](api/config/menubar.md). + +Wenn Inhalt kopiert oder ausgeschnitten wird, schreibt RichText zwei Darstellungen in die Systemzwischenablage: + +- eine **Klartext**-Version für die Kompatibilität mit einfachen Zielen (Terminals, Code-Editoren, einfache Eingabefelder) +- eine **HTML**-Version, die alle Inline- und Block-Formatierungen enthält (Fett, Kursiv, Unterstrichen, Durchgestrichen, Schriftfamilie, Schriftgröße, Text- und Hintergrundfarbe, Überschriften, Blockzitate, Listen, Ausrichtung, Einrückung, Zeilenhöhe, Links und Bilder) + +Das Einfügeverhalten hängt von der Quelle des Zwischenablage-Inhalts ab: + +- Beim Einfügen zwischen zwei RichText-Instanzen (im selben Dokument oder auf verschiedenen Seiten) wird die HTML-Darstellung verwendet und die ursprüngliche Formatierung beibehalten. +- Beim Einfügen aus einer externen Quelle – einschließlich Browsern, Textverarbeitungsprogrammen und anderen Editoren – wird der Inhalt als Klartext verarbeitet. Der eingefügte Inhalt wird ohne externe Formatierung als Text hinzugefügt. + +:::note[Hinweis] +Die **Einfügen**-Schaltfläche in der Toolbar verwendet die asynchrone Clipboard API, die nur Klartext bereitstellt. Um Inhalte, die aus einem anderen RichText kopiert wurden, mit erhaltener Formatierung einzufügen, verwenden Sie das Tastaturkürzel `Ctrl+V` / `⌘+V`, das die vollständige HTML-Nutzlast direkt vom Clipboard-Event des Browsers empfängt. +::: + +## Tastaturkürzel {#keyboard-shortcuts} + +Der RichText-Editor unterstützt eine Reihe gängiger Tastaturkürzel für schnellere Formatierung und Bearbeitung. Die Kürzel folgen Plattformkonventionen und sind sowohl unter **Windows/Linux** (`Ctrl`) als auch unter **macOS** (`⌘`) verfügbar. + +### Textformatierung {#text-formatting} + +| Aktion | Windows/Linux | macOS | +|-----------------|-----------------|---------------| +| Fett* | `Ctrl+B` | `⌘B` | +| Kursiv | `Ctrl+I` | `⌘I` | +| Unterstrichen | `Ctrl+U` | `⌘U` | +| Durchgestrichen | `Ctrl+Shift+X` | `⌘⇧X` | + +### Bearbeitung {#editing} + +| 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` | +| Wort löschen | `Ctrl+Backspace` / `Ctrl+Delete` | `⌥⌫` / `⌥⌦` | +| Zeile löschen | — | `⌘⌫` / `⌘⌦` | + +### Einrückung {#indentation} + +| Aktion | Windows/Linux | macOS | +|-------------------------------|---------------|-------| +| Block einrücken / Liste verschachteln | `Tab` | `⇥` | +| Block ausrücken / Liste anheben | `Shift+Tab` | `⇧⇥` | + +### Sonderaktionen {#special-actions} + +| Aktion | Windows/Linux | macOS | +|---------------|---------------|-------| +| Link einfügen | `Ctrl+K` | `⌘K` | +| Drucken | `Ctrl+P` | `⌘P` | + +:::info[Info] +In zukünftigen Updates können weitere Tastaturkürzel hinzugefügt werden. +::: + +Um die aktuelle Referenz zu den RichText-Tastaturkürzeln zu erhalten, drücken Sie **Hilfe** und wählen Sie die Option **Tastaturkürzel**: + +
+![DHTMLX RichText-Fenster mit der Referenz der Tastaturkürzel](/img/richtext/shortcut_reference.png) +
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..991fa2f --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/news/migration.md @@ -0,0 +1,167 @@ +--- +sidebar_label: Migration auf neuere Versionen +title: Migration auf neuere Versionen +description: Sie können sich in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek über die Migration auf neuere Versionen informieren. Durchsuchen Sie Entwicklerleitfäden und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# Migration auf neuere Versionen {#migration-to-newer-versions} + +## 1.2 -> 2.0 {#12---20} + +### Migration der Eigenschaften {#properties-migration} + +| Veraltete Eigenschaft | Ersetzt durch | Hinweise | +| --------------------- | ------------------------- | ----------------------------------------------------- | +| `customStats` | *(Entfernt)* | Nicht verfügbar in der neuen Version 2.0 | +| `toolbarBlocks` | `toolbar` | Unterstützt jetzt eine detaillierte Toolbar-Struktur | +| `defaultStyles` | `defaultStyles` (aktualisiert) | Struktur ist jetzt block- und CSS-basiert | +| `mode` | `layoutMode` | Ersetzt durch eine striktere Enum-basierte Einstellung | + +### - `customStats` {#--customstats} + +Die Eigenschaft `customStats` wurde entfernt. Die aktuelle Version von RichText unterstützt die Anzeige benutzerdefinierter Statistiken (z. B. Zeichenanzahl, Wortanzahl, Satzanzahl) nicht mehr. + +Wenn Sie Textmetriken weiterhin berechnen müssen, können Sie dies extern tun, indem Sie auf den Editor-Inhalt zugreifen und ihn manuell verarbeiten: + +```jsx +const content = editor.getValue(); +const wordCount = content.split(/\s+/).length; +``` + +### - `toolbarBlocks` → [`toolbar`](api/config/toolbar.md) {#--toolbarblocks--toolbar} + +Vor **2.0** konnten Benutzer nur Blöcke mit Steuerelementen angeben +```jsx{2} title="Before 2.0" +new dhx.RichText("#root", { + toolbarBlocks: ["undo", "style", "decoration", "colors", "align", "link"] +}); +``` + +Ab **2.0** können Benutzer einzelne Steuerelemente angeben +```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) {#--defaultstyles} + +Vor **2.0** konnten Benutzer Standardwerte für Toolbar-Auswahlsteuerelemente definieren +```jsx title="Before 2.0" +defaultStyles: { + "font-family": "Tahoma", + "font-size": "14px" +} +``` + +Ab **2.0** können Benutzer Standard-Style-Werte für bestimmte Blocktypen angeben +```jsx title="From 2.0" +defaultStyles: { + "*": { + "font-family": "Tahoma", + "font-size": "14px" + }, + h1: { + "font-size": "32px", + "color": "#333" + } +} +``` + +:::note[Hinweis] +Verwenden Sie `*`, um Basis-Standardwerte für alle Blöcke zu definieren, und überschreiben Sie dann bestimmte Elemente (p, h1, blockquote usw.). +::: + +### - `mode` → [`layoutMode`](api/config/layout-mode.md) {#--mode--layoutmode} + +```jsx{2} title="Before 2.0" +new dhx.RichText("#root", { + mode: "document" +}); +``` + +```jsx{2} title="From 2.0" +new Richtext("#root", { + layoutMode: "document" // oder "classic" +}); +``` + +Der neue [`layoutMode`](api/config/layout-mode.md) unterstützt ausschließlich die Werte `"classic"` und `"document"`. + +### Migration der Methoden {#methods-migration} + +| Veraltete Methode | Neues Äquivalent | Hinweise | +| ----------------------- | ------------------------------------ | --------------------------------------------------------------------- | +| `getValue(mode)` | `getValue(encoder)` | Encoder ersetzen String-Modi; separater Import für Encoder erforderlich | +| `setValue(value, mode)` | `setValue(value, encoder)` | Encoder ersetzen String-Modi; separater Import für Encoder erforderlich | +| `getStats()` | *Entfernt* | Kein Ersatz; manuelle Logik erforderlich | +| `getEditorAPI()` | *Entfernt* | Intern; stattdessen die öffentliche API verwenden | +| `fire()` | *Entfernt* | Ersetzt durch `exec()` und `intercept()` | +| `on()`, `detach()` | ✅ Beibehalten (`api.on`, `api.detach`) | Jetzt über `richtext.api` zugänglich | +| `fullScreen()` | *Entfernt* | Konfig-Eigenschaft `fullscreenMode` verwenden | +| `exitFullScreen()` | *Entfernt* | Konfig-Eigenschaft `fullscreenMode` verwenden | +| `paint()` | *Entfernt* | Nicht mehr benötigt | +| `destructor()` | ✅ Weiterhin verfügbar | Unverändert | +| `setConfig()` | ✅ Neu | Ermöglicht Live-Konfigurations-Updates | +| `setLocale()` | ✅ Neu | Ermöglicht dynamisches Wechseln der Locale | +| `getReactiveState()` | ✅ Neu | Ermöglicht reaktives Zustandstracking | +| `getState()` | ✅ Neu | Liefert den aktuellen statischen Konfigurationszustand | +| `intercept()` | ✅ Neu | Interne Aktionen abfangen | +| `exec()` | ✅ Neu | Interne Aktionen ausführen | + +### - [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md) {#--setvalue--getvalue} + +```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[Hinweis] +Sie können `getValue()` und `setValue()` weiterhin ohne Encoder aufrufen — HTML wird standardmäßig verwendet +::: + +### - [`on`](api/internal/on.md) / [`detach`](api/internal/detach.md) {#--on--detach} + +```jsx title="Before 2.0" +editor.events.on("Change", function(action, canUndo, canRedo){ + // Ihr Code hier +}); + +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) und [`intercept()`](api/internal/intercept.md) verwenden {#--fire--use-exec-and-intercept} + +```jsx title="Before 2.0" +editor.events.fire("some-event", [data]); +``` + +```jsx title="From 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..baf08a2 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/news/whats_new.md @@ -0,0 +1,256 @@ +--- +sidebar_label: Was ist neu +title: Was ist neu +description: Entdecken Sie die Neuigkeiten in DHTMLX RichText und die Versionshistorie in der Dokumentation der DHTMLX JavaScript-UI-Bibliothek. Lesen Sie Entwickleranleitungen und API-Referenzen, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +## Version 2.1 {#version-21} + +Veröffentlicht am 22. Juni 2026 + +### Neue Funktionalität {#new-functionality} + +- Die [`imageUploadUrl`](api/config/image-upload-url.md) ist optional: Wird sie weggelassen, werden Bilder inline als Base64-Daten-URLs eingefügt, ohne dass ein Server erforderlich ist +- Drag-and-Drop-Bildeinfügung: Ziehen Sie eine Bilddatei direkt in den Editor-Bereich +- Markdown-Unterstützung: Inhalte des Editors als Markdown über den `markdown`-Encoder in den Methoden [`setValue()`](api/methods/set-value.md), [`getValue()`](api/methods/get-value.md) und [`insertValue()`](api/methods/insert-value.md) einlesen und ausgeben (siehe das Beispiel [RichText. Arbeiten mit verschiedenen Formaten (Markdown, HTML, Text)](https://snippet.dhtmlx.com/cne4kujn?tag=richtext)) +- Erwähnungen, Tags und benutzerdefinierte Dropdown-Trigger über die Eigenschaft [`triggers`](api/config/triggers.md): Geben Sie ein Zeichen wie `@`, `#`, `/` oder `:` ein, um ein Vorschlags-Dropdown zu öffnen und das ausgewählte Element als nicht bearbeitbares Token einzufügen (siehe Anleitung [Erwähnungen und Tags](guides/mentions_and_tags.md) und das Beispiel [RichText. Erwähnungen, Tags und asynchrone Suche](https://snippet.dhtmlx.com/nfvvfize?tag=richtext)) +- Benutzerdefinierte Darstellung von Vorschlagselementen über die Eigenschaft [`triggerTemplate`](api/config/trigger-template.md) (zum Beispiel ein Avatar mit Name und E-Mail-Adresse) (siehe das Beispiel [RichText. Benutzerdefinierte Dropdown-Vorlage pro Trigger](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext)) +- Benutzerdefinierte Aktion bei der Auswahl eines Triggers: Führen Sie eigenen Code aus (ein Emoji einfügen, einen Slash-Befehl ausführen und mehr), anstatt ein Token einzufügen (siehe die Beispiele [RichText. Emoji-Autovervollständigung](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) und [RichText. Slash-Befehle](https://snippet.dhtmlx.com/e0mrmyam?tag=richtext)) +- Zwischenablagen-Unterstützung (Kopieren, Ausschneiden und Einfügen), die die Formatierung zwischen RichText-Instanzen beibehält und externen Inhalt als Klartext einfügt +- Tastenkürzel zum Löschen auf Wort- und Zeilenebene: vorheriges/nächstes Wort löschen mit `Ctrl+Backspace` / `Ctrl+Delete` (Windows/Linux) oder `Opt+Backspace` / `Opt+Delete` (macOS); vorherige/nächste visuelle Zeile löschen mit `Cmd+Backspace` / `Cmd+Delete` (nur macOS) +- Neue Tastenkürzel zum Ändern der Blockeinrückung: die Einrückung eines Blocks mit `Tab` vergrößern und mit `Shift+Tab` verringern; in Listen verschachteln dieselben Tasten Elemente oder heben sie an + +### Neue API {#new-api} + +#### Neue Eigenschaften {#new-properties} + +- [`triggers`](api/config/triggers.md) — Definiert Dropdown-Trigger für das Einfügen von Erwähnungen, Tags und anderen Tokens +- [`triggerTemplate`](api/config/trigger-template.md) — Passt die Darstellung von Elementen im Vorschlags-Dropdown an + +#### Neue Methoden {#new-methods} + +- [`insertValue()`](api/methods/insert-value.md) — Fügt Text-, Markdown- oder HTML-Inhalt an der Cursorposition ein oder ersetzt den ausgewählten Text (siehe das Beispiel [RichText. Inhalt an Cursorposition einfügen](https://snippet.dhtmlx.com/pew2g1ku?tag=richtext)) + +#### Neue Events {#new-events} + +- [`show-suggest`](api/events/show-suggest.md) — Wird ausgelöst, wenn das Vorschlags-Dropdown für einen konfigurierten Trigger geöffnet wird +- [`insert-token`](api/events/insert-token.md) — Wird ausgelöst, nachdem der Benutzer ein Vorschlagselement im Dropdown auswählt und RichText es als Token einfügt +- [`hide-suggest`](api/events/hide-suggest.md) — Wird ausgelöst, wenn das Vorschlags-Dropdown geschlossen wird + +### Fehlerbehebungen {#fixes} + +- Probleme beim Einfügen von Inline-Inhalten (einschließlich Inhalten innerhalb oder neben Inline-Elementen wie Erwähnungen und Bildern) +- Das Ablegen eines Bildes auf sich selbst löst einen Fehler aus + +## Version 2.0.6 {#version-206} + +Veröffentlicht am 28. Mai 2026 + +### Neue Funktionalität {#new-functionality-206} + +- Kontextbewusste OL/UL-Symbolleistenschaltflächen, die Listen basierend auf der Auswahl umschalten oder konvertieren +- Ändern der Listenverschachtelungsebene mit den Schaltflächen **Einzug** und **Ausrücken** +- Beenden einer Liste oder Verringern der Verschachtelung durch Drücken von Enter in einem leeren Listenelement +- Eigene Farbe für besuchte Links + +### Neue API {#new-api-206} + +#### Neue Events {#new-events-206} + +- [`toggle-list`](api/events/toggle-list.md) — Wird ausgelöst, wenn ein Benutzer eine Liste für die ausgewählten Blöcke umschaltet + +### Fehlerbehebungen {#fixes-206} + +- Falsche horizontale Ausrichtung von Listenmarkierungen +- Inkonsistenter Abstand zwischen nummerierten und nicht nummerierten Listen +- Formatierung löschen entfernt keine Eigenschaften auf Blockebene +- Falsche Gestaltung von Überschriften und Blockzitaten innerhalb von Listenelementen +- Unerwünschtes Eingabeelement in horizontalen Linien sichtbar +- Der Editor friert ein, wenn eine horizontale Linie in der Mitte oder am Ende einer Liste eingefügt wird + +## Version 2.0.5 {#version-205} + +Veröffentlicht am 6. März 2026 + +### Fehlerbehebungen {#fixes-205} + +- IME-Eingabe wird nicht korrekt verarbeitet +- Kompositionsbasierte Eingabe (z. B. Chinesisch, Japanisch, Koreanisch auf dem Desktop) wird nicht korrekt verarbeitet +- Die Eigenschaften `margin-left` und `line-height` werden beim HTML-Parsing ignoriert +- Inline-Elemente erben Eigenschaften von übergeordneten Elementen auf Blockebene +- Text zwischen zwei Editor-Instanzen kann nicht kopiert werden +- Die Auswahl wird bei zwei (oder mehr) aktiven Editor-Instanzen falsch verarbeitet +- Der Cursor wird falsch positioniert, wenn der einzige Inhalt im Absatz ein Bild ist +- Endloses Umbrechen von Tief- und Hochstellungselementen +- Beim Einfügen von Bildern werden diese inline eingefügt, anstatt sie zuerst hochzuladen +- Leere Inline-Blöcke können an bestimmten Positionen (erste oder letzte Zeile) nicht entfernt werden +- Der Editor scrollt beim Tippen nicht zum Cursor +- Eingabe auf Android wird nicht korrekt verarbeitet +- Falsche Auswahlbehandlung für HR-Elemente +- Falsche Darstellung bei leeren Anfangswerten +- Das Kopieren von Inhalten kann fehlschlagen, wenn diese selbstschließende Blöcke enthalten +- Chrome: Emojis können nicht über das Kontextmenü eingefügt werden +- Firefox: Alles auswählen (CTRL+A) wird nicht korrekt verarbeitet + +## Version 2.0.4 {#version-204} + +Veröffentlicht am 15. Oktober 2025 + +### Fehlerbehebungen {#fixes-204} + +- Falsche Bereichsauswahl für Absätze +- Link-Popups werden nicht angezeigt, wenn sie neben verknüpften Bildern stehen +- Anfängliche Symbolleistenwerte stimmen nicht mit dem tatsächlichen Inhalt überein + +## Version 2.0.3 {#version-203} + +Veröffentlicht am 27. August 2025 + +### Fehlerbehebungen {#fixes-203} + +- Ein Klick auf eine horizontale Linie verursacht einen Skriptfehler +- Die Standard-Zeilenhöhe ist falsch +- Inhaltsstile enthalten doppelte Selektoren +- Nur-Text-Blöcke ignorieren Stiländerungen beim HTML-Parsing +- Der Parser ignoriert maskierte Schriftartnamen in HTML +- Der Parser ignoriert die Eigenschaften `margin-left` und `line-height` in HTML + +## Version 2.0.2 {#version-202} + +Veröffentlicht am 4. August 2025 + +### Fehlerbehebungen {#fixes-202} + +- Paketinhalt aktualisiert + +## Version 2.0.1 {#version-201} + +Veröffentlicht am 30. Juli 2025 + +### Fehlerbehebungen {#fixes-201} + +- Typdefinitionen für die Eigenschaft `defaultStyles` aktualisiert + +## Version 2.0 {#version-20} + +Veröffentlicht am 30. Juli 2025 + +:::note[Hinweis] +Die API von v1.2 ist nicht kompatibel mit v2.0. Weitere Informationen finden Sie in der [**Migrationsanleitung**](news/migration.md). +::: + +### Neue Funktionalität {#new-functionality-20} + +- **Textdarstellung der nächsten Generation** + Erleben Sie eine flüssigere, schnellere und genauere Textdarstellung mit unserer neuen Engine + +- **Granulare Symbolleistenkonfiguration** + Übernehmen Sie die volle Kontrolle über die Symbolleiste: + - [Einzelne Symbolleisten-Steuerelemente](guides/configuration.md/#default-toolbar-controls) und ihre Reihenfolge festlegen + - [Benutzerdefinierte Steuerelemente](guides/configuration.md/#add-custom-toolbar-controls) hinzufügen + +- **Optionale [Menüleiste](api/config/menubar.md)** + Aktivieren Sie eine klassische Menüoberfläche oben im Editor + +- **Verbesserter [Dokumentenmodus](guides/configuration.md/#layout-modes)** + Unterstützung für verschiedene Dokumentgrößen hinzugefügt + +- **Bildunterstützung** + - Bilder mit [Upload-Funktionen](api/config/image-upload-url.md) einfügen + - [Bilder interaktiv skalieren](api/events/resize-image.md) + +- **Verbesserte Link-Erfahrung** + Neu gestaltete [Popup-Interaktionen](api/events/show-popup.md) für bessere Benutzerfreundlichkeit + +- **Neue Formatierungswerkzeuge** + - Textausrichtung: **Blocksatz** + - [Horizontale Linien](api/events/insert-line.md) einfügen + - [Einzug](api/events/indent.md) / [Ausrücken](api/events/outdent.md) + - [Zeilenhöhe](api/events/set-line-height.md) festlegen + - [Tiefstellung](api/events/subscript.md) / [Hochstellung](api/events/superscript.md) anwenden + +- **Listenverwaltung** + [Listen in Ihren Inhalten einfach einfügen und verwalten](api/events/insert-list.md) + +- **Import/Export & Drucken** + - [DOCX-Dateien importieren](api/events/import.md) + - Inhalte als DOCX oder PDF [exportieren](api/events/export.md) + - Dokumente direkt aus dem Editor [drucken](api/events/print.md) + +- **Tastaturkürzel** + Erweiterte Unterstützung für gängige Formatierungs- und Bearbeitungskürzel + +### Neue API {#new-api-20} + +#### Neue Eigenschaften {#new-properties-20} + +- [`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 {#new-methods-20} + +- [`setConfig()`](api/methods/set-config.md) — Konfiguration dynamisch aktualisieren +- [`setLocale()`](api/methods/set-locale.md) — Sprache zur Laufzeit wechseln + +#### Neue interne Methoden {#new-internal-methods-20} + +- [`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 {#new-events-20} + +Eine vollständige Liste der neuen Events ist [hier](api/overview/events_overview.md) verfügbar + +### Aktualisierte API {#updated-api} + +#### Aktualisierte Eigenschaften {#updated-properties} + +- [`defaultStyles`](api/config/default-styles.md) + +#### Aktualisierte Methoden {#updated-methods} + +- [`setValue()`](api/methods/set-value.md) +- [`getValue()`](api/methods/get-value.md) + +#### Aktualisierte interne Methoden {#updated-internal-methods} + +- [`api.detach()`](api/internal/detach.md) +- [`api.on()`](api/internal/on.md) + +## Entfernte API {#removed-api} + +:::warning[Warnung] +Verwenden Sie die entfernte API nicht in Ihren Projekten!
Weitere Informationen finden Sie im Thema [Migration](news/migration.md). +::: + +### [Entfernte Eigenschaften](news/migration.md#properties-migration) {#removed-properties} + +- [`customStats`](news/migration.md#--customstats) +- [`mode`](news/migration.md#--mode--layoutmode) +- [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar) + +### [Entfernte Methoden](news/migration.md#methods-migration) {#removed-methods} + +- `exitFullScreen()` +- `fullScreen()` +- `getEditorAPI()` +- `getStats()` +- `paint()` + +### Entfernte interne Methoden {#removed-internal-methods} + +- [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept) + +### Entfernte Events {#removed-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..2761618 --- /dev/null +++ b/i18n/de/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "Entwicklungszentrum", + "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": "Unternehmen", + "description": "The title of the footer links column with title=Company in the footer" + }, + "link.item.label.Download RichText": { + "message": "RichText herunterladen", + "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": "Beispiele", + "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": "Über uns", + "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "Kontakt", + "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "Lizenzierung", + "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxRichText/#editions-licenses" + } +} diff --git a/i18n/de/docusaurus-theme-classic/navbar.json b/i18n/de/docusaurus-theme-classic/navbar.json new file mode 100644 index 0000000..d7519b7 --- /dev/null +++ b/i18n/de/docusaurus-theme-classic/navbar.json @@ -0,0 +1,26 @@ +{ + "title": { + "message": "JavaScript RichText Dokumentation", + "description": "The title in the navbar" + }, + "logo.alt": { + "message": "DHTMLX RichText Dokumentation", + "description": "The alt text of navbar logo" + }, + "item.label.Examples": { + "message": "Beispiele", + "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..af24336 --- /dev/null +++ b/i18n/ko/code.json @@ -0,0 +1,560 @@ +{ + "theme.ErrorPageContent.title": { + "message": "페이지에 오류가 발생하였습니다.", + "description": "The title of the fallback page when the page crashed" + }, + "theme.BackToTopButton.buttonAriaLabel": { + "message": "맨 위로 스크롤하기", + "description": "The ARIA label for the back to top button" + }, + "theme.blog.archive.title": { + "message": "게시물 목록", + "description": "The page & hero title of the blog archive page" + }, + "theme.blog.archive.description": { + "message": "게시물 목록", + "description": "The page & hero description of the blog archive page" + }, + "theme.blog.paginator.navAriaLabel": { + "message": "블로그 게시물 목록 탐색", + "description": "The ARIA label for the blog pagination" + }, + "theme.blog.paginator.newerEntries": { + "message": "이전 페이지", + "description": "The label used to navigate to the newer blog posts page (previous page)" + }, + "theme.blog.paginator.olderEntries": { + "message": "다음 페이지", + "description": "The label used to navigate to the older blog posts page (next page)" + }, + "theme.blog.post.paginator.navAriaLabel": { + "message": "블로그 게시물 탐색", + "description": "The ARIA label for the blog posts pagination" + }, + "theme.blog.post.paginator.newerPost": { + "message": "이전 게시물", + "description": "The blog post button label to navigate to the newer/previous post" + }, + "theme.blog.post.paginator.olderPost": { + "message": "다음 게시물", + "description": "The blog post button label to navigate to the older/next post" + }, + "theme.tags.tagsPageLink": { + "message": "모든 태그 보기", + "description": "The label of the link targeting the tag list page" + }, + "theme.colorToggle.ariaLabel.mode.system": { + "message": "시스템 모드", + "description": "The name for the system color mode" + }, + "theme.colorToggle.ariaLabel.mode.light": { + "message": "밝은 모드", + "description": "The name for the light color mode" + }, + "theme.colorToggle.ariaLabel.mode.dark": { + "message": "어두운 모드", + "description": "The name for the dark color mode" + }, + "theme.colorToggle.ariaLabel": { + "message": "어두운 모드와 밝은 모드 전환하기 (현재 {mode})", + "description": "The ARIA label for the color mode toggle" + }, + "theme.docs.breadcrumbs.navAriaLabel": { + "message": "탐색 경로", + "description": "The ARIA label for the breadcrumbs" + }, + "theme.docs.DocCard.categoryDescription.plurals": { + "message": "{count} 항목", + "description": "The default description for a category card in the generated index about how many items this category includes" + }, + "theme.docs.paginator.navAriaLabel": { + "message": "문서 페이지", + "description": "The ARIA label for the docs pagination" + }, + "theme.docs.paginator.previous": { + "message": "이전", + "description": "The label used to navigate to the previous doc" + }, + "theme.docs.paginator.next": { + "message": "다음", + "description": "The label used to navigate to the next doc" + }, + "theme.docs.tagDocListPageTitle.nDocsTagged": { + "message": "{count}개 문서가", + "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} \"{tagName}\" 태그에 분류되었습니다", + "description": "The title of the page for a docs tag" + }, + "theme.docs.versionBadge.label": { + "message": "버전: {versionLabel}" + }, + "theme.docs.versions.unreleasedVersionLabel": { + "message": "{siteTitle} {versionLabel} 문서는 아직 정식 공개되지 않았습니다.", + "description": "The label used to tell the user that he's browsing an unreleased doc version" + }, + "theme.docs.versions.unmaintainedVersionLabel": { + "message": "{siteTitle} {versionLabel} 문서는 더 이상 업데이트되지 않습니다.", + "description": "The label used to tell the user that he's browsing an unmaintained doc version" + }, + "theme.docs.versions.latestVersionSuggestionLabel": { + "message": "최신 문서는 {latestVersionLink} ({versionLabel})을 확인하세요.", + "description": "The label used to tell the user to check the latest version" + }, + "theme.docs.versions.latestVersionLinkLabel": { + "message": "최신 버전", + "description": "The label used for the latest version suggestion link label" + }, + "theme.common.editThisPage": { + "message": "페이지 편집", + "description": "The link label to edit the current page" + }, + "theme.common.headingLinkTitle": { + "message": "{heading}에 대한 직접 링크", + "description": "Title for link to heading" + }, + "theme.lastUpdated.atDate": { + "message": " {date}에", + "description": "The words used to describe on which date a page has been last updated" + }, + "theme.lastUpdated.byUser": { + "message": " {user}가", + "description": "The words used to describe by who the page has been last updated" + }, + "theme.lastUpdated.lastUpdatedAtBy": { + "message": "최종 수정: {atDate}{byUser}", + "description": "The sentence used to display when a page has been last updated, and by who" + }, + "theme.NotFound.title": { + "message": "페이지를 찾을 수 없습니다.", + "description": "The title of the 404 page" + }, + "theme.navbar.mobileVersionsDropdown.label": { + "message": "버전", + "description": "The label for the navbar versions dropdown on mobile view" + }, + "theme.tags.tagsListLabel": { + "message": "태그:", + "description": "The label alongside a tag list" + }, + "theme.admonition.caution": { + "message": "주의", + "description": "The default label used for the Caution admonition (:::caution)" + }, + "theme.admonition.danger": { + "message": "위험", + "description": "The default label used for the Danger admonition (:::danger)" + }, + "theme.admonition.info": { + "message": "정보", + "description": "The default label used for the Info admonition (:::info)" + }, + "theme.admonition.note": { + "message": "노트", + "description": "The default label used for the Note admonition (:::note)" + }, + "theme.admonition.tip": { + "message": "팁", + "description": "The default label used for the Tip admonition (:::tip)" + }, + "theme.admonition.warning": { + "message": "경고", + "description": "The default label used for the Warning admonition (:::warning)" + }, + "theme.AnnouncementBar.closeButtonAriaLabel": { + "message": "닫기", + "description": "The ARIA label for close button of announcement bar" + }, + "theme.blog.sidebar.navAriaLabel": { + "message": "최근 블로그 문서 둘러보기", + "description": "The ARIA label for recent posts in the blog sidebar" + }, + "theme.DocSidebarItem.expandCategoryAriaLabel": { + "message": "사이드바 카테고리 '{label}' 펼치기", + "description": "The ARIA label to expand the sidebar category" + }, + "theme.DocSidebarItem.collapseCategoryAriaLabel": { + "message": "사이드바 카테고리 '{label}' 접기", + "description": "The ARIA label to collapse the sidebar category" + }, + "theme.IconExternalLink.ariaLabel": { + "message": "(새 탭에서 열림)", + "description": "The ARIA label for the external link icon" + }, + "theme.NavBar.navAriaLabel": { + "message": "메인 내비게이션", + "description": "The ARIA label for the main navigation" + }, + "theme.NotFound.p1": { + "message": "원하는 페이지를 찾을 수 없습니다.", + "description": "The first paragraph of the 404 page" + }, + "theme.NotFound.p2": { + "message": "사이트 관리자에게 링크가 깨진 것을 알려주세요.", + "description": "The 2nd paragraph of the 404 page" + }, + "theme.navbar.mobileLanguageDropdown.label": { + "message": "언어", + "description": "The label for the mobile language switcher dropdown" + }, + "theme.TOCCollapsible.toggleButtonLabel": { + "message": "이 페이지에서", + "description": "The label used by the button on the collapsible TOC component" + }, + "theme.blog.post.readMore": { + "message": "자세히 보기", + "description": "The label used in blog post item excerpts to link to full blog posts" + }, + "theme.blog.post.readMoreLabel": { + "message": "{title} 에 대해 더 읽어보기", + "description": "The ARIA label for the link to full blog posts from excerpts" + }, + "theme.blog.post.readingTime.plurals": { + "message": "약 {readingTime}분", + "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": "복사", + "description": "The copy button label on code blocks" + }, + "theme.CodeBlock.copied": { + "message": "복사했습니다", + "description": "The copied button label on code blocks" + }, + "theme.CodeBlock.copyButtonAriaLabel": { + "message": "클립보드에 코드 복사", + "description": "The ARIA label for copy code blocks button" + }, + "theme.CodeBlock.wordWrapToggle": { + "message": "줄 바꿈 전환", + "description": "The title attribute for toggle word wrapping button of code block lines" + }, + "theme.docs.breadcrumbs.home": { + "message": "홈", + "description": "The ARIA label for the home page in the breadcrumbs" + }, + "theme.docs.sidebar.collapseButtonTitle": { + "message": "사이드바 숨기기", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.collapseButtonAriaLabel": { + "message": "사이드바 숨기기", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.navAriaLabel": { + "message": "문서 사이드바", + "description": "The ARIA label for the sidebar navigation" + }, + "theme.docs.sidebar.closeSidebarButtonAriaLabel": { + "message": "사이드바 닫기", + "description": "The ARIA label for close button of mobile sidebar" + }, + "theme.docs.sidebar.toggleSidebarButtonAriaLabel": { + "message": "사이드바 펼치거나 접기", + "description": "The ARIA label for hamburger menu button of mobile navigation" + }, + "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { + "message": "← 메인 메뉴로 돌아가기", + "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.navbar.mobileDropdown.collapseButton.expandAriaLabel": { + "message": "드롭다운 펼치기", + "description": "The ARIA label of the button to expand the mobile dropdown navbar item" + }, + "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": { + "message": "드롭다운 접기", + "description": "The ARIA label of the button to collapse the mobile dropdown navbar item" + }, + "theme.docs.sidebar.expandButtonTitle": { + "message": "사이드바 열기", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.docs.sidebar.expandButtonAriaLabel": { + "message": "사이드바 열기", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.SearchBar.seeAll": { + "message": "{count}개의 결과 확인하기" + }, + "theme.SearchPage.documentsFound.plurals": { + "message": "{count}개의 문서를 찾았습니다.", + "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": "\"{query}\" 검색 결과", + "description": "The search page title for non-empty query" + }, + "theme.SearchPage.emptyResultsTitle": { + "message": "문서를 검색합니다.", + "description": "The search page title for empty query" + }, + "theme.SearchPage.inputPlaceholder": { + "message": "검색어를 입력하세요.", + "description": "The placeholder for search page input" + }, + "theme.SearchPage.inputLabel": { + "message": "검색", + "description": "The ARIA label for search page input" + }, + "theme.SearchPage.algoliaLabel": { + "message": "Algolia 제공", + "description": "The description label for Algolia mention" + }, + "theme.SearchPage.noResultsText": { + "message": "검색 결과가 없습니다.", + "description": "The paragraph for empty search result" + }, + "theme.SearchPage.fetchingNewResults": { + "message": "새로운 검색 결과를 불러오는 중입니다.", + "description": "The paragraph for fetching new search results" + }, + "theme.SearchBar.label": { + "message": "검색", + "description": "The ARIA label and placeholder for search button" + }, + "theme.SearchModal.searchBox.resetButtonTitle": { + "message": "검색어 초기화", + "description": "The label and ARIA label for search box reset button" + }, + "theme.SearchModal.searchBox.cancelButtonText": { + "message": "취소", + "description": "The label and ARIA label for search box cancel button" + }, + "theme.SearchModal.searchBox.placeholderText": { + "message": "문서 검색", + "description": "The placeholder text for the main search input field" + }, + "theme.SearchModal.searchBox.placeholderTextAskAi": { + "message": "다른 질문하기...", + "description": "The placeholder text when in AI question mode" + }, + "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": { + "message": "답변 중...", + "description": "The placeholder text for search box when AI is streaming an answer" + }, + "theme.SearchModal.searchBox.enterKeyHint": { + "message": "검색", + "description": "The hint for the search box enter key text" + }, + "theme.SearchModal.searchBox.enterKeyHintAskAi": { + "message": "입력", + "description": "The hint for the Ask AI search box enter key text" + }, + "theme.SearchModal.searchBox.searchInputLabel": { + "message": "검색", + "description": "The ARIA label for search input" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonText": { + "message": "키워드 검색으로 돌아가기", + "description": "The text for back to keyword search button" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": { + "message": "키워드 검색으로 돌아가기", + "description": "The ARIA label for back to keyword search button" + }, + "theme.SearchModal.startScreen.recentSearchesTitle": { + "message": "최근", + "description": "The title for recent searches" + }, + "theme.SearchModal.startScreen.noRecentSearchesText": { + "message": "최근 검색어 없음", + "description": "The text when there are no recent searches" + }, + "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": { + "message": "이 검색어를 저장", + "description": "The title for save recent search button" + }, + "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": { + "message": "이 검색어를 최근 검색어에서 삭제", + "description": "The title for remove recent search button" + }, + "theme.SearchModal.startScreen.favoriteSearchesTitle": { + "message": "즐겨찾기", + "description": "The title for favorite searches" + }, + "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": { + "message": "이 검색어를 즐겨찾기에서 삭제", + "description": "The title for remove favorite search button" + }, + "theme.SearchModal.startScreen.recentConversationsTitle": { + "message": "최근 대화", + "description": "The title for recent conversations" + }, + "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": { + "message": "기록에서 이 대화 삭제", + "description": "The title for remove recent conversation button" + }, + "theme.SearchModal.errorScreen.titleText": { + "message": "결과를 불러올 수 없음", + "description": "The title for error screen" + }, + "theme.SearchModal.errorScreen.helpText": { + "message": "인터넷 연결을 다시 확인하시기 바랍니다.", + "description": "The help text for error screen" + }, + "theme.SearchModal.resultsScreen.askAiPlaceholder": { + "message": "AI에게 질문하기: ", + "description": "The placeholder text for Ask AI input" + }, + "theme.SearchModal.askAiScreen.disclaimerText": { + "message": "답변은 AI로 생성되며 오류가 있을 수 있습니다. 답변을 확인하세요.", + "description": "The disclaimer text for AI answers" + }, + "theme.SearchModal.askAiScreen.relatedSourcesText": { + "message": "관련 출처", + "description": "The text for related sources" + }, + "theme.SearchModal.askAiScreen.thinkingText": { + "message": "생각 중...", + "description": "The text when AI is thinking" + }, + "theme.SearchModal.askAiScreen.copyButtonText": { + "message": "복사", + "description": "The text for copy button" + }, + "theme.SearchModal.askAiScreen.copyButtonCopiedText": { + "message": "복사됨!", + "description": "The text for copy button when copied" + }, + "theme.SearchModal.askAiScreen.copyButtonTitle": { + "message": "복사", + "description": "The title for copy button" + }, + "theme.SearchModal.askAiScreen.likeButtonTitle": { + "message": "좋아요", + "description": "The title for like button" + }, + "theme.SearchModal.askAiScreen.dislikeButtonTitle": { + "message": "싫어요", + "description": "The title for dislike button" + }, + "theme.SearchModal.askAiScreen.thanksForFeedbackText": { + "message": "피드백을 보내 주셔서 감사합니다!", + "description": "The text for thanks for feedback" + }, + "theme.SearchModal.askAiScreen.preToolCallText": { + "message": "검색 중...", + "description": "The text before tool call" + }, + "theme.SearchModal.askAiScreen.duringToolCallText": { + "message": "검색 중: ", + "description": "The text during tool call" + }, + "theme.SearchModal.askAiScreen.afterToolCallText": { + "message": "검색 완료:", + "description": "The text after tool call" + }, + "theme.SearchModal.footer.selectText": { + "message": "로 선택", + "description": "The select text for footer" + }, + "theme.SearchModal.footer.submitQuestionText": { + "message": "질문 제출", + "description": "The submit question text for footer" + }, + "theme.SearchModal.footer.selectKeyAriaLabel": { + "message": "엔터 키", + "description": "The ARIA label for select key in footer" + }, + "theme.SearchModal.footer.navigateText": { + "message": "로 이동", + "description": "The navigate text for footer" + }, + "theme.SearchModal.footer.navigateUpKeyAriaLabel": { + "message": "화살표 위 키", + "description": "The ARIA label for navigate up key in footer" + }, + "theme.SearchModal.footer.navigateDownKeyAriaLabel": { + "message": "화살표 아래 키", + "description": "The ARIA label for navigate down key in footer" + }, + "theme.SearchModal.footer.closeText": { + "message": "로 종료", + "description": "The close text for footer" + }, + "theme.SearchModal.footer.closeKeyAriaLabel": { + "message": "Esc 키", + "description": "The ARIA label for close key in footer" + }, + "theme.SearchModal.footer.searchByText": { + "message": "검색 제공", + "description": "The 'Powered by' text for footer" + }, + "theme.SearchModal.footer.backToSearchText": { + "message": "검색으로 돌아가기", + "description": "The back to search text for footer" + }, + "theme.SearchModal.noResultsScreen.noResultsText": { + "message": "검색 결과 없음", + "description": "The text when there are no results" + }, + "theme.SearchModal.noResultsScreen.suggestedQueryText": { + "message": "다른 추천 검색어", + "description": "The text for suggested query" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsText": { + "message": "검색 결과가 없는 것이 오류라고 생각되십니까?", + "description": "The text for reporting missing results" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": { + "message": "알려주시기 바랍니다.", + "description": "The link text for reporting missing results" + }, + "theme.SearchModal.placeholder": { + "message": "문서 검색", + "description": "The placeholder of the input of the DocSearch pop-up modal" + }, + "theme.blog.post.plurals": { + "message": "{count}개 게시물", + "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": "\"{tagName}\" 태그로 연결된 {nPosts}개의 게시물이 있습니다.", + "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": "작성자", + "description": "The title of the authors page" + }, + "theme.blog.authorsList.viewAll": { + "message": "모든 작성자 보기", + "description": "The label of the link targeting the blog authors page" + }, + "theme.blog.author.noPosts": { + "message": "이 작성자는 아직 작성한 글이 없습니다.", + "description": "The text for authors with 0 blog post" + }, + "theme.contentVisibility.unlistedBanner.title": { + "message": "목록에 없는 페이지", + "description": "The unlisted content banner title" + }, + "theme.contentVisibility.unlistedBanner.message": { + "message": "이 페이지는 목록에 없습니다. 검색 엔진이 색인을 생성하지 않으며, 직접 링크가 있는 사용자만 접근할 수 있습니다.", + "description": "The unlisted content banner message" + }, + "theme.contentVisibility.draftBanner.title": { + "message": "초안 페이지", + "description": "The draft content banner title" + }, + "theme.contentVisibility.draftBanner.message": { + "message": "이 페이지는 초안입니다. 개발 환경에서만 표시되며 프로덕션 빌드에서는 제외됩니다.", + "description": "The draft content banner message" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "다시 시도해 보세요", + "description": "The label of the button to try again rendering when the React error boundary captures an error" + }, + "theme.common.skipToMainContent": { + "message": "본문으로 건너뛰기", + "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": "태그", + "description": "The title of the tag list page" + } +} 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..dfabb42 --- /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": "최근 게시물", + "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..b1b2dfb --- /dev/null +++ b/i18n/ko/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": "새로운 기능 및 마이그레이션", + "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": "새로운 기능 및 마이그레이션", + "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 메서드", + "description": "The label for category 'RichText methods' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText internal API": { + "message": "RichText 내부 API", + "description": "The label for category 'RichText internal API' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText internal API.link.generated-index.title": { + "message": "내부 API 개요", + "description": "The generated-index page title for category 'RichText internal API' in sidebar 'docs'" + }, + "sidebar.docs.category.Event Bus methods": { + "message": "Event Bus 메서드", + "description": "The label for category 'Event Bus methods' in sidebar 'docs'" + }, + "sidebar.docs.category.State methods": { + "message": "State 메서드", + "description": "The label for category 'State methods' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText events": { + "message": "RichText 이벤트", + "description": "The label for category 'RichText events' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText properties": { + "message": "RichText 속성", + "description": "The label for category 'RichText properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Integration with frameworks": { + "message": "프레임워크 통합", + "description": "The label for category 'Integration with frameworks' in sidebar 'docs'" + }, + "sidebar.docs.category.Integration with frameworks.link.generated-index.title": { + "message": "프레임워크 통합", + "description": "The generated-index page title for category 'Integration with frameworks' in sidebar 'docs'" + }, + "sidebar.docs.category.Guides": { + "message": "가이드", + "description": "The label for category 'Guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Guides.link.generated-index.title": { + "message": "가이드", + "description": "The generated-index page title for category 'Guides' in sidebar 'docs'" + } +} diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/.sync b/i18n/ko/docusaurus-plugin-content-docs/current/.sync new file mode 100644 index 0000000..ae89b0d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/.sync @@ -0,0 +1 @@ +8c89a96ada89b69f200dac7f3e5b216cc76aa8db 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..66029f8 --- /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 + +### 설명 {#description} + +@short: 선택 사항입니다. 특정 블록 유형에 대한 기본 스타일 값을 지정합니다. + +### 사용법 {#usage} + +~~~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"` font-family가 지정되며, font-size는 28px로 설정되고 전경색과 배경색도 함께 변경됩니다. CSS 스타일 역시 `h2` 블록에 적용됩니다. +::: + +### 기본 설정 {#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} +// RichText 초기화 +new richtext.Richtext("#root", { + defaultStyles: { + h4: { + "font-family": "Roboto" + }, + h5: { + "font-family": "Roboto" + }, + h6: { + "font-family": "Roboto" + } + }, + // 기타 설정 속성 +}); +~~~ + +**변경 이력:** 이 속성은 v2.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..01a0ce7 --- /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 + +### 설명 {#description} + +@short: 선택 사항. RichText 전체 화면 모드를 활성화합니다. + +### 사용법 {#usage} + +~~~jsx {} +fullscreenMode?: boolean; +~~~ + +### 기본 설정 {#default-config} + +~~~jsx +fullscreenMode: false; +~~~ + +### 예제 {#example} + +~~~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..0725f22 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md @@ -0,0 +1,56 @@ +--- +sidebar_label: imageUploadUrl +title: imageUploadUrl 설정 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 imageUploadUrl 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드하실 수 있습니다. +--- + +# imageUploadUrl + +### 설명 {#description} + +@short: 선택 사항입니다. 이미지 업로드 시 사용할 URL을 지정합니다 (툴바, 메뉴바, 클립보드 붙여넣기, 드래그 앤 드롭에서 사용됩니다). + +이 속성이 설정되면 RichText는 삽입된 각 이미지를 지정된 엔드포인트에 업로드하고, 서버가 반환한 URL을 삽입합니다. + +이 속성이 생략되거나 거짓 값(`""`, `null`, `undefined`)으로 설정된 경우, RichText는 **인라인 모드**로 전환됩니다. 이 경우 이미지 파일은 클라이언트에서 읽혀 base64 데이터 URL로 콘텐츠에 직접 임베드되며, 서버가 필요하지 않습니다. 1024×800보다 큰 인라인 이미지는 해당 크기에 맞게 비율을 유지하며 축소됩니다. + +:::note[참고] +인라인(base64) 이미지는 내장된 DOCX / PDF [내보내기](api/events/export.md)에서 보존되지 않습니다. 내보내기 기능을 사용하는 경우 `imageUploadUrl`을 설정하여 이미지가 외부 위치를 참조하도록 하십시오. +::: + +:::caution[주의] +Base64 인코딩은 원본 파일에 비해 인코딩된 페이로드를 약 3분의 1 정도 증가시킵니다. 여러 개의 큰 인라인 이미지가 포함된 문서는 이에 따라 크기가 커지며, 이는 [`getValue()`](api/methods/get-value.md)가 반환하는 값의 크기, 에디터의 메모리 사용량, 그리고 콘텐츠를 저장하거나 전송하는 비용에 영향을 줍니다. 이미지가 많거나 큰 문서의 경우 서버 `imageUploadUrl`을 사용하는 것을 권장합니다. +::: + +### 사용법 {#usage} + +~~~jsx {} +imageUploadUrl?: string; +~~~ + +### 예제 {#example} + +서버 엔드포인트에 이미지 업로드: + +~~~jsx {3} +// RichText 초기화 +new richtext.Richtext("#root", { + imageUploadUrl: "https://example.com/upload" + // 기타 설정 속성 +}); +~~~ + +이미지를 base64로 인라인 삽입 (서버 불필요) — 속성을 생략하거나 빈 문자열을 전달합니다: + +~~~jsx {2} +new richtext.Richtext("#root", { + // imageUploadUrl이 설정되지 않으면 이미지는 base64 데이터 URL로 삽입됩니다 + // 기타 설정 속성 +}); +~~~ + +**변경 로그:** 이 속성은 v2.0에서 추가되었습니다. v2.1부터 이 속성은 선택 사항입니다. 생략 시 이미지는 base64 데이터 URL로 인라인 삽입됩니다. + +**관련 문서:** [설정](guides/configuration.md), [서버와 함께 사용하기](guides/working_with_server.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..dc83cb5 --- /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 + +### 설명 {#description} + +@short: 선택 사항. 메인 편집기 영역의 레이아웃 모드를 지정합니다 + +### 사용법 {#usage} + +~~~jsx {} +layoutMode: "classic" | "document"; +~~~ + +`"classic"` 모드는 전체 편집 영역을 채웁니다. `"document"` 모드는 편집 영역을 문서 페이지 형태로 표시합니다. + +### 기본 구성 {#default-config} + +~~~jsx +layoutMode: "classic"; +~~~ + +### 예제 {#example} + +~~~jsx {3} +// RichText 초기화 +new richtext.Richtext("#root", { + layoutMode: "document" // 기본값으로 "document" 모드로 RichText를 초기화합니다 + // 기타 구성 속성 +}); +~~~ + +**변경 이력:** 이 속성은 제거된 `mode` 속성 대신 v2.0에서 추가되었습니다 + +**관련 문서:** [구성](guides/configuration.md) + +**관련 예제:** [RichText. 초기화](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..edab1ee --- /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 + +### 설명 {#description} + +@short: 선택 사항. RichText의 현지화 레이블을 포함하는 객체 + +:::info[정보] +`locale` 객체에는 RichText의 모든 레이블과 해당 번역이 포함되어야 합니다. +::: + +### 사용법 {#usage} + +~~~jsx {} +locale?: object; +~~~ + +### 기본 설정 {#default-config} + +기본적으로 RichText는 **영어** 로케일을 사용합니다. 사용자 정의 로케일로 변경할 수도 있습니다. + +:::tip[팁] +현재 로케일을 동적으로 변경하려면 RichText의 [`setLocale()`](api/methods/set-locale.md) 메서드를 사용하십시오. +::: + +### 예제 {#example} + +~~~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/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..9fe0517 --- /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 + +### 설명 {#description} + +@short: 선택 사항입니다. RichText 상단 메뉴바를 활성화합니다. + +### 사용법 {#usage} + +~~~jsx {} +menubar?: boolean; +~~~ + +### 예제 {#example} + +~~~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..c9a88f2 --- /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 + +### 설명 {#description} + +@short: 선택 사항입니다. 툴바를 활성화하고 툴바에 표시할 버튼을 지정하거나 구성할 수 있습니다. + +### 사용법 {#usage} + +~~~jsx {} +toolbar?: boolean | Array any }>; +~~~ + +#### 툴바에서 사용 가능한 버튼 {#available-buttons-within-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` | 툴바 그룹 사이에 시각적 구분선을 추가합니다. | + +이 문자열을 사용하여 툴바 버튼을 다음과 같이 구성할 수 있습니다: + +~~~jsx {2-7} +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // 기타 버튼 + ], + // 기타 설정 속성 +}); +~~~ + +#### 툴바의 커스텀 버튼 {#custom-buttons-within-toolbar} + +커스텀 버튼을 다음 매개변수를 가진 객체로 지정할 수 있습니다: + +- `type` - (필수) 커스텀 컨트롤 유형을 지정합니다. 사용 가능한 유형은 `"button"`, `"richselect"`, `"colorpicker"`입니다. +- `id` - (선택 사항) 커스텀 컨트롤 ID(기존 컨트롤 ID와 중복 불가) +- `label` - (선택 사항) 버튼 레이블(아이콘과 함께 사용) +- `tooltip` - (선택 사항) 마우스 오버 시 표시되는 툴팁(지정하지 않으면 "label" 값을 사용) +- `css` - (선택 사항) 컨트롤에 할당된 CSS 클래스 이름(기본 지원 클래스: wx-primary, wx-secondary) +- `handler` - (선택 사항) 버튼 클릭 시 실행되는 callback 함수 + +~~~jsx {6-32} +new richtext.Richtext("#root", { + toolbar: [ + // 버튼 (문자열은 버튼만 나타냄) + "bold", + "italic", + // 사전 정의된 버튼 (이러한 버튼에는 다른 옵션을 정의할 수 없으므로(레이블, 툴팁, 옵션 등 없음), ({ type: "button", id: string })만 사용) + { + type: "button", + id: "fullscreen", + }, + // 사전 정의된 컨트롤을 사용하려면 올바른 type을 지정해야 합니다(예: richselect/colorpicker) + // 일치하지 않는 type은 무시됩니다(툴바에 추가되지 않음) + { + 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: () => {/* 커스텀 로직 */} + } + ], + // 기타 설정 속성 +}); +~~~ + +#### 툴바 숨기기 {#hide-toolbar} + +툴바를 숨기려면 `toolbar` 속성을 다음과 같이 `false`로 설정합니다: + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false + // 기타 설정 속성 +}); +~~~ + +### 기본 설정 {#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[팁] +기본 툴바 컨트롤은 RichText 위젯에서 export되며 `richtext.defaultToolbarButtons`를 통해 접근할 수 있습니다. + +```jsx{4} +// RichText 초기화 +new richtext.Richtext("#root", { + toolbar: [ + ...richtext.defaultToolbarButtons, + { + type: "button", + id: "btn1", // 버튼 id (커스텀 로직을 적용하려면 기존 버튼 id와 겹치면 안 됩니다) + icon: "wxo-help", // 버튼 아이콘 (레이블과 함께 표시됨) + css: "rounded", // 컨트롤에 할당된 css 클래스 이름 (기본 지원 클래스: wx-primary, wx-secondary) + label: "Custom button", // 버튼 레이블 (아이콘과 함께 표시됨) + tooltip: "Some tooltip", // 마우스를 올렸을 때 표시되는 툴팁 (지정하지 않으면 "label"의 값을 사용) + } + ] + // 기타 설정 속성 +}); +``` +::: + +### 예제 {#example} + +~~~jsx {3-18} +// RichText 초기화 +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // 커스텀 버튼 (아래에서 지원되는 모든 옵션을 사용합니다) + // 사용자는 커스텀 버튼만 정의할 수 있습니다(현재 richselect/colorpicker는 지원되지 않음) + { + type: "button", + id: "btn1", // 버튼 id (커스텀 로직을 적용하려면 기존 버튼 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. 커스텀 컨트롤과 간소화된 툴바](https://snippet.dhtmlx.com/wda202ih?tag=richtext) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/trigger-template.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/trigger-template.md new file mode 100644 index 0000000..b2de14d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/trigger-template.md @@ -0,0 +1,73 @@ +--- +sidebar_label: triggerTemplate +title: triggerTemplate Config +description: DHTMLX JavaScript RichText 라이브러리의 triggerTemplate 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX RichText 30일 무료 평가판을 다운로드할 수도 있습니다. +--- + +# triggerTemplate + +### 설명 {#description} + +@short: 선택 사항입니다. [`triggers`](api/config/triggers.md) 항목에 의해 열리는 제안 드롭다운에서 RichText가 항목을 렌더링하는 방식을 커스터마이징합니다. + +기본적으로 드롭다운은 각 항목의 `label`을 일반 텍스트로 표시합니다. `triggerTemplate`을 사용하면 아바타, 이름, 이메일 등을 포함한 더 풍부한 행을 렌더링할 수 있습니다. + +### 사용법 {#usage} + +~~~jsx {} +function triggerTemplate({ data, trigger }) { + return "HTML template of the suggestion item"; +}; +~~~ + +### 매개변수 {#parameters} + +callback 함수는 다음 매개변수를 가진 객체를 받습니다: + +- `data` - 현재 제안 항목 (`{ id, label, url }`, 그리고 trigger의 `data` 소스에 추가한 모든 커스텀 필드 포함) +- `trigger` - 드롭다운을 연 trigger 문자 (`"@"`, `"#"` 등) + +:::tip[팁] +드롭다운의 기본 너비는 `160px`입니다. 템플릿에 더 많은 공간이 필요한 경우, 선택자 앞에 `.wx-editor` 부모를 추가하세요: + +~~~css {} +.wx-editor .wx-suggest-anchor { + width: 220px; +} +~~~ +::: + +### 예제 {#example} + +다음 코드 스니펫은 두 가지 trigger를 설정합니다: 멘션용 `@`와 태그용 `#`입니다. `triggerTemplate`을 사용하여 `trigger` 값을 확장하고 각 드롭다운을 다르게 렌더링합니다. `@` 드롭다운의 경우 템플릿은 아바타(`data.image`), 닉네임(`data.label`), 전체 이름(`data.name`)을 포함한 커스텀 HTML 행을 반환합니다. `#` trigger의 경우 템플릿은 `label`을 사용합니다: + +~~~jsx {5-6,8-15} +const { template, Richtext } = richtext; + +new Richtext("#root", { + triggers: [ + { trigger: "@", data: people }, + { trigger: "#", data: tags } + ], + triggerTemplate: template(obj => { + if (obj.trigger === "@") { + return `
+ +
${obj.data.label}
+
${obj.data.name}
+
`; + } + // 다른 트리거(예: "#")는 일반 레이블을 사용합니다 + return obj.data.label; + }) +}); +~~~ + +**변경 이력:** 이 속성은 v2.1에서 추가되었습니다. + +**관련 샘플:** + +- [RichText. 트리거별 커스텀 드롭다운 템플릿](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext) +- [RichText. 이모지 자동 완성](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) + +**관련 문서:** [멘션과 태그](guides/mentions_and_tags.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/triggers.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/triggers.md new file mode 100644 index 0000000..4b00762 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/triggers.md @@ -0,0 +1,250 @@ +--- +sidebar_label: triggers +title: triggers 설정 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 triggers 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다. +--- + +# triggers + +### 설명 {#description} + +@short: 선택 사항입니다. 멘션, 태그 및 기타 토큰 삽입을 위한 드롭다운 트리거를 정의합니다 + +사용자가 설정된 문자(예: `@` 또는 `#`)를 입력하면 RichText가 미리 정의된 항목이 담긴 드롭다운을 엽니다. 사용자가 항목을 선택하면 RichText가 해당 항목을 편집 불가능한 토큰(``)으로 문서에 삽입합니다. + +### 사용법 {#usage} + +~~~jsx {} +triggers?: Array<{ + trigger: string, + data: Array<{ id?: string | number; label?: string; url?: string }> + | ((query: string) => + Array<{ id?: string | number; label?: string; url?: string }> + | Promise>), + showTrigger?: boolean, + action?: (item) => void +}>; +~~~ + +### 파라미터 {#parameters} + +`triggers` 배열의 각 항목에는 다음 필드를 사용할 수 있습니다: + +- `trigger` - (필수) 제안 드롭다운을 여는 문자입니다(예: `"@"`, `"#"`, `"/"`, `"$"`) +- `data` - (필수) 드롭다운의 데이터 소스로, 배열이나 동기 함수 또는 비동기 함수를 사용할 수 있습니다. [데이터 소스 형식](#data-source-forms)을 참고하세요 +- `showTrigger` - (선택 사항) `true`(기본값)로 설정하면 삽입된 토큰에 트리거 문자가 유지됩니다(예: `@Alice`). `false`로 설정하면 `label`만 삽입됩니다(예: `Alice`) +- `action` - (선택 사항) 사용자가 항목을 선택할 때 호출되는 커스텀 callback입니다. 설정 시, RichText는 입력된 트리거 텍스트(트리거 문자와 쿼리)를 제거하고 토큰을 삽입하는 **대신** `action(item)`을 호출합니다. callback은 선택된 항목을 받으며 원하는 콘텐츠를 삽입하거나 커스텀 코드를 실행할 수 있습니다. `action` 파라미터는 `showTrigger`보다 우선하며, `action`이 설정된 경우 `showTrigger`는 효과가 없습니다. [커스텀 action](#custom-action)을 참고하세요 + +### 데이터 소스 형식 {#data-source-forms} + +* **정적 배열** — RichText가 쿼리를 `label`과 대조하여 자동으로 배열을 필터링합니다(대소문자 구분 없음, `startsWith`): + +~~~jsx {3-7} +new richtext.Richtext("#root", { + triggers: [{ + trigger: "@", + data: [ + { id: "alice", label: "Alice" }, + { id: "bob", label: "Bob" } + ] + }] +}); +~~~ + +* **동기 함수** — RichText가 현재 `query` 문자열과 함께 함수를 호출합니다. 직접 필터링을 수행하고 일치하는 배열을 반환합니다: + +~~~jsx {3-6} +new richtext.Richtext("#root", { + triggers: [{ + trigger: "#", + data: query => tags.filter(t => + t.label.toLowerCase().startsWith(query.toLowerCase()) + ) + }] +}); +~~~ + +* **비동기 함수** — RichText가 현재 `query` 문자열과 함께 함수를 호출합니다. 일치하는 배열로 resolve되는 `Promise`를 반환합니다. 서버 측 검색에 유용합니다: + +~~~jsx {3-8} +new richtext.Richtext("#root", { + triggers: [{ + trigger: "+", + data: async query => { + const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`); + const users = await res.json(); + return users.map(u => ({ id: String(u.id), label: u.name, url: u.website })); + } + }] +}); +~~~ + +### 제안 항목 필드 {#suggestion-item-fields} + +`data`의 각 항목(또는 함수가 반환하는 각 항목)에는 다음 필드가 있습니다: + +- `id` - (선택 사항) 삽입된 토큰에 저장되는 고유 식별자입니다. 생략하면 RichText가 자동으로 ID를 생성합니다 +- `label` - (선택 사항) 드롭다운에 표시되고 문서에 삽입되는 텍스트입니다. 기본 렌더링에서만 필수입니다. 커스텀 [`triggerTemplate`](api/config/trigger-template.md)을 사용하면 다른 필드를 기반으로 항목을 렌더링할 수 있으므로(예: `template(({ data }) => data.id)`) `label`을 생략할 수 있습니다 +- `url` - (선택 사항) 항목과 연결된 URL입니다. RichText가 이 URL을 삽입된 토큰의 `href` 속성으로 저장합니다. 토큰을 `Ctrl+Click`하면 링크가 열립니다 + +항목에는 `id`, `label`, `url` 외에도 커스텀 필드를 추가할 수 있습니다(예: 이모지를 위한 `code`, 아바타를 위한 `image` 및 `name`). 이러한 추가 필드는 [`triggerTemplate`](api/config/trigger-template.md) callback과 `action` callback에 전달됩니다. + +### 렌더링된 토큰 {#rendered-token} + +사용자가 드롭다운에서 항목을 선택하면 RichText가 편집 불가능한 토큰 요소를 문서에 삽입합니다: + +~~~html {} +@Alice +~~~ + +- `@` (`data-token="@"` 내) - 항목의 `trigger` +- `alice` (`data-token-id="alice"` 내) - 항목의 `id` +- `mailto:alice@example.com` (`href="mailto:alice@example.com"` 내) - 항목의 `url` +- `@Alice` - `trigger`와 `label`의 조합. `showTrigger: false`로 설정하면 `Alice`만 표시됩니다 + +CSS로 토큰을 타겟팅하려면 `data-token` 및 `data-token-id` 속성을 사용하세요. 예를 들어, 특정 사용자의 모든 멘션을 강조 표시할 수 있습니다: + +~~~css {} +.wx-editor-content a[data-token="@"][data-token-id="alice"] { + background: #fb8500; + color: #fff; +} +~~~ + +### 커스텀 action {#custom-action} + +기본적으로 사용자가 항목을 선택하면 RichText가 해당 항목을 토큰으로 문서에 삽입합니다. `action` 파라미터를 설정하면 대신 커스텀 코드를 실행할 수 있습니다. RichText가 입력된 트리거 문자열(트리거 문자와 쿼리)을 제거하고, 선택된 항목과 함께 `action(item)` callback을 호출합니다. 토큰이 삽입되지 않으므로 문서에 추가할 내용을 직접 결정하거나 커스텀 코드를 실행할 수 있습니다. `action` 파라미터는 `showTrigger`보다 우선합니다. `action`이 설정된 경우 `showTrigger`는 무시됩니다. + +#### 이모지 추가 {#add-emoji} + +일반적인 사용 사례는 `:` 트리거로 이모지를 삽입하는 것으로, 각 항목에는 커스텀 `code` 필드가 포함됩니다. `action`과 [`triggerTemplate`](api/config/trigger-template.md)을 함께 사용하면 드롭다운에 label 대신 이모지 자체를 표시할 수 있습니다: + +~~~jsx {8,12} +const { template, Richtext } = richtext; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: emoji, // [{ id: "apple", label: "apple", code: "1F34E" }, ...] + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // 드롭다운에 (레이블만이 아니라) 이모지 자체를 렌더링 + triggerTemplate: template(({ data }) => `${emojiFromCode(data.code)} ${data.label}`) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} +~~~ + +#### 카테고리별 이모지 그룹화 {#group-emoji-by-categories} + +`data` 파라미터가 함수인 경우 기본 `label` 매칭에 제한되지 않습니다. 직접 필터링을 수행하고 드롭다운에 카테고리 헤더를 유지할 수 있습니다. `label` 필드는 포함하고 `code`는 포함하지 않는 헤더 항목을 추가하세요. `data` 함수는 먼저 쿼리와 일치하는 이모지를 찾은 후, 일치하는 항목이 있는 카테고리의 헤더와 함께 이모지를 반환합니다: + +~~~jsx {18-26,31-33,41} +const { template, Richtext } = richtext; + +// 헤더 항목에는 `code` 필드가 없습니다. 이모지 항목에는 있습니다 +const emoji = [ + { id: "$smileys", label: "Smileys", category: 1 }, // 카테고리 + { id: "grinning", label: "grinning", code: "1F600", category: 1 }, + { id: "smile", label: "smile", code: "1F604", category: 1 }, + { id: "$animals", label: "Animals", category: 2 }, // 카테고리 + { id: "dog", label: "dog", code: "1F436", category: 2 }, + { id: "cat", label: "cat", code: "1F431", category: 2 } +]; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: query => { + const matched = emoji.filter(item => + item.code && + item.label.toLowerCase().startsWith(query.toLowerCase().trim()) + ); + const categories = new Set(matched.map(item => item.category)); + // 일치하는 이모지와 여전히 일치하는 카테고리의 헤더를 유지 + return emoji.filter(item => + item.code ? matched.includes(item) : categories.has(item.category) + ); + }, + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // 이모지 행은 일반적으로, 카테고리 헤더는 굵게 렌더링 + triggerTemplate: template(({ data }) => + data.code ? `${emojiFromCode(data.code)} ${data.label}` : `${data.label}` + ) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} + +// 헤더에는 `code`가 없습니다 — 헤더 선택은 무시하여 절대 삽입되지 않도록 합니다 +editor.api.intercept("insert-token", ({ data }) => !!data.code); +~~~ + +#### 슬래시 스타일 명령 메뉴 추가 {#add-slash-style-command-menu} + +`action`을 사용하면 슬래시 스타일 명령 메뉴(Notion이나 Slack의 `/`와 유사)를 구성할 수 있습니다. 각 항목의 `id`에 명령 이름을 저장하고, 커스텀 `config` 필드에 옵션을 저장한 후, callback에서 [`api.exec`](api/internal/exec.md)으로 실행합니다: + +~~~jsx {13} +// 각 항목은 api.exec 액션 이름을 `id`에, 해당 매개변수를 `config`에 저장합니다 +const commands = [ + { id: "set-text-style", label: "Heading 1", config: { tag: "h1" } }, + { id: "insert-list", label: "Bulleted list", config: { type: "bulleted" } }, + { id: "insert-line", label: "Divider" } // 설정 없음 → `|| {}` 적용됨 +]; + +const editor = new richtext.Richtext("#root", { + triggers: [ + { + trigger: "/", + data: commands, + action: item => editor.api.exec(item.id, item.config || {}) + } + ] +}); +~~~ + +### 예제 {#example} + +다음 예제는 두 가지 트리거를 설정합니다. `@`는 멘션용(각 항목에 토큰의 `href`가 되는 `url` 포함)이고, `#`는 태그용(label만 포함)입니다: + +~~~jsx {4,11} +new richtext.Richtext("#root", { + triggers: [ + { + trigger: "@", + data: [ + { id: "alice", label: "Alice", url: "mailto:alice@example.com" }, + { id: "bob", label: "Bob", url: "mailto:bob@example.com" } + ] + }, + { + trigger: "#", + data: [ + { id: "css", label: "CSS" }, + { id: "html", label: "HTML" } + ] + } + ] +}); +~~~ + +**변경 이력:** 이 속성은 v2.1에서 추가되었습니다 + +**관련 샘플:** + +- [RichText. 멘션, 태그 및 비동기 조회](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) +- [RichText. 트리거별 커스텀 드롭다운 템플릿](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext) +- [RichText. 이모지 자동 완성](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) +- [RichText. 슬래시 명령](https://snippet.dhtmlx.com/e0mrmyam?tag=richtext) +- [RichText. 멘션 찾기 및 강조 표시](https://snippet.dhtmlx.com/8y6zvzh2?tag=richtext) +- [RichText. 모든 멘션 강조 표시](https://snippet.dhtmlx.com/2rbo12jx?tag=richtext) + +**관련 문서:** [멘션과 태그](guides/mentions_and_tags.md) 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..7dcaaed --- /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 + +### 설명 {#description} + +@short: 선택 사항입니다. RichText 편집기 영역에 표시되는 초기 값(콘텐츠)을 지정합니다. + +:::tip[팁] +커스텀 형식으로 값(콘텐츠)을 설정하려면 내장 [`setValue()`](api/methods/set-value.md) 메서드를 사용하십시오. +::: + +### 사용법 {#usage} + +~~~jsx {} +value?: string; +~~~ + +### 예제 {#example} + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" // 기본값을 설정합니다 (HTML 형식) + // 다른 구성 속성 +}); +~~~ + +**변경 로그:** 이 속성은 v2.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..bf53f79 --- /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 + +### 설명 {#description} + +@short: 메뉴바/툴바 또는 Event Bus 메서드를 통해 텍스트 정렬이 변경될 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"align": ({ + align: "left" | "center" | "right" | "justify" +}) => boolean | void; +~~~ + +### 매개변수 {#parameters} + +`align` 이벤트의 callback은 다음 매개변수를 포함하는 객체를 받을 수 있습니다: + +- `align` - 텍스트 정렬 방식입니다. 다음 값 중 하나를 지정할 수 있습니다: `"left" | "center" | "right" | "justify"` + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~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" +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.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..7f60672 --- /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 + +### 설명 {#description} + +@short: 메뉴바/툴바 또는 Event Bus 메서드를 통해 텍스트 서식이 지워질 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"clear-text-format": () => boolean | void; +~~~ + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-10} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "clear-text-format" 이벤트 구독 +editor.api.on("clear-text-format", () => { + console.log("Text format was cleared"); +}); +// 텍스트 서식 지우기 +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..b315eb2 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/copy.md @@ -0,0 +1,36 @@ +--- +sidebar_label: copy +title: copy 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 copy 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다. +--- + +# copy + +### 설명 {#description} + +@short: 선택한 텍스트를 복사할 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"copy": () => boolean | void; +~~~ + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "copy" 이벤트 구독 +editor.api.on("copy", () => { + console.log("Selected text was copied"); +}); +~~~ + +**변경 로그:** 이 이벤트는 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..18d6e30 --- /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 + +### 설명 {#description} + +@short: 메뉴바에서 "New" 옵션을 누르거나 Event Bus methods를 통해 호출될 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"create-new": ({ reset?: boolean }) => boolean | void; +~~~ + +### 파라미터 {#parameters} + +`create-new` 이벤트의 callback은 다음 파라미터를 포함하는 객체를 받을 수 있습니다: + +- `reset` - 새 파일을 생성할 때 기록(history)을 초기화합니다 + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-10} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "create-new" 이벤트 구독 +editor.api.on("create-new", ({ reset }) => { + console.log(`Document has been cleared. History has ${reset ? "" : "not"} been 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..a8920af --- /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 + +### 설명 {#description} + +@short: 선택한 텍스트를 잘라낼 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"cut": () => boolean | void; +~~~ + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "cut" 이벤트 구독 +editor.api.on("cut", () => { + console.log("Selected text was cut"); +}); +~~~ + +**변경 이력:** 이 이벤트는 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..9602ea8 --- /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 + +### 설명 {#description} + +@short: 링크를 삭제할 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"delete-link": () => boolean | void; +~~~ + +:::info[정보] +내부 이벤트 처리에는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "delete-link" 이벤트 구독 +editor.api.on("delete-link", () => { + console.log("The link was deleted"); +}); +~~~ + +**변경 이력:** 이 이벤트는 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..8f01100 --- /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 + +### 설명 {#description} + +@short: 메뉴바에서 "내보내기" 옵션을 누르거나 Event Bus 메서드를 통해 호출한 후 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"export": ({ options: IExportOptions; result?: any }) => boolean | void; + +interface IExportOptions { + format?: "docx" | "pdf"; + url?: string; + download?: boolean; + fileName?: string; +} +~~~ + +### 매개변수 {#parameters} + +`export` 이벤트의 callback은 다음 매개변수를 포함하는 객체를 받을 수 있습니다: + +- `format` - 파일 형식 +- `url` - 파일 내보내기에 사용할 기본 URL +- `download` - 서버로부터 응답을 받은 후 파일을 다운로드할지 여부를 사용자가 지정할 수 있습니다. 이 속성을 "false"로 설정하면 파일이 다운로드되지 않으며, 대신 이벤트 객체에서 blob 데이터를 가져올 수 있습니다 (이벤트 정의의 `result` 속성 참조) +- `fileName` - 내보낼 파일 이름 + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-15} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "export" 이벤트 구독 +editor.api.on("export", (obj) => { + console.log(obj); + console.log("The file was exported"); +}); +// 값을 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/hide-suggest.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/hide-suggest.md new file mode 100644 index 0000000..4bca838 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/hide-suggest.md @@ -0,0 +1,51 @@ +--- +sidebar_label: hide-suggest +title: hide-suggest 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 hide-suggest 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다. +--- + +# hide-suggest + +### 설명 {#description} + +@short: 제안 드롭다운이 닫힐 때 발생합니다 + +다음 중 하나가 발생하면 이 이벤트가 발생합니다. + +- 사용자가 드롭다운에서 항목을 선택한 경우 +- 사용자가 `Escape` 키를 누른 경우 +- 트리거 컨텍스트에서 커서가 벗어난 경우 (예: 트리거 문자 이전에 `Backspace`를 누른 경우) +- 현재 쿼리와 일치하는 항목이 없는 경우 + +### 사용법 {#usage} + +~~~jsx {} +"hide-suggest": () => boolean | void; +~~~ + +### 파라미터 {#parameters} + +`hide-suggest` 이벤트 callback은 파라미터를 받지 않습니다. + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용하십시오. +::: + +### 예제 {#example} + +~~~jsx {5-7} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 설정 속성 +}); +// "hide-suggest" 이벤트 구독 +editor.api.on("hide-suggest", () => { + console.log("Suggestion dropdown closed"); +}); +~~~ + +**변경 이력:** 이 이벤트는 v2.1에서 추가되었습니다 + +**관련 샘플:** [RichText. 멘션, 태그 및 비동기 조회](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +**관련 문서:** [멘션 및 태그](guides/mentions_and_tags.md) 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..3bfafee --- /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 + +### 설명 {#description} + +@short: 메뉴바의 "Import" 옵션을 누르거나 Event Bus 메서드를 통해 호출된 후 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"import": ({ html?: string }) => boolean | void; +~~~ + +### 매개변수 {#parameters} + +`import` 이벤트의 callback은 다음 매개변수를 포함하는 객체를 받을 수 있습니다: + +- `html` - HTML 형식의 텍스트 값 + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다. +::: + +### 예제 {#example} + +~~~jsx {5-13} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "import" 이벤트 구독 +editor.api.on("import", (obj) => { + console.log(obj.html); + console.log("The new value was imported"); +}); +// 새 값 가져오기 +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..7869944 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/indent.md @@ -0,0 +1,43 @@ +--- +sidebar_label: indent +title: indent 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 indent 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드 및 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText 30일 무료 평가판을 다운로드하세요. +--- + +# indent + +### 설명 {#description} + +@short: 블록 들여쓰기를 증가시킬 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"indent": ({ step: number }) => boolean | void; +~~~ + +### 매개변수 {#parameters} + +`indent` 이벤트의 callback은 다음 매개변수를 포함한 객체를 받을 수 있습니다: + +- `step` - 들여쓰기가 증가한 단계 값 + +:::info[정보] +내부 이벤트 처리를 위해 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "indent" 이벤트 구독 +editor.api.on("indent", (obj) => { + console.log(obj); + console.log("The indention was increased"); +}); +~~~ + +**변경 로그:** 해당 이벤트는 v2.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..e8df7cc --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-image.md @@ -0,0 +1,54 @@ +--- +sidebar_label: insert-image +title: insert-image 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 insert-image 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText 30일 무료 평가판을 다운로드하세요. +--- + +# insert-image + +### 설명 {#description} + +@short: 이미지를 삽입할 때 발생합니다 (툴바, 메뉴바, 클립보드 붙여넣기 또는 드래그 앤 드롭을 통해) + +### 사용법 {#usage} + +~~~jsx {} +"insert-image": (IImageContext) => boolean | void; + +interface IImageContext { + id: TID; + value: string; // 이미지 소스: imageUploadUrl이 설정된 경우 서버 URL, 이미지가 인라인으로 처리되는 경우 base64 데이터 URL + width: number; + height: number; + // 업로더 ctx에서 가져온 추가 props로, 실제 동작에는 필요하지 않음 + name?: string; + file?: File; + status?: string; + selected: (ctx: IImageContext) => void; + uploaded: (ctx: IImageContext) => void; +} +~~~ + +:::note[참고] +`value` 필드는 외부 URL([ `imageUploadUrl`](api/config/image-upload-url.md)이 설정되고 업로드가 성공한 경우) 또는 base64 데이터 URL(`imageUploadUrl`이 생략되고 이미지가 클라이언트에서 인라인으로 처리되는 경우) 중 하나를 보유합니다. URL을 재작성하거나 호스트를 검증하는 등 소스를 처리하는 핸들러는 두 형식 모두를 고려해야 합니다. +::: + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다. +::: + +### 예제 {#example} + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 설정 속성 +}); +// "insert-image" 이벤트 구독 +editor.api.on("insert-image", (obj) => { + console.log(obj); + console.log("The image was inserted"); +}); +~~~ + +**변경 이력:** 이 이벤트는 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..87c8c7f --- /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 + +### 설명 {#description} + +@short: 수평선을 삽입할 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"insert-line": () => boolean | void; +~~~ + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "insert-line" 이벤트 구독 +editor.api.on("insert-line", () => { + console.log("The horizontal line was inserted"); +}); +~~~ + +**변경 로그:** 이 이벤트는 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..8d5f441 --- /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 + +### 설명 {#description} + +@short: 링크를 삽입할 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"insert-link": ({ url: string }) => boolean | void; +~~~ + +### 매개변수 {#parameters} + +`insert-link` 이벤트의 callback은 다음 매개변수를 포함하는 객체를 받을 수 있습니다: + +- `url` - 삽입할 URL + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "insert-link" 이벤트 구독 +editor.api.on("insert-link", (obj) => { + console.log(obj) + console.log("The following link was inserted: " + 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..f80714e --- /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 + +### 설명 {#description} + +@short: 목록을 삽입할 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"insert-list": ({ type: TListType }) => boolean | void; + +type TListType = "bulleted" | "numbered"; +~~~ + +### 매개변수 {#parameters} + +`insert-list` 이벤트의 callback은 다음 매개변수를 포함하는 객체를 받을 수 있습니다: + +- `type` - 삽입된 목록의 유형입니다. 다음 값을 지정할 수 있습니다: + - `"bulleted"` - 글머리 기호 목록 + - `"numbered"` - 번호 목록 + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "insert-list" 이벤트 구독 +editor.api.on("insert-list", (obj) => { + console.log(obj.type); + console.log("The list was inserted"); +}); +~~~ + +**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-token.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-token.md new file mode 100644 index 0000000..109ba41 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-token.md @@ -0,0 +1,61 @@ +--- +sidebar_label: insert-token +title: insert-token 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 insert-token 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다. +--- + +# insert-token + +### 설명 {#description} + +@short: 사용자가 제안 항목을 선택하고 RichText가 해당 항목을 토큰으로 삽입한 후 발생합니다 + +`insert-token` 이벤트는 사용자가 트리거 드롭다운(멘션, 태그 또는 [`triggers`](api/config/triggers.md) 속성을 통해 설정한 사용자 정의 트리거)에서 항목을 선택한 후 발생합니다. + +### 사용법 {#usage} + +~~~jsx {} +"insert-token": ({ + data: { + id?: string | number, + label?: string, + url?: string, + // ...트리거의 데이터 소스에 있는 사용자 정의 필드 + }, + trigger: string, + showTrigger?: boolean, + action?: (item) => void +}) => boolean | void; +~~~ + +### 매개변수 {#parameters} + +`insert-token` 이벤트의 callback은 다음 필드를 포함하는 객체를 받습니다. + +- `data` - 선택된 제안 항목입니다. 항목의 `id`, `label`, `url`과 트리거의 `data` 소스에 추가한 사용자 정의 필드를 포함합니다 +- `trigger` - 드롭다운을 열었던 트리거 문자입니다 (예: `"@"` 또는 `"#"`) +- `showTrigger` - `false`이면 RichText는 `label`만 삽입하고, 그렇지 않으면 위젯이 트리거 문자도 함께 표시합니다 (기본값) +- `action` - 일치하는 [트리거](api/config/triggers.md)에 정의된 사용자 정의 동작입니다. 설정된 경우 이 매개변수가 토큰 삽입보다 우선합니다. RichText는 입력된 텍스트(트리거 문자 및 쿼리)를 제거하고 토큰을 삽입하는 대신 `action(data)`를 호출합니다. 이 경우 `showTrigger` 매개변수는 효과가 없습니다 + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용하십시오. +::: + +### 예제 {#example} + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "insert-token" 이벤트 구독 +editor.api.on("insert-token", ({ data, trigger, showTrigger }) => { + console.log(`Inserted ${trigger}${data.label} (id: ${data.id})`); +}); +~~~ + +**변경 이력:** 이 이벤트는 v2.1에서 추가되었습니다 + +**관련 샘플:** [RichText. 멘션, 태그 및 비동기 조회](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +**관련 문서:** [멘션 및 태그](guides/mentions_and_tags.md) 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..f451bf6 --- /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 + +### 설명 {#description} + +@short: 블록 들여쓰기를 감소시킬 때 발생합니다. + +### 사용법 {#usage} + +~~~jsx {} +"outdent": ({ step: number }) => boolean | void; +~~~ + +### 파라미터 {#parameters} + +`outdent` 이벤트의 callback은 다음 파라미터를 포함하는 객체를 받을 수 있습니다: + +- `step` - 들여쓰기가 감소한 단계 값 + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용하십시오. +::: + +### 예시 {#example} + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "outdent" 이벤트 구독 +editor.api.on("outdent", (obj) => { + console.log(obj); + console.log("The indention was decreased"); +}); +~~~ + +**변경 로그:** 해당 이벤트는 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..dd91578 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/paste.md @@ -0,0 +1,36 @@ +--- +sidebar_label: paste +title: paste 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 paste 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText 30일 무료 평가판을 다운로드하세요. +--- + +# paste + +### 설명 {#description} + +@short: 콘텐츠를 붙여넣을 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"paste": () => boolean | void; +~~~ + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "paste" 이벤트 구독 +editor.api.on("paste", () => { + console.log("Content was pasted"); +}); +~~~ + +**변경 로그:** 이 이벤트는 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..acb2b01 --- /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 + +### 설명 {#description} + +@short: 문서를 인쇄할 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"print": () => boolean | void; +~~~ + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { +// 구성 속성 +}); +// "print" 이벤트 구독 +editor.api.on("print", () => { + console.log("The document is printing"); +}); +~~~ + +**변경 로그:** 이 이벤트는 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..2210ff4 --- /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 + +### 설명 {#description} + +@short: 메뉴바/툴바의 "Redo" 버튼을 누르거나 Event Bus methods를 통해 실행될 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"redo": () => boolean | void; +~~~ + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus methods**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "redo" 이벤트 구독 +editor.api.on("redo", () => { + console.log("Redo operation was performed"); +}); +~~~ + +**변경 이력:** 이 이벤트는 v2.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..b2c11e5 --- /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 + +### 설명 {#description} + +@short: 이미지 크기 조정 시 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"resize-image": ({ id: number, width: number, height: number }) => boolean | void; +~~~ + +### 매개변수 {#parameters} + +`resize-image` 이벤트의 callback은 다음 매개변수를 포함하는 객체를 받을 수 있습니다: + +- `id` - 이미지 ID +- `width` - 이미지 너비 +- `height` - 이미지 높이 + +:::info[정보] +내부 이벤트 처리에는 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { +// 구성 속성 +}); +// "resize-image" 이벤트 구독 +editor.api.on("resize-image", (obj) => { + console.log(obj); + console.log("The image was resized") +}); +~~~ + +**변경 로그:** 이 이벤트는 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..788c061 --- /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 + +### 설명 {#description} + +@short: 글꼴 패밀리를 설정할 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"set-font-family": ({ fontFamily: string }) => boolean | void; +~~~ + +### 매개변수 {#parameters} + +`set-font-family` 이벤트의 callback은 다음 매개변수를 포함하는 객체를 받을 수 있습니다: + +- `fontFamily` - 적용할 글꼴 패밀리입니다. 사용 가능한 글꼴은 다음과 같습니다: `"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"` + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~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("The font family was changed"); +}); +// 새 글꼴 패밀리 적용 +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..0654580 --- /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 + +### 설명 {#description} + +@short: 글꼴 크기를 설정할 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"set-font-size": ({ fontSize: string }) => boolean | void; +~~~ + +### 파라미터 {#parameters} + +`set-font-size` 이벤트의 callback은 다음 파라미터를 포함하는 객체를 받을 수 있습니다: + +- `fontSize` - 적용할 글꼴 크기 + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~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("The font size was changed"); +}); +// 새 글꼴 크기 적용 +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..9bd6538 --- /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 + +### 설명 {#description} + +@short: 줄 높이를 설정할 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"set-line-height": ({ lineHeight: string }) => boolean | void; +~~~ + +### 매개변수 {#parameters} + +`set-line-height` 이벤트의 callback은 다음 매개변수를 포함하는 객체를 받을 수 있습니다: + +- `lineHeight` - 줄 높이 + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~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("The line height was changed"); +}); +// 새 줄 높이 적용 +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..e2d1d18 --- /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 + +### 설명 {#description} + +@short: 텍스트 색상 및/또는 텍스트 배경 색상을 설정할 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"set-text-color": (ITextColor) => boolean | void; + +interface ITextColor { + color?: string; + background?: string; +} +~~~ + +### 매개변수 {#parameters} + +`set-text-color` 이벤트의 callback은 다음 매개변수를 포함한 객체를 받을 수 있습니다: + +- `color` - 텍스트 색상 +- `background` - 텍스트 배경 색상 + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~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("The text color and/or background text color were changed"); +}); +// 텍스트 색상 및 배경 적용 +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..3c78b90 --- /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 + +### 설명 {#description} + +@short: 텍스트 형식을 설정할 때 발생합니다 + +### 사용법 {#usage} + +~~~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)를 사용할 수 있습니다 +::: + +### 파라미터 {#parameters} + +`set-text-format` 이벤트의 callback은 다음 파라미터를 포함하는 객체를 받을 수 있습니다: + +- `bold` - 굵게 텍스트 형식 +- `italic` - 기울임꼴 텍스트 형식 +- `strike` - 취소선 텍스트 형식 +- `underline` - 밑줄 텍스트 형식 + +### 예제 {#example} + +~~~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("The text format was changed"); +}); +// "italic" 및 bold 텍스트 형식 적용 +editor.api.exec("set-text-format", { + italic: true, + bold: true +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.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..67ab0fa --- /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 + +### 설명 {#description} + +@short: 텍스트 스타일을 설정할 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"set-text-style": ({ tag: TBlockType }) => boolean | void; + +type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; +~~~ + +### 매개변수 {#parameters} + +`set-text-style` 이벤트의 callback은 다음 매개변수를 포함하는 객체를 받을 수 있습니다: + +- `tag` - 텍스트 스타일 + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~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("The text style was changed"); +}); +// 새 텍스트 스타일 적용 +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..5090347 --- /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 + +### 설명 {#description} + +@short: 팝업이 표시되거나 숨겨질 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"show-popup": (IPopupConfig) => boolean | void; + +interface IPopupConfig { + type: "link" | null; + image?: boolean; +} +~~~ + +### 매개변수 {#parameters} + +`show-popup` 이벤트의 callback은 다음 매개변수를 포함하는 객체를 받을 수 있습니다: + +- `type` - 팝업의 유형 +- `image` - 추가 컨텍스트에 대한 접근을 제공합니다 (현재 커서가 이미지를 가리키고 있는지 여부) + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-13} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "show-popup" 이벤트 구독 +editor.api.on("show-popup", (obj) => { + console.log(obj); + console.log("The popup was shown/hidden"); +}); +// 텍스트를 왼쪽으로 show-popup +editor.api.exec("show-popup", { + type: "link" +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0에서 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/show-suggest.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/show-suggest.md new file mode 100644 index 0000000..6c39739 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/show-suggest.md @@ -0,0 +1,64 @@ +--- +sidebar_label: show-suggest +title: show-suggest 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 show-suggest 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다. +--- + +# show-suggest + +### 설명 {#description} + +@short: 구성된 트리거에 대한 제안 드롭다운이 열릴 때 발생합니다 + +`show-suggest` 이벤트는 RichText가 현재 트리거에 대해 비어 있지 않은 항목 목록을 확인한 후, 드롭다운이 열리기 직전에 발생합니다. 이 이벤트를 가로채어 항목을 조정하거나, 드롭다운의 위치를 변경하거나, 드롭다운을 취소할 수 있습니다. + +### 사용법 {#usage} + +~~~jsx {} +"show-suggest": ({ + trigger: string, + query: string, + items: Array<{ + id?: string | number, + label?: string, + url?: string, + // ...트리거의 데이터 소스에서 가져온 모든 커스텀 필드 + }>, + pos: DOMRect +}) => boolean | void; +~~~ + +### 매개변수 {#parameters} + +`show-suggest` 이벤트의 callback은 다음 필드를 포함하는 객체를 수신합니다. + +- `trigger` - 드롭다운을 열었던 트리거 문자 +- `query` - 트리거 문자 뒤에 입력된 텍스트 (`items` 필터링에 사용됨) +- `items` - 확인(및 이미 필터링)된 제안 항목 목록. 각 항목은 [제안 항목 형태](api/config/triggers.md#suggestion-item-fields)를 따릅니다: 선택적 `id`, `label`, `url` 및 [`triggerTemplate`](api/config/trigger-template.md)에서 사용되는 모든 커스텀 필드(예: `image` 또는 `name`) +- `pos` - 커서 위치를 나타내는 `DOMRect`; 드롭다운을 화면에 배치하는 데 사용됩니다 + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용하세요. +::: + +### 예제 {#example} + +~~~jsx {6-11} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + triggers: [{ trigger: "@", data: people }] + // 기타 구성 속성 +}); +// 드롭다운이 열리기 전에 제안 목록을 재정의합니다 +editor.api.intercept("show-suggest", (state) => { + if (state.trigger === "@" && state.query === "") { + return { ...state, items: state.items.slice(0, 5) }; + } +}); +~~~ + +**변경 이력:** 이 이벤트는 v2.1에서 추가되었습니다 + +**관련 샘플:** [RichText. 멘션, 태그 및 비동기 조회](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +**관련 문서:** [멘션 및 태그](guides/mentions_and_tags.md) 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..d1ea0f2 --- /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 + +### 설명 {#description} + +@short: 메뉴바/툴바의 "Subscript" 버튼을 클릭하거나 Event Bus 메서드를 통해 실행될 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"subscript": () => boolean | void; +~~~ + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-10} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "subscript" 이벤트 구독 +editor.api.on("subscript", () => { + console.log("Subscript was applied"); +}); +// "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..eae3e11 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/superscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: superscript +title: superscript 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 superscript 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판도 다운로드할 수 있습니다. +--- + +# superscript + +### 설명 {#description} + +@short: 메뉴바/툴바의 "Superscript" 버튼을 누르거나 Event Bus 메서드를 통해 실행될 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"superscript": () => boolean | void; +~~~ + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "superscript" 이벤트 구독 +editor.api.on("superscript", () => { + console.log("Superscript was applied"); +}); +// "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..a2e4716 --- /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 + +### 설명 {#description} + +@short: 전체 화면 모드를 전환할 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void; +~~~ + +### 매개변수 {#parameters} + +`toggle-fullscreen-mode` 이벤트의 callback은 다음 매개변수를 포함하는 객체를 받을 수 있습니다: + +- `mode` - 전체 화면 모드를 활성화합니다 + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예시 {#example} + +~~~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("The full screen mode was changed"); +}); +// 전체 화면 모드 활성화 +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..d1c4366 --- /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 + +### 설명 {#description} + +@short: 레이아웃 모드를 전환할 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void; +~~~ + +### 매개변수 {#parameters} + +`toggle-layout-mode` 이벤트의 callback은 다음 매개변수를 포함하는 객체를 받을 수 있습니다: + +- `mode` - 레이아웃 모드. 사용 가능한 모드: `"classic" | "document"` + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~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("The layout mode was changed"); +}); +// "document" 레이아웃 모드 설정 +editor.api.exec("toggle-layout-mode", { mode: "document" }); +~~~ + +**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-list.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-list.md new file mode 100644 index 0000000..63938a9 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-list.md @@ -0,0 +1,56 @@ +--- +sidebar_label: toggle-list +title: toggle-list 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 toggle-list 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText 30일 무료 평가판을 다운로드하세요. +--- + +# toggle-list + +### 설명 {#description} + +@short: 사용자가 선택한 블록에서 목록을 토글할 때 발생합니다 + +`toggle-list` 이벤트는 상황 인식 기반의 글머리 기호/번호 목록 버튼을 구동합니다. 새 목록을 삽입하는 대신, 이벤트는 현재 선택 영역을 검사하여 다음 네 가지 동작 중 하나를 자동으로 선택합니다: + +| 모드 | 발생 조건 | 결과 | +| -------------- | ---------------------------------------------------------------- | -------------------------------------------------------------------- | +| **Wrap** | 선택 영역이 단락으로만 이루어진 경우 | 각 단락이 하나의 새 목록 컨테이너 안에서 목록 항목으로 변환됩니다 | +| **Unwrap** | 선택된 모든 항목이 클릭한 유형의 목록에 속한 경우 | 항목이 단락으로 되돌아가고 목록 컨테이너가 제거됩니다 | +| **Convert** | 선택된 모든 항목이 목록에 속하지만, 목록 중 하나 이상이 다른 유형인 경우 | 목록 유형이 제자리에서 전환됩니다 (글머리 기호 ↔ 번호) | +| **Mixed** | 선택 영역에 단락과 목록 항목이 혼합된 경우 | 단락이 항목으로 변환되어 해당 유형의 하나의 목록으로 합쳐집니다 | + +### 사용법 {#usage} + +~~~jsx {} +"toggle-list": ({ type: TListType }) => boolean | void; + +type TListType = "bulleted" | "numbered"; +~~~ + +### 파라미터 {#parameters} + +`toggle-list` 이벤트의 callback은 다음 파라미터를 포함한 객체를 받을 수 있습니다: + +- `type` - 토글할 목록의 유형입니다. 다음 값을 지정할 수 있습니다: + - `"bulleted"` - 글머리 기호(비순서) 목록 + - `"numbered"` - 번호(순서) 목록 + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용하세요. +::: + +### 예제 {#example} + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "toggle-list" 이벤트 구독 +editor.api.on("toggle-list", (obj) => { + console.log(obj.type); + console.log("The list was toggled"); +}); +~~~ + +**변경 로그:** 이 이벤트는 v2.0.6에서 추가되었습니다 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..6033120 --- /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 + +### 설명 {#description} + +@short: 단축키 정보 표시를 전환할 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void; +~~~ + +### 매개변수 {#parameters} + +`toggle-shortcut-info` 이벤트의 callback은 다음 매개변수를 포함하는 객체를 받을 수 있습니다: + +- `mode` - 단축키 정보를 활성화합니다. `true`이면 단축키 정보 팝업을 표시하고, `false`이면 단축키 정보 팝업을 숨깁니다 + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~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("The shortcut info was shown"); +}); +// 단축키 정보 활성화 +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..20e4a85 --- /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 + +### 설명 {#description} + +@short: 메뉴바/툴바의 "실행 취소" 버튼을 누르거나 Event Bus 메서드를 통해 실행 취소할 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"undo": () => boolean | void; +~~~ + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "undo" 이벤트 구독 +editor.api.on("undo", () => { + console.log("Undo operation was performed"); +}); +~~~ + +**변경 로그:** 이 이벤트는 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..88889f9 --- /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 + +### 설명 {#description} + +@short: 링크가 업데이트될 때 발생합니다 + +### 사용법 {#usage} + +~~~jsx {} +"update-link": ({ id: number, url: string }) => boolean | void; +~~~ + +### 파라미터 {#parameters} + +`update-link` 이벤트의 callback은 다음 파라미터를 포함하는 객체를 받을 수 있습니다: + +- `id` - 링크 ID +- `url` - 수정된 url + +:::info[정보] +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "update-link" 이벤트 구독 +editor.api.on("update-link", (obj) => { + console.log(obj); + console.log("The following link was updated:" + 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..300e5cc --- /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() + +### 설명 {#description} + +@short: 이벤트 핸들러를 제거/분리할 수 있습니다 + +### 사용법 {#usage} + +~~~jsx {} +api.detach( tag: string ): void; +~~~ + +### 매개변수 {#parameters} + +- `tag` - (필수) 액션 태그의 이름 + +### 이벤트 {#events} + +:::info[정보] +RichText 내부 이벤트의 전체 목록은 [**여기**](api/overview/events_overview.md)에서 확인할 수 있습니다 +::: + +### 예제 {#example} + +~~~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..8120ba4 --- /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() + +### 설명 {#description} + +@short: 내부 이벤트를 트리거할 수 있습니다 + +### 사용법 {#usage} + +~~~jsx {} +api.exec( + event: string, + config: object +): void; +~~~ + +### 매개변수 {#parameters} + +- `event` - (필수) 실행할 이벤트 +- `config` - (필수) 매개변수가 포함된 config 객체 (실행할 이벤트를 참조하세요) + +### 이벤트 {#events} + +:::info[정보] +RichText 내부 이벤트의 전체 목록은 [**여기**](api/overview/events_overview.md)에서 확인할 수 있습니다 +::: + +### 예제 {#example} + +~~~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..b75389e --- /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() + +### 설명 {#description} + +@short: RichText의 반응형 속성을 담은 객체를 반환합니다 + +### 사용법 {#usage} + +~~~jsx {} +api.getReactiveState(): object; +~~~ + +### 반환값 {#returns} + +이 메서드는 다음 매개변수를 포함하는 객체를 반환합니다: + +~~~jsx {} +{ + cursorState: { subscribe: any }, + defaultStyles {...}, + document {...}, + fullscreen {...}, + history {...}, + layoutMode {...}, + popup {...}, + selection {...} +} +~~~ + +### 예제 {#example} + +~~~jsx {5-7} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// RichText의 Reactive State 가져오기 +const reactive_state = editor.api.getReactiveState(); +console.log(reactive_state) +~~~ + +**변경 이력:** 이 메서드는 v2.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..435630e --- /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() + +### 설명 {#description} + +@short: RichText의 StateStore 속성을 담은 객체를 반환합니다 + +### 사용법 {#usage} + +~~~jsx {} +api.getState(): object; +~~~ + +### 반환값 {#returns} + +이 메서드는 다음 파라미터를 포함하는 객체를 반환합니다: + +~~~jsx {} +{ + cursorState: {}, + defaultStyles: {}, + document: {}, + fullscreen: boolean, + history: [] + layoutMode: string, + popup: any, + selection: {} +} +~~~ + +### 예제 {#example} + +~~~jsx {5-7} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// RichText의 State 가져오기 +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..f39d5d1 --- /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() + +### 설명 {#description} + +@short: 내부 이벤트를 가로채거나 취소할 수 있도록 합니다 + +### 사용법 {#usage} + +~~~jsx {} +api.intercept( + event: string, + callback: function +): void; +~~~ + +### 매개변수 {#parameters} + +- `event` - (필수) 발생시킬 이벤트 +- `callback` - (필수) 실행할 callback (callback 인수는 발생하는 이벤트에 따라 달라집니다) + +### 이벤트 {#events} + +:::info[정보] +RichText 내부 이벤트의 전체 목록은 [**여기**](api/overview/events_overview.md)에서 확인할 수 있습니다 +::: + +### 예제 {#example} + +~~~jsx {5-10} +// RichText 생성 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// 글꼴 크기 변경 금지 +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..1083150 --- /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() + +### 설명 {#description} + +@short: 내부 이벤트에 핸들러를 연결할 수 있습니다 + +### 사용법 {#usage} + +~~~jsx {} +api.on( + event: string, + handler: function +): void; +~~~ + +### 매개변수 {#parameters} + +- `event` - (필수) 발생시킬 이벤트 +- `handler` - (필수) 연결할 핸들러 (핸들러 인수는 발생하는 이벤트에 따라 달라집니다) + +### 이벤트 {#events} + +:::info[정보] +RichText 내부 이벤트의 전체 목록은 [**여기**](api/overview/events_overview.md)에서 확인할 수 있습니다 +::: + +### 예제 {#example} + +~~~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..bd7bfc6 --- /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() + +### 설명 {#description} + +@short: Event Bus 순서에 특정 액션을 추가할 수 있습니다 + +### 사용법 {#usage} + +~~~jsx {} +api.setNext(next: any): void; +~~~ + +### 파라미터 {#parameters} + +- `next` - (필수) **Event Bus** 순서에 포함할 액션 + +### 예제 {#example} + +~~~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/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..162c892 --- /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() + +### 설명 {#description} + +@short: RichText의 모든 HTML 요소를 제거하고, 관련된 모든 이벤트를 해제합니다 + +### 사용법 {#usage} + +~~~jsx {} +destructor(): void; +~~~ + +### 예제 {#example} + +~~~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..11459b5 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/get-value.md @@ -0,0 +1,44 @@ +--- +sidebar_label: getValue() +title: getValue 메서드 +description: DHTMLX JavaScript RichText 라이브러리의 getValue 메서드에 대해 알아볼 수 있습니다. 개발자 가이드 및 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText 무료 30일 평가판을 다운로드하세요. +--- + +# getValue() + +### 설명 {#description} + +@short: RichText의 값을 반환합니다 + +### 사용법 {#usage} + +~~~jsx {} +getValue(encoder?: any): string; +~~~ + +### 매개변수 {#parameters} + +- `encoder` - (선택 사항) RichText의 콘텐츠를 사용자 정의 형식으로 인코딩하는 데 사용되는 파서입니다. 사용 가능한 형식은 `html`(기본값), `text`, `markdown`입니다. + +필요한 encoder는 다음과 같이 가져올 수 있습니다: + +```jsx +const toTextEncoder = richtext.text.toText; // 텍스트 encoder +const toHTMLEncoder = richtext.html.toHTML; // HTML encoder +const toMarkdownEncoder = richtext.markdown.toMarkdown; // 마크다운 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." // 기본값 설정 (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/insert-value.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/insert-value.md new file mode 100644 index 0000000..bb8602a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/insert-value.md @@ -0,0 +1,50 @@ +--- +sidebar_label: insertValue() +title: insertValue 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 insertValue 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 체험해 보세요. DHTMLX RichText 무료 30일 평가판을 다운로드할 수도 있습니다. +--- + +# insertValue() + +### 설명 {#description} + +@short: 현재 커서 위치에 텍스트, Markdown 또는 HTML 콘텐츠를 삽입하거나, 선택된 텍스트를 대체합니다 + +### 사용법 {#usage} + +~~~jsx {} +insertValue: (value: string, encoder?: any): void; +~~~ + +### 매개변수 {#parameters} + +- `value` - (필수) 현재 커서 위치의 RichText에 삽입할 값입니다. 선택 영역이 활성화된 경우, 선택 영역이 새 값으로 대체됩니다 +- `encoder` - (선택) 삽입된 값을 디코딩하는 데 사용되는 파서입니다. 사용 가능한 형식은 `html`(기본값), `text`, `markdown`입니다 + +필요한 encoder는 다음과 같이 가져올 수 있습니다: + +```jsx +const fromTextEncoder = richtext.text.fromText; // 텍스트 encoder +const fromHTMLEncoder = richtext.html.fromHTML; // HTML encoder +const fromMarkdownEncoder = richtext.markdown.fromMarkdown; // 마크다운 encoder +``` + +### 예제 {#example} + +~~~jsx {6} +const editor = new richtext.Richtext("#root", { + // 설정 속성 +}); + +// 커서 위치에 커스텀 속성이 있는 HTML 링크를 삽입합니다 +editor.insertValue("link"); +~~~ + +삽입된 콘텐츠는 단일 히스토리 항목으로 추가되며, **실행 취소(Undo)** 한 번으로 되돌릴 수 있습니다. + +**변경 이력:** 이 메서드는 v2.1에서 추가되었습니다 + +**관련 샘플:** + +- [RichText. 커서 위치에 콘텐츠 삽입](https://snippet.dhtmlx.com/pew2g1ku?tag=richtext) +- [RichText. 다양한 형식으로 작업하기 (Markdown, HTML, 텍스트)](https://snippet.dhtmlx.com/cne4kujn?tag=richtext) 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..7567a9e --- /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() + +### 설명 {#description} + +@short: RichText에 새로운 구성 파라미터를 적용합니다 + +### 사용법 {#usage} + +~~~jsx {} +setConfig(config: { [key:any]: any }): void; +~~~ + +### 파라미터 {#parameters} + +- `config` - (필수) RichText 구성 파라미터 객체입니다. 전체 속성 목록은 [여기](api/overview/properties_overview.md)에서 확인하세요 + +:::note[참고] +`setConfig()` 메서드는 `setConfig()` 호출 시 명시적으로 전달되지 않은 기존 파라미터를 모두 유지합니다. +::: + +### 예제 {#example} + +~~~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..8a0a990 --- /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() + +### 설명 {#description} + +@short: RichText에 새 로케일을 적용합니다 + +### 사용법 {#usage} + +~~~jsx {} +setLocale(null | locale?: object): void; +~~~ + +### 파라미터 {#parameters} + +- `null` - (선택) 기본 로케일(*영어*)로 초기화합니다 +- `locale` - (선택) 적용할 새 로케일의 데이터 객체 + +:::info[정보] +`setLocale()` 메서드를 사용하여 RichText에 새 로케일을 적용합니다. RichText를 기본 로케일로 초기화하려면 인수 없이(또는 *null* 값을 전달하여) `setLocale()` 메서드를 호출합니다. +::: + +### 예제 {#example} + +~~~jsx {5-6} +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); + +// RichText에 "de" 로케일 적용 +editor.setLocale(de); +~~~ + +**변경 이력:** 이 메서드는 v2.0에서 추가되었습니다 + +**관련 아티클:** [현지화](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..9696d64 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-value.md @@ -0,0 +1,47 @@ +--- +sidebar_label: setValue() +title: setValue 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 setValue 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 무료 30일 평가판을 다운로드할 수도 있습니다. +--- + +# setValue() + +### 설명 {#description} + +@short: RichText에 새 값을 적용합니다 + +### 사용법 {#usage} + +~~~jsx {} +setValue: (value: string, encoder?: any): void; +~~~ + +### 매개변수 {#parameters} + +- `value` - (필수) RichText에 삽입할 값 +- `encoder` - (선택) 커스텀 형식에서 값을 디코딩하는 데 사용하는 커스텀 파서. 사용 가능한 형식은 `html`(기본값), `text`, `markdown`입니다 + +필요한 encoder는 다음과 같이 가져올 수 있습니다: + +```jsx +const fromTextEncoder = richtext.text.fromText; // 텍스트 encoder +const fromHTMLEncoder = richtext.html.fromHTML; // HTML encoder +const fromMarkdownEncoder = richtext.markdown.fromMarkdown; // 마크다운 encoder +``` + +### 예제 {#example} + +~~~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` 매개변수가 추가되었습니다 + +**관련 샘플:** [RichText. 다양한 형식으로 작업하기 (Markdown, HTML, 텍스트)](https://snippet.dhtmlx.com/cne4kujn?tag=richtext) 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..e069b19 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md @@ -0,0 +1,18 @@ +--- +sidebar_label: Event Bus 메서드 +title: Event Bus 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText의 내부 Event Bus 메서드 개요를 확인할 수 있습니다. 개발자 가이드 및 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 30일 무료 평가판을 다운로드할 수도 있습니다. +--- + +# Event Bus 메서드 {#event-bus-methods} + +이 페이지는 DHTMLX RichText 에디터가 사용하는 내부 Event Bus 관련 메서드 목록을 제공합니다. +이 메서드들은 고급 통합 및 내부 이벤트 시스템 기반의 커스텀 동작을 위해 설계되었습니다. + +| 이름 | 설명 | +| ------------------------------------------------- | -------------------------------------------- | +| [](api/internal/detach.md) | @getshort(api/internal/detach.md) | +| [](api/internal/exec.md) | @getshort(api/internal/exec.md) | +| [](api/internal/intercept.md) | @getshort(api/internal/intercept.md) | +| [](api/internal/on.md) | @getshort(api/internal/on.md) | +| [](api/internal/set-next.md) | @getshort(api/internal/set-next.md) | diff --git a/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..c1bfef3 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/events_overview.md @@ -0,0 +1,49 @@ +--- +sidebar_label: 이벤트 개요 +title: 이벤트 개요 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText의 이벤트 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX RichText의 30일 무료 평가판을 다운로드할 수 있습니다. +--- + +# 이벤트 개요 {#events-overview} + +이 페이지에는 DHTMLX RichText 에디터가 발생시키는 모든 이벤트가 나열되어 있습니다. +이러한 이벤트를 사용하여 기능을 확장하거나, 사용자 상호작용을 추적하거나, 커스텀 동작을 트리거할 수 있습니다. + +| 이름 | 설명 | +| ------------------------------------------------------ | --------------------------------------------- | +| [](api/events/align.md) | @getshort(api/events/align.md) | +| [](api/events/clear-text-format.md) | @getshort(api/events/clear-text-format.md) | +| [](api/events/copy.md) | @getshort(api/events/copy.md) | +| [](api/events/create-new.md) | @getshort(api/events/create-new.md) | +| [](api/events/cut.md) | @getshort(api/events/cut.md) | +| [](api/events/delete-link.md) | @getshort(api/events/delete-link.md) | +| [](api/events/export.md) | @getshort(api/events/export.md) | +| [](api/events/hide-suggest.md) | @getshort(api/events/hide-suggest.md) | +| [](api/events/import.md) | @getshort(api/events/import.md) | +| [](api/events/indent.md) | @getshort(api/events/indent.md) | +| [](api/events/insert-image.md) | @getshort(api/events/insert-image.md) | +| [](api/events/insert-line.md) | @getshort(api/events/insert-line.md) | +| [](api/events/insert-link.md) | @getshort(api/events/insert-link.md) | +| [](api/events/insert-list.md) | @getshort(api/events/insert-list.md) | +| [](api/events/insert-token.md) | @getshort(api/events/insert-token.md) | +| [](api/events/outdent.md) | @getshort(api/events/outdent.md) | +| [](api/events/paste.md) | @getshort(api/events/paste.md) | +| [](api/events/print.md) | @getshort(api/events/print.md) | +| [](api/events/redo.md) | @getshort(api/events/redo.md) | +| [](api/events/resize-image.md) | @getshort(api/events/resize-image.md) | +| [](api/events/set-font-family.md) | @getshort(api/events/set-font-family.md) | +| [](api/events/set-font-size.md) | @getshort(api/events/set-font-size.md) | +| [](api/events/set-line-height.md) | @getshort(api/events/set-line-height.md) | +| [](api/events/set-text-color.md) | @getshort(api/events/set-text-color.md) | +| [](api/events/set-text-format.md) | @getshort(api/events/set-text-format.md) | +| [](api/events/set-text-style.md) | @getshort(api/events/set-text-style.md) | +| [](api/events/show-popup.md) | @getshort(api/events/show-popup.md) | +| [](api/events/show-suggest.md) | @getshort(api/events/show-suggest.md) | +| [](api/events/subscript.md) | @getshort(api/events/subscript.md) | +| [](api/events/superscript.md) | @getshort(api/events/superscript.md) | +| [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md)| +| [](api/events/toggle-layout-mode.md) | @getshort(api/events/toggle-layout-mode.md) | +| [](api/events/toggle-list.md) | @getshort(api/events/toggle-list.md) | +| [](api/events/toggle-shortcut-info.md) | @getshort(api/events/toggle-shortcut-info.md) | +| [](api/events/undo.md) | @getshort(api/events/undo.md) | +| [](api/events/update-link.md) | @getshort(api/events/update-link.md) | diff --git a/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..bd6524b --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/main_overview.md @@ -0,0 +1,98 @@ +--- +sidebar_label: API 개요 +title: API 개요 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText의 API 개요를 확인하실 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText 30일 무료 평가판을 다운로드하세요. +--- + +# API 개요 {#api-overview} + +## RichText 생성자 {#richtextconstructor} + +~~~js +new richtext.RichText("#root", { + // 구성 매개변수 +}); +~~~ + +**매개변수**: + +- HTML 컨테이너 (예: CSS 선택자 또는 DOM 요소) +- 구성 객체 ([속성 보기](api/overview/properties_overview.md)) + +## RichText 메서드 {#richtextmethods} + +| 이름 | 설명 | +| ----------------------------------------------|-------------------------------------------| +| [](api/methods/get-value.md) | @getshort(api/methods/get-value.md) | +| [](api/methods/set-value.md) | @getshort(api/methods/set-value.md) | +| [](api/methods/insert-value.md) | @getshort(api/methods/insert-value.md) | +| [](api/methods/set-config.md) | @getshort(api/methods/set-config.md) | +| [](api/methods/set-locale.md) | @getshort(api/methods/set-locale.md) | +| [](api/methods/destructor.md) | @getshort(api/methods/destructor.md) | + +## Event Bus 메서드 {#event-bus-methods} + +| 이름 | 설명 | +| ----------------------------------------------|-------------------------------------------| +| [](api/internal/exec.md) | @getshort(api/internal/exec.md) | +| [](api/internal/intercept.md) | @getshort(api/internal/intercept.md) | +| [](api/internal/on.md) | @getshort(api/internal/on.md) | +| [](api/internal/detach.md) | @getshort(api/internal/detach.md) | +| [](api/internal/set-next.md) | @getshort(api/internal/set-next.md) | + +## 상태 메서드 {#state-methods} + +| 이름 | 설명 | +| ----------------------------------------------|-------------------------------------------| +| [](api/internal/get-state.md) | @getshort(api/internal/get-state.md) | +| [](api/internal/get-reactive-state.md) | @getshort(api/internal/get-reactive-state.md) | + +## 이벤트 {#events} + +| 이름 | 설명 | +| ----------------------------------------------|-------------------------------------------| +| [](api/events/align.md) | @getshort(api/events/align.md) | +| [](api/events/clear-text-format.md) | @getshort(api/events/clear-text-format.md) | +| [](api/events/copy.md) | @getshort(api/events/copy.md) | +| [](api/events/create-new.md) | @getshort(api/events/create-new.md) | +| [](api/events/cut.md) | @getshort(api/events/cut.md) | +| [](api/events/delete-link.md) | @getshort(api/events/delete-link.md) | +| [](api/events/export.md) | @getshort(api/events/export.md) | +| [](api/events/import.md) | @getshort(api/events/import.md) | +| [](api/events/indent.md) | @getshort(api/events/indent.md) | +| [](api/events/insert-image.md) | @getshort(api/events/insert-image.md) | +| [](api/events/insert-line.md) | @getshort(api/events/insert-line.md) | +| [](api/events/insert-link.md) | @getshort(api/events/insert-link.md) | +| [](api/events/insert-list.md) | @getshort(api/events/insert-list.md) | +| [](api/events/outdent.md) | @getshort(api/events/outdent.md) | +| [](api/events/paste.md) | @getshort(api/events/paste.md) | +| [](api/events/print.md) | @getshort(api/events/print.md) | +| [](api/events/redo.md) | @getshort(api/events/redo.md) | +| [](api/events/resize-image.md) | @getshort(api/events/resize-image.md) | +| [](api/events/set-font-family.md) | @getshort(api/events/set-font-family.md) | +| [](api/events/set-font-size.md) | @getshort(api/events/set-font-size.md) | +| [](api/events/set-line-height.md) | @getshort(api/events/set-line-height.md) | +| [](api/events/set-text-color.md) | @getshort(api/events/set-text-color.md) | +| [](api/events/set-text-format.md) | @getshort(api/events/set-text-format.md) | +| [](api/events/set-text-style.md) | @getshort(api/events/set-text-style.md) | +| [](api/events/show-popup.md) | @getshort(api/events/show-popup.md) | +| [](api/events/subscript.md) | @getshort(api/events/subscript.md) | +| [](api/events/superscript.md) | @getshort(api/events/superscript.md) | +| [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md) | +| [](api/events/toggle-layout-mode.md) | @getshort(api/events/toggle-layout-mode.md) | +| [](api/events/toggle-shortcut-info.md) | @getshort(api/events/toggle-shortcut-info.md) | +| [](api/events/undo.md) | @getshort(api/events/undo.md) | +| [](api/events/update-link.md) | @getshort(api/events/update-link.md) | + +## 속성 {#properties} + +| 이름 | 설명 | +| ----------------------------------------------|-------------------------------------------| +| [](api/config/default-styles.md) | @getshort(api/config/default-styles.md) | +| [](api/config/fullscreen-mode.md) | @getshort(api/config/fullscreen-mode.md) | +| [](api/config/image-upload-url.md) | @getshort(api/config/image-upload-url.md) | +| [](api/config/layout-mode.md) | @getshort(api/config/layout-mode.md) | +| [](api/config/locale.md) | @getshort(api/config/locale.md) | +| [](api/config/menubar.md) | @getshort(api/config/menubar.md) | +| [](api/config/toolbar.md) | @getshort(api/config/toolbar.md) | +| [](api/config/value.md) | @getshort(api/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..34eaab8 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md @@ -0,0 +1,19 @@ +--- +sidebar_label: 메서드 개요 +title: 메서드 개요 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText의 메서드 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText 30일 무료 평가판을 다운로드하세요. +--- + +# 메서드 개요 {#methods-overview} + +이 페이지는 DHTMLX RichText 에디터에서 사용할 수 있는 핵심 메서드의 요약을 제공합니다. +이 레퍼런스를 통해 각 메서드의 상세 설명으로 빠르게 이동하고, 목적을 파악하며, 사용 예제를 확인할 수 있습니다. + +| 이름 | 설명 | +| ------------------------------------------------------ | ----------------------------------------- | +| [](api/methods/destructor.md) | @getshort(api/methods/destructor.md) | +| [](api/methods/get-value.md) | @getshort(api/methods/get-value.md) | +| [](api/methods/set-value.md) | @getshort(api/methods/set-value.md) | +| [](api/methods/insert-value.md) | @getshort(api/methods/insert-value.md) | +| [](api/methods/set-config.md) | @getshort(api/methods/set-config.md) | +| [](api/methods/set-locale.md) | @getshort(api/methods/set-locale.md) | diff --git a/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..f4d3a40 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md @@ -0,0 +1,23 @@ +--- +sidebar_label: 속성 개요 +title: 속성 개요 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText의 속성 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# 속성 개요 {#properties-overview} + +이 페이지에는 DHTMLX RichText 에디터를 초기화할 때 사용할 수 있는 모든 구성 속성이 나열되어 있습니다. +이 속성들을 통해 레이아웃, 툴바, 값, 지역화 및 에디터의 기타 여러 측면을 제어할 수 있습니다. + +| 이름 | 설명 | +| --------------------------------------------------------|----------------------------------------------| +| [](api/config/default-styles.md) | @getshort(api/config/default-styles.md) | +| [](api/config/fullscreen-mode.md) | @getshort(api/config/fullscreen-mode.md) | +| [](api/config/image-upload-url.md) | @getshort(api/config/image-upload-url.md) | +| [](api/config/layout-mode.md) | @getshort(api/config/layout-mode.md) | +| [](api/config/locale.md) | @getshort(api/config/locale.md) | +| [](api/config/menubar.md) | @getshort(api/config/menubar.md) | +| [](api/config/toolbar.md) | @getshort(api/config/toolbar.md) | +| [](api/config/trigger-template.md) | @getshort(api/config/trigger-template.md) | +| [](api/config/triggers.md) | @getshort(api/config/triggers.md) | +| [](api/config/value.md) | @getshort(api/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..c7fd0c8 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md @@ -0,0 +1,15 @@ +--- +sidebar_label: State 메서드 +title: State 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText의 내부 State 메서드 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# State 메서드 {#state-methods} + +이 페이지에서는 DHTMLX RichText 에디터의 내부 state에 접근하고 작업하기 위한 메서드를 소개합니다. +이 메서드들은 디버깅, 반응형 시스템 통합, 또는 고급 커스텀 로직 구현에 유용합니다. + +| 이름 | 설명 | +| ----------------------------------------------------------- | ------------------------------------------------ | +| [](api/internal/get-reactive-state.md) | @getshort(api/internal/get-reactive-state.md) | +| [](api/internal/get-state.md) | @getshort(api/internal/get-state.md) | diff --git a/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..f26d8ef --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/configuration.md @@ -0,0 +1,377 @@ +--- +sidebar_label: 구성 +title: 구성 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 구성 방법을 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# 구성 {#configuration} + +다음 속성을 사용하여 RichText의 외관과 동작을 구성할 수 있습니다: + +- [`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) — 초기 HTML 콘텐츠 설정 +- [`locale`](api/config/locale.md) — 초기화 시 로컬라이제이션 객체 적용 +- [`defaultStyles`](api/config/default-styles.md) — 특정 블록 유형의 기본 스타일 설정 +- [`imageUploadUrl`](api/config/image-upload-url.md) — 이미지 업로드 엔드포인트 설정 +- [`triggers`](api/config/triggers.md) — @mentions, #tags 및 커스텀 드롭다운 트리거 활성화 ([멘션 및 태그](guides/mentions_and_tags.md) 가이드 참고) + +## 레이아웃 모드 {#layout-modes} + +RichText는 편집 영역에 대해 두 가지 레이아웃 모드를 지원합니다: + +- `"classic"` — 편집 영역이 전체 페이지를 채웁니다 + +
+![클래식 레이아웃 모드의 DHTMLX RichText 편집기](/img/richtext/classic_mode.png) +
+ +- `"document"` — 편집 영역이 문서 페이지처럼 표시됩니다 + +
+![문서 모드의 DHTMLX RichText 편집기](/img/richtext/document_mode.png) +
+ +초기화 시 [`layoutMode`](api/config/layout-mode.md) 속성을 설정하여 모드를 선택합니다: + +~~~jsx +const editor = new richtext.Richtext("#root", { + layoutMode: "document" +}); +~~~ + +**관련 샘플:** [RichText. 문서 및 클래식 모드](https://snippet.dhtmlx.com/jz8q432l?tag=richtext) + +## 툴바 {#toolbar} + +RichText 툴바는 컨트롤을 여러 블록으로 그룹화하며 커스터마이즈할 수 있습니다. + +### 기본 툴바 컨트롤 {#default-toolbar-controls} + +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. 전체 툴바](https://snippet.dhtmlx.com/ziynafp7?tag=richtext) + +### 커스텀 툴바 컨트롤 추가 {#add-custom-toolbar-controls} + +다음 필드 중 하나를 포함하는 객체를 [`toolbar`](api/config/toolbar.md) 배열에 전달합니다: + +- `type: string` — 필수. 컨트롤 유형: `"button"`, `"richselect"`, 또는 `"colorpicker"` +- `id: string` — 선택 사항. 커스텀 컨트롤 ID; 기존 컨트롤 ID와 중복될 수 없습니다 +- `icon: string` — 선택 사항. 아이콘 클래스 이름; 라벨과 함께 사용됩니다 +- `label: string` — 선택 사항. 버튼 라벨; 아이콘과 함께 사용됩니다 +- `tooltip: string` — 선택 사항. 마우스를 올렸을 때 표시되는 툴팁; 설정하지 않으면 `label`로 기본값이 지정됩니다 +- `css: string` — 선택 사항. 컨트롤의 CSS 클래스. 내장 클래스: `wx-primary`, `wx-secondary` +- `handler: () => void` — 선택 사항. 클릭 시 실행되는 callback + +아래 예제는 내장 버튼, `richselect` 유형의 미리 정의된 컨트롤, 그리고 두 개의 커스텀 버튼을 조합합니다: + +~~~jsx {6-32} +new richtext.Richtext("#root", { + toolbar: [ + // 문자열 항목은 내장 버튼을 나타냅니다 + "bold", + "italic", + // 미리 정의된 버튼은 { 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: () => {/* 커스텀 로직 */} + }, + { + type: "button", + id: "other", + icon: "wxo-help", + label: "Other", + tooltip: "Some tooltip", + handler: () => {/* 커스텀 로직 */} + } + ], + // 다른 구성 속성들 +}); +~~~ + +**관련 샘플:** [RichText. 커스텀 컨트롤 및 간소화된 툴바](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### 툴바 숨기기 {#hide-the-toolbar} + +[`toolbar`](api/config/toolbar.md) 속성을 `false`로 설정하여 툴바를 숨깁니다: + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false, + // 다른 구성 속성들 +}); +~~~ + +## 메뉴바 표시 {#show-the-menubar} + +[`menubar`](api/config/menubar.md) 속성을 활성화하면 툴바 위에 상단 메뉴바가 렌더링됩니다. 기본값은 `false`입니다. + +~~~jsx {2} +new richtext.Richtext("#root", { + menubar: true + // 다른 구성 속성들 +}); +~~~ + +**관련 샘플:** [RichText. 메뉴바로 초기화](https://snippet.dhtmlx.com/tjryzka7?tag=richtext) + +## 초기 콘텐츠 설정 {#set-the-initial-content} + +[`value`](api/config/value.md) 속성을 사용하여 초기화 시 편집기에 초기 HTML 콘텐츠를 전달합니다: + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" + // 다른 구성 속성들 +}); +~~~ + +초기화 후 콘텐츠를 교체하거나, 커스텀 인코더를 사용하여 비-HTML 형식으로 로드하려면 [`setValue()`](api/methods/set-value.md) 메서드를 호출합니다. + +**관련 샘플:** [RichText. 다양한 형식으로 작업 (Markdown, HTML, 텍스트)](https://snippet.dhtmlx.com/cne4kujn?tag=richtext) + +## 초기 로케일 설정 {#set-the-initial-locale} + +[`locale`](api/config/locale.md) 속성을 사용하여 초기화 시 로컬라이제이션 객체를 적용합니다: + +~~~jsx {2} +new richtext.Richtext("#root", { + locale: richtext.locales.cn + // 다른 구성 속성들 +}); +~~~ + +자세한 내용과 [`setLocale()`](api/methods/set-locale.md)을 사용한 동적 로케일 전환에 대해서는 [로컬라이제이션](guides/localization.md) 가이드를 참고하십시오. + +## 전체 화면 모드로 시작 {#start-in-fullscreen-mode} + +[`fullscreenMode`](api/config/fullscreen-mode.md) 속성을 `true`로 설정하면 초기화 시 편집기가 전체 화면으로 열립니다. 기본값은 `false`입니다. + +~~~jsx {2} +new richtext.Richtext("#root", { + fullscreenMode: true + // 다른 구성 속성들 +}); +~~~ + +## 이미지 삽입 구성 {#configure-image-insertion} + +RichText는 툴바, 메뉴바, 붙여넣기, 드래그 앤 드롭을 통한 이미지 삽입에 두 가지 모드를 지원합니다. [`imageUploadUrl`](api/config/image-upload-url.md) 속성에 따라 모드가 자동으로 선택됩니다. + +### 서버에 이미지 업로드 {#upload-images-to-a-server} + +[`imageUploadUrl`](api/config/image-upload-url.md) 속성에 URL을 전달하면 삽입된 각 이미지를 해당 엔드포인트에 업로드합니다. RichText는 파일을 `multipart/form-data`(필드명 `upload`)로 전송하고 서버가 반환한 URL을 삽입합니다: + +~~~jsx {2} +new richtext.Richtext("#root", { + imageUploadUrl: "https://example.com/upload" + // 다른 구성 속성들 +}); +~~~ + +### 이미지를 base64로 인라인 삽입 {#insert-images-inline-as-base64} + +[`imageUploadUrl`](api/config/image-upload-url.md)을 생략하거나 빈 문자열로 설정하면 이미지가 base64 데이터 URL로 문서 콘텐츠에 직접 임베드됩니다. 서버가 필요하지 않습니다: + +~~~jsx {2} +new richtext.Richtext("#root", { + // imageUploadUrl이 설정되지 않은 경우 이미지는 인라인으로 삽입됩니다 + // 다른 구성 속성들 +}); +~~~ + +1024×800보다 큰 인라인 이미지는 축소된 크기로 표시됩니다(`width`/`height` 속성이 이 한도 내에 맞게 제한됨). 단, 임베드된 바이트는 원본 전체 해상도 파일이며, 클라이언트에서 다운스케일하거나 재인코딩하지 않습니다. + +:::note[참고] +인라인(base64) 이미지는 내장 DOCX/PDF [내보내기](api/events/export.md)에서 보존되지 않습니다. 내보내기 기능에 의존하는 경우 이미지가 외부 위치를 참조할 수 있도록 `imageUploadUrl`을 제공하십시오. +::: + +업로드 엔드포인트가 구현해야 하는 전체 요청/응답 계약 및 인라인 이미지 폴백에 대한 자세한 내용은 [서버 연동](guides/working_with_server.md)을 참고하십시오. + +## 기본 스타일 구성 {#configure-default-styles} + +[`defaultStyles`](api/config/default-styles.md) 속성을 사용하여 블록 유형별 기본 스타일을 설정합니다. + +[`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`](api/config/default-styles.md) 속성은 영향을 받는 블록에 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` 블록은 분홍색 배경에 보라색 텍스트로 28px 크기의 `"Roboto"` 글꼴 패밀리를 사용합니다. 일치하는 CSS 규칙은 렌더링된 `h2` 요소에 동일한 값을 적용합니다. + +**관련 샘플:** [RichText. 타이포그래피 기본값 변경 (글꼴, 글꼴 크기 등)](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..97f94ec --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/initialization.md @@ -0,0 +1,80 @@ +--- +sidebar_label: 초기화 +title: 초기화 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 초기화에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 사용해 보세요. DHTMLX RichText의 무료 30일 평가판도 다운로드할 수 있습니다. +--- + +# 초기화 {#initialization} + +이 가이드는 페이지에 RichText를 추가하는 방법을 설명합니다. 다음 단계에 따라 사용 가능한 에디터를 설정하세요: + +1. [페이지에 소스 파일 추가하기](#include-the-source-files) +2. [RichText용 컨테이너 생성하기](#create-a-container) +3. [RichText 초기화하기](#initialize-richtext) + +## 소스 파일 추가하기 {#include-the-source-files} + +프로젝트에 RichText JavaScript 및 CSS 파일을 추가합니다. [패키지를 다운로드](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml)하여 프로젝트 폴더에 압축을 풀어 주세요. + +RichText를 생성하려면 페이지에 두 개의 소스 파일을 추가해야 합니다: + +- *richtext.js* +- *richtext.css* + +HTML에서 해당 파일을 참조합니다. 폴더 구조에 맞게 상대 경로를 조정하세요: + +~~~html title="index.html" + + +~~~ + +## 컨테이너 생성하기 {#create-a-container} + +*"root"*와 같은 ID를 가진 RichText용 컨테이너를 추가합니다: + +~~~jsx title="index.html" +
+~~~ + +## RichText 초기화하기 {#initialize-richtext} + +`richtext.Richtext` 생성자를 사용하여 RichText를 초기화합니다. 생성자는 두 가지 매개변수를 받습니다: + +- 컨테이너 — CSS 선택자 또는 DOM 요소 +- 에디터 속성이 포함된 구성 객체. 아래의 [전체 속성 목록](#configuration-properties)을 참조하세요 + +아래 예제는 `#root` 컨테이너에서 RichText를 초기화합니다: + +~~~jsx title="index.html" +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +~~~ + +### 구성 속성 {#configuration-properties} + +구성 객체의 키로 구성 옵션을 추가합니다. + +:::note[참고] +전체 구성 속성 목록은 [속성 개요](api/overview/properties_overview.md)를 참조하세요. +::: + +## RichText 인스턴스 제거하기 {#destroy-the-richtext-instance} + +[`destructor()`](api/methods/destructor.md) 메서드를 호출하여 RichText HTML을 제거하고 관련 이벤트를 모두 해제합니다: + +~~~jsx +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); + +editor.destructor(); +~~~ + +## 예제 {#example} + +아래 예제는 메뉴바를 활성화한 상태로 RichText를 초기화합니다: + + + +**관련 샘플:** [RichText. 초기화](https://snippet.dhtmlx.com/t55alxiy?tag=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..63a5df8 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md @@ -0,0 +1,300 @@ +--- +sidebar_label: Angular와의 통합 +title: Angular와의 통합 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 Angular와의 통합에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 확인하며, DHTMLX RichText 30일 무료 평가판을 다운로드하세요. +--- + +# Angular와의 통합 {#integration-with-angular} + +:::tip[팁] +Angular의 기본 개념과 패턴을 먼저 숙지하시기 바랍니다. 복습이 필요하시면 [Angular 문서](https://v17.angular.io/docs)를 참고하세요. +::: + +DHTMLX RichText는 Angular와 함께 사용할 수 있습니다. 전체 코드 예제는 [GitHub 데모](https://github.com/DHTMLX/angular-richtext-demo)를 참고하세요. + +## 프로젝트 생성 {#create-a-project} + +:::info[정보] +새 프로젝트를 생성하기 전에 [Angular CLI](https://v17.angular.io/cli)와 [Node.js](https://nodejs.org/en/)를 먼저 설치하세요. +::: + +Angular CLI를 사용하여 *my-angular-richtext-app* 프로젝트를 생성합니다. + +~~~bash +ng new my-angular-richtext-app +~~~ + +:::note[참고] +프로젝트 생성 중 Angular CLI가 묻는 경우, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG/Prerendering)을 비활성화하세요. +::: + +이 명령어는 필요한 모든 도구를 설치합니다. 추가 명령어는 필요하지 않습니다. + +### 의존성 설치 {#install-dependencies} + +새 앱 디렉터리로 이동합니다. + +~~~bash +cd my-angular-richtext-app +~~~ + +[yarn](https://yarnpkg.com/) 패키지 매니저로 의존성을 설치하고 개발 서버를 시작합니다. + +~~~bash +yarn +yarn start +~~~ + +앱은 localhost에서 실행됩니다(예: `http://localhost:3000`). + +## RichText 생성 {#create-richtext} + +앱을 중지하고 RichText 패키지를 설치합니다. + +### 1단계. 패키지 설치 {#step-1-install-the-package} + +[RichText 트라이얼 패키지](/how_to_start/#installing-richtext-via-npm-or-yarn)를 다운로드하고 README 파일의 단계를 따라 진행하세요. 트라이얼 라이선스는 30일 동안 유효합니다. + +### 2단계. 컴포넌트 생성 {#step-2-create-the-component} + +애플리케이션에 RichText를 추가할 Angular 컴포넌트를 생성합니다. *src/app/* 디렉터리에 *richtext* 폴더를 만들고 *richtext.component.ts* 파일을 추가하세요. + +#### 소스 파일 가져오기 {#import-source-files} + +*richtext.component.ts*를 열고 RichText 소스 파일을 가져옵니다. + +로컬 폴더에 설치된 PRO 버전의 경우 다음을 사용하세요. + +~~~jsx +import { Richtext } from 'dhx-richtext-package'; +~~~ + +트라이얼 버전의 경우 다음을 사용하세요. + +~~~jsx +import { Richtext } from '@dhx/trial-richtext'; +~~~ + +이 튜토리얼에서는 RichText 트라이얼 버전을 사용합니다. + +#### 컨테이너 설정 및 RichText 초기화 {#set-the-container-and-initialize-richtext} + +RichText의 컨테이너 요소를 설정하고 `ngOnInit()` 내부에서 `Richtext` 생성자로 컴포넌트를 초기화합니다. 정리를 위해 `ngOnDestroy()` 내부에서 [`destructor()`](api/methods/destructor.md) 메서드를 호출하세요. + +~~~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에서 로 "richtext" 셀렉터를 사용합니다 + 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를 삭제합니다 + } +} +~~~ + +#### 스타일 추가 {#add-styles} + +*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); +} +~~~ + +#### 데이터 로드 {#load-data} + +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()` 내부에서 `value` 속성을 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(); // 데이터 모듈에서 value를 추출합니다 + 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(); // 데이터 모듈에서 value를 추출합니다 + this._editor = new Richtext(this.richtext_container.nativeElement, { + // 기타 설정 속성 + }); + + // setValue() 메서드를 통해 데이터를 적용합니다 + this._editor.setValue(value); + } + + ngOnDestroy(): void { + this._editor.destructor(); + } +} +~~~ + +RichText 컴포넌트를 사용할 준비가 완료되었습니다. `` 요소가 마운트되면 Angular가 데이터와 함께 에디터를 렌더링합니다. 전체 설정 옵션 목록은 [RichText API 개요](api/overview/main_overview.md)를 참고하세요. + +#### 이벤트 처리 {#handle-events} + +RichText는 사용자 동작에 따라 이벤트를 발생시킵니다. [`api.on()`](api/internal/on.md) 메서드로 이벤트를 구독하여 사용자 입력에 반응하세요. [전체 이벤트 목록](api/overview/events_overview.md)을 참고하세요. + +*richtext.component.ts*를 열고 `ngOnInit()` 메서드를 업데이트합니다. 아래 예제는 [`print`](api/events/print.md) 이벤트가 발생할 때마다 메시지를 콘솔에 출력합니다. + +~~~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 추가 {#step-3-add-richtext-to-the-app} + +*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가 렌더링되는지 확인합니다. + +
+![샘플 콘텐츠와 함께 Angular 애플리케이션에 렌더링된 DHTMLX RichText](/img/trial_richtext.png) +
+ +이제 Angular에서 RichText 통합이 완성되었습니다. 필요에 맞게 코드를 커스터마이즈하세요. 전체 예제는 [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..0108294 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_react.md @@ -0,0 +1,253 @@ +--- +sidebar_label: React와의 통합 +title: React와의 통합 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 React와의 통합 방법을 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 무료 30일 평가판도 다운로드할 수 있습니다. +--- + +# React와의 통합 {#integration-with-react} + +:::tip[팁] +[React](https://react.dev)의 기본 개념과 패턴을 숙지하고 있는지 확인하십시오. 복습이 필요한 경우 [React 문서](https://react.dev/learn)를 참고하십시오. +::: + +DHTMLX RichText는 React와 함께 동작합니다. 전체 코드 예제는 [GitHub 데모](https://github.com/DHTMLX/react-richtext-demo)를 참고하십시오. + +## 프로젝트 생성 {#create-a-project} + +:::info[정보] +새 프로젝트를 생성하기 전에 [Node.js](https://nodejs.org/en/)와 (선택적으로) [Vite](https://vite.dev/)를 설치하십시오. +::: + +Create React App으로 새 *my-react-richtext-app* 프로젝트를 생성합니다: + +~~~bash +npx create-react-app my-react-richtext-app +~~~ + +### 의존성 설치 {#install-dependencies} + +새 앱 디렉토리로 이동합니다: + +~~~bash +cd my-react-richtext-app +~~~ + +패키지 매니저를 사용하여 의존성을 설치하고 개발 서버를 시작합니다. + +[yarn](https://yarnpkg.com/)을 사용하는 경우 실행합니다: + +~~~bash +yarn +yarn start +~~~ + +[npm](https://www.npmjs.com/)을 사용하는 경우 실행합니다: + +~~~bash +npm install +npm start +~~~ + +앱은 localhost에서 실행됩니다 (예: `http://localhost:3000`). + +## RichText 생성 {#create-richtext} + +앱을 중지하고 RichText 패키지를 설치합니다. + +### 1단계. 패키지 설치 {#step-1-install-the-package} + +[RichText 평가판 패키지](/how_to_start/#installing-richtext-via-npm-or-yarn)를 다운로드하고 README 파일의 단계를 따르십시오. 평가판 라이선스는 30일 동안 유효합니다. + +### 2단계. 컴포넌트 생성 {#step-2-create-the-component} + +RichText를 애플리케이션에 추가하는 React 컴포넌트를 생성합니다. *src/* 디렉토리에 *Richtext.jsx*라는 새 파일을 생성합니다. + +#### 소스 파일 가져오기 {#import-source-files} + +*Richtext.jsx*를 열고 RichText 소스 파일을 가져옵니다. + +로컬 폴더에서 설치한 PRO 버전의 경우 다음을 사용합니다: + +~~~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 초기화 {#set-the-container-and-initialize-richtext} + +RichText용 컨테이너 요소를 설정하고 `useEffect()` 내에서 `Richtext` 생성자로 컴포넌트를 초기화합니다. RichText를 제거하려면 클린업 함수에서 [`destructor()`](api/methods/destructor.md) 메서드를 호출합니다: + +~~~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
+
+
+} +~~~ + +#### 스타일 추가 {#add-styles} + +프로젝트의 메인 CSS 파일에 RichText와 컨테이너의 스타일을 추가합니다: + +~~~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); +} +~~~ + +#### 데이터 로드 {#load-data} + +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*를 열고 데이터를 가져옵니다. value를 `` 컴포넌트에 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*를 열고 `props.value`를 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) 메서드를 호출하여 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(); + + let value = props.value; + + useEffect(() => { + const editor = new Richtext(richtext_container.current, { + // 설정 속성 + }); + + editor.setValue(value); + + return () => { + editor.destructor(); + }; + }, []); + + return
+
+
+} +~~~ + +RichText 컴포넌트를 사용할 준비가 되었습니다. `` 요소가 마운트될 때 React가 데이터와 함께 에디터를 렌더링합니다. 전체 구성 옵션 목록은 [RichText API 개요](api/overview/main_overview.md)를 참고하십시오. + +#### 이벤트 처리 {#handle-events} + +RichText는 사용자 동작 시 이벤트를 발생시킵니다. [`api.on()`](api/internal/on.md) 메서드로 이벤트를 구독하여 사용자 입력에 반응하십시오. [전체 이벤트 목록](api/overview/events_overview.md)을 참고하십시오. + +*Richtext.jsx*를 열고 `useEffect()` hook을 업데이트합니다. 아래 예제는 [`print`](api/events/print.md) 이벤트가 발생할 때마다 메시지를 로그에 기록합니다: + +~~~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가 렌더링되는 것을 확인할 수 있습니다. + +
+![샘플 콘텐츠와 함께 React 애플리케이션에 렌더링된 DHTMLX RichText](/img/trial_richtext.png) +
+ +이제 React에서 RichText 통합이 완료되었습니다. 필요에 맞게 코드를 커스터마이즈하십시오. 전체 예제는 [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..c64b5f2 --- /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와의 통합 {#integration-with-svelte} + +:::tip[팁] +[Svelte](https://svelte.dev/)의 기본 개념과 패턴을 먼저 익혀두시기 바랍니다. 복습이 필요하다면 [Svelte 문서](https://svelte.dev/docs)를 참고하세요. +::: + +DHTMLX RichText는 Svelte와 함께 사용할 수 있습니다. 전체 코드 예제는 [GitHub 데모](https://github.com/DHTMLX/svelte-richtext-demo)를 참고하세요. + +## 프로젝트 생성 {#create-a-project} + +:::info[정보] +새 프로젝트를 생성하기 전에 [Node.js](https://nodejs.org/en/)와 (선택 사항으로) [Vite](https://vite.dev/)를 설치하세요. +::: + +이 튜토리얼에서는 Vite 기반의 Svelte 프로젝트를 사용합니다. SvelteKit 및 기타 옵션에 대해서는 [Svelte 프로젝트 가이드](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit)를 참고하세요. + +새 Vite 프로젝트를 시작합니다: + +~~~bash +npm create vite@latest +~~~ + +### 의존성 설치 {#install-dependencies} + +스캐폴더에서 프로젝트 이름을 입력하라고 하면 *my-svelte-richtext-app*을 사용하세요. 그런 다음 새 디렉터리로 이동합니다: + +~~~bash +cd my-svelte-richtext-app +~~~ + +패키지 매니저를 사용하여 의존성을 설치하고 개발 서버를 시작합니다. + +[yarn](https://yarnpkg.com/)을 사용하는 경우 다음을 실행합니다: + +~~~bash +yarn +yarn dev +~~~ + +[npm](https://www.npmjs.com/)을 사용하는 경우 다음을 실행합니다: + +~~~bash +npm install +npm run dev +~~~ + +앱은 localhost에서 실행됩니다(예: `http://localhost:3000`). + +## RichText 생성 {#create-richtext} + +앱을 중지하고 RichText 패키지를 설치합니다. + +### 1단계. 패키지 설치 {#step-1-install-the-package} + +[RichText 평가판 패키지](/how_to_start/#installing-richtext-via-npm-or-yarn)를 다운로드하고 README 파일의 단계를 따릅니다. 평가판 라이선스는 30일간 유효합니다. + +### 2단계. 컴포넌트 생성 {#step-2-create-the-component} + +애플리케이션에 RichText를 추가할 Svelte 컴포넌트를 생성합니다. *src/* 디렉터리에 *Richtext.svelte*라는 새 파일을 만드세요. + +#### 소스 파일 가져오기 {#import-source-files} + +*Richtext.svelte*를 열고 RichText 소스 파일을 가져옵니다. + +로컬 폴더에서 설치한 PRO 버전의 경우 다음을 사용합니다: + +~~~html title="Richtext.svelte" + +~~~ + +평가판의 경우 다음을 사용합니다: + +~~~html title="Richtext.svelte" + +~~~ + +이 튜토리얼에서는 RichText 평가판을 사용합니다. + +#### 컨테이너 설정 및 RichText 초기화 {#set-the-container-and-initialize-richtext} + +RichText의 컨테이너 요소를 설정하고 `onMount()` 내부에서 컴포넌트를 초기화합니다. RichText를 제거하려면 `onDestroy()` 내부에서 [`destructor()`](api/methods/destructor.md) 메서드를 호출합니다: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +#### 스타일 추가 {#add-styles} + +프로젝트의 메인 CSS 파일(예: *src/app.css*)에 RichText와 해당 컨테이너의 스타일을 추가합니다: + +~~~css title="app.css" +/* 기본 페이지 스타일 */ +html, +body { + height: 100%; + padding: 0; + margin: 0; +} + +/* RichText 컨테이너 */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* RichText 위젯 */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### 데이터 로드 {#load-data} + +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.svelte*를 열고 데이터를 가져온 다음, value를 `` 컴포넌트에 prop으로 전달합니다: + +~~~html {} title="App.svelte" + + + +~~~ + +*Richtext.svelte*를 열고 prop 값을 RichText 설정에 전달합니다: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +또는 `onMount()` 내부에서 [`setValue()`](api/methods/set-value.md) 메서드를 호출하여 RichText에 데이터를 로드할 수 있습니다: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +RichText 컴포넌트를 사용할 준비가 되었습니다. `` 요소가 마운트되면 Svelte가 데이터와 함께 에디터를 렌더링합니다. 전체 설정 옵션 목록은 [RichText API 개요](api/overview/main_overview.md)를 참고하세요. + +#### 이벤트 처리 {#handle-events} + +RichText는 사용자 동작 시 이벤트를 발생시킵니다. [`api.on()`](api/internal/on.md) 메서드를 사용하여 이벤트를 구독하고 사용자 입력에 반응할 수 있습니다. [전체 이벤트 목록](api/overview/events_overview.md)을 참고하세요. + +*Richtext.svelte*를 열고 `onMount()` 훅을 업데이트합니다. 아래 예제는 모든 [`print`](api/events/print.md) 이벤트 발생 시 메시지를 로그에 기록합니다: + +~~~html {} title="Richtext.svelte" + + +// ... +~~~ + +앱을 시작하면 페이지에 데이터와 함께 RichText가 렌더링되는 것을 확인할 수 있습니다. + +
+![샘플 콘텐츠와 함께 Svelte 애플리케이션에 렌더링된 DHTMLX RichText](/img/trial_richtext.png) +
+ +이제 Svelte에서 RichText 통합이 완료되었습니다. 필요에 맞게 코드를 커스터마이즈하세요. 전체 예제는 [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..89509c6 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md @@ -0,0 +1,277 @@ +--- +sidebar_label: Vue와의 통합 +title: Vue와의 통합 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 Vue와의 통합에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# Vue와의 통합 {#integration-with-vue} + +:::tip[팁] +기본적인 [Vue](https://vuejs.org/) 개념과 패턴에 익숙하신지 확인하세요. 복습이 필요하시면 [Vue 3 문서](https://vuejs.org/guide/introduction.html#getting-started)를 참조하십시오. +::: + +DHTMLX RichText는 Vue와 함께 동작합니다. 전체 코드 예제는 [GitHub 데모](https://github.com/DHTMLX/vue-richtext-demo)를 참조하십시오. + +## 프로젝트 생성 {#create-a-project} + +:::info[정보] +새 프로젝트를 생성하기 전에 [Node.js](https://nodejs.org/en/)를 설치하십시오. +::: + +공식 스캐폴딩 도구를 사용하여 Vue 프로젝트를 생성합니다. + +~~~bash +npm create vue@latest +~~~ + +이 명령어는 `create-vue`를 설치하고 실행합니다. 스캐폴더에서 프로젝트 이름을 입력하라는 메시지가 표시되면 *my-vue-richtext-app*을 사용하십시오. 자세한 내용은 [Vue.js 빠른 시작](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)을 참조하십시오. + +### 의존성 설치 {#install-dependencies} + +앱 디렉터리로 이동합니다. + +~~~bash +cd my-vue-richtext-app +~~~ + +패키지 매니저를 사용하여 의존성을 설치하고 개발 서버를 시작합니다. + +[yarn](https://yarnpkg.com/)을 사용하는 경우 다음을 실행합니다. + +~~~bash +yarn +yarn dev +~~~ + +[npm](https://www.npmjs.com/)을 사용하는 경우 다음을 실행합니다. + +~~~bash +npm install +npm run dev +~~~ + +앱은 localhost에서 실행됩니다(예: `http://localhost:3000`). + +## RichText 생성 {#create-richtext} + +앱을 중지하고 RichText 패키지를 설치합니다. + +### 1단계. 패키지 설치 {#step-1-install-the-package} + +[평가판 RichText 패키지](/how_to_start/#installing-richtext-via-npm-or-yarn)를 다운로드하고 README 파일의 절차를 따르십시오. 평가판 라이선스는 30일간 유효합니다. + +### 2단계. 컴포넌트 생성 {#step-2-create-the-component} + +애플리케이션에 RichText를 추가하기 위한 Vue 컴포넌트를 생성합니다. *src/components/* 디렉터리에 *Richtext.vue*라는 새 파일을 만듭니다. + +#### 소스 파일 가져오기 {#import-source-files} + +*Richtext.vue*를 열고 RichText 소스 파일을 가져옵니다. + +로컬 폴더에서 설치한 PRO 버전의 경우 다음을 사용합니다. + +~~~html title="Richtext.vue" + +~~~ + +평가판 버전의 경우 다음을 사용합니다. + +~~~html title="Richtext.vue" + +~~~ + +이 튜토리얼에서는 RichText 평가판 버전을 사용합니다. + +#### 컨테이너 설정 및 RichText 초기화 {#set-the-container-and-initialize-richtext} + +RichText의 컨테이너 엘리먼트를 설정하고 `mounted()` 내에서 `Richtext` 생성자로 컴포넌트를 초기화합니다. RichText를 제거하려면 `unmounted()` 내에서 [`destructor()`](api/methods/destructor.md) 메서드를 호출합니다. + +~~~html {} title="Richtext.vue" + + + +~~~ + +#### 스타일 추가 {#add-styles} + +프로젝트의 메인 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); +} +~~~ + +#### 데이터 로드 {#load-data} + +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.vue*를 열고 데이터를 가져온 후 `data()` 메서드를 통해 초기화합니다. `` 컴포넌트에 값을 prop으로 전달합니다. + +~~~html {} title="App.vue" + + + +~~~ + +*Richtext.vue*를 열고 prop 값을 RichText 설정에 전달합니다. + +~~~html {} title="Richtext.vue" + + + +~~~ + +또는 `mounted()` 내에서 [`setValue()`](api/methods/set-value.md) 메서드를 호출하여 RichText에 데이터를 로드할 수도 있습니다. + +~~~html {} title="Richtext.vue" + + + +~~~ + +RichText 컴포넌트를 사용할 준비가 완료되었습니다. `` 엘리먼트가 마운트될 때 Vue가 데이터와 함께 에디터를 렌더링합니다. 전체 설정 옵션 목록은 [RichText API 개요](api/overview/main_overview.md)를 참조하십시오. + +#### 이벤트 처리 {#handle-events} + +RichText는 사용자 동작에 따라 이벤트를 발생시킵니다. [`api.on()`](api/internal/on.md) 메서드로 이벤트를 구독하여 사용자 입력에 반응하십시오. [전체 이벤트 목록](api/overview/events_overview.md)을 참조하십시오. + +*Richtext.vue*를 열고 `mounted()` 훅을 업데이트합니다. 아래 예제는 [`print`](api/events/print.md) 이벤트가 발생할 때마다 메시지를 로그에 기록합니다. + +~~~html {} title="Richtext.vue" + + +// ... +~~~ + +앱을 시작하면 페이지에 데이터와 함께 RichText가 렌더링되는 것을 확인할 수 있습니다. + +
+![샘플 콘텐츠와 함께 Vue 애플리케이션에 렌더링된 DHTMLX RichText](/img/trial_richtext.png) +
+ +이제 Vue에서 RichText 통합이 완성되었습니다. 필요에 맞게 코드를 커스터마이즈하십시오. 완전한 예제는 [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..4ccff6e --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/localization.md @@ -0,0 +1,495 @@ +--- +sidebar_label: 로컬라이제이션 +title: 로컬라이제이션 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 로컬라이제이션에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보세요. DHTMLX RichText 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# 로컬라이제이션 {#localization} + +RichText는 모든 인터페이스 레이블의 로컬라이제이션을 지원합니다. 새 로케일을 생성하거나 내장 로케일을 수정한 후, 에디터 설정을 통해 결과를 적용하십시오. + +## 기본 로케일 {#default-locale} + +기본적으로 RichText는 영어 로케일을 적용합니다: + +~~~jsx +const en = { + richtext: { + // 버튼/작업 + 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", + + // 메뉴바 전용 옵션 + 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", + + // 클립보드 + "Operation failed. Please check your browser's clipboard permissions.": + "Operation failed. Please check your browser's clipboard permissions.", + + // 블록 스타일 드롭다운 + Heading: "Heading", + Quote: "Quote", + Paragraph: "Paragraph", + "Text style": "Text style", + Lists: "Lists", + + normal: "normal", + default: "default", + + // 목록 + "Bulleted list": "Bulleted list", + "Numbered list": "Numbered list", + + // 링크 + "Enter text to display": "Enter text to display", + "Paste link": "Paste link", + "Link copied to clipboard": "Link copied to clipboard", + + // 단축키 그룹 + "Text formatting": "Text formatting", + Editing: "Editing", + "Special actions": "Special actions", + + // 색상 + 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", + + // 음영 + "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[정보] +RichText에는 내장 독일어(`de`) 및 중국어(`cn`) 로케일도 포함되어 있습니다. `richtext.locales` 네임스페이스를 통해 내장 로케일에 접근할 수 있습니다: `richtext.locales.en`, `richtext.locales.de`, `richtext.locales.cn`. +::: + +
+de locale + +~~~jsx +const de = { + richtext: { + // 버튼/작업 + 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", + + // 메뉴바 전용 옵션 + 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", + + // 클립보드 + "Operation failed. Please check your browser's clipboard permissions.": + "Operation fehlgeschlagen. Bitte überprüfen Sie die Berechtigungen für die Zwischenablage Ihres Browsers.", + + // 블록 스타일 드롭다운 + Heading: "Überschrift", + Quote: "Zitat", + Paragraph: "Absatz", + "Text style": "Textstil", + Lists: "Listen", + + normal: "normal", + default: "standard", + + // 목록 + "Bulleted list": "Liste mit Aufzählungszeichen", + "Numbered list": "Nummerierte Liste", + + // 링크 + "Enter text to display": "Text zum Anzeigen eingeben", + "Paste link": "Link einfügen", + "Link copied to clipboard": "Link in die Zwischenablage kopiert", + + // 단축키 그룹 + "Text formatting": "Textformatierung", + Editing: "Bearbeitung", + "Special actions": "Spezielle Aktionen", + + // 색상 + 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", + + // 음영 + "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: { + // 버튼/작업 + 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": "文档模式", + + // 메뉴바 전용 옵션 + 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": "键盘快捷键", + + // 클립보드 + "Operation failed. Please check your browser's clipboard permissions.": + "操作失败。请检查浏览器的剪贴板权限。", + + // 블록 스타일 드롭다운 + Heading: "标题", + Quote: "引用", + Paragraph: "段落", + "Text style": "文本样式", + Lists: "列表", + + normal: "普通的", + default: "默认", + + // 목록 + "Bulleted list": "项目符号列表", + "Numbered list": "编号列表", + + // 링크 + "Enter text to display": "输入要显示的文本", + "Paste link": "粘贴链接", + "Link copied to clipboard": "链接已复制到剪贴板", + + // 단축키 그룹 + "Text formatting": "文本格式化", + Editing: "编辑", + "Special actions": "特殊操作", + + // 색상 + Black: "黑色", + Gray: "灰色", + White: "白色", + Red: "红色", + Orange: "橙色", + Yellow: "黄色", + Lime: "酸橙色", + Green: "绿色", + Teal: "水鸭色", + Cyan: "青色", + Blue: "蓝色", + Indigo: "靛蓝色", + Magenta: "洋红色", + + // 음영 + "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": "深洋红色" + } +}; +~~~ +
+ +## 사용자 정의 로케일 적용 {#apply-a-custom-locale} + +모든 인터페이스 레이블에 대한 번역을 포함한 로케일 객체를 생성하거나 내장 로케일을 수정하십시오. 아래와 같이 초기화 시 로케일을 적용하거나 런타임에 전환할 수 있습니다. + +### 초기화 시 로케일 적용 {#apply-the-locale-at-initialization} + +생성자 설정의 [`locale`](api/config/locale.md) 속성에 로케일을 전달하십시오: + +~~~jsx +const editor = new richtext.Richtext("#root", { + locale: richtext.locales.de + // 기타 설정 속성 +}); +~~~ + +### 런타임에 로케일 전환 {#switch-the-locale-at-runtime} + +초기화 후 로케일을 변경하려면 [`setLocale()`](api/methods/set-locale.md) 메서드를 호출하십시오: + +~~~jsx +editor.setLocale(richtext.locales.cn); +~~~ + +기본 영어 로케일로 복원하려면 인수 없이 또는 `null`을 전달하여 [`setLocale()`](api/methods/set-locale.md)을 호출하십시오: + +~~~jsx +editor.setLocale(); +~~~ + +## 예제 {#example} + +아래 예제는 여러 RichText 로케일을 순환하는 방법을 보여줍니다: + + diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/mentions_and_tags.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/mentions_and_tags.md new file mode 100644 index 0000000..01cab4a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/mentions_and_tags.md @@ -0,0 +1,274 @@ +--- +sidebar_label: 멘션 및 태그 +title: 멘션 및 태그 +description: 'DHTMLX RichText에서 @멘션, #태그, 커스텀 드롭다운 트리거를 구성하는 방법을 알아보세요. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText의 무료 30일 평가판도 다운로드할 수 있습니다.' +--- + +# 멘션 및 태그 {#mentions-and-tags} + +RichText는 사용자가 정의한 트리거 문자를 지원하며, 해당 문자를 입력하면 문서 내에 제안 드롭다운이 열립니다. 사용자가 항목을 선택하면 RichText는 편집 불가능한 토큰을 문서에 삽입합니다. 대표적인 사용 사례는 다음과 같습니다: + +- `@` — 사람을 멘션 +- `#` — 태그 적용 +- `/` — 명령 또는 템플릿 삽입 +- `$` — 금융 티커 또는 변수 삽입 +- `:` — 이모지 삽입 + +[`triggers`](api/config/triggers.md) 속성을 통해 동작을 구성합니다. 각 항목은 하나의 문자를 데이터 소스에 연결합니다. + +## 트리거 구성 {#configure-triggers} + +각 트리거는 [`triggers`](api/config/triggers.md) 배열 내의 `{ trigger, data, showTrigger?, action? }` 객체입니다. [`data`](api/config/triggers.md#data-source-forms) 필드는 다음 세 가지 형태를 취할 수 있습니다: + +- 정적 배열 — RichText가 `label`을 기준으로 자동 필터링합니다(대소문자 구분 없음, `startsWith` 방식): + +~~~jsx {} +{ trigger: "@", data: people } +~~~ + +- 동기 함수 — 직접 결과를 필터링할 때 사용합니다: + +~~~jsx {} +{ + trigger: "#", + data: query => tags.filter(t => + t.label.toLowerCase().startsWith(query.toLowerCase()) + ) +} +~~~ + +- 비동기 함수 — 서버 측 검색에 사용합니다: + +~~~jsx {} +{ + trigger: "+", + data: async query => { + const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`); + const users = await res.json(); + return users.map(u => ({ + id: String(u.id), + label: u.name, + url: u.website + })); + } +} +~~~ + +**관련 샘플:** [RichText. 멘션, 태그 및 비동기 조회](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +## 토큰 렌더링 {#token-rendering} + +사용자가 드롭다운에서 항목을 선택하면 RichText는 두 개의 데이터 속성을 가진 `` 요소로 삽입합니다: + +~~~html {2-3} +@Alice +~~~ + +토큰은 편집 불가능한 단일 노드입니다. `Backspace`를 누르면 한 번에 삭제됩니다. RichText는 `url` 필드를 `href`에 저장하므로 토큰을 `Ctrl+Click`하면 링크로 이동합니다. + +`data-token` 선택자를 사용하여 토큰을 스타일링할 수 있습니다: + +~~~css {} +.wx-editor-content a[data-token="@"][data-token-id="alice"] { + background: #fb8500; + color: #fff; + border-radius: 3px; + padding: 0 2px; +} +~~~ + +**관련 샘플:** + +- [RichText. 멘션 찾기 및 강조 표시](https://snippet.dhtmlx.com/8y6zvzh2?tag=richtext) +- [RichText. 모든 멘션 강조 표시](https://snippet.dhtmlx.com/2rbo12jx?tag=richtext) + +## 트리거 문자 숨기기 {#hide-the-trigger-character} + +트리거에 `showTrigger: false`를 설정하면 트리거 기호 없이 항목 레이블만 삽입됩니다: + +~~~jsx {4} +{ + trigger: "/", + data: commands, + showTrigger: false +} +~~~ + +## 키보드 조작 {#keyboard-interaction} + +제안 드롭다운 내에서 다음 단축키를 사용할 수 있습니다: + +- `↑` / `↓` — 항목 간 이동 +- `Enter` — 활성 항목 삽입 +- `Escape` — 삽입하지 않고 드롭다운 닫기 + +## 제안 이벤트 수신 {#listen-to-suggestion-events} + +세 가지 이벤트가 Event Bus를 통해 드롭다운 생명주기를 노출합니다: + +- [`insert-token`](api/events/insert-token.md) — 사용자가 항목을 선택할 때 발생 +- [`show-suggest`](api/events/show-suggest.md) — 드롭다운이 열릴 때 발생 +- [`hide-suggest`](api/events/hide-suggest.md) — 드롭다운이 닫힐 때 발생 + +~~~jsx {5-7} +const editor = new richtext.Richtext("#root", { + triggers: [{ trigger: "@", data: people }] +}); + +editor.api.on("insert-token", ({ data, trigger, showTrigger }) => { + console.log(`Inserted ${trigger}${data.label} (id: ${data.id})`); +}); +~~~ + +## 드롭다운 항목 커스터마이즈 {#customize-the-dropdown-item} + +기본적으로 드롭다운은 각 항목의 `label`을 표시합니다. 커스텀 제안(예: 아바타, 이름, 이메일)을 렌더링하려면 [`triggerTemplate`](api/config/trigger-template.md) 속성을 통해 템플릿을 전달하세요. + +### 예제 {#example} + +~~~jsx {1,4-9} +const { template } = richtext; + +new richtext.Richtext("#root", { + triggers: [{ trigger: "@", data: people }], + triggerTemplate: template(({ data, trigger }) => ` +
+
${trigger}${data.label}
+
${data.url || ""}
+
+ `) +}); +~~~ + +**관련 샘플:** [RichText. 트리거별 커스텀 드롭다운 템플릿](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext) + +## 선택 시 커스텀 액션 {#custom-action-on-select} + +기본적으로 항목을 선택하면 문서에 토큰으로 삽입됩니다. 대신 직접 작성한 코드를 실행하려면 트리거에 `action` callback을 추가하세요. RichText는 입력된 트리거 텍스트를 제거하고 선택한 항목과 함께 `action(item)`을 호출합니다. 토큰은 삽입되지 않으므로 무엇을 추가할지 직접 결정할 수 있습니다. + +:::note[참고] +`action`은 `showTrigger`보다 우선합니다. `action`이 설정된 경우 `showTrigger`는 무시됩니다. +::: + +### 이모지 추가 {#add-emoji} + +`:` 트리거를 사용하여 이모지를 삽입할 수 있으며, 각 항목에는 커스텀 `code` 필드가 포함됩니다. 드롭다운에 레이블 대신 이모지가 표시되도록 `action`과 [`triggerTemplate`](api/config/trigger-template.md)을 함께 사용하세요: + +~~~jsx {18-20,24} +const { template, Richtext } = richtext; + +const emoji = [ + { + id: "apple", label: "apple", code: "1F34E" + }, + { + id: "blue_car", label: "blue_car", code: "1F699" + }, + { + id: "computer", label: "computer", code: "1F4BB" + } +]; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: emoji, // [{ id: "apple", label: "apple", code: "1F34E" }, ...] + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // 드롭다운에 (레이블만이 아니라) 이모지 자체를 렌더링 + triggerTemplate: template(({ data }) => `${emojiFromCode(data.code)} ${data.label}`) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} +~~~ + +**관련 샘플:** [RichText. 이모지 자동 완성](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) + +### 이모지를 카테고리별로 그룹화 {#group-emoji-by-categories} + +`data` 매개변수가 함수인 경우 내장된 `label` 매칭에 국한되지 않습니다. 직접 필터링을 수행하고 드롭다운에 카테고리 헤더를 유지할 수 있습니다. `label` 필드는 있지만 `code`는 없는 헤더 항목을 추가하세요. `data` 함수는 먼저 쿼리와 일치하는 이모지를 찾고, 그런 다음 여전히 일치하는 카테고리의 헤더와 함께 이모지를 반환합니다: + +~~~jsx {17-26,31-33} +const { template, Richtext } = richtext; + +// 헤더 항목에는 `code` 필드가 없습니다. 이모지 항목에는 있습니다 +const emoji = [ + { id: "$smileys", label: "Smileys", category: 1 }, // 카테고리 + { id: "grinning", label: "grinning", code: "1F600", category: 1 }, + { id: "smile", label: "smile", code: "1F604", category: 1 }, + { id: "$animals", label: "Animals", category: 2 }, // 카테고리 + { id: "dog", label: "dog", code: "1F436", category: 2 }, + { id: "cat", label: "cat", code: "1F431", category: 2 } +]; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: query => { + const matched = emoji.filter(item => + item.code && + item.label.toLowerCase().startsWith(query.toLowerCase().trim()) + ); + const categories = new Set(matched.map(item => item.category)); + // 일치하는 이모지와 여전히 일치하는 카테고리의 헤더를 유지 + return emoji.filter(item => + item.code ? matched.includes(item) : categories.has(item.category) + ); + }, + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // 이모지 행은 일반적으로, 카테고리 헤더는 굵게 렌더링 + triggerTemplate: template(({ data }) => + data.code ? `${emojiFromCode(data.code)} ${data.label}` : `${data.label}` + ) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} + +// 헤더에는 `code`가 없습니다 — 헤더 선택은 무시하여 절대 삽입되지 않도록 합니다 +editor.api.intercept("insert-token", ({ data }) => !!data.code); +~~~ + +### 슬래시 스타일 명령 메뉴 추가 {#add-slash-style-command-menu} + +`action`을 사용하여 슬래시 스타일 명령 메뉴(Notion이나 Slack의 `/`와 같은)를 만들 수 있습니다. 각 항목의 `id`에 명령 이름을 저장하고, 옵션은 커스텀 `config` 필드에 저장한 후, callback이 [`api.exec`](api/internal/exec.md)로 실행하도록 합니다: + +~~~jsx {13} +// 각 항목은 api.exec 액션 이름을 `id`에, 해당 매개변수를 `config`에 저장합니다 +const commands = [ + { id: "set-text-style", label: "Heading 1", config: { tag: "h1" } }, + { id: "insert-list", label: "Bulleted list", config: { type: "bulleted" } }, + { id: "insert-line", label: "Divider" } // 설정 없음 → `|| {}` 적용됨 +]; + +const editor = new richtext.Richtext("#root", { + triggers: [ + { + trigger: "/", + data: commands, + action: item => editor.api.exec(item.id, item.config || {}) + } + ] +}); +~~~ + +**관련 샘플:** [RichText. 슬래시 명령](https://snippet.dhtmlx.com/e0mrmyam?tag=richtext) + +## 관련 API {#related-api} + +- [`triggers`](api/config/triggers.md) +- [`triggerTemplate`](api/config/trigger-template.md) +- [`insert-token`](api/events/insert-token.md) +- [`show-suggest`](api/events/show-suggest.md) +- [`hide-suggest`](api/events/hide-suggest.md) 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..2c4c81d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/stylization.md @@ -0,0 +1,93 @@ +--- +title: 스타일링 +sidebar_label: 스타일링 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 스타일링에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 체험해 보세요. DHTMLX RichText의 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# 스타일링 + +에디터의 컨테이너와 하위 요소에 CSS 변수를 재정의하여 DHTMLX RichText의 외관을 사용자 정의할 수 있습니다. + +이 가이드에서는 **다크 테마**를 적용하는 방법과 CSS 클래스 선택자를 사용하여 메뉴바, 툴바, 팝업, 콘텐츠 영역을 대상으로 스타일을 지정하는 방법을 설명합니다. + +## 기본 구조와 클래스 이름 {#default-structure-and-class-names} + +RichText는 다음의 핵심 클래스를 사용하여 UI를 구성합니다. + +| 클래스 이름 | 설명 | +|------------------------|---------------------------------------------| +| `.wx-richtext` | RichText 위젯의 루트 컨테이너 | +| `.wx-richtext-menubar` | 메뉴바 컨테이너 | +| `.wx-richtext-menu` | 메뉴바 드롭다운 메뉴 컨테이너 | +| `.wx-richtext-toolbar` | 툴바 컨테이너 | +| `.wx-editor-area` | 주 편집 가능 콘텐츠 영역 컨테이너 | + +이 클래스들을 사용자 정의 CSS 선택자에서 사용하여 에디터의 외관을 재정의할 수 있습니다. + +## 기본 스타일 재정의 {#override-default-styles} + +기본 스타일을 재정의하려면 `#root` 컨테이너 또는 특정 하위 요소에서 CSS 변수를 재정의합니다. + +```html +
+ + +``` + +:::note[참고] +이 스타일은 어두운 배경을 적용하고, 버튼 및 아이콘 색상을 조정하며, 다크 UI 테마에서의 가독성을 개선합니다. +::: + +## 지원되는 CSS 변수 {#supported-css-variables} + +| 변수 이름 | 설명 | +| ---------------------------- | -------------------------------------------------------------------- | +| `--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` | 팝업 요소의 테두리 | + +## 권장 사항 {#best-practices} + +* 다크 모드에서 기본 입력 요소의 스타일을 개선하려면 `color-scheme: dark`를 사용하세요. +* 강한 이유 없이 레이아웃 관련 속성(`display`, `position` 등)을 변경하지 않는 것이 좋습니다. + +:::tip[팁] +태그별 타이포그래피(글꼴 패밀리, 글꼴 크기, 색상, `h1`, `p`, `blockquote` 및 기타 블록 태그의 배경)를 지정하려면 [`defaultStyles`](api/config/default-styles.md) 설정 속성에 적절한 CSS 규칙을 사용하세요. 전체 패턴은 [설정 가이드](guides/configuration.md#configure-default-styles)를 참고하세요. +::: + +## 라이브 데모 {#live-demo} + +아래 예제는 RichText에 사용자 정의 스타일을 적용한 모습입니다. + + + +**관련 문서:** [설정](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..a2605ad --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/typescript_support.md @@ -0,0 +1,38 @@ +--- +sidebar_label: TypeScript 지원 +title: TypeScript 지원 +description: DHTMLX JavaScript RichText 라이브러리에서 TypeScript를 사용하는 방법을 문서에서 확인하실 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 30일 무료 평가판도 다운로드하실 수 있습니다. +--- + +# TypeScript 지원 {#typescript-support} + +v2.0부터 DHTMLX RichText에는 별도의 설정 없이 바로 사용할 수 있는 TypeScript 정의가 내장되어 있습니다. + +:::note[참고] +Snippet Tool에서 에디터를 직접 체험해 보세요. +::: + +## TypeScript의 장점 {#advantages-of-typescript} + +DHTMLX RichText와 TypeScript를 함께 사용하면 다음과 같은 이점이 있습니다. + +- 타입 안전성 — 컴파일러가 빌드 시점에 설정 프로퍼티와 메서드 인수의 잘못된 사용을 감지합니다 +- 자동 완성 — IDE가 입력 중에 유효한 프로퍼티 이름, 메서드 시그니처, 값 유형을 제안합니다 +- 자기 문서화 API — 설정 객체와 메서드의 타입 어노테이션이 인라인 문서 역할을 합니다 + +## TypeScript에서 RichText 초기화하기 {#initialize-richtext-in-typescript} + +아래 예제는 번들된 타입 정의의 자동 완성 기능을 활용하여 TypeScript에서 RichText를 초기화하는 방법을 보여 줍니다. + +~~~ts +import { Richtext } from "@dhx/richtext"; + +const editor = new Richtext("#root", { + menubar: true, + layoutMode: "document" +}); +~~~ + +## API 타입 참조하기 {#reference-api-types} + +모든 설정 프로퍼티의 TypeScript 시그니처는 [프로퍼티 개요](api/overview/properties_overview.md)를 참조하세요. 메서드 시그니처는 [메서드 개요](api/overview/methods_overview.md)를 참조하세요. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/working_with_server.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/working_with_server.md new file mode 100644 index 0000000..81d6a37 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/working_with_server.md @@ -0,0 +1,121 @@ +--- +sidebar_label: 서버와 함께 사용하기 +title: 서버와 함께 사용하기 +description: 이미지 업로드를 위한 RichText와 백엔드 통신 방법을 알아봅니다. 요청/응답 계약 및 직접 서버를 연결하는 방법을 포함합니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. DHTMLX RichText 30일 무료 평가판도 다운로드할 수 있습니다. +--- + +# 서버와 함께 사용하기 {#working-with-the-server} + +RichText는 완전히 브라우저에서 실행되므로 콘텐츠 편집이나 저장을 위한 백엔드가 필요하지 않습니다. 애플리케이션은 에디터의 콘텐츠를 원하는 방식으로 자유롭게 저장할 수 있습니다. 서버가 필요한 기능은 **이미지 업로드**뿐입니다. 사용자가 문서에 이미지를 삽입할 때 RichText는 파일을 콘텐츠에 인라인으로 삽입하거나, HTTP 엔드포인트에 전송한 뒤 해당 링크를 저장할 수 있습니다. + +이 가이드에서는 다음 사항을 설명합니다. + +- 업로드 서버가 설정되지 않은 경우 기본 동작 +- 서버가 구현해야 하는 정확한 HTTP 계약 +- 서버가 반환한 URL을 RichText가 사용하는 방식 +- 데모 백엔드로 기능을 테스트하는 방법 + +## 기본 동작: 인라인 이미지 {#default-behavior-inline-images} + +[`imageUploadUrl`](api/config/image-upload-url.md) 속성을 설정하지 않으면 RichText는 인라인 이미지를 사용합니다. 사용자가 이미지를 삽입하면 RichText는 브라우저에서 파일을 읽고, 원본 파일을 `data:image/...;base64,...` URL로 인코딩하여 `` 요소의 `src`로 에디터 콘텐츠에 직접 씁니다. RichText는 `width`/`height` 속성을 통해 표시 크기를 1024×800 박스에 맞게 제한하지만, 삽입된 바이트는 원본 전체 해상도 파일 그대로입니다. 클라이언트는 크기를 줄이거나 재인코딩하지 않습니다. + +이 방식은 백엔드 없이도 동작하며 빠른 데모에 유용하지만 명확한 한계가 있습니다. + +- 인코딩된 바이트가 문서 내부에 저장되므로, 이미지가 추가될수록 저장된 HTML의 크기가 커집니다 +- 두 문서에 동일한 이미지가 있어도 각각 저장되며, 중복을 제거할 공유 리소스가 없습니다 +- 바이트가 별도의 리소스가 아니므로, 서버에서 CDN을 통해 제공하거나 후처리(리사이즈, 재인코딩, 검사)를 수행할 수 없습니다 +- 인라인 이미지는 기본 제공 DOCX / PDF [내보내기](api/events/export.md)에서 보존되지 않습니다. 내보내기를 사용하는 경우 이미지가 외부 URL을 참조하도록 업로드 서버를 설정하십시오 + +## 직접 서버 작성하기 {#write-your-own-server} + +프로덕션 앱에서는 [`imageUploadUrl`](api/config/image-upload-url.md)을 사용해 RichText가 서버를 가리키도록 설정하십시오. + +~~~jsx {2} +new richtext.Richtext("#root", { + imageUploadUrl: "https://example.com/upload" + // 기타 설정 속성 +}); +~~~ + +최소한의 업로드 엔드포인트는 다음 조건을 충족해야 합니다. + +1. `upload`라는 이름의 파일 필드를 포함한 `multipart/form-data` POST 요청을 수락합니다. +2. 파일을 검증합니다(허용 타입, 최대 크기). +3. 사용자의 브라우저가 가져올 수 있는 위치에 파일을 저장합니다(HTTP로 제공되는 로컬 디스크, S3, CDN 등). +4. 선택적으로 이미지를 리사이즈하거나 기타 처리를 수행합니다. +5. `status: "server"`, 저장된 파일의 공개 URL로 설정된 `value`, 그리고 이미지의 픽셀 단위 `width`와 `height`를 포함하는 JSON 객체로 응답합니다. + +### 클라이언트가 전송하는 내용 {#what-the-client-sends} + +[`imageUploadUrl`](api/config/image-upload-url.md)이 설정되면 RichText는 선택된 파일을 해당 URL로 직접 전송합니다(`/images`나 다른 경로를 추가하지 않음). 따라서 전달하는 URL이 전체 POST 대상이 됩니다. + +요청은 표준 HTML 폼 업로드를 사용합니다. + +- **Method:** `POST` +- **Content-Type:** `multipart/form-data` +- **Body:** `upload`라는 이름의 파일 필드 하나 + +### 클라이언트가 기대하는 응답 {#what-the-client-expects-back} + +서버는 JSON 객체로 응답해야 합니다. RichText는 다음 필드를 읽습니다. + +| 필드 | 타입 | 의미 | +| -------- | ------- | -------------------------------------------------------------------- | +| `status` | string | 성공 마커 — 업로드 성공 시 `"server"`를 반환합니다. 업로더는 이 필드로 완료된 업로드와 실패한 업로드를 구분합니다. 다른 값(예: `"error"`)은 업로드 실패로 처리됩니다. 삽입된 이미지 자체는 `value`, `width`, `height`를 기반으로 구성됩니다. | +| `value` | string | 저장된 이미지의 URL입니다. RichText는 이 문자열을 삽입된 ``의 `src`로 문서에 그대로 씁니다. | +| `width` | integer | 삽입된 이미지의 크기 지정에 사용되는 너비(픽셀 단위)입니다. | +| `height` | integer | 삽입된 이미지의 크기 지정에 사용되는 높이(픽셀 단위)입니다. | + +#### 성공 응답 {#successful-response} + +업로드에 성공하면 저장된 이미지 URL과 크기 정보가 반환됩니다. + +~~~json +{ + "status": "server", + "value": "https://cdn.example.com/uploads/abc123.png", + "width": 320, + "height": 207 +} +~~~ + +#### 업로드 실패 {#failed-upload} + +업로드에 실패하면 `"server"` 이외의 status가 반환됩니다. + +~~~json +{ + "status": "error" +} +~~~ + +### 업로드된 이미지 제공 {#serve-the-uploaded-image} + +`value` URL은 업로드와 이후 문서 읽기를 연결하는 유일한 링크입니다. RichText는 이 URL을 문서에 직접 삽입하므로, 저장된 콘텐츠를 여는 모든 클라이언트(에디터 자체, 내보내기, 게시된 페이지)는 일반 `GET` 요청으로 해당 URL에서 이미지를 가져옵니다. + +이는 다음을 의미합니다. + +- URL은 사용자의 브라우저에서 접근 가능해야 하며, 일반적으로 **절대 경로**여야 합니다 +- 호스트는 업로드 엔드포인트와 달라도 됩니다(예: 자체 서버에서 업로드를 수락하고 CDN이나 오브젝트 스토리지 URL을 반환할 수 있음) +- 이미지 호스트가 다른 출처(origin)에 있는 경우 페이지에서 이미지를 로드할 수 있도록 허용해야 합니다(CORS 설정 또는 단순 공개 읽기 접근) +- 서버는 문서가 해당 URL을 참조하는 동안 URL을 유효하게 유지해야 합니다. RichText는 바이트를 캐시하거나 복사하지 않습니다 + +URL 구조 자체는 계약의 일부가 **아닙니다**. 브라우저가 URL에 `GET` 요청을 보내고 이미지 바이트를 받을 수 있는 한, 경로, 쿼리 문자열, 심지어 스킴도 완전히 백엔드에 달려 있습니다. + +### 데모 서버로 테스트하기 {#try-it-against-the-demo-server} + +이 계약을 구현한 동작하는 백엔드로 기능을 테스트할 수 있습니다. + +~~~jsx +new richtext.Richtext("#root", { + imageUploadUrl: "https://docs.dhtmlx.com/richtext-backend/images" + // 기타 설정 속성 +}); +~~~ + +데모 서버는 대용량 이미지를 리사이즈하고, 디스크에 저장하며, 직접 제공하는 URL을 반환합니다. 평가 및 데모 목적으로만 사용하도록 설계되었습니다. 프로덕션 에디터에서 이 서버를 가리키지 마십시오. + +**관련 문서:** + +- [구성](guides/configuration.md) +- [`imageUploadUrl`](api/config/image-upload-url.md) 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..ad915b7 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/how_to_start.md @@ -0,0 +1,109 @@ +--- +sidebar_label: 시작하기 +title: 시작하기 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 DHTMLX RichText를 시작하는 방법을 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText 30일 무료 평가판을 다운로드하세요. +--- + +# 시작하기 {#how-to-start} + +이 명확하고 포괄적인 튜토리얼은 페이지에서 완전히 작동하는 RichText를 구성하기 위해 필요한 단계를 안내합니다. + +
+![웹 페이지에서 실행되는 DHTMLX RichText WYSIWYG 편집기](/img/richtext/classic_mode.png) +
+ +## 1단계. 소스 파일 포함하기 {#step-1-including-source-files} + +HTML 파일을 생성하고 *index.html*로 이름을 지정합니다. 그런 다음 생성한 파일에 RichText 소스 파일을 포함합니다. + +필요한 파일은 두 가지입니다: + +- RichText의 JS 파일 +- RichText의 CSS 파일 + +~~~html {5-6} title="index.html" + + + + How to Start with RichText + + + + + + + +~~~ + +### npm 또는 yarn을 통한 RichText 설치 {#installing-richtext-via-npm-or-yarn} + +**yarn** 또는 **npm** 패키지 매니저를 사용하여 JavaScript RichText를 프로젝트에 가져올 수 있습니다. + +#### npm 또는 yarn을 통한 트라이얼 RichText 설치 {#installing-trial-richtext-via-npm-or-yarn} + +:::info[정보] +RichText 트라이얼 버전을 사용하려면 [**트라이얼 RichText 패키지**](https://dhtmlx.com/docs/products/dhtmlxRichtext/download.shtml)를 다운로드하고 *README* 파일에 나와 있는 단계를 따르세요. 트라이얼 RichText는 30일 동안만 사용 가능합니다. +::: + +#### npm 또는 yarn을 통한 PRO RichText 설치 {#installing-pro-richtext-via-npm-or-yarn} + +:::info[정보] +[고객 영역](https://dhtmlx.com/clients/)에서 **npm** 로그인과 비밀번호를 생성하여 DHTMLX 프라이빗 **npm**에 직접 접근할 수 있습니다. 자세한 설치 가이드도 해당 페이지에서 확인할 수 있습니다. 프라이빗 **npm** 접근은 RichText 유료 라이선스가 활성 상태인 동안에만 가능합니다. +::: + +## 2단계. RichText 생성하기 {#step-2-creating-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 구성하기 {#step-3-configuring-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)과 [**기본 스타일**](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" + }, + // 기타 설정 + } +}); +~~~ + +## 다음 단계 {#whats-next} + +이것으로 끝입니다. 단 세 가지 간단한 단계만으로 콘텐츠 편집에 유용한 도구를 갖추게 되었습니다. 이제 콘텐츠 작업을 시작하거나 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..d7761c7 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/index.md @@ -0,0 +1,176 @@ +--- +sidebar_label: RichText 개요 +title: RichText 개요 +slug: / +description: DHTMLX JavaScript RichText 라이브러리의 개요를 문서에서 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험해 보세요. 또한 DHTMLX RichText 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# RichText 개요 {#richtext-overview} + +**DHTMLX RichText**는 JavaScript로 구축된 유연하고 경량화된 WYSIWYG 에디터입니다. 현대 웹 애플리케이션에서 원활한 편집 경험을 제공하도록 설계된 RichText는 깔끔한 UI, 풍부한 서식 기능, 그리고 콘텐츠 렌더링에 대한 완전한 제어를 제공합니다. CMS, 내부 관리 도구, 또는 임베디드 문서 에디터를 구축하는 경우 모두, RichText는 필요에 맞게 쉽게 통합하고 커스터마이징할 수 있습니다. + +**DHTMLX RichText** 컴포넌트에는 다음과 같은 기능이 포함되어 있습니다: + +- 두 가지 [**레이아웃 모드**](api/config/layout-mode.md) + +- HTML, 일반 텍스트, Markdown으로의 콘텐츠 직렬화 + +- 기본 제공 버튼 및 커스텀 버튼을 포함하는 구성 가능한 [`toolbar`](api/config/toolbar.md) + +- 표시 또는 숨김이 가능한 정적 [`menubar`](api/config/menubar.md) + +- 선택적 서버 [업로드](api/config/image-upload-url.md) 또는 인라인 base64 임베딩을 통한 이미지 업로드, 풍부한 서식, 커스텀 스타일링, 전체 화면 모드 + +- [이벤트 처리](api/overview/event_bus_methods_overview.md), [콘텐츠 조작](api/overview/methods_overview.md), [반응형 상태 관리](api/overview/state_methods_overview.md)를 위한 [전체 API 접근](api/overview/main_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-structure} + +### 메뉴바 {#menubar} + +RichText 메뉴바는 새 문서 생성, 인쇄, 콘텐츠 가져오기/내보내기 등 편집 작업에 대한 접근을 제공합니다. 기본적으로 숨겨져 있습니다. + +[`menubar`](api/config/menubar.md) 속성을 사용하여 표시 여부를 전환할 수 있습니다. 메뉴바는 활성화 또는 비활성화할 수 있지만, 현재 그 내용은 구성할 수 없습니다. + +
+![문서 및 파일 작업이 있는 DHTMLX RichText 메뉴바](/img/richtext/menubar.png) +
+ +### 툴바 {#toolbar} + +RichText 툴바는 텍스트 서식 및 구조적 편집 기능에 대한 빠른 접근을 제공합니다. 기본적으로 [툴바](api/config/toolbar.md#default-config)는 활성화되어 있으며, 굵게, 기울임꼴, 글꼴 설정, 목록 서식 등 자주 사용되는 컨트롤의 사전 정의된 세트를 표시합니다. + +[`toolbar`](api/config/toolbar.md) 속성을 사용하면 툴바의 내용과 레이아웃을 완전히 커스터마이징할 수 있습니다. 툴바를 활성화 또는 비활성화하거나, 기본 컨트롤을 재배치하거나, 사전 정의된 버튼 식별자와 커스텀 버튼 객체의 배열을 사용하여 완전히 커스텀 툴바를 정의할 수 있습니다. + +
+![텍스트 서식 컨트롤이 있는 DHTMLX RichText 툴바](/img/richtext/toolbar.png) +
+ +### 에디터 {#editor} + +RichText 에디터는 사용자가 콘텐츠를 생성하고 서식을 지정하는 중앙 영역입니다. [`value`](api/config/value.md), [`layoutMode`](api/config/layout-mode.md), [`defaultStyles`](api/config/default-styles.md)와 같은 구성 옵션을 통해 에디터의 모양과 동작을 제어할 수 있습니다. RichText는 또한 커스텀 스타일링, 이미지 임베딩, 그리고 애플리케이션의 요구에 맞는 반응형 레이아웃 조정을 지원합니다. + +#### 두 가지 작동 모드 {#two-working-modes} + +DHTMLX RichText는 "classic" 및 "document" 모드로 콘텐츠를 처리할 수 있습니다. 텍스트 편집 시 가장 편안하게 느껴지는 모드를 선택할 수 있습니다. [`layoutMode`](api/config/layout-mode.md) 속성을 사용하여 프로그래밍 방식으로 모드를 전환하세요. + +- `"classic"` + +
+![클래식 레이아웃 모드의 DHTMLX RichText 편집기](/img/richtext/classic_mode.png) +
+ +- `"document"` + +
+![문서 모드의 DHTMLX RichText 편집기](/img/richtext/document_mode.png) +
+ +## 지원 형식 {#supported-formats} + +RichText 에디터는 **HTML**, **일반 텍스트**, **Markdown** 형식으로 콘텐츠의 [파싱](api/methods/set-value.md) 및 [직렬화](api/methods/get-value.md)를 지원합니다. + +#### HTML 형식 {#html-format} + +
+![HTML 형식으로 직렬화된 DHTMLX RichText 콘텐츠](/img/richtext/html_format.png) +
+ +#### 텍스트 형식 {#text-format} + +
+![일반 텍스트로 직렬화된 DHTMLX RichText 콘텐츠](/img/richtext/text_format.png) +
+ +#### Markdown 형식 {#markdown-format} + +내장된 `markdown` 인코더를 [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md)에 전달하여 Markdown으로 콘텐츠를 불러오거나 직렬화하세요: + +~~~jsx +const editor = new richtext.Richtext("#root", { + value: "Hello world" + // 기타 설정 속성 +}); + +// 에디터에 Markdown 불러오기 +editor.setValue("# Title\n\nParagraph", richtext.markdown.fromMarkdown); + +// 에디터 콘텐츠를 Markdown으로 읽기 +const md = editor.getValue(richtext.markdown.toMarkdown); +~~~ + +:::note[참고] +Markdown 지원은 구문의 제한된 하위 집합만을 포함합니다 — 제목, 단락, 줄바꿈, 강조, 인용구, 목록, 링크와 같은 일반적인 블록 및 인라인 요소가 해당됩니다. Markdown에 해당하는 표현이 없는 서식(글꼴 패밀리, 글꼴 크기, 색상, 정렬, 줄 높이)은 직렬화 시 제거됩니다. + +중첩 인라인 구조는 지원되지 않으며, **이탤릭체 안의 굵게**만 예외입니다. 링크 안의 굵게, 목록 항목 안의 이탤릭체, 또는 다단계(중첩) 목록과 같은 조합은 올바르게 렌더링되지 않습니다. +::: + +## 복사 및 붙여넣기 {#copy-and-paste} + +RichText 에디터는 표준 시스템 단축키(Windows/Linux에서 `Ctrl+C` / `Ctrl+X` / `Ctrl+V`, macOS에서 `⌘+C` / `⌘+X` / `⌘+V`), 해당 [툴바](api/config/toolbar.md) 버튼, 그리고 [메뉴바](api/config/menubar.md) 항목을 통해 클립보드 작업을 지원합니다. + +콘텐츠를 복사하거나 잘라낼 때 RichText는 시스템 클립보드에 두 가지 형태로 데이터를 씁니다: + +- 터미널, 코드 에디터, 일반 입력과 같은 간단한 대상과의 호환성을 위한 **일반 텍스트** 버전 +- 굵게, 기울임꼴, 밑줄, 취소선, 글꼴 패밀리, 글꼴 크기, 텍스트 및 배경 색상, 제목, 인용구, 목록, 정렬, 들여쓰기, 줄 높이, 링크, 이미지 등 모든 인라인 및 블록 서식을 포함하는 **HTML** 버전 + +붙여넣기 동작은 클립보드 페이로드의 소스에 따라 다릅니다: + +- 두 RichText 인스턴스 간 붙여넣기(동일한 문서 또는 다른 페이지)는 HTML 표현을 사용하며 원래 서식을 유지합니다. +- 브라우저, 워드 프로세서, 기타 에디터를 포함한 외부 소스에서 붙여넣기는 일반 텍스트로 처리됩니다. 삽입된 콘텐츠는 외부 서식 없이 텍스트로 추가됩니다. + +:::note[참고] +툴바의 **붙여넣기** 버튼은 비동기 Clipboard API를 사용하며, 이는 일반 텍스트만 노출합니다. 다른 RichText에서 복사한 콘텐츠를 서식을 유지하면서 붙여넣으려면 `Ctrl+V` / `⌘+V` 단축키를 사용하세요. 이 단축키는 브라우저의 클립보드 이벤트에서 직접 전체 HTML 페이로드를 수신합니다. +::: + +## 키보드 단축키 {#keyboard-shortcuts} + +RichText 에디터는 더 빠른 서식 지정과 편집을 위한 일반적인 키보드 단축키 세트를 지원합니다. 단축키는 플랫폼 규칙을 따르며 **Windows/Linux** (`Ctrl`)와 **macOS** (`⌘`) 모두에서 사용할 수 있습니다. + +### 텍스트 서식 {#text-formatting} + +| 작업 | Windows/Linux | macOS | +|-----------------|-----------------|---------------| +| 굵게* | `Ctrl+B` | `⌘B` | +| 기울임꼴 | `Ctrl+I` | `⌘I` | +| 밑줄 | `Ctrl+U` | `⌘U` | +| 취소선 | `Ctrl+Shift+X` | `⌘⇧X` | + +### 편집 {#editing} + +| 작업 | Windows/Linux | macOS | +|---------------|--------------------------|---------------| +| 실행 취소 | `Ctrl+Z` | `⌘Z` | +| 다시 실행 | `Ctrl+Y` / `Ctrl+Shift+Z`| `⌘Y` / `⌘⇧Z` | +| 잘라내기 | `Ctrl+X` | `⌘X` | +| 복사 | `Ctrl+C` | `⌘C` | +| 붙여넣기 | `Ctrl+V` | `⌘V` | +| 단어 삭제 | `Ctrl+Backspace` / `Ctrl+Delete` | `⌥⌫` / `⌥⌦` | +| 줄 삭제 | — | `⌘⌫` / `⌘⌦` | + +### 들여쓰기 {#indentation} + +| 작업 | Windows/Linux | macOS | +|------------------------|---------------|-------| +| 블록 들여쓰기 / 목록 중첩 | `Tab` | `⇥` | +| 블록 내어쓰기 / 목록 해제 | `Shift+Tab` | `⇧⇥` | + +### 특수 작업 {#special-actions} + +| 작업 | Windows/Linux | macOS | +|--------------|---------------|-------| +| 링크 삽입 | `Ctrl+K` | `⌘K` | +| 인쇄 | `Ctrl+P` | `⌘P` | + +:::info[정보] +향후 업데이트에서 더 많은 단축키가 추가될 수 있습니다. +::: + +RichText 키보드 단축키와 관련된 실제 레퍼런스를 확인하려면 **도움말**을 누르고 **키보드 단축키** 옵션을 선택하세요: + +
+![DHTMLX RichText 키보드 단축키 참조 창](/img/richtext/shortcut_reference.png) +
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..d567a99 --- /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일 무료 평가판도 다운로드할 수 있습니다. +--- + +# 최신 버전으로 마이그레이션 {#migration-to-newer-versions} + +## 1.2 -> 2.0 {#12---20} + +### 프로퍼티 마이그레이션 {#properties-migration} + +| 기존 프로퍼티 | 대체 항목 | 비고 | +| --------------- | ------------------------- | ----------------------------------------- | +| `customStats` | *(제거됨)* | 새 버전 2.0에서 사용 불가 | +| `toolbarBlocks` | `toolbar` | 이제 세부적인 툴바 구조를 지원합니다 | +| `defaultStyles` | `defaultStyles` (업데이트됨) | 구조가 이제 블록별 CSS 기반으로 변경되었습니다 | +| `mode` | `layoutMode` | 더 엄격한 열거형 기반 설정으로 대체되었습니다 | + +### - `customStats` {#--customstats} + +`customStats` 프로퍼티가 제거되었습니다. 현재 버전의 RichText는 사용자 정의 통계(예: 문자 수, 단어 수, 문장 수) 표시를 더 이상 지원하지 않습니다. + +텍스트 메트릭을 계산해야 하는 경우, 에디터 콘텐츠에 직접 접근하여 수동으로 처리할 수 있습니다. + +```jsx +const content = editor.getValue(); +const wordCount = content.split(/\s+/).length; +``` + +### - `toolbarBlocks` → [`toolbar`](api/config/toolbar.md) {#--toolbarblocks--toolbar} + +**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) {#--defaultstyles} + +**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) {#--mode--layoutmode} + +```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"` 값만 엄격히 지원합니다. + +### 메서드 마이그레이션 {#methods-migration} + +| 기존 메서드 | 새 동등 항목 | 비고 | +| ----------------------- | ------------------------------------ | ----------------------------------------------------- | +| `getValue(mode)` | `getValue(encoder)` | 인코더가 문자열 모드를 대체합니다. 인코더 사용 시 별도 import가 필요합니다 | +| `setValue(value, mode)` | `setValue(value, 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) {#--setvalue--getvalue} + +```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) {#--on--detach} + +```jsx title="Before 2.0" +editor.events.on("Change", function(action, canUndo, canRedo){ + // 여기에 코드 작성 +}); + +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) 사용 {#--fire--use-exec-and-intercept} + +```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..0701b98 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/news/whats_new.md @@ -0,0 +1,256 @@ +--- +sidebar_label: 새로운 기능 +title: 새로운 기능 +description: DHTMLX RichText의 새로운 기능과 릴리스 히스토리를 DHTMLX JavaScript UI 라이브러리 문서에서 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX RichText 30일 무료 평가판을 다운로드하세요. +--- + +## 버전 2.1 {#version-21} + +2026년 6월 22일 출시 + +### 새로운 기능 {#new-functionality} + +- [`imageUploadUrl`](api/config/image-upload-url.md)는 선택 사항입니다. 생략할 경우, 이미지는 서버 없이 base64 데이터 URL 형태로 인라인 삽입됩니다 +- 드래그 앤 드롭 이미지 삽입: 이미지 파일을 에디터 영역에 직접 드롭할 수 있습니다 +- Markdown 지원: [`setValue()`](api/methods/set-value.md), [`getValue()`](api/methods/get-value.md), [`insertValue()`](api/methods/insert-value.md) 메서드의 `markdown` 인코더를 통해 에디터 콘텐츠를 Markdown으로 파싱하고 직렬화할 수 있습니다([RichText. 다양한 형식으로 작업 (Markdown, HTML, 텍스트)](https://snippet.dhtmlx.com/cne4kujn?tag=richtext) 샘플 참조) +- [`triggers`](api/config/triggers.md) 속성을 통한 멘션, 태그, 커스텀 드롭다운 트리거: `@`, `#`, `/`, `:` 등의 문자를 입력하면 제안 드롭다운이 열리고, 선택한 항목이 편집 불가능한 토큰으로 삽입됩니다([멘션과 태그](guides/mentions_and_tags.md) 가이드 및 [RichText. 멘션, 태그 및 비동기 조회](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) 샘플 참조) +- [`triggerTemplate`](api/config/trigger-template.md) 속성을 통한 제안 항목의 커스텀 렌더링(예: 이름과 이메일이 포함된 아바타)([RichText. 트리거별 커스텀 드롭다운 템플릿](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext) 샘플 참조) +- 사용자가 트리거를 선택했을 때의 커스텀 동작: 토큰을 삽입하는 대신 자체 코드를 실행할 수 있습니다(이모지 삽입, 슬래시 스타일 명령 실행 등)([RichText. 이모지 자동 완성](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) 및 [RichText. 슬래시 명령](https://snippet.dhtmlx.com/e0mrmyam?tag=richtext) 샘플 참조) +- RichText 인스턴스 간 서식을 유지하는 클립보드 지원(복사, 잘라내기, 붙여넣기) 및 외부 콘텐츠를 일반 텍스트로 삽입 +- 단어 및 줄 범위 삭제 단축키: `Ctrl+Backspace` / `Ctrl+Delete`(Windows/Linux) 또는 `Opt+Backspace` / `Opt+Delete`(macOS)로 이전/다음 단어 삭제; `Cmd+Backspace` / `Cmd+Delete`(macOS 전용)로 이전/다음 시각적 줄 삭제 +- 블록 들여쓰기를 변경하는 새 단축키: `Tab`으로 블록의 들여쓰기를 늘리고 `Shift+Tab`으로 줄입니다; 목록 안에서는 같은 키로 항목을 중첩하거나 해제합니다(하위 목록에서 가장 잘 보임) + +### 새로운 API {#new-api} + +#### 새로운 속성 {#new-properties} + +- [`triggers`](api/config/triggers.md) — 멘션, 태그 및 기타 토큰 삽입을 위한 드롭다운 트리거를 정의합니다 +- [`triggerTemplate`](api/config/trigger-template.md) — RichText가 제안 드롭다운에서 항목을 렌더링하는 방식을 커스터마이즈합니다 + +#### 새로운 메서드 {#new-methods} + +- [`insertValue()`](api/methods/insert-value.md) — 커서 위치에 텍스트, Markdown 또는 HTML 콘텐츠를 삽입하거나 선택된 텍스트를 대체합니다([RichText. 커서 위치에 콘텐츠 삽입](https://snippet.dhtmlx.com/pew2g1ku?tag=richtext) 샘플 참조) + +#### 새로운 이벤트 {#new-events} + +- [`show-suggest`](api/events/show-suggest.md) — 설정된 트리거에 대해 제안 드롭다운이 열릴 때 발생합니다 +- [`insert-token`](api/events/insert-token.md) — 사용자가 드롭다운에서 제안 항목을 선택하고 RichText가 이를 토큰으로 삽입한 후 발생합니다 +- [`hide-suggest`](api/events/hide-suggest.md) — 제안 드롭다운이 닫힐 때 발생합니다 + +### 수정 사항 {#fixes} + +- 인라인 콘텐츠 붙여넣기 문제(멘션, 이미지 등 인라인 요소의 내부 또는 인접 위치에 있는 콘텐츠 포함) +- 이미지를 자기 자신 위에 드롭하면 오류가 발생하는 문제 + +## 버전 2.0.6 {#version-206} + +2026년 5월 28일 출시 + +### 새로운 기능 {#new-functionality-1} + +- 선택 영역에 따라 목록을 토글하거나 변환하는 상황 인식 OL/UL 툴바 버튼 +- **들여쓰기** 및 **내어쓰기** 버튼으로 목록 중첩 수준 변경 +- 빈 목록 항목에서 Enter를 눌러 목록을 종료하거나 중첩 수준 줄이기 +- 방문한 링크에 대한 별도 색상 + +### 새로운 API {#new-api-1} + +#### 새로운 이벤트 {#new-events-1} + +- [`toggle-list`](api/events/toggle-list.md) — 사용자가 선택된 블록에서 목록을 토글할 때 발생합니다 + +### 수정 사항 {#fixes-1} + +- 목록 마커의 잘못된 수평 정렬 +- 번호 있는 목록과 번호 없는 목록 간의 일관되지 않은 패딩 +- 서식 지우기가 블록 레벨 속성을 지우지 않는 문제 +- 목록 항목 내 제목과 인용구의 잘못된 스타일링 +- 수평선 내부에 표시되는 불필요한 입력 요소 +- 목록 중간이나 끝에 수평선을 삽입할 때 에디터가 멈추는 문제 + +## 버전 2.0.5 {#version-205} + +2026년 3월 6일 출시 + +### 수정 사항 {#fixes-2} + +- IME 입력이 올바르게 처리되지 않는 문제 +- 조합 기반 입력(예: 데스크톱에서의 중국어, 일본어, 한국어)이 올바르게 처리되지 않는 문제 +- HTML 파싱 시 `margin-left` 및 `line-height` 속성이 무시되는 문제 +- 인라인 요소가 블록 레벨 부모의 속성을 상속하는 문제 +- 두 에디터 인스턴스 간에 텍스트를 복사할 수 없는 문제 +- 두 개 이상의 에디터 인스턴스가 활성화된 경우 선택 영역이 올바르게 처리되지 않는 문제 +- 단락의 유일한 콘텐츠가 이미지인 경우 커서 위치가 잘못 지정되는 문제 +- 아래 첨자 및 위 첨자 요소의 무한 중첩 문제 +- 이미지 붙여넣기 시 먼저 업로드하지 않고 인라인으로 삽입되는 문제 +- 특정 위치(첫 번째 또는 마지막 줄)에서 빈 인라인 블록을 제거할 수 없는 문제 +- 입력 시 에디터가 커서로 스크롤되지 않는 문제 +- Android에서 입력이 올바르게 처리되지 않는 문제 +- HR 요소의 잘못된 선택 처리 +- 빈 초기값으로 잘못된 렌더링 +- 자기 닫힘 블록이 포함된 경우 콘텐츠 복사가 실패할 수 있는 문제 +- Chrome: 컨텍스트 메뉴에서 이모지를 삽입할 수 없는 문제 +- Firefox: 전체 선택(CTRL+A)이 올바르게 처리되지 않는 문제 + +## 버전 2.0.4 {#version-204} + +2025년 10월 15일 출시 + +### 수정 사항 {#fixes-3} + +- 단락의 잘못된 범위 선택 +- 링크된 이미지에 인접한 경우 링크 팝업이 표시되지 않는 문제 +- 초기 툴바 값이 실제 콘텐츠와 일치하지 않는 문제 + +## 버전 2.0.3 {#version-203} + +2025년 8월 27일 출시 + +### 수정 사항 {#fixes-4} + +- 수평선을 클릭하면 스크립트 오류가 발생하는 문제 +- 기본 줄 높이가 올바르지 않은 문제 +- 콘텐츠 스타일에 중복 선택자가 포함되는 문제 +- HTML 파싱 시 일반 텍스트 블록이 스타일 변경을 무시하는 문제 +- HTML에서 파서가 이스케이프된 글꼴 이름을 무시하는 문제 +- HTML에서 파서가 `margin-left` 및 `line-height` 속성을 무시하는 문제 + +## 버전 2.0.2 {#version-202} + +2025년 8월 4일 출시 + +### 수정 사항 {#fixes-5} + +- 패키지 콘텐츠 업데이트 + +## 버전 2.0.1 {#version-201} + +2025년 7월 30일 출시 + +### 수정 사항 {#fixes-6} + +- `defaultStyles` 속성의 타입 정의 업데이트 + +## 버전 2.0 {#version-20} + +2025년 7월 30일 출시 + +:::note[참고] +v1.2의 API는 v2.0과 호환되지 않습니다. 자세한 내용은 [**마이그레이션 가이드**](news/migration.md)를 참조하세요. +::: + +### 새로운 기능 {#new-functionality-2} + +- **차세대 텍스트 렌더링** + 새로운 엔진으로 더 부드럽고, 빠르고, 정확한 텍스트 렌더링을 경험하세요 + +- **세밀한 툴바 구성** + 툴바를 완전히 제어하세요: + - [개별 툴바 컨트롤](guides/configuration.md/#default-toolbar-controls) 및 순서 정의 + - [커스텀 컨트롤](guides/configuration.md/#add-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 {#new-api-2} + +#### 새로운 속성 {#new-properties-1} + +- [`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-1} + +- [`setConfig()`](api/methods/set-config.md) — 구성을 동적으로 업데이트합니다 +- [`setLocale()`](api/methods/set-locale.md) — 즉석에서 로케일을 변경합니다 + +#### 새로운 내부 메서드 {#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-2} + +새로운 이벤트 전체 목록은 [여기](api/overview/events_overview.md)에서 확인할 수 있습니다 + +### 업데이트된 API {#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) + +## 제거된 API {#removed-api} + +:::warning[경고] +프로젝트에서 제거된 API를 사용하지 마세요!
자세한 내용은 [마이그레이션](news/migration.md) 항목을 참조하세요. +::: + +### [제거된 속성](news/migration.md#properties-migration) {#removed-properties} + +- [`customStats`](news/migration.md#--customstats) +- [`mode`](news/migration.md#--mode--layoutmode) +- [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar) + +### [제거된 메서드](news/migration.md#methods-migration) {#removed-methods} + +- `exitFullScreen()` +- `fullScreen()` +- `getEditorAPI()` +- `getStats()` +- `paint()` + +### 제거된 내부 메서드 {#removed-internal-methods} + +- [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept) + +### 제거된 이벤트 {#removed-events} + +- `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..392e229 --- /dev/null +++ b/i18n/ko/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "개발 센터", + "description": "The title of the footer links column with title=Development center in the footer" + }, + "link.title.Community": { + "message": "커뮤니티", + "description": "The title of the footer links column with title=Community in the footer" + }, + "link.title.Company": { + "message": "회사", + "description": "The title of the footer links column with title=Company in the footer" + }, + "link.item.label.Download RichText": { + "message": "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": "예제", + "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/t55alxiy?tag=richtext" + }, + "link.item.label.Blog": { + "message": "블로그", + "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/tag/richtext/" + }, + "link.item.label.Forum": { + "message": "포럼", + "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": "회사 소개", + "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "문의하기", + "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "라이선스", + "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxRichText/#editions-licenses" + } +} diff --git a/i18n/ko/docusaurus-theme-classic/navbar.json b/i18n/ko/docusaurus-theme-classic/navbar.json new file mode 100644 index 0000000..068c30b --- /dev/null +++ b/i18n/ko/docusaurus-theme-classic/navbar.json @@ -0,0 +1,26 @@ +{ + "title": { + "message": "JavaScript RichText 문서", + "description": "The title in the navbar" + }, + "logo.alt": { + "message": "DHTMLX RichText 문서", + "description": "The alt text of navbar logo" + }, + "item.label.Examples": { + "message": "예제", + "description": "Navbar item with label Examples" + }, + "item.label.Forum": { + "message": "포럼", + "description": "Navbar item with label Forum" + }, + "item.label.Support": { + "message": "지원", + "description": "Navbar item with label Support" + }, + "item.label.Download": { + "message": "다운로드", + "description": "Navbar item with label Download" + } +} diff --git a/i18n/ru/code.json b/i18n/ru/code.json new file mode 100644 index 0000000..672aa03 --- /dev/null +++ b/i18n/ru/code.json @@ -0,0 +1,560 @@ +{ + "theme.ErrorPageContent.title": { + "message": "На странице произошёл сбой.", + "description": "The title of the fallback page when the page crashed" + }, + "theme.BackToTopButton.buttonAriaLabel": { + "message": "Прокрутка к началу", + "description": "The ARIA label for the back to top button" + }, + "theme.blog.archive.title": { + "message": "Архив", + "description": "The page & hero title of the blog archive page" + }, + "theme.blog.archive.description": { + "message": "Архив", + "description": "The page & hero description of the blog archive page" + }, + "theme.blog.paginator.navAriaLabel": { + "message": "Навигация по странице списка блогов", + "description": "The ARIA label for the blog pagination" + }, + "theme.blog.paginator.newerEntries": { + "message": "Следующие записи", + "description": "The label used to navigate to the newer blog posts page (previous page)" + }, + "theme.blog.paginator.olderEntries": { + "message": "Предыдущие записи", + "description": "The label used to navigate to the older blog posts page (next page)" + }, + "theme.blog.post.paginator.navAriaLabel": { + "message": "Навигация по странице поста блога", + "description": "The ARIA label for the blog posts pagination" + }, + "theme.blog.post.paginator.newerPost": { + "message": "Следующий пост", + "description": "The blog post button label to navigate to the newer/previous post" + }, + "theme.blog.post.paginator.olderPost": { + "message": "Предыдущий пост", + "description": "The blog post button label to navigate to the older/next post" + }, + "theme.tags.tagsPageLink": { + "message": "Посмотреть все теги", + "description": "The label of the link targeting the tag list page" + }, + "theme.colorToggle.ariaLabel.mode.system": { + "message": "Системный режим", + "description": "The name for the system color mode" + }, + "theme.colorToggle.ariaLabel.mode.light": { + "message": "Светлый режим", + "description": "The name for the light color mode" + }, + "theme.colorToggle.ariaLabel.mode.dark": { + "message": "Тёмный режим", + "description": "The name for the dark color mode" + }, + "theme.colorToggle.ariaLabel": { + "message": "Переключение между темным и светлым режимом (сейчас используется {mode})", + "description": "The ARIA label for the color mode toggle" + }, + "theme.docs.breadcrumbs.navAriaLabel": { + "message": "Навигационная цепочка текущей страницы", + "description": "The ARIA label for the breadcrumbs" + }, + "theme.docs.DocCard.categoryDescription.plurals": { + "message": "{count} элемент|{count} элемента|{count} элементов", + "description": "The default description for a category card in the generated index about how many items this category includes" + }, + "theme.docs.paginator.navAriaLabel": { + "message": "Страница документа", + "description": "The ARIA label for the docs pagination" + }, + "theme.docs.paginator.previous": { + "message": "Предыдущая страница", + "description": "The label used to navigate to the previous doc" + }, + "theme.docs.paginator.next": { + "message": "Следующая страница", + "description": "The label used to navigate to the next doc" + }, + "theme.docs.tagDocListPageTitle.nDocsTagged": { + "message": "Одна страница|{count} страницы|{count} страниц", + "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} с тегом \"{tagName}\"", + "description": "The title of the page for a docs tag" + }, + "theme.docs.versionBadge.label": { + "message": "Версия: {versionLabel}" + }, + "theme.docs.versions.unreleasedVersionLabel": { + "message": "Это документация для будущей версии {siteTitle} {versionLabel}.", + "description": "The label used to tell the user that he's browsing an unreleased doc version" + }, + "theme.docs.versions.unmaintainedVersionLabel": { + "message": "Это документация {siteTitle} для версии {versionLabel}, которая уже не поддерживается.", + "description": "The label used to tell the user that he's browsing an unmaintained doc version" + }, + "theme.docs.versions.latestVersionSuggestionLabel": { + "message": "Актуальная документация находится на странице {latestVersionLink} ({versionLabel}).", + "description": "The label used to tell the user to check the latest version" + }, + "theme.docs.versions.latestVersionLinkLabel": { + "message": "последней версии", + "description": "The label used for the latest version suggestion link label" + }, + "theme.common.editThisPage": { + "message": "Отредактировать эту страницу", + "description": "The link label to edit the current page" + }, + "theme.common.headingLinkTitle": { + "message": "Прямая ссылка на {heading}", + "description": "Title for link to heading" + }, + "theme.lastUpdated.atDate": { + "message": " {date}", + "description": "The words used to describe on which date a page has been last updated" + }, + "theme.lastUpdated.byUser": { + "message": " от {user}", + "description": "The words used to describe by who the page has been last updated" + }, + "theme.lastUpdated.lastUpdatedAtBy": { + "message": "Последнее обновление{atDate}{byUser}", + "description": "The sentence used to display when a page has been last updated, and by who" + }, + "theme.navbar.mobileVersionsDropdown.label": { + "message": "Версии", + "description": "The label for the navbar versions dropdown on mobile view" + }, + "theme.NotFound.title": { + "message": "Страница не найдена", + "description": "The title of the 404 page" + }, + "theme.tags.tagsListLabel": { + "message": "Теги:", + "description": "The label alongside a tag list" + }, + "theme.admonition.caution": { + "message": "предупреждение", + "description": "The default label used for the Caution admonition (:::caution)" + }, + "theme.admonition.danger": { + "message": "осторожно", + "description": "The default label used for the Danger admonition (:::danger)" + }, + "theme.admonition.info": { + "message": "к сведению", + "description": "The default label used for the Info admonition (:::info)" + }, + "theme.admonition.note": { + "message": "примечание", + "description": "The default label used for the Note admonition (:::note)" + }, + "theme.admonition.tip": { + "message": "подсказка", + "description": "The default label used for the Tip admonition (:::tip)" + }, + "theme.admonition.warning": { + "message": "Предупреждение", + "description": "The default label used for the Warning admonition (:::warning)" + }, + "theme.AnnouncementBar.closeButtonAriaLabel": { + "message": "Закрыть", + "description": "The ARIA label for close button of announcement bar" + }, + "theme.blog.sidebar.navAriaLabel": { + "message": "Навигация по последним постам в блоге", + "description": "The ARIA label for recent posts in the blog sidebar" + }, + "theme.DocSidebarItem.expandCategoryAriaLabel": { + "message": "Развернуть категорию '{label}'", + "description": "The ARIA label to expand the sidebar category" + }, + "theme.DocSidebarItem.collapseCategoryAriaLabel": { + "message": "Свернуть категорию '{label}'", + "description": "The ARIA label to collapse the sidebar category" + }, + "theme.IconExternalLink.ariaLabel": { + "message": "(открывается в новой вкладке)", + "description": "The ARIA label for the external link icon" + }, + "theme.NavBar.navAriaLabel": { + "message": "Главная навигация", + "description": "The ARIA label for the main navigation" + }, + "theme.navbar.mobileLanguageDropdown.label": { + "message": "Языки", + "description": "The label for the mobile language switcher dropdown" + }, + "theme.NotFound.p1": { + "message": "К сожалению, мы не смогли найти запрашиваемую вами страницу.", + "description": "The first paragraph of the 404 page" + }, + "theme.NotFound.p2": { + "message": "Пожалуйста, обратитесь к владельцу сайта, с которого вы перешли на эту ссылку, чтобы сообщить ему, что ссылка не работает.", + "description": "The 2nd paragraph of the 404 page" + }, + "theme.TOCCollapsible.toggleButtonLabel": { + "message": "Содержание этой страницы", + "description": "The label used by the button on the collapsible TOC component" + }, + "theme.blog.post.readMore": { + "message": "Читать дальше", + "description": "The label used in blog post item excerpts to link to full blog posts" + }, + "theme.blog.post.readMoreLabel": { + "message": "Подробнее о {title}", + "description": "The ARIA label for the link to full blog posts from excerpts" + }, + "theme.blog.post.readingTime.plurals": { + "message": "{readingTime} мин. чтения|{readingTime} мин. чтения|{readingTime} мин. чтения", + "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": "Скопировать", + "description": "The copy button label on code blocks" + }, + "theme.CodeBlock.copied": { + "message": "Скопировано", + "description": "The copied button label on code blocks" + }, + "theme.CodeBlock.copyButtonAriaLabel": { + "message": "Скопировать в буфер обмена", + "description": "The ARIA label for copy code blocks button" + }, + "theme.CodeBlock.wordWrapToggle": { + "message": "Переключить перенос по строкам", + "description": "The title attribute for toggle word wrapping button of code block lines" + }, + "theme.docs.breadcrumbs.home": { + "message": "Главная страница", + "description": "The ARIA label for the home page in the breadcrumbs" + }, + "theme.docs.sidebar.collapseButtonTitle": { + "message": "Свернуть сайдбар", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.collapseButtonAriaLabel": { + "message": "Свернуть сайдбар", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.navAriaLabel": { + "message": "Боковая панель документации", + "description": "The ARIA label for the sidebar navigation" + }, + "theme.docs.sidebar.closeSidebarButtonAriaLabel": { + "message": "Закрыть панель навигации", + "description": "The ARIA label for close button of mobile sidebar" + }, + "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { + "message": "← Перейти к главному меню", + "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": "Переключить навигационную панель", + "description": "The ARIA label for hamburger menu button of mobile navigation" + }, + "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": { + "message": "Развернуть выпадающее меню", + "description": "The ARIA label of the button to expand the mobile dropdown navbar item" + }, + "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": { + "message": "Свернуть выпадающее меню", + "description": "The ARIA label of the button to collapse the mobile dropdown navbar item" + }, + "theme.docs.sidebar.expandButtonTitle": { + "message": "Развернуть сайдбар", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.docs.sidebar.expandButtonAriaLabel": { + "message": "Развернуть сайдбар", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.SearchBar.seeAll": { + "message": "Посмотреть все результаты ({count})" + }, + "theme.SearchBar.label": { + "message": "Поиск", + "description": "The ARIA label and placeholder for search button" + }, + "theme.SearchModal.searchBox.resetButtonTitle": { + "message": "Очистить", + "description": "The label and ARIA label for search box reset button" + }, + "theme.SearchModal.searchBox.cancelButtonText": { + "message": "Отменить", + "description": "The label and ARIA label for search box cancel button" + }, + "theme.SearchModal.searchBox.placeholderText": { + "message": "Поиск по документации", + "description": "The placeholder text for the main search input field" + }, + "theme.SearchModal.searchBox.placeholderTextAskAi": { + "message": "Задать другой вопрос...", + "description": "The placeholder text when in AI question mode" + }, + "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": { + "message": "Отвечаю...", + "description": "The placeholder text for search box when AI is streaming an answer" + }, + "theme.SearchModal.searchBox.enterKeyHint": { + "message": "поиск", + "description": "The hint for the search box enter key text" + }, + "theme.SearchModal.searchBox.enterKeyHintAskAi": { + "message": "ввод", + "description": "The hint for the Ask AI search box enter key text" + }, + "theme.SearchModal.searchBox.searchInputLabel": { + "message": "Поиск", + "description": "The ARIA label for search input" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonText": { + "message": "Вернуться к поиску по ключевым словам", + "description": "The text for back to keyword search button" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": { + "message": "Вернуться к поиску по ключевым словам", + "description": "The ARIA label for back to keyword search button" + }, + "theme.SearchModal.startScreen.recentSearchesTitle": { + "message": "Недавнее", + "description": "The title for recent searches" + }, + "theme.SearchModal.startScreen.noRecentSearchesText": { + "message": "Нет истории поиска", + "description": "The text when there are no recent searches" + }, + "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": { + "message": "Сохранить поисковый запрос", + "description": "The title for save recent search button" + }, + "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": { + "message": "Удалить запись из историю", + "description": "The title for remove recent search button" + }, + "theme.SearchModal.startScreen.favoriteSearchesTitle": { + "message": "Избранное", + "description": "The title for favorite searches" + }, + "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": { + "message": "Удалить запись из избранное", + "description": "The title for remove favorite search button" + }, + "theme.SearchModal.startScreen.recentConversationsTitle": { + "message": "Недавние беседы", + "description": "The title for recent conversations" + }, + "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": { + "message": "Удалить эту беседу из истории", + "description": "The title for remove recent conversation button" + }, + "theme.SearchModal.errorScreen.titleText": { + "message": "Невозможно загрузить результаты поиска", + "description": "The title for error screen" + }, + "theme.SearchModal.errorScreen.helpText": { + "message": "Проверьте подключение к интернету.", + "description": "The help text for error screen" + }, + "theme.SearchModal.resultsScreen.askAiPlaceholder": { + "message": "Спросить ИИ: ", + "description": "The placeholder text for Ask AI input" + }, + "theme.SearchModal.askAiScreen.disclaimerText": { + "message": "Ответы генерируются ИИ, который может ошибаться. Проверяйте ответы.", + "description": "The disclaimer text for AI answers" + }, + "theme.SearchModal.askAiScreen.relatedSourcesText": { + "message": "Похожие источники", + "description": "The text for related sources" + }, + "theme.SearchModal.askAiScreen.thinkingText": { + "message": "Думаю...", + "description": "The text when AI is thinking" + }, + "theme.SearchModal.askAiScreen.copyButtonText": { + "message": "Скопировать", + "description": "The text for copy button" + }, + "theme.SearchModal.askAiScreen.copyButtonCopiedText": { + "message": "Скопировано!", + "description": "The text for copy button when copied" + }, + "theme.SearchModal.askAiScreen.copyButtonTitle": { + "message": "Скопировать", + "description": "The title for copy button" + }, + "theme.SearchModal.askAiScreen.likeButtonTitle": { + "message": "Нравится", + "description": "The title for like button" + }, + "theme.SearchModal.askAiScreen.dislikeButtonTitle": { + "message": "Не нравится", + "description": "The title for dislike button" + }, + "theme.SearchModal.askAiScreen.thanksForFeedbackText": { + "message": "Спасибо за ваш отзыв!", + "description": "The text for thanks for feedback" + }, + "theme.SearchModal.askAiScreen.preToolCallText": { + "message": "Поиск...", + "description": "The text before tool call" + }, + "theme.SearchModal.askAiScreen.duringToolCallText": { + "message": "Поиск: ", + "description": "The text during tool call" + }, + "theme.SearchModal.askAiScreen.afterToolCallText": { + "message": "Искали:", + "description": "The text after tool call" + }, + "theme.SearchModal.footer.selectText": { + "message": "выбрать", + "description": "The select text for footer" + }, + "theme.SearchModal.footer.submitQuestionText": { + "message": "Отправить вопрос", + "description": "The submit question text for footer" + }, + "theme.SearchModal.footer.selectKeyAriaLabel": { + "message": "Клавиша Enter", + "description": "The ARIA label for select key in footer" + }, + "theme.SearchModal.footer.navigateText": { + "message": "навигация", + "description": "The navigate text for footer" + }, + "theme.SearchModal.footer.navigateUpKeyAriaLabel": { + "message": "Клавиша стрелка вверх", + "description": "The ARIA label for navigate up key in footer" + }, + "theme.SearchModal.footer.navigateDownKeyAriaLabel": { + "message": "Клавиша стрелка вниз", + "description": "The ARIA label for navigate down key in footer" + }, + "theme.SearchModal.footer.closeText": { + "message": "закрыть", + "description": "The close text for footer" + }, + "theme.SearchModal.footer.closeKeyAriaLabel": { + "message": "Клавиша Escape", + "description": "The ARIA label for close key in footer" + }, + "theme.SearchModal.footer.searchByText": { + "message": "Поиск от", + "description": "The 'Powered by' text for footer" + }, + "theme.SearchModal.footer.backToSearchText": { + "message": "Вернуться к поиску", + "description": "The back to search text for footer" + }, + "theme.SearchModal.noResultsScreen.noResultsText": { + "message": "Нет результатов по запросу", + "description": "The text when there are no results" + }, + "theme.SearchModal.noResultsScreen.suggestedQueryText": { + "message": "Попробуйте", + "description": "The text for suggested query" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsText": { + "message": "Нет подходящего результата поиска?", + "description": "The text for reporting missing results" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": { + "message": "Сообщите нам.", + "description": "The link text for reporting missing results" + }, + "theme.SearchModal.placeholder": { + "message": "Поиск", + "description": "The placeholder of the input of the DocSearch pop-up modal" + }, + "theme.SearchPage.documentsFound.plurals": { + "message": "{count} документ|{count} документа|{count} документов", + "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": "Результаты поиска по запросу \"{query}\"", + "description": "The search page title for non-empty query" + }, + "theme.SearchPage.emptyResultsTitle": { + "message": "Поиск по сайту", + "description": "The search page title for empty query" + }, + "theme.SearchPage.inputPlaceholder": { + "message": "Введите фразу для поиска", + "description": "The placeholder for search page input" + }, + "theme.SearchPage.inputLabel": { + "message": "Поиск", + "description": "The ARIA label for search page input" + }, + "theme.SearchPage.algoliaLabel": { + "message": "При поддержке Algolia", + "description": "The description label for Algolia mention" + }, + "theme.SearchPage.noResultsText": { + "message": "По запросу ничего не найдено", + "description": "The paragraph for empty search result" + }, + "theme.SearchPage.fetchingNewResults": { + "message": "Загрузка новых результатов поиска...", + "description": "The paragraph for fetching new search results" + }, + "theme.blog.post.plurals": { + "message": "{count} запись|{count} записи|{count} записей", + "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} с тегом \"{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": "Авторы", + "description": "The title of the authors page" + }, + "theme.blog.authorsList.viewAll": { + "message": "Посмотреть всех авторов", + "description": "The label of the link targeting the blog authors page" + }, + "theme.blog.author.noPosts": { + "message": "Этот автор ещё не написал ни одного поста.", + "description": "The text for authors with 0 blog post" + }, + "theme.contentVisibility.unlistedBanner.title": { + "message": "Скрытая страница", + "description": "The unlisted content banner title" + }, + "theme.contentVisibility.unlistedBanner.message": { + "message": "Эта страница скрыта. Поисковые системы не будут её индексировать, и доступ к ней есть только у пользователей с прямой ссылкой.", + "description": "The unlisted content banner message" + }, + "theme.contentVisibility.draftBanner.title": { + "message": "Черновик страницы", + "description": "The draft content banner title" + }, + "theme.contentVisibility.draftBanner.message": { + "message": "Эта страница является черновиком. Она будет видна только в режиме разработки и будет исключена из production-сборки.", + "description": "The draft content banner message" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "Попробуйте ещё раз", + "description": "The label of the button to try again rendering when the React error boundary captures an error" + }, + "theme.common.skipToMainContent": { + "message": "Перейти к основному содержимому", + "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": "Теги", + "description": "The title of the tag list page" + } +} 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..daf9dd0 --- /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": "Последние посты", + "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..2905cfe --- /dev/null +++ b/i18n/ru/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": "Что нового и миграция", + "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": "Что нового и миграция", + "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", + "description": "The label for category 'RichText methods' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText internal API": { + "message": "Внутренний API RichText", + "description": "The label for category 'RichText internal API' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText internal API.link.generated-index.title": { + "message": "Обзор внутреннего API", + "description": "The generated-index page title for category 'RichText internal API' in sidebar 'docs'" + }, + "sidebar.docs.category.Event Bus methods": { + "message": "Методы Event Bus", + "description": "The label for category 'Event Bus methods' in sidebar 'docs'" + }, + "sidebar.docs.category.State methods": { + "message": "Методы State", + "description": "The label for category 'State methods' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText events": { + "message": "События RichText", + "description": "The label for category 'RichText events' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText properties": { + "message": "Свойства RichText", + "description": "The label for category 'RichText properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Integration with frameworks": { + "message": "Интеграция с фреймворками", + "description": "The label for category 'Integration with frameworks' in sidebar 'docs'" + }, + "sidebar.docs.category.Integration with frameworks.link.generated-index.title": { + "message": "Интеграция с фреймворками", + "description": "The generated-index page title for category 'Integration with frameworks' in sidebar 'docs'" + }, + "sidebar.docs.category.Guides": { + "message": "Руководства", + "description": "The label for category 'Guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Guides.link.generated-index.title": { + "message": "Руководства", + "description": "The generated-index page title for category 'Guides' in sidebar 'docs'" + } +} diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/.sync b/i18n/ru/docusaurus-plugin-content-docs/current/.sync new file mode 100644 index 0000000..ae89b0d --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/.sync @@ -0,0 +1 @@ +8c89a96ada89b69f200dac7f3e5b216cc76aa8db 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..8cdaa19 --- /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: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о конфиге defaultStyles. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# defaultStyles + +### Описание {#description} + +@short: Необязательный. Задаёт значения стилей по умолчанию для конкретных типов блоков + +### Использование {#usage} + +~~~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`. +::: + +### Конфиг по умолчанию {#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} +// инициализация RichText +new richtext.Richtext("#root", { + defaultStyles: { + h4: { + "font-family": "Roboto" + }, + h5: { + "font-family": "Roboto" + }, + h6: { + "font-family": "Roboto" + } + }, + // другие параметры конфигурации +}); +~~~ + +**История изменений:** Свойство обновлено в v2.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..4b83210 --- /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: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о конфиге fullscreenMode. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# fullscreenMode + +### Описание {#description} + +@short: Необязательный. Включает полноэкранный режим RichText + +### Использование {#usage} + +~~~jsx {} +fullscreenMode?: boolean; +~~~ + +### Конфиг по умолчанию {#default-config} + +~~~jsx +fullscreenMode: false; +~~~ + +### Пример {#example} + +~~~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..7db47f8 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md @@ -0,0 +1,56 @@ +--- +sidebar_label: imageUploadUrl +title: Конфигурация imageUploadUrl +description: В документации DHTMLX JavaScript RichText вы можете узнать о конфигурационном свойстве imageUploadUrl. Ознакомьтесь с руководствами разработчика и справочником АПИ, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# imageUploadUrl + +### Описание {#description} + +@short: Необязательное. Задаёт URL, который будет использоваться для загрузки изображений (из панели инструментов, строки меню, вставки из буфера обмена или перетаскивания) + +Если свойство задано, RichText загружает каждое вставленное изображение на указанный эндпоинт и подставляет URL, возвращённый сервером. + +Если свойство не указано или имеет ложное значение (`""`, `null`, `undefined`), RichText переходит в **режим inline**: файл изображения читается на клиенте и встраивается непосредственно в содержимое в виде data URL в формате base64 — сервер не требуется. Встроенные изображения размером более 1024×800 пропорционально уменьшаются до этих пределов. + +:::note[Примечание] +Встроенные (base64) изображения не сохраняются при встроенном [экспорте](api/events/export.md) в DOCX / PDF. Если вы используете экспорт, укажите `imageUploadUrl`, чтобы изображения ссылались на внешнее расположение. +::: + +:::caution[Осторожно] +Кодирование в base64 увеличивает размер данных примерно на одну треть по сравнению с исходным файлом. Документ с несколькими крупными встроенными изображениями вырастает соответственно, что влияет на размер значения, возвращаемого [`getValue()`](api/methods/get-value.md), на потребление памяти редактором и на стоимость сохранения или передачи содержимого. Для документов с большим количеством крупных изображений рекомендуется использовать серверный `imageUploadUrl`. +::: + +### Использование {#usage} + +~~~jsx {} +imageUploadUrl?: string; +~~~ + +### Пример {#example} + +Загрузка изображений на серверный эндпоинт: + +~~~jsx {3} +// инициализация RichText +new richtext.Richtext("#root", { + imageUploadUrl: "https://example.com/upload" + // другие свойства конфигурации +}); +~~~ + +Вставка изображений inline в виде base64 (сервер не требуется) — не указывайте свойство или передайте пустую строку: + +~~~jsx {2} +new richtext.Richtext("#root", { + // imageUploadUrl не задан, изображения вставляются как data URL в формате base64 + // другие свойства конфигурации +}); +~~~ + +**История изменений:** Свойство добавлено в v2.0. Начиная с v2.1 свойство является необязательным: если оно не указано, изображения вставляются inline в виде base64 data URL. + +**Связанные статьи:** [Конфигурация](guides/configuration.md), [Работа с сервером](guides/working_with_server.md) + +**Связанный пример:** [RichText. Инициализация](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..01c15cf --- /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: В документации DHTMLX JavaScript RichText вы можете узнать о конфиге layoutMode. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# layoutMode + +### Описание {#description} + +@short: Необязательный. Задаёт режим отображения основной области редактора + +### Использование {#usage} + +~~~jsx {} +layoutMode: "classic" | "document"; +~~~ + +Режим `"classic"` заполняет всю область редактирования. Режим `"document"` отображает область редактирования в виде страницы документа. + +### Конфиг по умолчанию {#default-config} + +~~~jsx +layoutMode: "classic"; +~~~ + +### Пример {#example} + +~~~jsx {3} +// инициализация RichText +new richtext.Richtext("#root", { + layoutMode: "document" // инициализирует RichText в режиме "document" по умолчанию + // другие свойства конфигурации +}); +~~~ + +**Журнал изменений:** Свойство добавлено в v2.0 вместо удалённого свойства `mode` + +**Связанные статьи:** [Конфигурация](guides/configuration.md) + +**Связанный пример:** [RichText. Инициализация](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..4b2e9cf --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/locale.md @@ -0,0 +1,47 @@ +--- +sidebar_label: locale +title: Конфиг locale +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о конфиге locale. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# locale + +### Описание {#description} + +@short: Необязательный. Объект, содержащий метки локализации RichText + +:::info[Информация] +Объект `locale` должен включать все метки RichText с соответствующими переводами. +::: + +### Использование {#usage} + +~~~jsx {} +locale?: object; +~~~ + +### Конфиг по умолчанию {#default-config} + +По умолчанию RichText использует **английскую** локаль. Вы также можете задать собственную локаль. + +:::tip[Совет] +Чтобы динамически изменить текущую локаль, воспользуйтесь методом [`setLocale()`](api/methods/set-locale.md) объекта RichText +::: + +### Пример {#example} + +~~~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..6732b2e --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/menubar.md @@ -0,0 +1,33 @@ +--- +sidebar_label: menubar +title: Конфиг menubar +description: В документации DHTMLX JavaScript RichText вы можете узнать о конфиге menubar. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, а также скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# menubar + +### Описание {#description} + +@short: Необязательный. Включает верхний меню-бар RichText + +### Использование {#usage} + +~~~jsx {} +menubar?: boolean; +~~~ + +### Пример {#example} + +~~~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/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..e860e5b --- /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. Просматривайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# toolbar + +### Описание {#description} + +@short: Необязательный. Включает панель инструментов и позволяет задавать/настраивать кнопки, отображаемые в ней + +### Использование {#usage} + +~~~jsx {} +toolbar?: boolean | Array any }>; +~~~ + +#### Доступные кнопки панели инструментов {#available-buttons-within-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` | Добавляет визуальный разделитель между группами кнопок панели инструментов. | + +Эти строки можно использовать для настройки кнопок панели инструментов следующим образом: + +~~~jsx {2-7} +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // другие кнопки + ], + // другие свойства конфигурации +}); +~~~ + +#### Пользовательские кнопки панели инструментов {#custom-buttons-within-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", + // предопределённые кнопки (пользователь не может задавать дополнительные параметры (подписи, подсказки, опции и т.д.), поэтому только ({ 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: () => {/* пользовательская логика */} + } + ], + // другие свойства конфигурации +}); +~~~ + +#### Скрытие панели инструментов {#hide-toolbar} + +Чтобы скрыть панель инструментов, установите свойство `toolbar` в значение `false`: + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false + // другие свойства конфигурации +}); +~~~ + +### Конфигурация по умолчанию {#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[Совет] +Элементы управления панели инструментов по умолчанию экспортируются виджетом RichText и доступны через `richtext.defaultToolbarButtons`. + +```jsx{4} +// инициализация RichText +new richtext.Richtext("#root", { + toolbar: [ + ...richtext.defaultToolbarButtons, + { + type: "button", + id: "btn1", // идентификатор кнопки (не должен совпадать с существующими идентификаторами, если нужна пользовательская логика) + icon: "wxo-help", // иконка кнопки (сочетается с подписью) + css: "rounded", // имя CSS-класса, назначаемого элементу управления (поддерживаемые классы по умолчанию: wx-primary, wx-secondary) + label: "Custom button", // подпись кнопки (сочетается с иконкой) + tooltip: "Some tooltip", // всплывающая подсказка при наведении курсора (если не указана, используется значение из "label") + } + ] + // другие свойства конфигурации +}); +``` +::: + +### Пример {#example} + +~~~jsx {3-18} +// инициализация RichText +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // пользовательские кнопки (ниже используются все поддерживаемые параметры) + // пользователь может задавать только пользовательские кнопки (richselect/colorpicker пока не поддерживаются) + { + type: "button", + id: "btn1", // идентификатор кнопки (не должен совпадать с существующими идентификаторами, если нужна пользовательская логика) + icon: "wxo-help", // иконка кнопки (сочетается с подписью) + css: "rounded", // имя CSS-класса, назначаемого элементу управления (поддерживаемые классы по умолчанию: wx-primary, wx-secondary) + label: "Custom button", // подпись кнопки (сочетается с иконкой) + tooltip: "Some tooltip", // всплывающая подсказка при наведении курсора (если не указана, используется значение из "label") + handler: () => ..., // пользовательская логика, привязанная к этой кнопке + } + ] + // другие свойства конфигурации +}); +~~~ + +**Журнал изменений:** Свойство добавлено в v2.0 + +**Связанные статьи:** [Конфигурация](guides/configuration.md) + +**Связанный пример:** [RichText. Пользовательский элемент управления и упрощённая панель инструментов](https://snippet.dhtmlx.com/wda202ih?tag=richtext) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/trigger-template.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/trigger-template.md new file mode 100644 index 0000000..faa0f42 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/trigger-template.md @@ -0,0 +1,73 @@ +--- +sidebar_label: triggerTemplate +title: Конфиг triggerTemplate +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о конфиге triggerTemplate. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# triggerTemplate + +### Описание {#description} + +@short: Необязательный. Настраивает отображение элементов в выпадающем списке подсказок, открываемом записью [`triggers`](api/config/triggers.md) + +По умолчанию выпадающий список отображает поле `label` каждого элемента в виде обычного текста. Используйте `triggerTemplate`, чтобы отображать более насыщенные строки — например, аватар вместе с именем и электронной почтой. + +### Использование {#usage} + +~~~jsx {} +function triggerTemplate({ data, trigger }) { + return "HTML template of the suggestion item"; +}; +~~~ + +### Параметры {#parameters} + +Функция обратного вызова принимает объект со следующими параметрами: + +- `data` — текущий элемент подсказки (`{ id, label, url }`, а также любые пользовательские поля, добавленные в источник `data` триггера) +- `trigger` — символ триггера, открывшего выпадающий список (`"@"`, `"#"` и т.д.) + +:::tip[Совет] +Ширина выпадающего списка по умолчанию составляет `160px`. Если вашему шаблону нужно больше пространства, добавьте родительский элемент `.wx-editor` перед селектором: + +~~~css {} +.wx-editor .wx-suggest-anchor { + width: 220px; +} +~~~ +::: + +### Пример {#example} + +Следующий фрагмент кода настраивает два триггера: `@` для упоминаний и `#` для тегов. Используйте `triggerTemplate` для расширения значения `trigger`, чтобы отображать каждый выпадающий список по-разному. Для выпадающего списка `@` шаблон возвращает пользовательскую HTML-строку с аватаром (`data.image`), ником (`data.label`) и полным именем (`data.name`). Для триггера `#` шаблон использует `label`: + +~~~jsx {5-6,8-15} +const { template, Richtext } = richtext; + +new Richtext("#root", { + triggers: [ + { trigger: "@", data: people }, + { trigger: "#", data: tags } + ], + triggerTemplate: template(obj => { + if (obj.trigger === "@") { + return `
+ +
${obj.data.label}
+
${obj.data.name}
+
`; + } + // другие триггеры (например, "#") используют обычный label + return obj.data.label; + }) +}); +~~~ + +**История изменений:** Свойство добавлено в v2.1 + +**Связанные примеры:** + +- [RichText. Пользовательский шаблон выпадающего списка для каждого триггера](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext) +- [RichText. Автодополнение эмодзи](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) + +**Связанные статьи:** [Упоминания и теги](guides/mentions_and_tags.md) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/triggers.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/triggers.md new file mode 100644 index 0000000..fdd8279 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/triggers.md @@ -0,0 +1,250 @@ +--- +sidebar_label: triggers +title: Конфиг triggers +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о конфиге triggers. Изучайте руководства разработчика и справочник АПИ, проверяйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# triggers + +### Описание {#description} + +@short: Необязательный. Определяет триггеры выпадающего списка для вставки упоминаний, тегов и других токенов + +Когда пользователь вводит настроенный символ (например, `@` или `#`), RichText открывает выпадающий список с заранее заданными элементами. Когда пользователь выбирает элемент, RichText вставляет его в документ как нередактируемый токен (``). + +### Применение {#usage} + +~~~jsx {} +triggers?: Array<{ + trigger: string, + data: Array<{ id?: string | number; label?: string; url?: string }> + | ((query: string) => + Array<{ id?: string | number; label?: string; url?: string }> + | Promise>), + showTrigger?: boolean, + action?: (item) => void +}>; +~~~ + +### Параметры {#parameters} + +Каждый элемент массива `triggers` принимает следующие поля: + +- `trigger` - (обязательный) символ, который открывает выпадающий список с подсказками (например, `"@"`, `"#"`, `"/"`, `"$"`) +- `data` - (обязательный) источник данных для выпадающего списка; может быть массивом, синхронной функцией или асинхронной функцией. См. [Формы источника данных](#data-source-forms) +- `showTrigger` - (необязательный) если `true` (по умолчанию), RichText сохраняет символ триггера во вставленном токене (например, `@Alice`); если `false`, RichText вставляет только `label` (например, `Alice`) +- `action` - (необязательный) пользовательский калбэк, вызываемый при выборе элемента пользователем. Если задан, RichText удаляет введённый текст триггера (символ триггера и строку запроса) и вызывает `action(item)` **вместо** вставки токена. Калбэк получает выбранный элемент и может вставить любое содержимое вместо выбранного. Параметр `action` имеет приоритет над `showTrigger`, который не оказывает эффекта, если задан `action`. См. [Пользовательское действие](#custom-action) + +### Формы источника данных {#data-source-forms} + +* **Статический массив** — RichText автоматически фильтрует массив, сопоставляя запрос с полем `label` (без учёта регистра, `startsWith`): + +~~~jsx {3-7} +new richtext.Richtext("#root", { + triggers: [{ + trigger: "@", + data: [ + { id: "alice", label: "Alice" }, + { id: "bob", label: "Bob" } + ] + }] +}); +~~~ + +* **Синхронная функция** — RichText вызывает вашу функцию с текущей строкой `query`; вы выполняете фильтрацию и возвращаете подходящий массив: + +~~~jsx {3-6} +new richtext.Richtext("#root", { + triggers: [{ + trigger: "#", + data: query => tags.filter(t => + t.label.toLowerCase().startsWith(query.toLowerCase()) + ) + }] +}); +~~~ + +* **Асинхронная функция** — RichText вызывает вашу функцию с текущей строкой `query`; возвращайте `Promise`, который разрешается в подходящий массив. Удобно для серверного поиска: + +~~~jsx {3-8} +new richtext.Richtext("#root", { + triggers: [{ + trigger: "+", + data: async query => { + const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`); + const users = await res.json(); + return users.map(u => ({ id: String(u.id), label: u.name, url: u.website })); + } + }] +}); +~~~ + +### Поля элемента подсказки {#suggestion-item-fields} + +Каждый элемент в `data` (или каждый элемент, возвращаемый функцией) содержит следующие поля: + +- `id` - (необязательный) уникальный идентификатор, сохраняемый в вставленном токене. Если не задан, RichText генерирует идентификатор автоматически +- `label` - (необязательный) текст, отображаемый в выпадающем списке и вставляемый в документ. Обязателен только для рендеринга по умолчанию; при использовании пользовательского [`triggerTemplate`](api/config/trigger-template.md) можно рендерить элементы из других полей (например, `template(({ data }) => data.id)`) и не указывать `label` +- `url` - (необязательный) URL, связанный с элементом. RichText сохраняет URL в атрибуте `href` вставленного токена. `Ctrl+Click` по токену открывает ссылку + +Элемент также может содержать любое количество пользовательских полей помимо `id`, `label` и `url` (например, `code` для эмодзи, или `image` и `name` для аватара). Эти дополнительные поля передаются в калбэк [`triggerTemplate`](api/config/trigger-template.md) и в калбэк `action`. + +### Отрисованный токен {#rendered-token} + +Когда пользователь выбирает элемент в выпадающем списке, RichText вставляет в документ нередактируемый элемент-токен: + +~~~html {} +@Alice +~~~ + +- `@` (в `data-token="@"`) - `trigger` элемента +- `alice` (в `data-token-id="alice"`) - `id` элемента +- `mailto:alice@example.com` (в `href="mailto:alice@example.com"`) - `url` элемента +- `@Alice` - сочетание `trigger` и `label`; при `showTrigger: false` это будет просто `Alice` + +Используйте атрибуты `data-token` и `data-token-id` для стилизации токенов через CSS, например, чтобы выделить все упоминания пользователя: + +~~~css {} +.wx-editor-content a[data-token="@"][data-token-id="alice"] { + background: #fb8500; + color: #fff; +} +~~~ + +### Пользовательское действие {#custom-action} + +По умолчанию, когда пользователь выбирает элемент, RichText вставляет его в документ как токен. Задайте параметр `action`, чтобы выполнить собственный код вместо этого: RichText удаляет введённую строку триггера (символ триггера и строку запроса) и вызывает калбэк `action(item)` с выбранным элементом. Токен не вставляется, поэтому вы сами решаете, что добавить в документ (или выполняете собственный код). Параметр `action` имеет приоритет над `showTrigger`. Если задан `action`, `showTrigger` игнорируется. + +#### Добавление эмодзи {#add-emoji} + +Распространённый сценарий использования — вставка эмодзи по триггеру `:`, где каждый элемент содержит пользовательское поле `code`. Совместите `action` с [`triggerTemplate`](api/config/trigger-template.md), чтобы в выпадающем списке отображался сам эмодзи, а не только его label: + +~~~jsx {8,12} +const { template, Richtext } = richtext; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: emoji, // [{ id: "apple", label: "apple", code: "1F34E" }, ...] + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // отображение самого эмодзи (а не только его названия) в выпадающем списке + triggerTemplate: template(({ data }) => `${emojiFromCode(data.code)} ${data.label}`) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} +~~~ + +#### Группировка эмодзи по категориям {#group-emoji-by-categories} + +Когда параметр `data` является функцией, вы не ограничены встроенным сопоставлением по полю `label`. Вы можете реализовать собственную фильтрацию и сохранить заголовки категорий в выпадающем списке. Добавьте элементы-заголовки, содержащие поле `label`, но не содержащие `code`. Функция `data` сначала находит эмодзи, соответствующие запросу, затем возвращает их вместе с заголовками категорий, в которых ещё есть совпадения: + +~~~jsx {18-26,31-33,41} +const { template, Richtext } = richtext; + +// элементы-заголовки не содержат поля `code`; элементы-эмодзи его содержат +const emoji = [ + { id: "$smileys", label: "Smileys", category: 1 }, // категория + { id: "grinning", label: "grinning", code: "1F600", category: 1 }, + { id: "smile", label: "smile", code: "1F604", category: 1 }, + { id: "$animals", label: "Animals", category: 2 }, // категория + { id: "dog", label: "dog", code: "1F436", category: 2 }, + { id: "cat", label: "cat", code: "1F431", category: 2 } +]; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: query => { + const matched = emoji.filter(item => + item.code && + item.label.toLowerCase().startsWith(query.toLowerCase().trim()) + ); + const categories = new Set(matched.map(item => item.category)); + // сохраняем подходящие эмодзи вместе с заголовками категорий, в которых остались совпадения + return emoji.filter(item => + item.code ? matched.includes(item) : categories.has(item.category) + ); + }, + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // отображение строк с эмодзи обычным шрифтом, а заголовков категорий — жирным + triggerTemplate: template(({ data }) => + data.code ? `${emojiFromCode(data.code)} ${data.label}` : `${data.label}` + ) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} + +// заголовки не имеют поля `code` — игнорируем их выбор, чтобы они никогда не вставлялись +editor.api.intercept("insert-token", ({ data }) => !!data.code); +~~~ + +#### Добавление командного меню в стиле slash {#add-slash-style-command-menu} + +Вы можете использовать `action` для создания командного меню в стиле slash (как `/` в Notion или Slack). Сохраните имя команды в поле `id` каждого элемента, её параметры — в пользовательском поле `config`, и позвольте калбэку выполнить команду через [`api.exec`](api/internal/exec.md): + +~~~jsx {13} +// каждый элемент хранит название действия api.exec в `id`, а его параметры — в `config` +const commands = [ + { id: "set-text-style", label: "Heading 1", config: { tag: "h1" } }, + { id: "insert-list", label: "Bulleted list", config: { type: "bulleted" } }, + { id: "insert-line", label: "Divider" } // конфигурация отсутствует → применяется `|| {}` +]; + +const editor = new richtext.Richtext("#root", { + triggers: [ + { + trigger: "/", + data: commands, + action: item => editor.api.exec(item.id, item.config || {}) + } + ] +}); +~~~ + +### Пример {#example} + +В следующем примере настраиваются два триггера: `@` для упоминаний (каждый элемент содержит `url`, который становится атрибутом `href` токена) и `#` для тегов (только label): + +~~~jsx {4,11} +new richtext.Richtext("#root", { + triggers: [ + { + trigger: "@", + data: [ + { id: "alice", label: "Alice", url: "mailto:alice@example.com" }, + { id: "bob", label: "Bob", url: "mailto:bob@example.com" } + ] + }, + { + trigger: "#", + data: [ + { id: "css", label: "CSS" }, + { id: "html", label: "HTML" } + ] + } + ] +}); +~~~ + +**История изменений:** Свойство добавлено в v2.1 + +**Связанные примеры:** + +- [RichText. Упоминания, теги и асинхронный поиск](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) +- [RichText. Пользовательский шаблон выпадающего списка для каждого триггера](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext) +- [RichText. Автодополнение эмодзи](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) +- [RichText. Slash-команды](https://snippet.dhtmlx.com/e0mrmyam?tag=richtext) +- [RichText. Поиск и выделение упоминаний](https://snippet.dhtmlx.com/8y6zvzh2?tag=richtext) +- [RichText. Выделение всех упоминаний](https://snippet.dhtmlx.com/2rbo12jx?tag=richtext) + +**Связанные статьи:** [Упоминания и теги](guides/mentions_and_tags.md) 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..1f5e1c8 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/value.md @@ -0,0 +1,36 @@ +--- +sidebar_label: value +title: Конфигурация value +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о конфигурации value. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# value + +### Описание {#description} + +@short: Необязательный. Задаёт начальное значение (содержимое), отображаемое в области редактора RichText + +:::tip[Совет] +Если вы хотите задать значение (содержимое) в пользовательском формате, используйте встроенный метод [`setValue()`](api/methods/set-value.md). +::: + +### Использование {#usage} + +~~~jsx {} +value?: string; +~~~ + +### Пример {#example} + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" // задаёт значение по умолчанию (формат HTML) + // другие свойства конфигурации +}); +~~~ + +**История изменений:** Свойство добавлено в v2.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..8dd1697 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/align.md @@ -0,0 +1,48 @@ +--- +sidebar_label: align +title: Событие align +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о событии align. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# align + +### Описание {#description} + +@short: Срабатывает при изменении выравнивания текста через меню/панель инструментов или методы Event Bus + +### Использование {#usage} + +~~~jsx {} +"align": ({ + align: "left" | "center" | "right" | "justify" +}) => boolean | void; +~~~ + +### Параметры {#parameters} + +Колбэк события `align` может принимать объект со следующим параметром: + +- `align` - выравнивание текста. Можно указать одно из следующих значений: `"left" | "center" | "right" | "justify"` + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~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" +}); +~~~ + +**История изменений:** Событие добавлено в v2.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..677ef12 --- /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: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о событии clear-text-format. Изучайте руководства для разработчиков и справочник АПИ, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# clear-text-format + +### Описание {#description} + +@short: Срабатывает при очистке форматирования текста через меню/панель инструментов или методы Event Bus + +### Использование {#usage} + +~~~jsx {} +"clear-text-format": () => boolean | void; +~~~ + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-10} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "clear-text-format" +editor.api.on("clear-text-format", () => { + console.log("Text format was cleared"); +}); +// очистка форматирования текста +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..654fe7e --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/copy.md @@ -0,0 +1,36 @@ +--- +sidebar_label: copy +title: copy Event +description: Вы можете узнать о событии copy в документации библиотеки DHTMLX JavaScript RichText. Изучите руководства разработчика и справочник АПИ, ознакомьтесь с примерами кода и живыми демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# copy + +### Описание {#description} + +@short: Срабатывает при копировании выделенного текста + +### Использование {#usage} + +~~~jsx {} +"copy": () => boolean | void; +~~~ + +:::info[Информация] +Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "copy" +editor.api.on("copy", () => { + console.log("Selected text was copied"); +}); +~~~ + +**Список изменений:** Событие добавлено в 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..616de83 --- /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. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# create-new + +### Описание {#description} + +@short: Срабатывает при нажатии пункта "New" в строке меню или через методы Event Bus + +### Использование {#usage} + +~~~jsx {} +"create-new": ({ reset?: boolean }) => boolean | void; +~~~ + +### Параметры {#parameters} + +Колбэк события `create-new` может принимать объект со следующим параметром: + +- `reset` — сбрасывает историю при создании нового файла + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-10} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "create-new" +editor.api.on("create-new", ({ reset }) => { + console.log(`Document has been cleared. History has ${reset ? "" : "not"} been 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..cfffd98 --- /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. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# cut + +### Описание {#description} + +@short: Срабатывает при вырезании выделенного текста + +### Использование {#usage} + +~~~jsx {} +"cut": () => boolean | void; +~~~ + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "cut" +editor.api.on("cut", () => { + console.log("Selected text was cut"); +}); +~~~ + +**Журнал изменений:** Событие добавлено в 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..d3e0672 --- /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 Event +description: Вы можете узнать о событии delete-link в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# delete-link + +### Описание {#description} + +@short: Вызывается при удалении ссылки + +### Использование {#usage} + +~~~jsx {} +"delete-link": () => boolean | void; +~~~ + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "delete-link" +editor.api.on("delete-link", () => { + console.log("The link was deleted"); +}); +~~~ + +**Журнал изменений:** Событие добавлено в v2.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..f2140f9 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/export.md @@ -0,0 +1,59 @@ +--- +sidebar_label: export +title: Событие export +description: В документации библиотеки DHTMLX JavaScript RichText можно узнать о событии export. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# export + +### Описание {#description} + +@short: Срабатывает после нажатия пункта «Export» в меню или через методы Event Bus + +### Использование {#usage} + +~~~jsx {} +"export": ({ options: IExportOptions; result?: any }) => boolean | void; + +interface IExportOptions { + format?: "docx" | "pdf"; + url?: string; + download?: boolean; + fileName?: string; +} +~~~ + +### Параметры {#parameters} + +Колбэк события `export` может принимать объект со следующими параметрами: + +- `format` - формат файла +- `url` - базовый URL для экспорта файла +- `download` - позволяет пользователю указать, нужно ли скачать файл после получения ответа от сервера. Если свойство установлено в `false`, файл не будет скачан, однако пользователь сможет получить данные в формате blob из объекта события (см. свойство `result` в определении события) +- `fileName` - имя экспортируемого файла + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-15} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "export" +editor.api.on("export", (obj) => { + console.log(obj); + console.log("The file was exported"); +}); +// экспорт значения в файл 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/hide-suggest.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/hide-suggest.md new file mode 100644 index 0000000..666aaf5 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/hide-suggest.md @@ -0,0 +1,51 @@ +--- +sidebar_label: hide-suggest +title: hide-suggest Event +description: Вы можете узнать о событии hide-suggest в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# hide-suggest + +### Описание {#description} + +@short: Срабатывает при закрытии выпадающего списка подсказок + +Событие срабатывает в любом из следующих случаев: + +- пользователь выбирает элемент из выпадающего списка +- пользователь нажимает `Escape` +- курсор выходит из контекста триггера (например, при нажатии `Backspace` до символа триггера) +- текущий запрос не возвращает совпадений + +### Использование {#usage} + +~~~jsx {} +"hide-suggest": () => boolean | void; +~~~ + +### Параметры {#parameters} + +Калбэк события `hide-suggest` не принимает никаких параметров. + +:::info[Информация] +Для обработки внутренних событий используйте [**методы Event Bus**](api/overview/event_bus_methods_overview.md). +::: + +### Пример {#example} + +~~~jsx {5-7} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "hide-suggest" +editor.api.on("hide-suggest", () => { + console.log("Suggestion dropdown closed"); +}); +~~~ + +**Журнал изменений:** Событие добавлено в v2.1 + +**Связанный пример:** [RichText. Упоминания, теги и асинхронный поиск](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +**Связанные статьи:** [Упоминания и теги](guides/mentions_and_tags.md) 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..801a867 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/import.md @@ -0,0 +1,47 @@ +--- +sidebar_label: import +title: Событие import +description: Вы можете узнать о событии import в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами разработчика и справочником АПИ, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# import + +### Описание {#description} + +@short: Срабатывает после нажатия опции «Import» в строке меню или через методы Event Bus + +### Использование {#usage} + +~~~jsx {} +"import": ({ html?: string }) => boolean | void; +~~~ + +### Параметры {#parameters} + +Колбэк события `import` может принимать объект со следующим параметром: + +- `html` - текстовое значение в формате html + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-13} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "import" +editor.api.on("import", (obj) => { + console.log(obj.html); + console.log("The new value was imported"); +}); +// импорт нового значения +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..a347c1b --- /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. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# indent + +### Описание {#description} + +@short: Срабатывает при увеличении отступа блока + +### Использование {#usage} + +~~~jsx {} +"indent": ({ step: number }) => boolean | void; +~~~ + +### Параметры {#parameters} + +Колбэк события `indent` может принимать объект со следующими параметрами: + +- `step` - шаг, на который был увеличен отступ + +:::info[Информация] +Для обработки внутренних событий вы можете использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "indent" +editor.api.on("indent", (obj) => { + console.log(obj); + console.log("The indention was increased"); +}); +~~~ + +**Журнал изменений:** Событие добавлено в v2.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..65c009f --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-image.md @@ -0,0 +1,54 @@ +--- +sidebar_label: insert-image +title: События insert-image +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о событии insert-image. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# insert-image + +### Описание {#description} + +@short: Срабатывает при вставке изображения (через панель инструментов, строку меню, вставку из буфера обмена или перетаскивание) + +### Использование {#usage} + +~~~jsx {} +"insert-image": (IImageContext) => boolean | void; + +interface IImageContext { + id: TID; + value: string; // источник изображения: URL сервера, если задан imageUploadUrl, или base64 data URL, если изображение встроено + width: number; + height: number; + // дополнительные свойства из контекста загрузчика, не обязательные для выполнения действия + name?: string; + file?: File; + status?: string; + selected: (ctx: IImageContext) => void; + uploaded: (ctx: IImageContext) => void; +} +~~~ + +:::note[Примечание] +Поле `value` содержит либо внешний URL (если настроен [`imageUploadUrl`](api/config/image-upload-url.md) и загрузка прошла успешно), либо base64 data URL (если `imageUploadUrl` не задан и изображение встраивается на стороне клиента). Обработчики, работающие с источником — например, для перезаписи URL или проверки хоста — должны учитывать оба формата. +::: + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "insert-image" +editor.api.on("insert-image", (obj) => { + console.log(obj); + console.log("The image was inserted"); +}); +~~~ + +**Журнал изменений:** Событие добавлено в 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..a12bb89 --- /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: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о событии insert-line. Изучайте руководства для разработчиков и справочник АПИ, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# insert-line + +### Описание {#description} + +@short: Срабатывает при вставке горизонтальной линии + +### Использование {#usage} + +~~~jsx {} +"insert-line": () => boolean | void; +~~~ + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "insert-line" +editor.api.on("insert-line", () => { + console.log("The horizontal line was inserted"); +}); +~~~ + +**Журнал изменений:** Событие добавлено в 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..e130b61 --- /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. Просматривайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# insert-link + +### Описание {#description} + +@short: Срабатывает при вставке ссылки + +### Использование {#usage} + +~~~jsx {} +"insert-link": ({ url: string }) => boolean | void; +~~~ + +### Параметры {#parameters} + +Колбэк события `insert-link` может принимать объект со следующим параметром: + +- `url` - вставляемый URL + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "insert-link" +editor.api.on("insert-link", (obj) => { + console.log(obj) + console.log("The following link was inserted: " + 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..a3eccd9 --- /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: В документации DHTMLX JavaScript RichText вы можете узнать о событии insert-list. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# insert-list + +### Описание {#description} + +@short: Срабатывает при вставке списка + +### Использование {#usage} + +~~~jsx {} +"insert-list": ({ type: TListType }) => boolean | void; + +type TListType = "bulleted" | "numbered"; +~~~ + +### Параметры {#parameters} + +Калбэк события `insert-list` может принимать объект со следующим параметром: + +- `type` - тип вставляемого списка. Возможные значения: + - `"bulleted"` - маркированный список + - `"numbered"` - нумерованный список + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "insert-list" +editor.api.on("insert-list", (obj) => { + console.log(obj.type); + console.log("The list was inserted"); +}); +~~~ + +**История изменений:** Событие добавлено в v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-token.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-token.md new file mode 100644 index 0000000..e4a29ea --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-token.md @@ -0,0 +1,61 @@ +--- +sidebar_label: insert-token +title: insert-token Событие +description: Вы можете узнать о событии insert-token в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# insert-token + +### Описание {#description} + +@short: Срабатывает после того, как пользователь выбирает элемент из списка подсказок, и RichText вставляет его как токен + +Событие `insert-token` срабатывает после того, как пользователь выбирает элемент из выпадающего списка триггера (упоминания, теги или любой пользовательский триггер, настроенный через свойство [`triggers`](api/config/triggers.md)). + +### Использование {#usage} + +~~~jsx {} +"insert-token": ({ + data: { + id?: string | number, + label?: string, + url?: string, + // ...любые пользовательские поля из источника данных триггера + }, + trigger: string, + showTrigger?: boolean, + action?: (item) => void +}) => boolean | void; +~~~ + +### Параметры {#parameters} + +Калбэк события `insert-token` получает объект со следующими полями: + +- `data` — выбранный элемент подсказки. Содержит поля `id`, `label` и `url` элемента, а также любые пользовательские поля, добавленные в источник `data` триггера +- `trigger` — символ триггера, открывший выпадающий список (например, `"@"` или `"#"`) +- `showTrigger` — если `false`, RichText вставляет только `label`; в противном случае виджет также отображает символ триггера (по умолчанию) +- `action` — пользовательское действие, определённое для соответствующего [триггера](api/config/triggers.md). Если задано, этот параметр имеет приоритет над вставкой токена: RichText удаляет введённый текст (символ триггера и запрос) и вызывает `action(data)` вместо вставки токена. Параметр `showTrigger` в этом случае не имеет эффекта + +:::info[Информация] +Для обработки внутренних событий используйте [**методы Event Bus**](api/overview/event_bus_methods_overview.md). +::: + +### Пример {#example} + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "insert-token" +editor.api.on("insert-token", ({ data, trigger, showTrigger }) => { + console.log(`Inserted ${trigger}${data.label} (id: ${data.id})`); +}); +~~~ + +**История изменений:** Событие добавлено в v2.1 + +**Связанный пример:** [RichText. Упоминания, теги и асинхронный поиск](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +**Связанные статьи:** [Упоминания и теги](guides/mentions_and_tags.md) 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..edd5915 --- /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. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# outdent + +### Описание {#description} + +@short: Срабатывает при уменьшении отступа блока + +### Использование {#usage} + +~~~jsx {} +"outdent": ({ step: number }) => boolean | void; +~~~ + +### Параметры {#parameters} + +Колбэк события `outdent` может принимать объект со следующим параметром: + +- `step` - шаг, на который был уменьшен отступ + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "outdent" +editor.api.on("outdent", (obj) => { + console.log(obj); + console.log("The indention was decreased"); +}); +~~~ + +**Журнал изменений:** Событие добавлено в 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..b7594e2 --- /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. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# paste + +### Описание {#description} + +@short: Срабатывает при вставке содержимого + +### Использование {#usage} + +~~~jsx {} +"paste": () => boolean | void; +~~~ + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "paste" +editor.api.on("paste", () => { + console.log("Content was pasted"); +}); +~~~ + +**Журнал изменений:** Событие добавлено в 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..f5a2cd3 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/print.md @@ -0,0 +1,36 @@ +--- +sidebar_label: print +title: Событие print +description: В документации DHTMLX JavaScript RichText вы можете узнать о событии print. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# print + +### Описание {#description} + +@short: Срабатывает при печати документа + +### Использование {#usage} + +~~~jsx {} +"print": () => boolean | void; +~~~ + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { +// свойства конфигурации +}); +// подписка на событие "print" +editor.api.on("print", () => { + console.log("The document is printing"); +}); +~~~ + +**История изменений:** Событие добавлено в 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..822f89b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/redo.md @@ -0,0 +1,36 @@ +--- +sidebar_label: redo +title: Событие redo +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о событии redo. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# redo + +### Описание {#description} + +@short: Срабатывает при нажатии кнопки "Redo" в строке меню/панели инструментов или через методы Event Bus + +### Использование {#usage} + +~~~jsx {} +"redo": () => boolean | void; +~~~ + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "redo" +editor.api.on("redo", () => { + console.log("Redo operation was performed"); +}); +~~~ + +**История изменений:** Событие добавлено в v2.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..c618ca5 --- /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 Event +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о событии resize-image. Изучите руководства разработчика и справочник АПИ, просмотрите примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# resize-image + +### Описание {#description} + +@short: Срабатывает при изменении размера изображения + +### Использование {#usage} + +~~~jsx {} +"resize-image": ({ id: number, width: number, height: number }) => boolean | void; +~~~ + +### Параметры {#parameters} + +Калбэк события `resize-image` может принимать объект со следующими параметрами: + +- `id` - идентификатор изображения +- `width` - ширина изображения +- `height` - высота изображения + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { +// свойства конфигурации +}); +// подписка на событие "resize-image" +editor.api.on("resize-image", (obj) => { + console.log(obj); + console.log("The image was resized") +}); +~~~ + +**Журнал изменений:** Событие добавлено в 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..3e7ab87 --- /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. Изучайте руководства для разработчиков и справочник АПИ, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# set-font-family + +### Описание {#description} + +@short: Срабатывает при установке семейства шрифтов + +### Использование {#usage} + +~~~jsx {} +"set-font-family": ({ fontFamily: string }) => boolean | void; +~~~ + +### Параметры {#parameters} + +Колбэк события `set-font-family` может принимать объект со следующим параметром: + +- `fontFamily` - семейство шрифтов для применения. Доступны следующие шрифты: `"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"` + +:::info[Информация] +Для обработки внутренних событий используйте [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~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("The font family was changed"); +}); +// применение нового семейства шрифтов +editor.api.exec("set-font-family", { + fontFamily: "Roboto" +}); +~~~ + +**Журнал изменений:** Событие добавлено в v2.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..414b3c6 --- /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. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# set-font-size + +### Описание {#description} + +@short: Срабатывает при установке размера шрифта + +### Использование {#usage} + +~~~jsx {} +"set-font-size": ({ fontSize: string }) => boolean | void; +~~~ + +### Параметры {#parameters} + +Калбэк события `set-font-size` может принимать объект со следующим параметром: + +- `fontSize` - размер шрифта, который будет применён + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~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("The font size was changed"); +}); +// применение нового размера шрифта +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..ec7cf07 --- /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 Event +description: Вы можете узнать о событии set-line-height в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# set-line-height + +### Описание {#description} + +@short: Срабатывает при установке межстрочного интервала + +### Использование {#usage} + +~~~jsx {} +"set-line-height": ({ lineHeight: string }) => boolean | void; +~~~ + +### Параметры {#parameters} + +Коллбэк события `set-line-height` может принимать объект со следующим параметром: + +- `lineHeight` - межстрочный интервал + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~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("The line height was changed"); +}); +// применить новый межстрочный интервал +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..7e4ac60 --- /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 Event +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о событии set-text-color. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# set-text-color + +### Описание {#description} + +@short: Срабатывает при установке цвета текста и/или цвета фона текста + +### Использование {#usage} + +~~~jsx {} +"set-text-color": (ITextColor) => boolean | void; + +interface ITextColor { + color?: string; + background?: string; +} +~~~ + +### Параметры {#parameters} + +Колбэк события `set-text-color` может принимать объект со следующими параметрами: + +- `color` - цвет текста +- `background` - цвет фона текста + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~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("The text color and/or background text color were changed"); +}); +// применение цвета текста и фона +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..263b989 --- /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. Ознакомьтесь с руководствами разработчика и справочником АПИ, изучите примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# set-text-format + +### Описание {#description} + +@short: Срабатывает при установке формата текста + +### Использование {#usage} + +~~~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) +::: + +### Параметры {#parameters} + +Колбэк события `set-text-format` может принимать объект со следующими параметрами: + +- `bold` — формат жирного текста +- `italic` — формат курсивного текста +- `strike` — формат зачёркнутого текста +- `underline` — формат подчёркнутого текста + +### Пример {#example} + +~~~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("The text format was changed"); +}); +// применение форматов "italic" и bold +editor.api.exec("set-text-format", { + italic: true, + bold: true +}); +~~~ + +**Журнал изменений:** Событие добавлено в v2.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..9123f6a --- /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. Ознакомьтесь с руководствами разработчика и справочником АПИ, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# set-text-style + +### Описание {#description} + +@short: Срабатывает при установке стиля текста + +### Использование {#usage} + +~~~jsx {} +"set-text-style": ({ tag: TBlockType }) => boolean | void; + +type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; +~~~ + +### Параметры {#parameters} + +Колбэк события `set-text-style` может принимать объект со следующими параметрами: + +- `tag` - стиль текста + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~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("The text style was changed"); +}); +// применение нового стиля текста +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..3578d98 --- /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: В документации DHTMLX JavaScript RichText вы можете узнать о событии show-popup. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# show-popup + +### Описание {#description} + +@short: Срабатывает при показе или скрытии всплывающего окна + +### Использование {#usage} + +~~~jsx {} +"show-popup": (IPopupConfig) => boolean | void; + +interface IPopupConfig { + type: "link" | null; + image?: boolean; +} +~~~ + +### Параметры {#parameters} + +Калбэк события `show-popup` может принимать объект со следующими параметрами: + +- `type` - тип всплывающего окна +- `image` - предоставляет доступ к дополнительному контексту (указывает ли курсор на изображение или нет) + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы шины событий**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-13} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // параметры конфигурации +}); +// подписка на событие "show-popup" +editor.api.on("show-popup", (obj) => { + console.log(obj); + console.log("The popup was shown/hidden"); +}); +// показать всплывающее окно для ссылки +editor.api.exec("show-popup", { + type: "link" +}); +~~~ + +**История изменений:** Событие добавлено в v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/show-suggest.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/show-suggest.md new file mode 100644 index 0000000..fd1756f --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/show-suggest.md @@ -0,0 +1,64 @@ +--- +sidebar_label: show-suggest +title: Событие show-suggest +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о событии show-suggest. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# show-suggest + +### Описание {#description} + +@short: Срабатывает при открытии выпадающего списка подсказок для настроенного триггера + +Событие `show-suggest` срабатывает после того, как RichText формирует непустой список элементов для текущего триггера, непосредственно перед открытием выпадающего списка. Перехватите событие, чтобы скорректировать элементы, переместить выпадающий список или отменить его отображение. + +### Использование {#usage} + +~~~jsx {} +"show-suggest": ({ + trigger: string, + query: string, + items: Array<{ + id?: string | number, + label?: string, + url?: string, + // ...любые пользовательские поля из источника данных триггера + }>, + pos: DOMRect +}) => boolean | void; +~~~ + +### Параметры {#parameters} + +Колбэк события `show-suggest` получает объект со следующими полями: + +- `trigger` - символ триггера, открывший выпадающий список +- `query` - текст, введённый после символа триггера (используется для фильтрации `items`) +- `items` - сформированный (и уже отфильтрованный) список элементов подсказок. Каждый элемент соответствует [форме элемента подсказки](api/config/triggers.md#suggestion-item-fields): необязательные поля `id`, `label` и `url`, а также любые пользовательские поля (например, `image` или `name`), используемые [`triggerTemplate`](api/config/trigger-template.md) +- `pos` - объект `DOMRect`, описывающий положение курсора; используется для размещения выпадающего списка на экране + +:::info[Информация] +Для обработки внутренних событий используйте [**методы Event Bus**](api/overview/event_bus_methods_overview.md). +::: + +### Пример {#example} + +~~~jsx {6-11} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + triggers: [{ trigger: "@", data: people }] + // другие свойства конфигурации +}); +// переопределение списка подсказок перед открытием выпадающего списка +editor.api.intercept("show-suggest", (state) => { + if (state.trigger === "@" && state.query === "") { + return { ...state, items: state.items.slice(0, 5) }; + } +}); +~~~ + +**Журнал изменений:** Событие добавлено в v2.1 + +**Связанный пример:** [RichText. Упоминания, теги и асинхронный поиск](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +**Связанные статьи:** [Упоминания и теги](guides/mentions_and_tags.md) 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..dbf3923 --- /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. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# subscript + +### Описание {#description} + +@short: Вызывается при нажатии кнопки «Subscript» в строке меню/панели инструментов или через методы Event Bus + +### Использование {#usage} + +~~~jsx {} +"subscript": () => boolean | void; +~~~ + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-10} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "subscript" +editor.api.on("subscript", () => { + console.log("Subscript was applied"); +}); +// вызов события "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..0bfeb84 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/superscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: superscript +title: Событие superscript +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о событии superscript. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# superscript + +### Описание {#description} + +@short: Срабатывает при нажатии кнопки «Надстрочный» в строке меню/панели инструментов или через методы Event Bus + +### Использование {#usage} + +~~~jsx {} +"superscript": () => boolean | void; +~~~ + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "superscript" +editor.api.on("superscript", () => { + console.log("Superscript was applied"); +}); +// вызов события "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..10e1af0 --- /dev/null +++ b/i18n/ru/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: Вы можете узнать о событии toggle-fullscreen-mode в документации библиотеки DHTMLX JavaScript RichText. Изучите руководства разработчика и справочник АПИ, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# toggle-fullscreen-mode + +### Описание {#description} + +@short: Срабатывает при переключении полноэкранного режима + +### Использование {#usage} + +~~~jsx {} +"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void; +~~~ + +### Параметры {#parameters} + +Колбэк события `toggle-fullscreen-mode` может принимать объект со следующим параметром: + +- `mode` - включает полноэкранный режим + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~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("The full screen mode was changed"); +}); +// включение полноэкранного режима +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..09645c1 --- /dev/null +++ b/i18n/ru/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. Руководства разработчика и справочник по АПИ, примеры кода и живые демо, а также бесплатная 30-дневная ознакомительная версия DHTMLX RichText. +--- + +# toggle-layout-mode + +### Описание {#description} + +@short: Срабатывает при переключении режима разметки + +### Использование {#usage} + +~~~jsx {} +"toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void; +~~~ + +### Параметры {#parameters} + +Колбэк события `toggle-layout-mode` может принимать объект со следующими параметрами: + +- `mode` - режим разметки. Доступны следующие режимы: `"classic" | "document"` + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~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("The layout mode was changed"); +}); +// установка режима разметки "document" +editor.api.exec("toggle-layout-mode", { mode: "document" }); +~~~ + +**История изменений:** Событие добавлено в v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-list.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-list.md new file mode 100644 index 0000000..61004f3 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-list.md @@ -0,0 +1,56 @@ +--- +sidebar_label: toggle-list +title: Событие toggle-list +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о событии toggle-list. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# toggle-list + +### Описание {#description} + +@short: Срабатывает, когда пользователь переключает список на выбранных блоках + +Событие `toggle-list` обеспечивает работу контекстно-зависимых кнопок маркированного/нумерованного списка. Вместо того чтобы вставлять новый список, событие анализирует текущее выделение и автоматически выбирает одно из четырёх поведений: + +| Режим | Когда срабатывает | Результат | +| --------------- | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | +| **Wrap** | Выделение охватывает только параграфы | Каждый параграф становится элементом списка внутри одного нового контейнера списка | +| **Unwrap** | Каждый охваченный элемент находится в списке выбранного типа | Элементы возвращаются в параграфы; контейнер списка удаляется | +| **Convert** | Каждый охваченный элемент находится в списке, но хотя бы один из них относится к другому типу | Список меняет свой тип (маркированный ↔ нумерованный) на месте | +| **Mixed** | Выделение смешивает параграфы и элементы списка | Параграфы становятся элементами, и всё объединяется в один список выбранного типа | + +### Использование {#usage} + +~~~jsx {} +"toggle-list": ({ type: TListType }) => boolean | void; + +type TListType = "bulleted" | "numbered"; +~~~ + +### Параметры {#parameters} + +Колбэк события `toggle-list` может принимать объект со следующим параметром: + +- `type` - тип списка для переключения. Допустимые значения: + - `"bulleted"` - маркированный (неупорядоченный) список + - `"numbered"` - нумерованный (упорядоченный) список + +:::info[Информация] +Для обработки внутренних событий используйте [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "toggle-list" +editor.api.on("toggle-list", (obj) => { + console.log(obj.type); + console.log("The list was toggled"); +}); +~~~ + +**Журнал изменений:** Событие добавлено в v2.0.6 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..10ee220 --- /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. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# toggle-shortcut-info + +### Описание {#description} + +@short: Срабатывает при переключении информации о горячих клавишах + +### Использование {#usage} + +~~~jsx {} +"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void; +~~~ + +### Параметры {#parameters} + +Колбэк события `toggle-shortcut-info` может принимать объект со следующим параметром: + +- `mode` - включает информацию о горячих клавишах; `true` — показать всплывающее окно с горячими клавишами, `false` — скрыть его + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~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("The shortcut info was shown"); +}); +// включить информацию о горячих клавишах +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..e4fd16e --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/undo.md @@ -0,0 +1,36 @@ +--- +sidebar_label: undo +title: Событие undo +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о событии undo. Изучайте руководства для разработчиков и справочник АПИ, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# undo + +### Описание {#description} + +@short: Срабатывает при нажатии кнопки «Отменить» в строке меню/панели инструментов или через методы Event Bus + +### Использование {#usage} + +~~~jsx {} +"undo": () => boolean | void; +~~~ + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "undo" +editor.api.on("undo", () => { + console.log("Undo operation was performed"); +}); +~~~ + +**Журнал изменений:** Событие добавлено в 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..5cb6674 --- /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 Event +description: Вы можете узнать о событии update-link в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# update-link + +### Описание {#description} + +@short: Срабатывает при обновлении ссылки + +### Использование {#usage} + +~~~jsx {} +"update-link": ({ id: number, url: string }) => boolean | void; +~~~ + +### Параметры {#parameters} + +Колбэк события `update-link` может принимать объект со следующими параметрами: + +- `id` - идентификатор ссылки +- `url` - изменённый url + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "update-link" +editor.api.on("update-link", (obj) => { + console.log(obj); + console.log("The following link was updated:" + 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..0443569 --- /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: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о методе on. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# api.detach() + +### Описание {#description} + +@short: Позволяет удалять/отсоединять обработчики событий + +### Использование {#usage} + +~~~jsx {} +api.detach( tag: string ): void; +~~~ + +### Параметры {#parameters} + +- `tag` - (обязательный) имя тега действия + +### События {#events} + +:::info[Информация] +Полный список внутренних событий RichText можно найти [**здесь**](api/overview/events_overview.md) +::: + +### Пример {#example} + +~~~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/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..a5681f3 --- /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: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о методе exec. Просматривайте руководства разработчика и справочник по АПИ, изучайте примеры кода и живые демо, а также скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# api.exec() + +### Описание {#description} + +@short: Позволяет инициировать внутренние события + +### Использование {#usage} + +~~~jsx {} +api.exec( + event: string, + config: object +): void; +~~~ + +### Параметры {#parameters} + +- `event` - (обязательный) событие, которое необходимо вызвать +- `config` - (обязательный) объект конфигурации с параметрами (см. вызываемое событие) + +### События {#events} + +:::info[Информация] +Полный список внутренних событий RichText можно найти [**здесь**](api/overview/events_overview.md) +::: + +### Пример {#example} + +~~~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..b386c9c --- /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: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о методе getReactiveState. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# api.getReactiveState() + +### Описание {#description} + +@short: Возвращает объект с реактивными свойствами RichText + +### Использование {#usage} + +~~~jsx {} +api.getReactiveState(): object; +~~~ + +### Возвращает {#returns} + +Метод возвращает объект со следующими параметрами: + +~~~jsx {} +{ + cursorState: { subscribe: any }, + defaultStyles {...}, + document {...}, + fullscreen {...}, + history {...}, + layoutMode {...}, + popup {...}, + selection {...} +} +~~~ + +### Пример {#example} + +~~~jsx {5-7} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // параметры конфигурации +}); +// получение реактивного состояния RichText +const reactive_state = editor.api.getReactiveState(); +console.log(reactive_state) +~~~ + +**История изменений:** Метод добавлен в v2.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..b3cc3e2 --- /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. Изучите руководства разработчика и справочник АПИ, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# api.getState() + +### Описание {#description} + +@short: Возвращает объект со свойствами StateStore компонента RichText + +### Использование {#usage} + +~~~jsx {} +api.getState(): object; +~~~ + +### Возвращает {#returns} + +Метод возвращает объект со следующими параметрами: + +~~~jsx {} +{ + cursorState: {}, + defaultStyles: {}, + document: {}, + fullscreen: boolean, + history: [] + layoutMode: string, + popup: any, + selection: {} +} +~~~ + +### Пример {#example} + +~~~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..28f1824 --- /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: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о методе intercept. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# api.intercept() + +### Описание {#description} + +@short: Позволяет перехватывать и отменять внутренние события + +### Использование {#usage} + +~~~jsx {} +api.intercept( + event: string, + callback: function +): void; +~~~ + +### Параметры {#parameters} + +- `event` - (обязательный) событие, которое будет вызвано +- `callback` - (обязательный) калбэк для выполнения (аргументы калбэка зависят от вызываемого события) + +### События {#events} + +:::info[Информация] +Полный список внутренних событий RichText можно найти [**здесь**](api/overview/events_overview.md) +::: + +### Пример {#example} + +~~~jsx {5-10} +// создать RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// запретить изменение размера шрифта +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..1173474 --- /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. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# api.on() + +### Описание {#description} + +@short: Позволяет прикрепить обработчик к внутренним событиям + +### Использование {#usage} + +~~~jsx {} +api.on( + event: string, + handler: function +): void; +~~~ + +### Параметры {#parameters} + +- `event` - (обязательный) событие, которое нужно отслеживать +- `handler` - (обязательный) обработчик для прикрепления (аргументы обработчика зависят от отслеживаемого события) + +### События {#events} + +:::info[Информация] +Полный список внутренних событий RichText можно найти [**здесь**](api/overview/events_overview.md) +::: + +### Пример {#example} + +~~~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..4720cea --- /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: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о методе setNext. Изучайте руководства для разработчиков и справочник АПИ, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# api.setNext() + +### Описание {#description} + +@short: Позволяет добавить действие в порядок обработки Event Bus + +### Использование {#usage} + +~~~jsx {} +api.setNext(next: any): void; +~~~ + +### Параметры {#parameters} + +- `next` - (обязательный) действие, которое нужно включить в порядок обработки **Event Bus** + +### Пример {#example} + +~~~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..5b5e10f --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/destructor.md @@ -0,0 +1,28 @@ +--- +sidebar_label: destructor() +title: Метод destructor +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о методе destructor. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# destructor() + +### Описание {#description} + +@short: Удаляет все HTML-элементы RichText и отключает все связанные события + +### Использование {#usage} + +~~~jsx {} +destructor(): void; +~~~ + +### Пример {#example} + +~~~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..88e72a1 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/get-value.md @@ -0,0 +1,44 @@ +--- +sidebar_label: getValue() +title: Метод getValue +description: В документации библиотеки DHTMLX JavaScript RichText вы можете ознакомиться с методом getValue. Изучите руководства разработчика и справочник АПИ, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# getValue() + +### Описание {#description} + +@short: Возвращает значение RichText + +### Использование {#usage} + +~~~jsx {} +getValue(encoder?: any): string; +~~~ + +### Параметры {#parameters} + +- `encoder` - (необязательный) парсер для кодирования содержимого RichText в произвольный формат. Доступны следующие форматы: `html` (по умолчанию), `text` и `markdown` + +Получить нужный энкодер можно следующим образом: + +```jsx +const toTextEncoder = richtext.text.toText; // текстовый энкодер +const toHTMLEncoder = richtext.html.toHTML; // HTML-энкодер +const toMarkdownEncoder = richtext.markdown.toMarkdown; // Markdown-энкодер +``` + +### Пример {#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." // задаёт значение по умолчанию (формат HTML) + // другие свойства конфигурации +}); + +const toTextEncoder = richtext.text.toText; +const editor_value = editor.getValue(toTextEncoder); +console.log(editor_value); +~~~ + +**Журнал изменений:** Метод был обновлён в v2.0. Параметр `mode` был удалён. Добавлен параметр `encoder` diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/insert-value.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/insert-value.md new file mode 100644 index 0000000..bae4c76 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/insert-value.md @@ -0,0 +1,50 @@ +--- +sidebar_label: insertValue() +title: Метод insertValue +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о методе insertValue. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# insertValue() + +### Описание {#description} + +@short: Вставляет текст, Markdown или HTML-контент в текущую позицию курсора или заменяет выделенный текст + +### Использование {#usage} + +~~~jsx {} +insertValue: (value: string, encoder?: any): void; +~~~ + +### Параметры {#parameters} + +- `value` - (обязательный) значение, которое будет вставлено в RichText в текущей позиции курсора. Если активно выделение, оно заменяется новым значением +- `encoder` - (необязательный) парсер для декодирования вставляемого значения. Доступны следующие форматы: `html` (по умолчанию), `text` и `markdown` + +Получить нужный энкодер можно следующим образом: + +```jsx +const fromTextEncoder = richtext.text.fromText; // текстовый энкодер +const fromHTMLEncoder = richtext.html.fromHTML; // HTML-энкодер +const fromMarkdownEncoder = richtext.markdown.fromMarkdown; // Markdown-энкодер +``` + +### Пример {#example} + +~~~jsx {6} +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); + +// вставляет HTML-ссылку с пользовательскими атрибутами в позицию курсора +editor.insertValue("link"); +~~~ + +Вставленное содержимое добавляется как единая запись в историю и может быть отменено одним шагом **Undo**. + +**Журнал изменений:** Метод добавлен в v2.1 + +**Связанные примеры:** + +- [RichText. Вставка контента в позицию курсора](https://snippet.dhtmlx.com/pew2g1ku?tag=richtext) +- [RichText. Работа с различными форматами (Markdown, HTML, text)](https://snippet.dhtmlx.com/cne4kujn?tag=richtext) 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..bf33f98 --- /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: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о методе setConfig. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# setConfig() + +### Описание {#description} + +@short: Применяет новые параметры конфигурации к RichText + +### Использование {#usage} + +~~~jsx {} +setConfig(config: { [key:any]: any }): void; +~~~ + +### Параметры {#parameters} + +- `config` - (обязательный) объект параметров конфигурации RichText. Полный список свойств см. [здесь](api/overview/properties_overview.md) + +:::note[Примечание] +Метод `setConfig()` сохраняет все ранее заданные параметры, которые не были явно переданы в вызове `setConfig()`. +::: + +### Пример {#example} + +~~~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..fec8604 --- /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. Изучите руководства для разработчиков и справочник АПИ, ознакомьтесь с примерами кода и живыми демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# setLocale() + +### Описание {#description} + +@short: Применяет новую локаль к RichText + +### Использование {#usage} + +~~~jsx {} +setLocale(null | locale?: object): void; +~~~ + +### Параметры {#parameters} + +- `null` - (опционально) сбрасывает локаль до стандартной (*английской*) +- `locale` - (опционально) объект с данными новой применяемой локали + +:::info[Информация] +Используйте метод `setLocale()` для применения новой локали к RichText. Чтобы сбросить RichText до стандартной локали, вызовите метод `setLocale()` без аргументов (или со значением *null*). +::: + +### Пример {#example} + +~~~jsx {5-6} +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); + +// применить локаль "de" к RichText +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..88dbb93 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-value.md @@ -0,0 +1,47 @@ +--- +sidebar_label: setValue() +title: Метод setValue +description: Вы можете узнать о методе setValue в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# setValue() + +### Описание {#description} + +@short: Применяет новое значение к RichText + +### Использование {#usage} + +~~~jsx {} +setValue: (value: string, encoder?: any): void; +~~~ + +### Параметры {#parameters} + +- `value` - (обязательный) значение, которое будет вставлено в RichText +- `encoder` - (необязательный) пользовательский парсер для декодирования значения из нестандартного формата. Доступны следующие форматы: `html` (по умолчанию), `text` и `markdown` + +Получить нужный энкодер можно следующим способом: + +```jsx +const fromTextEncoder = richtext.text.fromText; // текстовый энкодер +const fromHTMLEncoder = richtext.html.fromHTML; // HTML-энкодер +const fromMarkdownEncoder = richtext.markdown.fromMarkdown; // Markdown-энкодер +``` + +### Пример {#example} + +~~~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` + +**Связанный пример:** [RichText. Работа с различными форматами (Markdown, HTML, text)](https://snippet.dhtmlx.com/cne4kujn?tag=richtext) 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..7dba173 --- /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. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Методы Event Bus {#event-bus-methods} + +На этой странице представлен список методов, относящихся к внутреннему Event Bus, используемому редактором DHTMLX RichText. +Эти методы предназначены для продвинутых интеграций и реализации пользовательского поведения на основе внутренней системы событий. + +| Название | Описание | +| ------------------------------------------------- | -------------------------------------------- | +| [](api/internal/detach.md) | @getshort(api/internal/detach.md) | +| [](api/internal/exec.md) | @getshort(api/internal/exec.md) | +| [](api/internal/intercept.md) | @getshort(api/internal/intercept.md) | +| [](api/internal/on.md) | @getshort(api/internal/on.md) | +| [](api/internal/set-next.md) | @getshort(api/internal/set-next.md) | diff --git a/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..7515746 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/events_overview.md @@ -0,0 +1,49 @@ +--- +sidebar_label: Обзор событий +title: Обзор событий +description: Обзор событий JavaScript RichText в документации библиотеки DHTMLX JavaScript RichText. Руководства разработчика и справочник АПИ, примеры кода и живые демо, бесплатная 30-дневная ознакомительная версия DHTMLX RichText. +--- + +# Обзор событий {#events-overview} + +На этой странице перечислены все события, генерируемые редактором DHTMLX RichText. +Вы можете использовать эти события для расширения функциональности, отслеживания действий пользователя или запуска пользовательского поведения. + +| Название | Описание | +| ------------------------------------------------------- | --------------------------------------------- | +| [](api/events/align.md) | @getshort(api/events/align.md) | +| [](api/events/clear-text-format.md) | @getshort(api/events/clear-text-format.md) | +| [](api/events/copy.md) | @getshort(api/events/copy.md) | +| [](api/events/create-new.md) | @getshort(api/events/create-new.md) | +| [](api/events/cut.md) | @getshort(api/events/cut.md) | +| [](api/events/delete-link.md) | @getshort(api/events/delete-link.md) | +| [](api/events/export.md) | @getshort(api/events/export.md) | +| [](api/events/hide-suggest.md) | @getshort(api/events/hide-suggest.md) | +| [](api/events/import.md) | @getshort(api/events/import.md) | +| [](api/events/indent.md) | @getshort(api/events/indent.md) | +| [](api/events/insert-image.md) | @getshort(api/events/insert-image.md) | +| [](api/events/insert-line.md) | @getshort(api/events/insert-line.md) | +| [](api/events/insert-link.md) | @getshort(api/events/insert-link.md) | +| [](api/events/insert-list.md) | @getshort(api/events/insert-list.md) | +| [](api/events/insert-token.md) | @getshort(api/events/insert-token.md) | +| [](api/events/outdent.md) | @getshort(api/events/outdent.md) | +| [](api/events/paste.md) | @getshort(api/events/paste.md) | +| [](api/events/print.md) | @getshort(api/events/print.md) | +| [](api/events/redo.md) | @getshort(api/events/redo.md) | +| [](api/events/resize-image.md) | @getshort(api/events/resize-image.md) | +| [](api/events/set-font-family.md) | @getshort(api/events/set-font-family.md) | +| [](api/events/set-font-size.md) | @getshort(api/events/set-font-size.md) | +| [](api/events/set-line-height.md) | @getshort(api/events/set-line-height.md) | +| [](api/events/set-text-color.md) | @getshort(api/events/set-text-color.md) | +| [](api/events/set-text-format.md) | @getshort(api/events/set-text-format.md) | +| [](api/events/set-text-style.md) | @getshort(api/events/set-text-style.md) | +| [](api/events/show-popup.md) | @getshort(api/events/show-popup.md) | +| [](api/events/show-suggest.md) | @getshort(api/events/show-suggest.md) | +| [](api/events/subscript.md) | @getshort(api/events/subscript.md) | +| [](api/events/superscript.md) | @getshort(api/events/superscript.md) | +| [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md)| +| [](api/events/toggle-layout-mode.md) | @getshort(api/events/toggle-layout-mode.md) | +| [](api/events/toggle-list.md) | @getshort(api/events/toggle-list.md) | +| [](api/events/toggle-shortcut-info.md) | @getshort(api/events/toggle-shortcut-info.md) | +| [](api/events/undo.md) | @getshort(api/events/undo.md) | +| [](api/events/update-link.md) | @getshort(api/events/update-link.md) | diff --git a/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..8003bfb --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/main_overview.md @@ -0,0 +1,98 @@ +--- +sidebar_label: Обзор АПИ +title: Обзор АПИ +description: Обзор АПИ JavaScript RichText представлен в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Обзор АПИ {#api-overview} + +## Конструктор RichText {#richtextconstructor} + +~~~js +new richtext.RichText("#root", { + // параметры конфигурации +}); +~~~ + +**Параметры**: + +- HTML-контейнер (например, CSS-селектор или DOM-элемент) +- объект конфигурации ([см. свойства](api/overview/properties_overview.md)) + +## Методы RichText {#richtextmethods} + +| Название | Описание | +| ----------------------------------------------|-------------------------------------------| +| [](api/methods/get-value.md) | @getshort(api/methods/get-value.md) | +| [](api/methods/set-value.md) | @getshort(api/methods/set-value.md) | +| [](api/methods/insert-value.md) | @getshort(api/methods/insert-value.md) | +| [](api/methods/set-config.md) | @getshort(api/methods/set-config.md) | +| [](api/methods/set-locale.md) | @getshort(api/methods/set-locale.md) | +| [](api/methods/destructor.md) | @getshort(api/methods/destructor.md) | + +## Методы Event Bus {#event-bus-methods} + +| Название | Описание | +| ----------------------------------------------|-------------------------------------------| +| [](api/internal/exec.md) | @getshort(api/internal/exec.md) | +| [](api/internal/intercept.md) | @getshort(api/internal/intercept.md) | +| [](api/internal/on.md) | @getshort(api/internal/on.md) | +| [](api/internal/detach.md) | @getshort(api/internal/detach.md) | +| [](api/internal/set-next.md) | @getshort(api/internal/set-next.md) | + +## Методы состояния {#state-methods} + +| Название | Описание | +| ----------------------------------------------|-------------------------------------------| +| [](api/internal/get-state.md) | @getshort(api/internal/get-state.md) | +| [](api/internal/get-reactive-state.md) | @getshort(api/internal/get-reactive-state.md) | + +## События {#events} + +| Название | Описание | +| ----------------------------------------------|-------------------------------------------| +| [](api/events/align.md) | @getshort(api/events/align.md) | +| [](api/events/clear-text-format.md) | @getshort(api/events/clear-text-format.md) | +| [](api/events/copy.md) | @getshort(api/events/copy.md) | +| [](api/events/create-new.md) | @getshort(api/events/create-new.md) | +| [](api/events/cut.md) | @getshort(api/events/cut.md) | +| [](api/events/delete-link.md) | @getshort(api/events/delete-link.md) | +| [](api/events/export.md) | @getshort(api/events/export.md) | +| [](api/events/import.md) | @getshort(api/events/import.md) | +| [](api/events/indent.md) | @getshort(api/events/indent.md) | +| [](api/events/insert-image.md) | @getshort(api/events/insert-image.md) | +| [](api/events/insert-line.md) | @getshort(api/events/insert-line.md) | +| [](api/events/insert-link.md) | @getshort(api/events/insert-link.md) | +| [](api/events/insert-list.md) | @getshort(api/events/insert-list.md) | +| [](api/events/outdent.md) | @getshort(api/events/outdent.md) | +| [](api/events/paste.md) | @getshort(api/events/paste.md) | +| [](api/events/print.md) | @getshort(api/events/print.md) | +| [](api/events/redo.md) | @getshort(api/events/redo.md) | +| [](api/events/resize-image.md) | @getshort(api/events/resize-image.md) | +| [](api/events/set-font-family.md) | @getshort(api/events/set-font-family.md) | +| [](api/events/set-font-size.md) | @getshort(api/events/set-font-size.md) | +| [](api/events/set-line-height.md) | @getshort(api/events/set-line-height.md) | +| [](api/events/set-text-color.md) | @getshort(api/events/set-text-color.md) | +| [](api/events/set-text-format.md) | @getshort(api/events/set-text-format.md) | +| [](api/events/set-text-style.md) | @getshort(api/events/set-text-style.md) | +| [](api/events/show-popup.md) | @getshort(api/events/show-popup.md) | +| [](api/events/subscript.md) | @getshort(api/events/subscript.md) | +| [](api/events/superscript.md) | @getshort(api/events/superscript.md) | +| [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md) | +| [](api/events/toggle-layout-mode.md) | @getshort(api/events/toggle-layout-mode.md) | +| [](api/events/toggle-shortcut-info.md) | @getshort(api/events/toggle-shortcut-info.md) | +| [](api/events/undo.md) | @getshort(api/events/undo.md) | +| [](api/events/update-link.md) | @getshort(api/events/update-link.md) | + +## Свойства {#properties} + +| Название | Описание | +| ----------------------------------------------|-------------------------------------------| +| [](api/config/default-styles.md) | @getshort(api/config/default-styles.md) | +| [](api/config/fullscreen-mode.md) | @getshort(api/config/fullscreen-mode.md) | +| [](api/config/image-upload-url.md) | @getshort(api/config/image-upload-url.md) | +| [](api/config/layout-mode.md) | @getshort(api/config/layout-mode.md) | +| [](api/config/locale.md) | @getshort(api/config/locale.md) | +| [](api/config/menubar.md) | @getshort(api/config/menubar.md) | +| [](api/config/toolbar.md) | @getshort(api/config/toolbar.md) | +| [](api/config/value.md) | @getshort(api/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..fa111aa --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md @@ -0,0 +1,19 @@ +--- +sidebar_label: Обзор методов +title: Обзор методов +description: В документации библиотеки DHTMLX JavaScript RichText доступен обзор методов редактора. Изучите руководства для разработчиков и справочник АПИ, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Обзор методов {#methods-overview} + +На этой странице представлена сводка основных методов редактора DHTMLX RichText. +Используйте этот справочник для быстрого перехода к подробному описанию каждого метода, ознакомления с его назначением и просмотра примеров использования. + +| Название | Описание | +| ------------------------------------------------------ | ----------------------------------------- | +| [](api/methods/destructor.md) | @getshort(api/methods/destructor.md) | +| [](api/methods/get-value.md) | @getshort(api/methods/get-value.md) | +| [](api/methods/set-value.md) | @getshort(api/methods/set-value.md) | +| [](api/methods/insert-value.md) | @getshort(api/methods/insert-value.md) | +| [](api/methods/set-config.md) | @getshort(api/methods/set-config.md) | +| [](api/methods/set-locale.md) | @getshort(api/methods/set-locale.md) | diff --git a/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..e8d8481 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md @@ -0,0 +1,23 @@ +--- +sidebar_label: Обзор свойств +title: Обзор свойств +description: Обзор свойств JavaScript RichText представлен в документации библиотеки DHTMLX JavaScript RichText. Изучите руководства разработчика и справочник АПИ, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Обзор свойств {#properties-overview} + +На этой странице перечислены все свойства конфигурации, доступные при инициализации редактора DHTMLX RichText. +Они позволяют управлять компоновкой, панелью инструментов, значением, локализацией и другими аспектами редактора. + +| Название | Описание | +| --------------------------------------------------------|-----------------------------------------------| +| [](api/config/default-styles.md) | @getshort(api/config/default-styles.md) | +| [](api/config/fullscreen-mode.md) | @getshort(api/config/fullscreen-mode.md) | +| [](api/config/image-upload-url.md) | @getshort(api/config/image-upload-url.md) | +| [](api/config/layout-mode.md) | @getshort(api/config/layout-mode.md) | +| [](api/config/locale.md) | @getshort(api/config/locale.md) | +| [](api/config/menubar.md) | @getshort(api/config/menubar.md) | +| [](api/config/toolbar.md) | @getshort(api/config/toolbar.md) | +| [](api/config/trigger-template.md) | @getshort(api/config/trigger-template.md) | +| [](api/config/triggers.md) | @getshort(api/config/triggers.md) | +| [](api/config/value.md) | @getshort(api/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..3ed2650 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md @@ -0,0 +1,15 @@ +--- +sidebar_label: Методы состояния +title: Методы состояния +description: В документации библиотеки DHTMLX JavaScript RichText доступен обзор методов внутреннего состояния. Изучайте руководства разработчика и справочник АПИ, запускайте примеры кода и демонстрации, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Методы состояния {#state-methods} + +На этой странице перечислены методы для доступа к внутреннему состоянию редактора DHTMLX RichText и работы с ним. +Эти методы полезны при отладке, интеграции с реактивными системами и реализации сложной пользовательской логики. + +| Название | Описание | +| ----------------------------------------------------------- | ------------------------------------------------ | +| [](api/internal/get-reactive-state.md) | @getshort(api/internal/get-reactive-state.md) | +| [](api/internal/get-state.md) | @getshort(api/internal/get-state.md) | diff --git a/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..b303fab --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/configuration.md @@ -0,0 +1,377 @@ +--- +sidebar_label: Конфигурация +title: Конфигурация +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о конфигурации редактора. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Конфигурация {#configuration} + +Вы можете настроить внешний вид и поведение RichText с помощью следующих свойств: + +- [`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) — задать начальное HTML-содержимое +- [`locale`](api/config/locale.md) — применить объект локализации при инициализации +- [`defaultStyles`](api/config/default-styles.md) — задать стили по умолчанию для конкретных типов блоков +- [`imageUploadUrl`](api/config/image-upload-url.md) — задать конечную точку для загрузки изображений +- [`triggers`](api/config/triggers.md) — включить @упоминания, #теги и пользовательские триггеры выпадающих списков (см. руководство [Упоминания и теги](guides/mentions_and_tags.md)) + +## Режимы макета {#layout-modes} + +RichText поддерживает два режима макета для области редактирования: + +- `"classic"` — область редактирования занимает всю страницу + +
+![Редактор DHTMLX RichText в классическом режиме разметки](/img/richtext/classic_mode.png) +
+ +- `"document"` — область редактирования имитирует страницу документа + +
+![Редактор DHTMLX RichText в режиме документа](/img/richtext/document_mode.png) +
+ +Задайте свойство [`layoutMode`](api/config/layout-mode.md) при инициализации, чтобы выбрать режим: + +~~~jsx +const editor = new richtext.Richtext("#root", { + layoutMode: "document" +}); +~~~ + +**Связанный пример:** [RichText. Режимы документа и классический](https://snippet.dhtmlx.com/jz8q432l?tag=richtext) + +## Панель инструментов {#toolbar} + +Панель инструментов RichText группирует элементы управления в несколько блоков, которые можно настраивать. + +### Стандартные элементы управления панели инструментов {#default-toolbar-controls} + +В панель инструментов 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. Полная панель инструментов](https://snippet.dhtmlx.com/ziynafp7?tag=richtext) + +### Добавление пользовательских элементов управления панели инструментов {#add-custom-toolbar-controls} + +Передайте объект в массив [`toolbar`](api/config/toolbar.md) с одним из следующих полей: + +- `type: string` — обязательное. Тип элемента управления: `"button"`, `"richselect"` или `"colorpicker"` +- `id: string` — необязательное. Идентификатор пользовательского элемента управления; не должен совпадать с существующими идентификаторами +- `icon: string` — необязательное. Имя CSS-класса иконки; используется совместно с меткой +- `label: string` — необязательное. Метка кнопки; используется совместно с иконкой +- `tooltip: string` — необязательное. Всплывающая подсказка при наведении; по умолчанию равна `label`, если не задана +- `css: string` — необязательное. CSS-класс для элемента управления. Встроенные классы: `wx-primary`, `wx-secondary` +- `handler: () => void` — необязательное. Калбэк, выполняемый при нажатии + +В приведённом ниже примере сочетаются встроенные кнопки, предустановленный элемент управления типа `richselect` и две пользовательские кнопки: + +~~~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: () => {/* пользовательская логика */} + } + ], + // другие свойства конфигурации +}); +~~~ + +**Связанный пример:** [RichText. Пользовательский элемент управления и упрощённая панель инструментов](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### Скрытие панели инструментов {#hide-the-toolbar} + +Задайте свойству [`toolbar`](api/config/toolbar.md) значение `false`, чтобы скрыть панель инструментов: + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false, + // другие свойства конфигурации +}); +~~~ + +## Отображение строки меню {#show-the-menubar} + +Включите свойство [`menubar`](api/config/menubar.md), чтобы отобразить верхнюю строку меню над панелью инструментов. Значение по умолчанию — `false`. + +~~~jsx {2} +new richtext.Richtext("#root", { + menubar: true + // другие свойства конфигурации +}); +~~~ + +**Связанный пример:** [RichText. Инициализация со строкой меню](https://snippet.dhtmlx.com/tjryzka7?tag=richtext) + +## Задание начального содержимого {#set-the-initial-content} + +Используйте свойство [`value`](api/config/value.md), чтобы передать начальное HTML-содержимое в редактор при инициализации: + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" + // другие свойства конфигурации +}); +~~~ + +Чтобы заменить содержимое после инициализации или загрузить его в формате, отличном от HTML, с использованием пользовательского энкодера, вызовите метод [`setValue()`](api/methods/set-value.md). + +**Связанный пример:** [RichText. Работа с различными форматами (Markdown, HTML, текст)](https://snippet.dhtmlx.com/cne4kujn?tag=richtext) + +## Задание начальной локали {#set-the-initial-locale} + +Используйте свойство [`locale`](api/config/locale.md), чтобы применить объект локализации при инициализации: + +~~~jsx {2} +new richtext.Richtext("#root", { + locale: richtext.locales.cn + // другие свойства конфигурации +}); +~~~ + +Подробности и динамическое переключение локали с помощью [`setLocale()`](api/methods/set-locale.md) см. в руководстве [Локализация](guides/localization.md). + +## Запуск в полноэкранном режиме {#start-in-fullscreen-mode} + +Задайте свойству [`fullscreenMode`](api/config/fullscreen-mode.md) значение `true`, чтобы редактор открывался в полноэкранном режиме при инициализации. Значение по умолчанию — `false`. + +~~~jsx {2} +new richtext.Richtext("#root", { + fullscreenMode: true + // другие свойства конфигурации +}); +~~~ + +## Настройка вставки изображений {#configure-image-insertion} + +RichText поддерживает два режима вставки изображений через панель инструментов, строку меню, вставку из буфера или перетаскивание. Режим выбирается автоматически на основе свойства [`imageUploadUrl`](api/config/image-upload-url.md). + +### Загрузка изображений на сервер {#upload-images-to-a-server} + +Передайте URL в свойство [`imageUploadUrl`](api/config/image-upload-url.md), чтобы загружать каждое вставляемое изображение на ваш сервер. RichText отправляет файл в формате `multipart/form-data` (имя поля `upload`) и вставляет URL, возвращённый сервером: + +~~~jsx {2} +new richtext.Richtext("#root", { + imageUploadUrl: "https://example.com/upload" + // другие свойства конфигурации +}); +~~~ + +### Вставка изображений в строку как base64 {#insert-images-inline-as-base64} + +Не задавайте [`imageUploadUrl`](api/config/image-upload-url.md) (или задайте ему пустую строку), чтобы встраивать изображения непосредственно в содержимое документа в виде data URL в формате base64. Сервер при этом не требуется: + +~~~jsx {2} +new richtext.Richtext("#root", { + // imageUploadUrl не задан, изображения вставляются в строку + // другие свойства конфигурации +}); +~~~ + +Встроенные изображения размером больше 1024×800 отображаются в уменьшенном виде (атрибуты `width`/`height` ограничены, чтобы вписаться в эти пределы), однако встроенные байты представляют собой исходный файл в полном разрешении — клиент не уменьшает и не перекодирует его. + +:::note[Примечание] +Встроенные (base64) изображения не сохраняются при встроенном [экспорте](api/events/export.md) в форматы DOCX / PDF. Если вы используете экспорт, укажите `imageUploadUrl`, чтобы изображения ссылались на внешний ресурс. +::: + +Полный контракт запроса/ответа, который должна реализовывать конечная точка загрузки, а также подробности резервного варианта со встроенными изображениями см. в разделе [Работа с сервером](guides/working_with_server.md). + +## Настройка стилей по умолчанию {#configure-default-styles} + +Используйте свойство [`defaultStyles`](api/config/default-styles.md), чтобы задать стили по умолчанию для каждого типа блока. + +Свойство [`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`](api/config/default-styles.md) не применяет 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/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..7f2cbb8 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/initialization.md @@ -0,0 +1,80 @@ +--- +sidebar_label: Инициализация +title: Инициализация +description: Вы можете узнать об инициализации в документации JavaScript-библиотеки DHTMLX RichText. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Инициализация {#initialization} + +В этом руководстве описано, как добавить RichText на страницу. Выполните следующие шаги, чтобы получить готовый к использованию редактор: + +1. [Подключите исходные файлы на странице](#include-the-source-files). +2. [Создайте контейнер для RichText](#create-a-container). +3. [Инициализируйте RichText](#initialize-richtext). + +## Подключение исходных файлов {#include-the-source-files} + +Добавьте JavaScript и CSS-файлы RichText в ваш проект. [Скачайте пакет](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml) и распакуйте его содержимое в папку вашего проекта. + +Для создания RichText подключите на странице два исходных файла: + +- *richtext.js* +- *richtext.css* + +Укажите ссылки на файлы в HTML. Скорректируйте относительные пути в соответствии со структурой ваших папок: + +~~~html title="index.html" + + +~~~ + +## Создание контейнера {#create-a-container} + +Добавьте контейнер для RichText с идентификатором, например *"root"*: + +~~~jsx title="index.html" +
+~~~ + +## Инициализация RichText {#initialize-richtext} + +Инициализируйте RichText с помощью конструктора `richtext.Richtext`. Конструктор принимает два параметра: + +- контейнер — CSS-селектор или DOM-элемент +- объект конфигурации со свойствами редактора. Смотрите [полный список свойств](#configuration-properties) ниже + +Пример ниже инициализирует RichText в контейнере `#root`: + +~~~jsx title="index.html" +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +~~~ + +### Свойства конфигурации {#configuration-properties} + +Добавляйте параметры конфигурации в виде ключей объекта конфигурации. + +:::note[Примечание] +Полный список свойств конфигурации смотрите в разделе [Обзор свойств](api/overview/properties_overview.md). +::: + +## Уничтожение экземпляра RichText {#destroy-the-richtext-instance} + +Вызовите метод [`destructor()`](api/methods/destructor.md), чтобы удалить HTML RichText и отсоединить все связанные события: + +~~~jsx +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); + +editor.destructor(); +~~~ + +## Пример {#example} + +В примере ниже RichText инициализируется с включённой панелью меню: + + + +**Связанный пример:** [RichText. Инициализация](https://snippet.dhtmlx.com/t55alxiy?tag=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..b72ce1c --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md @@ -0,0 +1,300 @@ +--- +sidebar_label: Интеграция с Angular +title: Интеграция с Angular +description: Вы можете узнать об интеграции с Angular в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, запускайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Интеграция с Angular {#integration-with-angular} + +:::tip[Совет] +Убедитесь, что вы знакомы с основными концепциями и паттернами Angular. Для повторения см. [документацию Angular](https://v17.angular.io/docs). +::: + +DHTMLX RichText работает с Angular. Полный пример кода доступен в [демо на GitHub](https://github.com/DHTMLX/angular-richtext-demo). + +## Создание проекта {#create-a-project} + +:::info[Информация] +Перед созданием нового проекта установите [Angular CLI](https://v17.angular.io/cli) и [Node.js](https://nodejs.org/en/). +::: + +Создайте новый проект *my-angular-richtext-app* с помощью Angular CLI: + +~~~bash +ng new my-angular-richtext-app +~~~ + +:::note[Примечание] +Отключите Server-Side Rendering (SSR) и Static Site Generation (SSG/Prerendering), когда Angular CLI запросит выбор в процессе создания проекта. +::: + +Команда устанавливает все необходимые инструменты. Никаких дополнительных команд не требуется. + +### Установка зависимостей {#install-dependencies} + +Перейдите в директорию нового приложения: + +~~~bash +cd my-angular-richtext-app +~~~ + +Установите зависимости и запустите сервер разработки с помощью пакетного менеджера [yarn](https://yarnpkg.com/): + +~~~bash +yarn +yarn start +~~~ + +Приложение запускается на localhost (например, `http://localhost:3000`). + +## Создание RichText {#create-richtext} + +Остановите приложение и установите пакет RichText. + +### Шаг 1. Установка пакета {#step-1-install-the-package} + +Загрузите [ознакомительный пакет RichText](/how_to_start/#installing-richtext-via-npm-or-yarn) и следуйте инструкциям в файле README. Ознакомительная лицензия действительна 30 дней. + +### Шаг 2. Создание компонента {#step-2-create-the-component} + +Создайте Angular-компонент для добавления RichText в приложение. В директории *src/app/* создайте папку *richtext* и добавьте новый файл *richtext.component.ts*. + +#### Импорт исходных файлов {#import-source-files} + +Откройте *richtext.component.ts* и импортируйте исходные файлы RichText. + +Для PRO-версии, установленной из локальной папки, используйте: + +~~~jsx +import { Richtext } from 'dhx-richtext-package'; +~~~ + +Для ознакомительной версии используйте: + +~~~jsx +import { Richtext } from '@dhx/trial-richtext'; +~~~ + +В этом руководстве используется ознакомительная версия RichText. + +#### Задание контейнера и инициализация RichText {#set-the-container-and-initialize-richtext} + +Задайте контейнерный элемент для RichText и инициализируйте компонент с помощью конструктора `Richtext` внутри `ngOnInit()`. Вызовите метод [`destructor()`](api/methods/destructor.md) внутри `ngOnDestroy()` для освобождения ресурсов: + +~~~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", // использовать селектор "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 + } +} +~~~ + +#### Добавление стилей {#add-styles} + +Создайте файл *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); +} +~~~ + +#### Загрузка данных {#load-data} + +Подготовьте данные для 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*. Импортируйте данные и передайте свойство `value` в конфигурацию 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 готов к использованию. Angular отображает редактор с данными при монтировании элемента ``. Полный список параметров конфигурации см. в [обзоре АПИ RichText](api/overview/main_overview.md). + +#### Обработка событий {#handle-events} + +RichText генерирует события при действиях пользователя. Подпишитесь на события с помощью метода [`api.on()`](api/internal/on.md), чтобы реагировать на ввод пользователя. См. [полный список событий](api/overview/events_overview.md). + +Откройте *richtext.component.ts* и обновите метод `ngOnInit()`. В приведённом примере в консоль выводится сообщение при каждом событии [`print`](api/events/print.md): + +~~~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 в приложение {#step-3-add-richtext-to-the-app} + +Откройте *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 с данными на странице. + +
+![DHTMLX RichText, отрендеренный в приложении Angular с демонстрационным содержимым](/img/trial_richtext.png) +
+ +Теперь у вас есть работающая интеграция 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..a125078 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_react.md @@ -0,0 +1,253 @@ +--- +sidebar_label: Интеграция с React +title: Интеграция с React +description: Узнайте об интеграции с React в документации библиотеки DHTMLX JavaScript RichText. Изучите руководства разработчика и справочник АПИ, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Интеграция с React {#integration-with-react} + +:::tip[Совет] +Убедитесь, что вы знакомы с базовыми концепциями и паттернами [React](https://react.dev). Для повторения см. [документацию React](https://react.dev/learn). +::: + +DHTMLX RichText работает с React. Полный пример кода см. в [демо на GitHub](https://github.com/DHTMLX/react-richtext-demo). + +## Создание проекта {#create-a-project} + +:::info[Информация] +Перед созданием нового проекта установите [Node.js](https://nodejs.org/en/) и (опционально) [Vite](https://vite.dev/). +::: + +Создайте новый проект *my-react-richtext-app* с помощью Create React App: + +~~~bash +npx create-react-app my-react-richtext-app +~~~ + +### Установка зависимостей {#install-dependencies} + +Перейдите в директорию нового приложения: + +~~~bash +cd my-react-richtext-app +~~~ + +Установите зависимости и запустите dev-сервер с помощью пакетного менеджера. + +Для [yarn](https://yarnpkg.com/) выполните: + +~~~bash +yarn +yarn start +~~~ + +Для [npm](https://www.npmjs.com/) выполните: + +~~~bash +npm install +npm start +~~~ + +Приложение запустится на localhost (например, `http://localhost:3000`). + +## Создание RichText {#create-richtext} + +Остановите приложение и установите пакет RichText. + +### Шаг 1. Установите пакет {#step-1-install-the-package} + +Скачайте [ознакомительный пакет RichText](/how_to_start/#installing-richtext-via-npm-or-yarn) и следуйте инструкциям в файле README. Ознакомительная лицензия действует 30 дней. + +### Шаг 2. Создайте компонент {#step-2-create-the-component} + +Создайте React-компонент для добавления RichText в приложение. В директории *src/* создайте новый файл *Richtext.jsx*. + +#### Импорт исходных файлов {#import-source-files} + +Откройте *Richtext.jsx* и импортируйте исходные файлы RichText. + +Для PRO-версии, установленной из локальной папки, используйте: + +~~~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 {#set-the-container-and-initialize-richtext} + +Задайте контейнерный элемент для RichText и инициализируйте компонент с помощью конструктора `Richtext` внутри `useEffect()`. Вызовите метод [`destructor()`](api/methods/destructor.md) в функции очистки для удаления 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
+
+
+} +~~~ + +#### Добавление стилей {#add-styles} + +Добавьте стили для 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); +} +~~~ + +#### Загрузка данных {#load-data} + +Подготовьте данные для 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* и импортируйте данные. Передайте значение в компонент `` как проп: + +~~~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* и передайте `props.value` в конфигурацию 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()` для загрузки данных в 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(); + + let value = props.value; + + useEffect(() => { + const editor = new Richtext(richtext_container.current, { + // свойства конфигурации + }); + + editor.setValue(value); + + return () => { + editor.destructor(); + }; + }, []); + + return
+
+
+} +~~~ + +Компонент RichText готов к использованию. React отрисовывает редактор с данными при монтировании элемента ``. Полный список параметров конфигурации см. в [обзоре АПИ RichText](api/overview/main_overview.md). + +#### Обработка событий {#handle-events} + +RichText генерирует события при действиях пользователя. Подпишитесь на события с помощью метода [`api.on()`](api/internal/on.md), чтобы реагировать на ввод пользователя. См. [полный список событий](api/overview/events_overview.md). + +Откройте *Richtext.jsx* и обновите хук `useEffect()`. Пример ниже выводит сообщение в консоль при каждом событии [`print`](api/events/print.md): + +~~~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 с данными на странице. + +
+![DHTMLX RichText, отрендеренный в приложении React с демонстрационным содержимым](/img/trial_richtext.png) +
+ +Теперь у вас есть рабочая интеграция 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..ac2c232 --- /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 в документации библиотеки DHTMLX JavaScript RichText. Ознакомьтесь с руководствами разработчика и справочником АПИ, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Интеграция со Svelte {#integration-with-svelte} + +:::tip[Совет] +Убедитесь, что вы знакомы с основными концепциями и паттернами [Svelte](https://svelte.dev/). Для повторения материала обратитесь к [документации Svelte](https://svelte.dev/docs). +::: + +DHTMLX RichText работает со Svelte. Полный пример кода доступен в [демо на GitHub](https://github.com/DHTMLX/svelte-richtext-demo). + +## Создание проекта {#create-a-project} + +:::info[Информация] +Перед созданием нового проекта установите [Node.js](https://nodejs.org/en/) и (опционально) [Vite](https://vite.dev/). +::: + +В этом руководстве используется проект Svelte на основе Vite. Для SvelteKit и других вариантов см. [руководство по проектам Svelte](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit). + +Создайте новый проект Vite: + +~~~bash +npm create vite@latest +~~~ + +### Установка зависимостей {#install-dependencies} + +Когда мастер создания проекта запросит имя, укажите *my-svelte-richtext-app*. Затем перейдите в новую директорию: + +~~~bash +cd my-svelte-richtext-app +~~~ + +Установите зависимости и запустите сервер разработки с помощью пакетного менеджера. + +Для [yarn](https://yarnpkg.com/) выполните: + +~~~bash +yarn +yarn dev +~~~ + +Для [npm](https://www.npmjs.com/) выполните: + +~~~bash +npm install +npm run dev +~~~ + +Приложение запустится на localhost (например, `http://localhost:3000`). + +## Создание RichText {#create-richtext} + +Остановите приложение и установите пакет RichText. + +### Шаг 1. Установка пакета {#step-1-install-the-package} + +Загрузите [ознакомительный пакет RichText](/how_to_start/#installing-richtext-via-npm-or-yarn) и следуйте инструкциям в файле README. Ознакомительная лицензия действительна в течение 30 дней. + +### Шаг 2. Создание компонента {#step-2-create-the-component} + +Создайте компонент Svelte для добавления RichText в приложение. В директории *src/* создайте новый файл *Richtext.svelte*. + +#### Импорт исходных файлов {#import-source-files} + +Откройте *Richtext.svelte* и импортируйте исходные файлы RichText. + +Для PRO-версии, установленной из локальной папки, используйте: + +~~~html title="Richtext.svelte" + +~~~ + +Для ознакомительной версии используйте: + +~~~html title="Richtext.svelte" + +~~~ + +В этом руководстве используется ознакомительная версия RichText. + +#### Настройка контейнера и инициализация RichText {#set-the-container-and-initialize-richtext} + +Задайте контейнерный элемент для RichText и инициализируйте компонент внутри `onMount()`. Вызовите метод [`destructor()`](api/methods/destructor.md) внутри `onDestroy()`, чтобы удалить RichText: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +#### Добавление стилей {#add-styles} + +Добавьте стили для RichText и его контейнера в основной CSS-файл проекта (например, *src/app.css*): + +~~~css title="app.css" +/* базовые стили страницы */ +html, +body { + height: 100%; + padding: 0; + margin: 0; +} + +/* контейнер RichText */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* виджет RichText */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### Загрузка данных {#load-data} + +Подготовьте данные для 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.svelte*, импортируйте данные и передайте значение компоненту `` в виде пропса: + +~~~html {} title="App.svelte" + + + +~~~ + +Откройте *Richtext.svelte* и передайте значение пропса в конфигурацию RichText: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +Также можно вызвать метод [`setValue()`](api/methods/set-value.md) внутри `onMount()` для загрузки данных в RichText: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +Компонент RichText готов к использованию. Svelte отрисовывает редактор с данными при монтировании элемента ``. Полный список параметров конфигурации см. в [обзоре АПИ RichText](api/overview/main_overview.md). + +#### Обработка событий {#handle-events} + +RichText генерирует события при действиях пользователя. Подпишитесь на события с помощью метода [`api.on()`](api/internal/on.md), чтобы реагировать на ввод пользователя. См. [полный список событий](api/overview/events_overview.md). + +Откройте *Richtext.svelte* и обновите хук `onMount()`. В примере ниже выводится сообщение при каждом событии [`print`](api/events/print.md): + +~~~html {} title="Richtext.svelte" + + +// ... +~~~ + +Запустите приложение, чтобы увидеть RichText с данными на странице. + +
+![DHTMLX RichText, отрендеренный в приложении Svelte с демонстрационным содержимым](/img/trial_richtext.png) +
+ +Интеграция 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..fa9f62a --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md @@ -0,0 +1,277 @@ +--- +sidebar_label: Интеграция с Vue +title: Интеграция с Vue +description: Вы можете узнать об интеграции с Vue в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Интеграция с Vue {#integration-with-vue} + +:::tip[Совет] +Убедитесь, что вы знакомы с основными концепциями и паттернами [Vue](https://vuejs.org/). Для освежения знаний обратитесь к [документации Vue 3](https://vuejs.org/guide/introduction.html#getting-started). +::: + +DHTMLX RichText работает с Vue. Полный пример кода доступен в [демо на GitHub](https://github.com/DHTMLX/vue-richtext-demo). + +## Создание проекта {#create-a-project} + +:::info[Информация] +Перед созданием нового проекта установите [Node.js](https://nodejs.org/en/). +::: + +Создайте проект Vue с помощью официального инструмента для развёртывания: + +~~~bash +npm create vue@latest +~~~ + +Команда устанавливает и запускает `create-vue`. Когда инструмент запросит имя проекта, введите *my-vue-richtext-app*. Подробнее см. в [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application). + +### Установка зависимостей {#install-dependencies} + +Перейдите в директорию приложения: + +~~~bash +cd my-vue-richtext-app +~~~ + +Установите зависимости и запустите сервер разработки с помощью пакетного менеджера. + +Для [yarn](https://yarnpkg.com/) выполните: + +~~~bash +yarn +yarn dev +~~~ + +Для [npm](https://www.npmjs.com/) выполните: + +~~~bash +npm install +npm run dev +~~~ + +Приложение запустится на localhost (например, `http://localhost:3000`). + +## Создание RichText {#create-richtext} + +Остановите приложение и установите пакет RichText. + +### Шаг 1. Установка пакета {#step-1-install-the-package} + +Скачайте [ознакомительный пакет RichText](/how_to_start/#installing-richtext-via-npm-or-yarn) и следуйте инструкциям в файле README. Ознакомительная лицензия действительна 30 дней. + +### Шаг 2. Создание компонента {#step-2-create-the-component} + +Создайте Vue-компонент для добавления RichText в приложение. В директории *src/components/* создайте новый файл *Richtext.vue*. + +#### Импорт исходных файлов {#import-source-files} + +Откройте *Richtext.vue* и импортируйте исходные файлы RichText. + +Для PRO-версии, установленной из локальной папки, используйте: + +~~~html title="Richtext.vue" + +~~~ + +Для ознакомительной версии используйте: + +~~~html title="Richtext.vue" + +~~~ + +В этом руководстве используется ознакомительная версия RichText. + +#### Настройка контейнера и инициализация RichText {#set-the-container-and-initialize-richtext} + +Задайте элемент-контейнер для RichText и инициализируйте компонент с помощью конструктора `Richtext` внутри `mounted()`. Вызовите метод [`destructor()`](api/methods/destructor.md) внутри `unmounted()`, чтобы удалить RichText: + +~~~html {} title="Richtext.vue" + + + +~~~ + +#### Добавление стилей {#add-styles} + +Добавьте стили для 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); +} +~~~ + +#### Загрузка данных {#load-data} + +Подготовьте данные для 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.vue*, импортируйте данные и инициализируйте их через метод `data()`. Передайте значение в компонент `` как проп: + +~~~html {} title="App.vue" + + + +~~~ + +Откройте *Richtext.vue* и передайте значение пропа в конфигурацию RichText: + +~~~html {} title="Richtext.vue" + + + +~~~ + +Также можно вызвать метод [`setValue()`](api/methods/set-value.md) внутри `mounted()` для загрузки данных в RichText: + +~~~html {} title="Richtext.vue" + + + +~~~ + +Компонент RichText готов к использованию. Vue отображает редактор с данными при монтировании элемента ``. Полный список параметров конфигурации см. в [обзоре АПИ RichText](api/overview/main_overview.md). + +#### Обработка событий {#handle-events} + +RichText генерирует события при действиях пользователя. Подпишитесь на события с помощью метода [`api.on()`](api/internal/on.md), чтобы реагировать на ввод пользователя. См. [полный список событий](api/overview/events_overview.md). + +Откройте *Richtext.vue* и обновите хук `mounted()`. Пример ниже выводит сообщение в консоль при каждом событии [`print`](api/events/print.md): + +~~~html {} title="Richtext.vue" + + +// ... +~~~ + +Запустите приложение, чтобы увидеть RichText с данными на странице. + +
+![DHTMLX RichText, отрендеренный в приложении Vue с демонстрационным содержимым](/img/trial_richtext.png) +
+ +Теперь у вас есть рабочая интеграция 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..44a2697 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/localization.md @@ -0,0 +1,495 @@ +--- +sidebar_label: Локализация +title: Локализация +description: Вы можете узнать о локализации в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, и загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Локализация {#localization} + +RichText поддерживает локализацию всех надписей интерфейса. Создайте новую локаль или измените встроенную, а затем примените результат через конфигурацию редактора. + +## Локаль по умолчанию {#default-locale} + +По умолчанию RichText использует английскую локаль: + +~~~jsx +const en = { + richtext: { + // кнопки/действия + 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", + + // опции, доступные только в меню + 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", + + // буфер обмена + "Operation failed. Please check your browser's clipboard permissions.": + "Operation failed. Please check your browser's clipboard permissions.", + + // выпадающий список стилей блоков + Heading: "Heading", + Quote: "Quote", + Paragraph: "Paragraph", + "Text style": "Text style", + Lists: "Lists", + + normal: "normal", + default: "default", + + // списки + "Bulleted list": "Bulleted list", + "Numbered list": "Numbered list", + + // ссылки + "Enter text to display": "Enter text to display", + "Paste link": "Paste link", + "Link copied to clipboard": "Link copied to clipboard", + + // группы горячих клавиш + "Text formatting": "Text formatting", + Editing: "Editing", + "Special actions": "Special actions", + + // цвета + 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", + + // оттенки + "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[Информация] +RichText также поставляется со встроенными немецкой (`de`) и китайской (`cn`) локалями. Получить доступ к любой встроенной локали можно через пространство имён `richtext.locales`: `richtext.locales.en`, `richtext.locales.de`, `richtext.locales.cn`. +::: + +
+de locale + +~~~jsx +const de = { + richtext: { + // кнопки/действия + 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", + + // опции, доступные только в меню + 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", + + // буфер обмена + "Operation failed. Please check your browser's clipboard permissions.": + "Operation fehlgeschlagen. Bitte überprüfen Sie die Berechtigungen für die Zwischenablage Ihres Browsers.", + + // выпадающий список стилей блоков + Heading: "Überschrift", + Quote: "Zitat", + Paragraph: "Absatz", + "Text style": "Textstil", + Lists: "Listen", + + normal: "normal", + default: "standard", + + // списки + "Bulleted list": "Liste mit Aufzählungszeichen", + "Numbered list": "Nummerierte Liste", + + // ссылки + "Enter text to display": "Text zum Anzeigen eingeben", + "Paste link": "Link einfügen", + "Link copied to clipboard": "Link in die Zwischenablage kopiert", + + // группы горячих клавиш + "Text formatting": "Textformatierung", + Editing: "Bearbeitung", + "Special actions": "Spezielle Aktionen", + + // цвета + 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", + + // оттенки + "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: { + // кнопки/действия + 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": "文档模式", + + // опции, доступные только в меню + 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": "键盘快捷键", + + // буфер обмена + "Operation failed. Please check your browser's clipboard permissions.": + "操作失败。请检查浏览器的剪贴板权限。", + + // выпадающий список стилей блоков + Heading: "标题", + Quote: "引用", + Paragraph: "段落", + "Text style": "文本样式", + Lists: "列表", + + normal: "普通的", + default: "默认", + + // списки + "Bulleted list": "项目符号列表", + "Numbered list": "编号列表", + + // ссылки + "Enter text to display": "输入要显示的文本", + "Paste link": "粘贴链接", + "Link copied to clipboard": "链接已复制到剪贴板", + + // группы горячих клавиш + "Text formatting": "文本格式化", + Editing: "编辑", + "Special actions": "特殊操作", + + // цвета + Black: "黑色", + Gray: "灰色", + White: "白色", + Red: "红色", + Orange: "橙色", + Yellow: "黄色", + Lime: "酸橙色", + Green: "绿色", + Teal: "水鸭色", + Cyan: "青色", + Blue: "蓝色", + Indigo: "靛蓝色", + Magenta: "洋红色", + + // оттенки + "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": "深洋红色" + } +}; +~~~ +
+ +## Применение пользовательской локали {#apply-a-custom-locale} + +Создайте объект локали (или измените встроенный) с переводами всех надписей интерфейса. Примените локаль при инициализации или переключите её во время работы, как показано ниже. + +### Применение локали при инициализации {#apply-the-locale-at-initialization} + +Передайте локаль в свойство [`locale`](api/config/locale.md) в конфигурации конструктора: + +~~~jsx +const editor = new richtext.Richtext("#root", { + locale: richtext.locales.de + // остальные свойства конфигурации +}); +~~~ + +### Переключение локали во время работы {#switch-the-locale-at-runtime} + +Вызовите метод [`setLocale()`](api/methods/set-locale.md) для смены локали после инициализации: + +~~~jsx +editor.setLocale(richtext.locales.cn); +~~~ + +Чтобы восстановить английскую локаль по умолчанию, вызовите [`setLocale()`](api/methods/set-locale.md) без аргументов или с `null`: + +~~~jsx +editor.setLocale(); +~~~ + +## Пример {#example} + +Пример ниже демонстрирует переключение между несколькими локалями RichText: + + diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/mentions_and_tags.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/mentions_and_tags.md new file mode 100644 index 0000000..2ebb8cd --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/mentions_and_tags.md @@ -0,0 +1,274 @@ +--- +sidebar_label: Упоминания и теги +title: Упоминания и теги +description: 'Узнайте, как настроить @упоминания, #теги и пользовательские триггеры выпадающего списка в DHTMLX RichText. Изучите руководства для разработчиков и справочник АПИ, попробуйте примеры кода и живые демо, загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText.' +--- + +# Упоминания и теги {#mentions-and-tags} + +RichText поддерживает пользовательские символы-триггеры, которые открывают выпадающий список подсказок внутри документа. Когда пользователь выбирает элемент, RichText вставляет в документ неизменяемый токен. Типичные варианты использования: + +- `@` — упомянуть человека +- `#` — применить тег +- `/` — вставить команду или шаблон +- `$` — вставить финансовый тикер или переменную +- `:` — вставить эмодзи + +Настройте поведение через свойство [`triggers`](api/config/triggers.md). Каждая запись связывает один символ с источником данных. + +## Настройка триггеров {#configure-triggers} + +Каждый триггер — это объект `{ trigger, data, showTrigger?, action? }` внутри массива [`triggers`](api/config/triggers.md). Поле [`data`](api/config/triggers.md#data-source-forms) может принимать три формы: + +- Статический массив — RichText автоматически фильтрует его по полю `label` (без учёта регистра, метод `startsWith`): + +~~~jsx {} +{ trigger: "@", data: people } +~~~ + +- Синхронная функция — используйте её для самостоятельной фильтрации результатов: + +~~~jsx {} +{ + trigger: "#", + data: query => tags.filter(t => + t.label.toLowerCase().startsWith(query.toLowerCase()) + ) +} +~~~ + +- Асинхронная функция — используйте её для поиска на стороне сервера: + +~~~jsx {} +{ + trigger: "+", + data: async query => { + const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`); + const users = await res.json(); + return users.map(u => ({ + id: String(u.id), + label: u.name, + url: u.website + })); + } +} +~~~ + +**Связанный пример:** [RichText. Упоминания, теги и асинхронный поиск](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +## Отображение токена {#token-rendering} + +Когда пользователь выбирает элемент из выпадающего списка, RichText вставляет его как элемент `` с двумя атрибутами данных: + +~~~html {2-3} +@Alice +~~~ + +Токен является единым неизменяемым узлом. Клавиша `Backspace` удаляет его за один шаг. RichText сохраняет поле `url` в атрибуте `href`, поэтому `Ctrl+Click` по токену открывает ссылку. + +Вы можете стилизовать токены с помощью селектора `data-token`: + +~~~css {} +.wx-editor-content a[data-token="@"][data-token-id="alice"] { + background: #fb8500; + color: #fff; + border-radius: 3px; + padding: 0 2px; +} +~~~ + +**Связанные примеры:** + +- [RichText. Поиск и выделение упоминаний](https://snippet.dhtmlx.com/8y6zvzh2?tag=richtext) +- [RichText. Выделение всех упоминаний](https://snippet.dhtmlx.com/2rbo12jx?tag=richtext) + +## Скрытие символа триггера {#hide-the-trigger-character} + +Установите `showTrigger: false` для триггера, чтобы вставлялась только метка элемента без символа триггера: + +~~~jsx {4} +{ + trigger: "/", + data: commands, + showTrigger: false +} +~~~ + +## Управление с клавиатуры {#keyboard-interaction} + +В выпадающем списке подсказок доступны следующие сочетания клавиш: + +- `↑` / `↓` — перемещение между элементами +- `Enter` — вставка активного элемента +- `Escape` — закрытие списка без вставки + +## Подписка на события подсказок {#listen-to-suggestion-events} + +Три события предоставляют доступ к жизненному циклу выпадающего списка через шину событий: + +- [`insert-token`](api/events/insert-token.md) — срабатывает, когда пользователь выбирает элемент +- [`show-suggest`](api/events/show-suggest.md) — срабатывает при открытии выпадающего списка +- [`hide-suggest`](api/events/hide-suggest.md) — срабатывает при закрытии выпадающего списка + +~~~jsx {5-7} +const editor = new richtext.Richtext("#root", { + triggers: [{ trigger: "@", data: people }] +}); + +editor.api.on("insert-token", ({ data, trigger, showTrigger }) => { + console.log(`Inserted ${trigger}${data.label} (id: ${data.id})`); +}); +~~~ + +## Настройка элемента выпадающего списка {#customize-the-dropdown-item} + +По умолчанию выпадающий список отображает поле `label` каждого элемента. Чтобы отрисовать пользовательские подсказки (например, аватар, имя и email), передайте шаблон через свойство [`triggerTemplate`](api/config/trigger-template.md). + +### Пример {#example} + +~~~jsx {1,4-9} +const { template } = richtext; + +new richtext.Richtext("#root", { + triggers: [{ trigger: "@", data: people }], + triggerTemplate: template(({ data, trigger }) => ` +
+
${trigger}${data.label}
+
${data.url || ""}
+
+ `) +}); +~~~ + +**Связанный пример:** [RichText. Пользовательский шаблон выпадающего списка для каждого триггера](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext) + +## Пользовательское действие при выборе {#custom-action-on-select} + +По умолчанию выбор элемента вставляет его в документ как токен. Чтобы выполнить собственный код вместо этого, добавьте колбэк `action` к триггеру. RichText удаляет введённый символ триггера и вызывает `action(item)` с выбранным элементом — токен не вставляется, и вы сами решаете, что добавить. + +:::note[Примечание] +`action` имеет приоритет над `showTrigger`. Если задан `action`, значение `showTrigger` игнорируется. +::: + +### Добавление эмодзи {#add-emoji} + +Триггер `:` может вставлять эмодзи, где каждый элемент содержит пользовательское поле `code`. Используйте `action` вместе с [`triggerTemplate`](api/config/trigger-template.md), чтобы выпадающий список отображал эмодзи, а не просто его метку: + +~~~jsx {18-20,24} +const { template, Richtext } = richtext; + +const emoji = [ + { + id: "apple", label: "apple", code: "1F34E" + }, + { + id: "blue_car", label: "blue_car", code: "1F699" + }, + { + id: "computer", label: "computer", code: "1F4BB" + } +]; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: emoji, // [{ id: "apple", label: "apple", code: "1F34E" }, ...] + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // отображение самого эмодзи (а не только его названия) в выпадающем списке + triggerTemplate: template(({ data }) => `${emojiFromCode(data.code)} ${data.label}`) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} +~~~ + +**Связанный пример:** [RichText. Автодополнение эмодзи](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) + +### Группировка эмодзи по категориям {#group-emoji-by-categories} + +Когда параметр `data` является функцией, вы не ограничены встроенным сопоставлением по полю `label`. Можно выполнять собственную фильтрацию и сохранять заголовки категорий в выпадающем списке. Добавьте элементы-заголовки с полем `label`, но без поля `code`. Функция `data` сначала находит эмодзи, соответствующие запросу, затем возвращает эмодзи вместе с заголовками категорий, в которых остались совпадения: + +~~~jsx {17-26,31-33} +const { template, Richtext } = richtext; + +// элементы-заголовки не содержат поля `code`; элементы-эмодзи его содержат +const emoji = [ + { id: "$smileys", label: "Smileys", category: 1 }, // категория + { id: "grinning", label: "grinning", code: "1F600", category: 1 }, + { id: "smile", label: "smile", code: "1F604", category: 1 }, + { id: "$animals", label: "Animals", category: 2 }, // категория + { id: "dog", label: "dog", code: "1F436", category: 2 }, + { id: "cat", label: "cat", code: "1F431", category: 2 } +]; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: query => { + const matched = emoji.filter(item => + item.code && + item.label.toLowerCase().startsWith(query.toLowerCase().trim()) + ); + const categories = new Set(matched.map(item => item.category)); + // сохраняем подходящие эмодзи вместе с заголовками категорий, в которых остались совпадения + return emoji.filter(item => + item.code ? matched.includes(item) : categories.has(item.category) + ); + }, + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // отображение строк с эмодзи обычным шрифтом, а заголовков категорий — жирным + triggerTemplate: template(({ data }) => + data.code ? `${emojiFromCode(data.code)} ${data.label}` : `${data.label}` + ) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} + +// заголовки не имеют поля `code` — игнорируем их выбор, чтобы они никогда не вставлялись +editor.api.intercept("insert-token", ({ data }) => !!data.code); +~~~ + +### Добавление командного меню в стиле slash {#add-slash-style-command-menu} + +С помощью `action` можно создать командное меню в стиле slash (как `/` в Notion или Slack). Храните название команды в поле `id` каждого элемента, её параметры — в пользовательском поле `config`, и позвольте колбэку выполнять её через [`api.exec`](api/internal/exec.md): + +~~~jsx {13} +// каждый элемент хранит название действия api.exec в `id`, а его параметры — в `config` +const commands = [ + { id: "set-text-style", label: "Heading 1", config: { tag: "h1" } }, + { id: "insert-list", label: "Bulleted list", config: { type: "bulleted" } }, + { id: "insert-line", label: "Divider" } // конфигурация отсутствует → применяется `|| {}` +]; + +const editor = new richtext.Richtext("#root", { + triggers: [ + { + trigger: "/", + data: commands, + action: item => editor.api.exec(item.id, item.config || {}) + } + ] +}); +~~~ + +**Связанный пример:** [RichText. Slash-команды](https://snippet.dhtmlx.com/e0mrmyam?tag=richtext) + +## Связанный АПИ {#related-api} + +- [`triggers`](api/config/triggers.md) +- [`triggerTemplate`](api/config/trigger-template.md) +- [`insert-token`](api/events/insert-token.md) +- [`show-suggest`](api/events/show-suggest.md) +- [`hide-suggest`](api/events/hide-suggest.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..28eb694 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/stylization.md @@ -0,0 +1,93 @@ +--- +title: Стилизация +sidebar_label: Стилизация +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о стилизации редактора. Изучайте руководства для разработчиков и справочник по API, просматривайте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Стилизация {#styling} + +Настройте внешний вид DHTMLX RichText, переопределив CSS-переменные на контейнере редактора и его дочерних элементах. + +В этом руководстве показано, как применить **тёмную тему** и настроить строку меню, панель инструментов, всплывающие элементы и область контента с помощью CSS-селекторов классов. + +## Структура по умолчанию и имена классов {#default-structure-and-class-names} + +RichText использует следующие основные классы для построения интерфейса: + +| Имя класса | Описание | +|------------------------|---------------------------------------------------| +| `.wx-richtext` | Корневой контейнер виджета RichText | +| `.wx-richtext-menubar` | Контейнер строки меню | +| `.wx-richtext-menu` | Контейнер выпадающего меню строки меню | +| `.wx-richtext-toolbar` | Контейнер панели инструментов | +| `.wx-editor-area` | Контейнер основной редактируемой области контента | + +Используйте эти классы в пользовательских CSS-селекторах для переопределения внешнего вида редактора. + +## Переопределение стилей по умолчанию {#override-default-styles} + +Чтобы переопределить стили по умолчанию, задайте CSS-переменные на контейнере `#root` или на конкретных дочерних элементах: + +```html +
+ + +``` + +:::note[Примечание] +Эти стили применяют тёмный фон, настраивают цвета кнопок и иконок, а также улучшают видимость для тёмных тем интерфейса. +::: + +## Поддерживаемые CSS-переменные {#supported-css-variables} + +| Имя переменной | Описание | +| ---------------------------- | --------------------------------------------------------------------------- | +| `--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` | Рамка для всплывающих элементов | + +## Рекомендации {#best-practices} + +* Используйте `color-scheme: dark` для улучшения стилизации нативных элементов ввода в тёмном режиме +* Избегайте изменения свойств, связанных с макетом (таких как `display`, `position`), без веской причины + +:::tip[Совет] +Для настройки типографики по тегам (семейство шрифтов, размер шрифта, цвет, фон для `h1`, `p`, `blockquote` и других блочных тегов) используйте свойство конфигурации [`defaultStyles`](api/config/default-styles.md) с соответствующими CSS-правилами. Полный шаблон смотрите в [руководстве по конфигурации](guides/configuration.md#configure-default-styles). +::: + +## Живое демо {#live-demo} + +В примере ниже к RichText применён пользовательский стиль: + + + +**Связанные статьи:** [Конфигурация](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..89b77e0 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/typescript_support.md @@ -0,0 +1,38 @@ +--- +sidebar_label: Поддержка TypeScript +title: Поддержка TypeScript +description: В документации вы можете узнать об использовании TypeScript с библиотекой DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Поддержка TypeScript {#typescript-support} + +Начиная с версии v2.0, DHTMLX RichText поставляется со встроенными определениями TypeScript, которые не требуют дополнительной настройки. + +:::note[Примечание] +Попробуйте редактор в Snippet Tool. +::: + +## Преимущества TypeScript {#advantages-of-typescript} + +TypeScript вместе с DHTMLX RichText предоставляет: + +- типобезопасность — компилятор обнаруживает некорректное использование свойств конфигурации и аргументов методов на этапе сборки +- автодополнение — среда разработки предлагает допустимые имена свойств, сигнатуры методов и типы значений по мере ввода +- самодокументирующийся АПИ — аннотации типов для объекта конфигурации и методов одновременно служат встроенной документацией + +## Инициализация RichText в TypeScript {#initialize-richtext-in-typescript} + +Пример ниже инициализирует RichText в TypeScript с автодополнением из встроенных определений типов: + +~~~ts +import { Richtext } from "@dhx/richtext"; + +const editor = new Richtext("#root", { + menubar: true, + layoutMode: "document" +}); +~~~ + +## Справочник по типам АПИ {#reference-api-types} + +Сигнатуры TypeScript для каждого свойства конфигурации см. в разделе [Обзор свойств](api/overview/properties_overview.md). Сигнатуры методов см. в разделе [Обзор методов](api/overview/methods_overview.md). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/working_with_server.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/working_with_server.md new file mode 100644 index 0000000..c45fe6a --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/working_with_server.md @@ -0,0 +1,121 @@ +--- +sidebar_label: Работа с сервером +title: Работа с сервером +description: Узнайте, как RichText взаимодействует с бэкендом для загрузки изображений, включая контракт запрос/ответ и подключение собственного сервера. Просматривайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Работа с сервером {#working-with-the-server} + +RichText работает полностью в браузере и не требует бэкенда для редактирования или сохранения контента. Ваше приложение может хранить содержимое редактора там, где вам удобно. Единственная функция, которая выигрывает от наличия сервера, — **загрузка изображений**: когда пользователь вставляет изображение в документ, RichText может либо встроить файл непосредственно в контент, либо отправить его на HTTP-эндпоинт и сохранить ссылку на него. + +В этом руководстве объясняется: + +- что происходит по умолчанию, если сервер загрузки не настроен +- точный HTTP-контракт, который должен реализовать сервер +- как RichText использует URL, возвращённый сервером +- как протестировать функцию на демо-бэкенде + +## Поведение по умолчанию: встроенные изображения {#default-behavior-inline-images} + +Если вы не задаёте свойство [`imageUploadUrl`](api/config/image-upload-url.md), RichText использует встроенные изображения. Когда пользователь вставляет изображение, RichText читает файл в браузере, кодирует оригинальный файл как `data:image/...;base64,...` URL и записывает его непосредственно в контент редактора в виде атрибута `src` элемента ``. RichText ограничивает отображаемый размер, чтобы он вписывался в рамку 1024×800 пикселей, используя атрибуты `width`/`height`, но встроенные байты — это оригинальный файл в полном разрешении: клиент не уменьшает и не перекодирует его. + +Это работает без какого-либо бэкенда и удобно для быстрых демонстраций, но имеет очевидные ограничения: + +- закодированные байты хранятся внутри документа, поэтому сохранённый HTML растёт с каждым изображением +- одно и то же изображение в двух документах хранится дважды — общего ресурса для дедупликации нет +- поскольку байты не являются отдельным ресурсом, сервер не может раздавать их через CDN или постобрабатывать (изменять размер, перекодировать, сканировать) +- встроенные изображения не сохраняются при встроенном [экспорте](api/events/export.md) в форматы DOCX/PDF — если вы используете экспорт, настройте сервер загрузки, чтобы изображения ссылались на внешний URL + +## Напишите свой сервер {#write-your-own-server} + +В продакшн-приложениях укажите RichText адрес сервера с помощью [`imageUploadUrl`](api/config/image-upload-url.md): + +~~~jsx {2} +new richtext.Richtext("#root", { + imageUploadUrl: "https://example.com/upload" + // другие свойства конфигурации +}); +~~~ + +Минимальный эндпоинт загрузки должен: + +1. Принимать POST-запрос в формате `multipart/form-data` с полем файла, названным `upload`. +2. Валидировать файл (допустимые типы, максимальный размер). +3. Сохранять файл туда, откуда браузер пользователя сможет его получить (локальный диск, раздаваемый по HTTP, S3, CDN и т.д.). +4. При необходимости изменять размер или иным образом обрабатывать изображение. +5. Возвращать JSON-объект, содержащий `status: "server"`, поле `value` со публичным URL сохранённого файла, а также `width` и `height` изображения в пикселях. + +### Что отправляет клиент {#what-the-client-sends} + +Когда задан [`imageUploadUrl`](api/config/image-upload-url.md), RichText отправляет выбранный файл непосредственно на этот URL (не добавляет `/images` или другой путь), поэтому передаваемый URL является полным адресом для POST-запроса. + +Запрос использует стандартную загрузку через HTML-форму: + +- **Метод:** `POST` +- **Content-Type:** `multipart/form-data` +- **Тело:** одно поле файла с именем `upload` + +### Что ожидает клиент в ответ {#what-the-client-expects-back} + +Сервер должен ответить JSON-объектом. RichText читает следующие поля: + +| Поле | Тип | Значение | +| -------- | ------- | ----------------------------------------------------------------------- | +| `status` | string | Маркер успеха — возвращайте `"server"` при успешной загрузке. Загрузчик использует это поле, чтобы отличить завершённую загрузку от неудачной; любое другое значение (например, `"error"`) помечает загрузку как неудачную. Само вставляемое изображение строится из полей `value`, `width` и `height`. | +| `value` | string | URL сохранённого изображения. RichText записывает эту строку дословно в документ как атрибут `src` вставляемого ``. | +| `width` | integer | Ширина вставляемого изображения в пикселях. | +| `height` | integer | Высота вставляемого изображения в пикселях. | + +#### Успешный ответ {#successful-response} + +При успешной загрузке возвращается URL сохранённого изображения и его размеры: + +~~~json +{ + "status": "server", + "value": "https://cdn.example.com/uploads/abc123.png", + "width": 320, + "height": 207 +} +~~~ + +#### Неудачная загрузка {#failed-upload} + +При неудачной загрузке возвращается любой статус, отличный от `"server"`: + +~~~json +{ + "status": "error" +} +~~~ + +### Раздача загруженного изображения {#serve-the-uploaded-image} + +URL из поля `value` — единственная связь между загрузкой и всеми последующими чтениями документа. RichText вставляет URL непосредственно в документ, поэтому любой клиент, открывающий сохранённый контент (сам редактор, экспорт, опубликованная страница), получает изображение по этому URL через обычный `GET`-запрос. + +Это означает: + +- URL должен быть доступен из браузера пользователя, что обычно означает, что он должен быть **абсолютным** +- хост может отличаться от эндпоинта загрузки (например, вы можете принимать загрузки на своём сервере и возвращать URL CDN или объектного хранилища) +- если хост изображения находится на другом источнике, убедитесь, что он разрешает странице загружать изображение (CORS или просто открытый доступ для чтения) +- сервер должен поддерживать работу этого URL до тех пор, пока на него ссылаются документы; RichText не кэширует и не копирует байты + +Структура URL **не** является частью контракта. Пока браузер может выполнить `GET` по URL и получить байты изображения, путь, строка запроса и даже схема полностью определяются бэкендом. + +### Тестирование на демо-сервере {#try-it-against-the-demo-server} + +Для тестирования функции доступен рабочий бэкенд, реализующий этот контракт: + +~~~jsx +new richtext.Richtext("#root", { + imageUploadUrl: "https://docs.dhtmlx.com/richtext-backend/images" + // другие свойства конфигурации +}); +~~~ + +Демо-сервер изменяет размер больших изображений, сохраняет их на диск и возвращает URL, которые сам же и раздаёт. Он предназначен только для ознакомления и демонстраций. Не используйте его в продакшн-редакторах. + +**Связанные статьи:** + +- [Конфигурация](guides/configuration.md) +- [`imageUploadUrl`](api/config/image-upload-url.md) 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..0c1421b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/how_to_start.md @@ -0,0 +1,109 @@ +--- +sidebar_label: Начало работы +title: Начало работы +description: Узнайте, как начать работу с DHTMLX RichText из документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Начало работы {#how-to-start} + +Это понятное и исчерпывающее руководство проведёт вас через шаги, необходимые для того, чтобы получить полностью рабочий RichText на странице. + +
+![WYSIWYG-редактор DHTMLX RichText на веб-странице](/img/richtext/classic_mode.png) +
+ +## Шаг 1. Подключение исходных файлов {#step-1-including-source-files} + +Начните с создания HTML-файла и назовите его *index.html*. Затем подключите исходные файлы RichText в созданный файл. + +Необходимы два файла: + +- JS-файл RichText +- CSS-файл RichText + +~~~html {5-6} title="index.html" + + + + How to Start with RichText + + + + + + + +~~~ + +### Установка RichText через npm или yarn {#installing-richtext-via-npm-or-yarn} + +Вы можете импортировать JavaScript RichText в свой проект с помощью пакетного менеджера **yarn** или **npm**. + +#### Установка ознакомительной версии RichText через npm или yarn {#installing-trial-richtext-via-npm-or-yarn} + +:::info[Информация] +Если вы хотите использовать ознакомительную версию RichText, загрузите [**пакет ознакомительной версии RichText**](https://dhtmlx.com/docs/products/dhtmlxRichtext/download.shtml) и следуйте инструкциям в файле *README*. Обратите внимание, что ознакомительная версия RichText доступна только 30 дней. +::: + +#### Установка PRO-версии RichText через npm или yarn {#installing-pro-richtext-via-npm-or-yarn} + +:::info[Информация] +Вы можете получить доступ к приватному **npm** DHTMLX напрямую в [Личном кабинете](https://dhtmlx.com/clients/), сгенерировав логин и пароль для **npm**. Подробное руководство по установке также доступно там. Обратите внимание, что доступ к приватному **npm** предоставляется только при наличии действующей лицензии на RichText. +::: + +## Шаг 2. Создание RichText {#step-2-creating-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 {#step-3-configuring-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), а также [**стили по умолчанию**](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" + }, + // другие настройки + } +}); +~~~ + +## Что дальше {#whats-next} + +Вот и всё. Всего три простых шага — и у вас есть удобный инструмент для редактирования контента. Теперь вы можете начать работать с контентом или продолжить изучение возможностей 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..720c9c2 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/index.md @@ -0,0 +1,176 @@ +--- +sidebar_label: Обзор RichText +title: Обзор RichText +slug: / +description: Документация по DHTMLX JavaScript RichText — обзор библиотеки, руководства разработчика и справочник АПИ, примеры кода и живые демо, а также бесплатная 30-дневная ознакомительная версия DHTMLX RichText. +--- + +# Обзор RichText {#richtext-overview} + +**DHTMLX RichText** — гибкий и лёгкий WYSIWYG-редактор, написанный на JavaScript. Разработанный для удобного редактирования в современных веб-приложениях, RichText предлагает чистый интерфейс, богатые возможности форматирования и полный контроль над отображением контента. Будь то CMS, внутренний административный инструмент или встраиваемый редактор документов — RichText легко интегрируется и настраивается под ваши нужды. + +Компонент **DHTMLX RichText** включает следующие возможности: + +- Два [**режима отображения**](api/config/layout-mode.md) + +- Сериализация контента в HTML, обычный текст и Markdown + +- Настраиваемая [`toolbar`](api/config/toolbar.md) со встроенными и пользовательскими кнопками + +- Статическая [`menubar`](api/config/menubar.md), которую можно показать или скрыть + +- Загрузка изображений с поддержкой серверной [загрузки](api/config/image-upload-url.md) или встраивания в формате base64, богатое форматирование, кастомные стили и полноэкранный режим + +- [Полный доступ к АПИ](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/overview/main_overview.md) и лучшие практики встраивания RichText в ваше приложение. + +## Структура RichText {#richtext-structure} + +### Строка меню {#menubar} + +Строка меню RichText открывает доступ к действиям редактирования: создание нового документа, печать, импорт/экспорт контента и другое. По умолчанию она скрыта. + +Используйте свойство [`menubar`](api/config/menubar.md), чтобы управлять её видимостью. Строку меню можно включить или отключить, однако её содержимое на данный момент не настраивается. + +
+![Строка меню DHTMLX RichText с командами для работы с документом](/img/richtext/menubar.png) +
+ +### Панель инструментов {#toolbar} + +Панель инструментов RichText обеспечивает быстрый доступ к форматированию текста и структурному редактированию. По умолчанию [панель инструментов](api/config/toolbar.md#default-config) включена и отображает предопределённый набор часто используемых элементов управления: жирный шрифт, курсив, настройки шрифта, форматирование списков и другое. + +Свойство [`toolbar`](api/config/toolbar.md) позволяет полностью настроить содержимое и раскладку панели инструментов. Вы можете включить или отключить панель, переупорядочить стандартные элементы или задать полностью кастомную панель с помощью массива идентификаторов предопределённых кнопок и объектов пользовательских кнопок. + +
+![Панель инструментов DHTMLX RichText с элементами форматирования текста](/img/richtext/toolbar.png) +
+ +### Редактор {#editor} + +Редактор RichText — центральная область, в которой пользователи создают и форматируют контент. Вы можете управлять внешним видом и поведением редактора через параметры конфигурации: [`value`](api/config/value.md), [`layoutMode`](api/config/layout-mode.md) и [`defaultStyles`](api/config/default-styles.md). RichText также поддерживает кастомные стили, встраивание изображений и адаптивную раскладку в соответствии с требованиями вашего приложения. + +#### Два режима работы {#two-working-modes} + +DHTMLX RichText может работать с контентом в режимах «classic» и «document». Выберите наиболее удобный режим для редактирования текста. Используйте свойство [`layoutMode`](api/config/layout-mode.md), чтобы переключать режимы программно. + +- `"classic"` + +
+![Редактор DHTMLX RichText в классическом режиме разметки](/img/richtext/classic_mode.png) +
+ +- `"document"` + +
+![Редактор DHTMLX RichText в режиме документа](/img/richtext/document_mode.png) +
+ +## Поддерживаемые форматы {#supported-formats} + +Редактор RichText поддерживает [разбор](api/methods/set-value.md) и [сериализацию](api/methods/get-value.md) контента в форматах **HTML**, **обычный текст** и **Markdown**. + +#### Формат HTML {#html-format} + +
+![Содержимое DHTMLX RichText, сериализованное в формат HTML](/img/richtext/html_format.png) +
+ +#### Текстовый формат {#text-format} + +
+![Содержимое DHTMLX RichText, сериализованное в обычный текст](/img/richtext/text_format.png) +
+ +#### Формат Markdown {#markdown-format} + +Передайте встроенные энкодеры `markdown` в [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md), чтобы загружать или сериализовывать контент в формате Markdown: + +~~~jsx +const editor = new richtext.Richtext("#root", { + value: "Hello world" + // остальные свойства конфигурации +}); + +// загрузка Markdown в редактор +editor.setValue("# Title\n\nParagraph", richtext.markdown.fromMarkdown); + +// чтение содержимого редактора как Markdown +const md = editor.getValue(richtext.markdown.toMarkdown); +~~~ + +:::note[Примечание] +Поддержка Markdown охватывает ограниченное подмножество синтаксиса — распространённые блочные и строчные элементы: заголовки, абзацы, переносы строк, выделение, цитаты, списки и ссылки. Форматирование, не имеющее аналога в Markdown (семейство шрифта, размер шрифта, цвета, выравнивание, межстрочный интервал), при сериализации отбрасывается. + +Вложенные строчные структуры не поддерживаются, за исключением **жирного внутри курсива**. Комбинации вида «жирный внутри ссылки», «курсив внутри элемента списка» или многоуровневые (вложенные) списки отображаться корректно не будут. +::: + +## Копирование и вставка {#copy-and-paste} + +Редактор RichText поддерживает операции с буфером обмена через стандартные системные сочетания клавиш (`Ctrl+C` / `Ctrl+X` / `Ctrl+V` на Windows/Linux, `⌘+C` / `⌘+X` / `⌘+V` на macOS), соответствующие кнопки [панели инструментов](api/config/toolbar.md) и пункты [строки меню](api/config/menubar.md). + +При копировании или вырезании контента RichText записывает в системный буфер обмена два представления: + +- версию в **обычном тексте** для совместимости с простыми целевыми приложениями (терминалы, редакторы кода, простые поля ввода) +- версию в **HTML**, сохраняющую всё строчное и блочное форматирование (жирный, курсив, подчёркивание, зачёркивание, семейство и размер шрифта, цвет текста и фона, заголовки, цитаты, списки, выравнивание, отступы, межстрочный интервал, ссылки и изображения) + +Поведение при вставке зависит от источника содержимого буфера обмена: + +- Вставка между двумя экземплярами RichText (в одном документе или на разных страницах) использует HTML-представление и сохраняет исходное форматирование. +- Вставка из любого внешнего источника — браузеров, текстовых процессоров и других редакторов — обрабатывается как обычный текст. Вставляемый контент добавляется без внешнего форматирования. + +:::note[Примечание] +Кнопка **Вставить** на панели инструментов использует асинхронный Clipboard API, который предоставляет только обычный текст. Чтобы вставить контент, скопированный из другого RichText, с сохранением форматирования, используйте сочетание `Ctrl+V` / `⌘+V` — оно получает полный HTML-пакет непосредственно из события clipboard браузера. +::: + +## Сочетания клавиш {#keyboard-shortcuts} + +Редактор RichText поддерживает набор стандартных сочетаний клавиш для ускоренного форматирования и редактирования. Сочетания соответствуют платформенным соглашениям и доступны как на **Windows/Linux** (`Ctrl`), так и на **macOS** (`⌘`). + +### Форматирование текста {#text-formatting} + +| Действие | Windows/Linux | macOS | +|-----------------|-----------------|---------------| +| Жирный* | `Ctrl+B` | `⌘B` | +| Курсив | `Ctrl+I` | `⌘I` | +| Подчёркивание | `Ctrl+U` | `⌘U` | +| Зачёркивание | `Ctrl+Shift+X` | `⌘⇧X` | + +### Редактирование {#editing} + +| Действие | Windows/Linux | macOS | +|-----------------|--------------------------|---------------| +| Отменить | `Ctrl+Z` | `⌘Z` | +| Повторить | `Ctrl+Y` / `Ctrl+Shift+Z`| `⌘Y` / `⌘⇧Z` | +| Вырезать | `Ctrl+X` | `⌘X` | +| Копировать | `Ctrl+C` | `⌘C` | +| Вставить | `Ctrl+V` | `⌘V` | +| Удалить слово | `Ctrl+Backspace` / `Ctrl+Delete` | `⌥⌫` / `⌥⌦` | +| Удалить строку | — | `⌘⌫` / `⌘⌦` | + +### Отступы {#indentation} + +| Действие | Windows/Linux | macOS | +|----------------------------|---------------|-------| +| Увеличить отступ блока / вложить список | `Tab` | `⇥` | +| Уменьшить отступ блока / поднять список | `Shift+Tab` | `⇧⇥` | + +### Специальные действия {#special-actions} + +| Действие | Windows/Linux | macOS | +|-----------------|---------------|-------| +| Вставить ссылку | `Ctrl+K` | `⌘K` | +| Печать | `Ctrl+P` | `⌘P` | + +:::info[Информация] +В будущих обновлениях могут быть добавлены дополнительные сочетания клавиш. +::: + +Чтобы получить актуальный справочник сочетаний клавиш RichText, нажмите **Help** и выберите пункт **Keyboard shortcuts**: + +
+![Окно со справкой по сочетаниям клавиш DHTMLX RichText](/img/richtext/shortcut_reference.png) +
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..f2037db --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/news/migration.md @@ -0,0 +1,167 @@ +--- +sidebar_label: Миграция на новые версии +title: Миграция на новые версии +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о миграции на новые версии. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Миграция на новые версии {#migration-to-newer-versions} + +## 1.2 -> 2.0 + +### Миграция свойств {#properties-migration} + +| Устаревшее свойство | Заменено на | Примечания | +| ------------------- | ------------------------- | ---------------------------------------------- | +| `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"`. + +### Миграция методов {#methods-migration} + +| Устаревший метод | Новый эквивалент | Примечания | +| ----------------------- | ------------------------------------ | -------------------------------------------------------------------- | +| `getValue(mode)` | `getValue(encoder)` | Вместо строковых режимов используются энкодеры; требуется отдельный импорт | +| `setValue(value, mode)` | `setValue(value, encoder)` | Вместо строковых режимов используются энкодеры; требуется отдельный импорт | +| `getStats()` | *Удалено* | Нет замены; требуется ручная реализация | +| `getEditorAPI()` | *Удалено* | Внутренний; используйте публичный АПИ | +| `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){ + // ваш код здесь +}); + +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) {#--fire--use-exec-and-intercept} + +```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/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..2710dbe --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/news/whats_new.md @@ -0,0 +1,256 @@ +--- +sidebar_label: Что нового +title: Что нового +description: Ознакомьтесь с новыми возможностями DHTMLX RichText и историей выпусков в документации библиотеки DHTMLX JavaScript UI. Изучайте руководства для разработчиков и справочник АПИ, пробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +## Версия 2.1 {#version-21} + +Выпущена 22 июня 2026 года + +### Новые возможности {#new-functionality} + +- [`imageUploadUrl`](api/config/image-upload-url.md) является необязательным: если параметр не указан, изображения вставляются встроенно в виде base64 data URL без необходимости в сервере +- Вставка изображений перетаскиванием: переносите файл изображения прямо в область редактора +- Поддержка Markdown: разбор и сериализация содержимого редактора в Markdown через кодировщик `markdown` в методах [`setValue()`](api/methods/set-value.md), [`getValue()`](api/methods/get-value.md) и [`insertValue()`](api/methods/insert-value.md) (см. пример [RichText. Работа с различными форматами (Markdown, HTML, текст)](https://snippet.dhtmlx.com/cne4kujn?tag=richtext)) +- Упоминания, теги и пользовательские триггеры выпадающего списка через свойство [`triggers`](api/config/triggers.md): введите символ `@`, `#`, `/` или `:`, чтобы открыть выпадающий список подсказок и вставить выбранный элемент как нередактируемый токен (см. руководство [Упоминания и теги](guides/mentions_and_tags.md) и пример [RichText. Упоминания, теги и асинхронный поиск](https://snippet.dhtmlx.com/nfvvfize?tag=richtext)) +- Пользовательский рендеринг элементов подсказок через свойство [`triggerTemplate`](api/config/trigger-template.md) (например, аватар с именем и адресом электронной почты) (см. пример [RichText. Пользовательский шаблон выпадающего списка для каждого триггера](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext)) +- Пользовательское действие при выборе триггера: выполните собственный код (вставьте эмодзи, запустите команду в стиле slash и другое) вместо вставки токена (см. примеры [RichText. Автодополнение эмодзи](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) и [RichText. Slash-команды](https://snippet.dhtmlx.com/e0mrmyam?tag=richtext)) +- Поддержка буфера обмена (копирование, вырезание и вставка) с сохранением форматирования между экземплярами RichText и вставкой внешнего содержимого как простого текста +- Горячие клавиши удаления слова и строки: удаление предыдущего/следующего слова с помощью `Ctrl+Backspace` / `Ctrl+Delete` (Windows/Linux) или `Opt+Backspace` / `Opt+Delete` (macOS); удаление предыдущей/следующей визуальной строки с помощью `Cmd+Backspace` / `Cmd+Delete` (только macOS) +- Новые горячие клавиши изменения отступа блока: увеличить отступ блока с помощью `Tab` и уменьшить с помощью `Shift+Tab`; внутри списков те же клавиши вкладывают и поднимают элементы списка + +### Новый АПИ {#new-api} + +#### Новые свойства {#new-properties} + +- [`triggers`](api/config/triggers.md) — определяет триггеры выпадающего списка для вставки упоминаний, тегов и других токенов +- [`triggerTemplate`](api/config/trigger-template.md) — настраивает отображение элементов в выпадающем списке подсказок RichText + +#### Новые методы {#new-methods} + +- [`insertValue()`](api/methods/insert-value.md) — вставляет текст, Markdown или HTML-содержимое в позицию курсора или заменяет выделенный текст (см. пример [RichText. Вставка содержимого в позицию курсора](https://snippet.dhtmlx.com/pew2g1ku?tag=richtext)) + +#### Новые события {#new-events} + +- [`show-suggest`](api/events/show-suggest.md) — срабатывает при открытии выпадающего списка подсказок для настроенного триггера +- [`insert-token`](api/events/insert-token.md) — срабатывает после того, как пользователь выбирает элемент подсказки в выпадающем списке и RichText вставляет его как токен +- [`hide-suggest`](api/events/hide-suggest.md) — срабатывает при закрытии выпадающего списка подсказок + +### Исправления {#fixes} + +- Проблемы со вставкой встроенного содержимого (в том числе содержимого, расположенного внутри или рядом со встроенными элементами, такими как упоминания и изображения) +- Перетаскивание изображения на себя вызывает ошибку + +## Версия 2.0.6 {#version-206} + +Выпущена 28 мая 2026 года + +### Новые возможности {#new-functionality-206} + +- Контекстные кнопки панели инструментов OL/UL, которые переключают или преобразуют списки в зависимости от выделения +- Изменение уровня вложенности списка с помощью кнопок **Увеличить отступ** и **Уменьшить отступ** +- Выход из списка или уменьшение его вложенности нажатием Enter в пустом элементе списка +- Отдельный цвет для посещённых ссылок + +### Новый АПИ {#new-api-206} + +#### Новые события {#new-events-206} + +- [`toggle-list`](api/events/toggle-list.md) — срабатывает, когда пользователь переключает список на выбранных блоках + +### Исправления {#fixes-206} + +- Некорректное горизонтальное выравнивание маркеров списка +- Непоследовательные отступы между нумерованными и маркированными списками +- Очистка форматирования не сбрасывает свойства уровня блока +- Некорректное оформление заголовков и цитат внутри элементов списка +- Посторонний элемент input, видимый внутри горизонтальных линий +- Редактор зависает при вставке горизонтальной линии в середину или конец списка + +## Версия 2.0.5 {#version-205} + +Выпущена 6 марта 2026 года + +### Исправления {#fixes-205} + +- Ввод через IME обрабатывается некорректно +- Ввод на основе композиции (например, китайский, японский, корейский на компьютере) обрабатывается некорректно +- Свойства `margin-left` и `line-height` игнорируются при разборе HTML +- Встроенные элементы наследуют свойства родительских блочных элементов +- Невозможно скопировать текст между двумя экземплярами редактора +- Выделение обрабатывается некорректно при активных двух (или более) экземплярах редактора +- Курсор располагается некорректно, когда единственным содержимым абзаца является изображение +- Бесконечное оборачивание элементов нижнего и верхнего индекса +- При вставке изображений они вставляются встроенно вместо предварительной загрузки +- Пустые встроенные блоки не могут быть удалены в определённых позициях (первая или последняя строка) +- Редактор не прокручивается до курсора при наборе текста +- Ввод на Android обрабатывается некорректно +- Некорректная обработка выделения для элементов HR +- Некорректный рендеринг с пустыми начальными значениями +- Копирование содержимого может завершаться ошибкой, если оно содержит самозакрывающиеся блоки +- Chrome: невозможно вставить эмодзи из контекстного меню +- Firefox: выделение всего текста (CTRL+A) обрабатывается некорректно + +## Версия 2.0.4 {#version-204} + +Выпущена 15 октября 2025 года + +### Исправления {#fixes-204} + +- Некорректное выделение диапазона для абзацев +- Всплывающие окна ссылок не отображаются рядом с изображениями-ссылками +- Начальные значения панели инструментов не соответствуют фактическому содержимому + +## Версия 2.0.3 {#version-203} + +Выпущена 27 августа 2025 года + +### Исправления {#fixes-203} + +- Нажатие на горизонтальную линию вызывает ошибку скрипта +- Межстрочный интервал по умолчанию задан некорректно +- Стили содержимого содержат дублирующиеся селекторы +- Блоки простого текста игнорируют изменения стилей при разборе HTML +- Парсер игнорирует экранированные названия шрифтов в HTML +- Парсер игнорирует свойства `margin-left` и `line-height` в HTML + +## Версия 2.0.2 {#version-202} + +Выпущена 4 августа 2025 года + +### Исправления {#fixes-202} + +- Обновлено содержимое пакета + +## Версия 2.0.1 {#version-201} + +Выпущена 30 июля 2025 года + +### Исправления {#fixes-201} + +- Обновлены определения типов для свойства `defaultStyles` + +## Версия 2.0 {#version-20} + +Выпущена 30 июля 2025 года + +:::note[Примечание] +АПИ версии v1.2 несовместим с v2.0. Дополнительную информацию смотрите в [**руководстве по миграции**](news/migration.md). +::: + +### Новые возможности {#new-functionality-20} + +- **Рендеринг текста нового поколения** + Более плавный, быстрый и точный рендеринг текста на основе нового движка + +- **Гибкая настройка панели инструментов** + Полный контроль над панелью инструментов: + - Задайте [отдельные элементы управления панели инструментов](guides/configuration.md/#default-toolbar-controls) и их порядок + - Добавьте [пользовательские элементы управления](guides/configuration.md/#add-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) документов прямо из редактора + +- **Горячие клавиши** + Расширенная поддержка распространённых сочетаний клавиш для форматирования и редактирования + +### Новый АПИ {#new-api-20} + +#### Новые свойства {#new-properties-20} + +- [`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-20} + +- [`setConfig()`](api/methods/set-config.md) — динамически обновляет конфигурацию +- [`setLocale()`](api/methods/set-locale.md) — изменяет локаль на лету + +#### Новые внутренние методы {#new-internal-methods-20} + +- [`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-20} + +Полный список новых событий доступен [здесь](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[Предупреждение] +Не используйте удалённый АПИ в своих проектах!
Дополнительную информацию смотрите в разделе [Миграция](news/migration.md). +::: + +### [Удалённые свойства](news/migration.md#properties-migration) {#removed-properties} + +- [`customStats`](news/migration.md#--customstats) +- [`mode`](news/migration.md#--mode--layoutmode) +- [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar) + +### [Удалённые методы](news/migration.md#methods-migration) {#removed-methods} + +- `exitFullScreen()` +- `fullScreen()` +- `getEditorAPI()` +- `getStats()` +- `paint()` + +### Удалённые внутренние методы {#removed-internal-methods} + +- [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept) + +### Удалённые события {#removed-events} + +- `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..e747b3a --- /dev/null +++ b/i18n/ru/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "Центр разработки", + "description": "The title of the footer links column with title=Development center in the footer" + }, + "link.title.Community": { + "message": "Сообщество", + "description": "The title of the footer links column with title=Community in the footer" + }, + "link.title.Company": { + "message": "Компания", + "description": "The title of the footer links column with title=Company in the footer" + }, + "link.item.label.Download RichText": { + "message": "Скачать 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": "Примеры", + "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/t55alxiy?tag=richtext" + }, + "link.item.label.Blog": { + "message": "Блог", + "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/tag/richtext/" + }, + "link.item.label.Forum": { + "message": "Форум", + "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": "О нас", + "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "Связаться с нами", + "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "Лицензирование", + "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxRichText/#editions-licenses" + } +} diff --git a/i18n/ru/docusaurus-theme-classic/navbar.json b/i18n/ru/docusaurus-theme-classic/navbar.json new file mode 100644 index 0000000..1b69f78 --- /dev/null +++ b/i18n/ru/docusaurus-theme-classic/navbar.json @@ -0,0 +1,26 @@ +{ + "title": { + "message": "Документация JavaScript RichText", + "description": "The title in the navbar" + }, + "logo.alt": { + "message": "Документация DHTMLX RichText", + "description": "The alt text of navbar logo" + }, + "item.label.Examples": { + "message": "Примеры", + "description": "Navbar item with label Examples" + }, + "item.label.Forum": { + "message": "Форум", + "description": "Navbar item with label Forum" + }, + "item.label.Support": { + "message": "Поддержка", + "description": "Navbar item with label Support" + }, + "item.label.Download": { + "message": "Скачать", + "description": "Navbar item with label Download" + } +} diff --git a/i18n/zh/code.json b/i18n/zh/code.json new file mode 100644 index 0000000..9440735 --- /dev/null +++ b/i18n/zh/code.json @@ -0,0 +1,560 @@ +{ + "theme.ErrorPageContent.title": { + "message": "页面已崩溃。", + "description": "The title of the fallback page when the page crashed" + }, + "theme.BackToTopButton.buttonAriaLabel": { + "message": "回到顶部", + "description": "The ARIA label for the back to top button" + }, + "theme.blog.archive.title": { + "message": "历史博文", + "description": "The page & hero title of the blog archive page" + }, + "theme.blog.archive.description": { + "message": "历史博文", + "description": "The page & hero description of the blog archive page" + }, + "theme.blog.paginator.navAriaLabel": { + "message": "博文列表分页导航", + "description": "The ARIA label for the blog pagination" + }, + "theme.blog.paginator.newerEntries": { + "message": "较新的博文", + "description": "The label used to navigate to the newer blog posts page (previous page)" + }, + "theme.blog.paginator.olderEntries": { + "message": "较旧的博文", + "description": "The label used to navigate to the older blog posts page (next page)" + }, + "theme.blog.post.paginator.navAriaLabel": { + "message": "博文分页导航", + "description": "The ARIA label for the blog posts pagination" + }, + "theme.blog.post.paginator.newerPost": { + "message": "较新一篇", + "description": "The blog post button label to navigate to the newer/previous post" + }, + "theme.blog.post.paginator.olderPost": { + "message": "较旧一篇", + "description": "The blog post button label to navigate to the older/next post" + }, + "theme.tags.tagsPageLink": { + "message": "查看所有标签", + "description": "The label of the link targeting the tag list page" + }, + "theme.colorToggle.ariaLabel.mode.system": { + "message": "跟随系统", + "description": "The name for the system color mode" + }, + "theme.colorToggle.ariaLabel.mode.light": { + "message": "浅色模式", + "description": "The name for the light color mode" + }, + "theme.colorToggle.ariaLabel.mode.dark": { + "message": "暗黑模式", + "description": "The name for the dark color mode" + }, + "theme.colorToggle.ariaLabel": { + "message": "切换浅色/暗黑模式（当前为{mode}）", + "description": "The ARIA label for the color mode toggle" + }, + "theme.docs.DocCard.categoryDescription.plurals": { + "message": "{count} 个项目", + "description": "The default description for a category card in the generated index about how many items this category includes" + }, + "theme.docs.breadcrumbs.navAriaLabel": { + "message": "页面路径", + "description": "The ARIA label for the breadcrumbs" + }, + "theme.docs.paginator.navAriaLabel": { + "message": "文件选项卡", + "description": "The ARIA label for the docs pagination" + }, + "theme.docs.paginator.previous": { + "message": "上一页", + "description": "The label used to navigate to the previous doc" + }, + "theme.docs.paginator.next": { + "message": "下一页", + "description": "The label used to navigate to the next doc" + }, + "theme.docs.tagDocListPageTitle.nDocsTagged": { + "message": "{count} 篇文档带有标签", + "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}「{tagName}」", + "description": "The title of the page for a docs tag" + }, + "theme.docs.versionBadge.label": { + "message": "版本：{versionLabel}" + }, + "theme.docs.versions.unreleasedVersionLabel": { + "message": "此为 {siteTitle} {versionLabel} 版尚未发行的文档。", + "description": "The label used to tell the user that he's browsing an unreleased doc version" + }, + "theme.docs.versions.unmaintainedVersionLabel": { + "message": "此为 {siteTitle} {versionLabel} 版的文档，现已不再积极维护。", + "description": "The label used to tell the user that he's browsing an unmaintained doc version" + }, + "theme.docs.versions.latestVersionSuggestionLabel": { + "message": "最新的文档请参阅 {latestVersionLink} ({versionLabel})。", + "description": "The label used to tell the user to check the latest version" + }, + "theme.docs.versions.latestVersionLinkLabel": { + "message": "最新版本", + "description": "The label used for the latest version suggestion link label" + }, + "theme.common.editThisPage": { + "message": "编辑此页", + "description": "The link label to edit the current page" + }, + "theme.common.headingLinkTitle": { + "message": "{heading}的直接链接", + "description": "Title for link to heading" + }, + "theme.lastUpdated.atDate": { + "message": "于 {date} ", + "description": "The words used to describe on which date a page has been last updated" + }, + "theme.lastUpdated.byUser": { + "message": "由 {user} ", + "description": "The words used to describe by who the page has been last updated" + }, + "theme.lastUpdated.lastUpdatedAtBy": { + "message": "最后{byUser}{atDate}更新", + "description": "The sentence used to display when a page has been last updated, and by who" + }, + "theme.navbar.mobileVersionsDropdown.label": { + "message": "选择版本", + "description": "The label for the navbar versions dropdown on mobile view" + }, + "theme.NotFound.title": { + "message": "找不到页面", + "description": "The title of the 404 page" + }, + "theme.tags.tagsListLabel": { + "message": "标签：", + "description": "The label alongside a tag list" + }, + "theme.admonition.caution": { + "message": "警告", + "description": "The default label used for the Caution admonition (:::caution)" + }, + "theme.admonition.danger": { + "message": "危险", + "description": "The default label used for the Danger admonition (:::danger)" + }, + "theme.admonition.info": { + "message": "信息", + "description": "The default label used for the Info admonition (:::info)" + }, + "theme.admonition.note": { + "message": "备注", + "description": "The default label used for the Note admonition (:::note)" + }, + "theme.admonition.tip": { + "message": "提示", + "description": "The default label used for the Tip admonition (:::tip)" + }, + "theme.admonition.warning": { + "message": "警告", + "description": "The default label used for the Warning admonition (:::warning)" + }, + "theme.AnnouncementBar.closeButtonAriaLabel": { + "message": "关闭", + "description": "The ARIA label for close button of announcement bar" + }, + "theme.blog.sidebar.navAriaLabel": { + "message": "最近博文导航", + "description": "The ARIA label for recent posts in the blog sidebar" + }, + "theme.DocSidebarItem.expandCategoryAriaLabel": { + "message": "展开侧边栏分类 '{label}'", + "description": "The ARIA label to expand the sidebar category" + }, + "theme.DocSidebarItem.collapseCategoryAriaLabel": { + "message": "折叠侧边栏分类 '{label}'", + "description": "The ARIA label to collapse the sidebar category" + }, + "theme.IconExternalLink.ariaLabel": { + "message": "（在新标签页中打开）", + "description": "The ARIA label for the external link icon" + }, + "theme.NavBar.navAriaLabel": { + "message": "主导航", + "description": "The ARIA label for the main navigation" + }, + "theme.navbar.mobileLanguageDropdown.label": { + "message": "选择语言", + "description": "The label for the mobile language switcher dropdown" + }, + "theme.NotFound.p1": { + "message": "我们找不到您要找的页面。", + "description": "The first paragraph of the 404 page" + }, + "theme.NotFound.p2": { + "message": "请联系原始链接来源网站的所有者，并告知他们链接已损坏。", + "description": "The 2nd paragraph of the 404 page" + }, + "theme.TOCCollapsible.toggleButtonLabel": { + "message": "本页总览", + "description": "The label used by the button on the collapsible TOC component" + }, + "theme.blog.post.readMore": { + "message": "阅读更多", + "description": "The label used in blog post item excerpts to link to full blog posts" + }, + "theme.blog.post.readMoreLabel": { + "message": "阅读 {title} 的全文", + "description": "The ARIA label for the link to full blog posts from excerpts" + }, + "theme.blog.post.readingTime.plurals": { + "message": "阅读需 {readingTime} 分钟", + "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": "复制", + "description": "The copy button label on code blocks" + }, + "theme.CodeBlock.copied": { + "message": "复制成功", + "description": "The copied button label on code blocks" + }, + "theme.CodeBlock.copyButtonAriaLabel": { + "message": "复制代码到剪贴板", + "description": "The ARIA label for copy code blocks button" + }, + "theme.CodeBlock.wordWrapToggle": { + "message": "切换自动换行", + "description": "The title attribute for toggle word wrapping button of code block lines" + }, + "theme.docs.breadcrumbs.home": { + "message": "主页面", + "description": "The ARIA label for the home page in the breadcrumbs" + }, + "theme.docs.sidebar.collapseButtonTitle": { + "message": "收起侧边栏", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.collapseButtonAriaLabel": { + "message": "收起侧边栏", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.navAriaLabel": { + "message": "文档侧边栏", + "description": "The ARIA label for the sidebar navigation" + }, + "theme.docs.sidebar.closeSidebarButtonAriaLabel": { + "message": "关闭导航栏", + "description": "The ARIA label for close button of mobile sidebar" + }, + "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { + "message": "← 回到主菜单", + "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": "切换导航栏", + "description": "The ARIA label for hamburger menu button of mobile navigation" + }, + "theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": { + "message": "展开下拉菜单", + "description": "The ARIA label of the button to expand the mobile dropdown navbar item" + }, + "theme.navbar.mobileDropdown.collapseButton.collapseAriaLabel": { + "message": "折叠下拉菜单", + "description": "The ARIA label of the button to collapse the mobile dropdown navbar item" + }, + "theme.docs.sidebar.expandButtonTitle": { + "message": "展开侧边栏", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.docs.sidebar.expandButtonAriaLabel": { + "message": "展开侧边栏", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.SearchPage.documentsFound.plurals": { + "message": "找到 {count} 份文件", + "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": "「{query}」的搜索结果", + "description": "The search page title for non-empty query" + }, + "theme.SearchPage.emptyResultsTitle": { + "message": "在文档中搜索", + "description": "The search page title for empty query" + }, + "theme.SearchPage.inputPlaceholder": { + "message": "在此输入搜索词", + "description": "The placeholder for search page input" + }, + "theme.SearchPage.inputLabel": { + "message": "搜索", + "description": "The ARIA label for search page input" + }, + "theme.SearchPage.algoliaLabel": { + "message": "由 Algolia 提供", + "description": "The description label for Algolia mention" + }, + "theme.SearchPage.noResultsText": { + "message": "未找到结果", + "description": "The paragraph for empty search result" + }, + "theme.SearchPage.fetchingNewResults": { + "message": "正在获取新的搜索结果...", + "description": "The paragraph for fetching new search results" + }, + "theme.SearchBar.label": { + "message": "搜索", + "description": "The ARIA label and placeholder for search button" + }, + "theme.SearchModal.searchBox.resetButtonTitle": { + "message": "清除查询", + "description": "The label and ARIA label for search box reset button" + }, + "theme.SearchModal.searchBox.cancelButtonText": { + "message": "取消", + "description": "The label and ARIA label for search box cancel button" + }, + "theme.SearchModal.searchBox.placeholderText": { + "message": "搜索文档", + "description": "The placeholder text for the main search input field" + }, + "theme.SearchModal.searchBox.placeholderTextAskAi": { + "message": "再问一个问题……", + "description": "The placeholder text when in AI question mode" + }, + "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": { + "message": "正在回答……", + "description": "The placeholder text for search box when AI is streaming an answer" + }, + "theme.SearchModal.searchBox.enterKeyHint": { + "message": "搜索", + "description": "The hint for the search box enter key text" + }, + "theme.SearchModal.searchBox.enterKeyHintAskAi": { + "message": "回车", + "description": "The hint for the Ask AI search box enter key text" + }, + "theme.SearchModal.searchBox.searchInputLabel": { + "message": "搜索", + "description": "The ARIA label for search input" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonText": { + "message": "返回关键词搜索", + "description": "The text for back to keyword search button" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": { + "message": "返回关键词搜索", + "description": "The ARIA label for back to keyword search button" + }, + "theme.SearchModal.startScreen.recentSearchesTitle": { + "message": "最近搜索", + "description": "The title for recent searches" + }, + "theme.SearchModal.startScreen.noRecentSearchesText": { + "message": "没有最近搜索", + "description": "The text when there are no recent searches" + }, + "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": { + "message": "保存这个搜索", + "description": "The title for save recent search button" + }, + "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": { + "message": "从历史记录中删除这个搜索", + "description": "The title for remove recent search button" + }, + "theme.SearchModal.startScreen.favoriteSearchesTitle": { + "message": "收藏", + "description": "The title for favorite searches" + }, + "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": { + "message": "从收藏列表中删除这个搜索", + "description": "The title for remove favorite search button" + }, + "theme.SearchModal.startScreen.recentConversationsTitle": { + "message": "最近的对话", + "description": "The title for recent conversations" + }, + "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": { + "message": "从历史记录中删除此对话", + "description": "The title for remove recent conversation button" + }, + "theme.SearchModal.errorScreen.titleText": { + "message": "无法获取结果", + "description": "The title for error screen" + }, + "theme.SearchModal.errorScreen.helpText": { + "message": "你可能需要检查网络连接。", + "description": "The help text for error screen" + }, + "theme.SearchModal.resultsScreen.askAiPlaceholder": { + "message": "询问 AI: ", + "description": "The placeholder text for Ask AI input" + }, + "theme.SearchModal.askAiScreen.disclaimerText": { + "message": "回答由 AI 生成，可能会出错。请核实回答内容。", + "description": "The disclaimer text for AI answers" + }, + "theme.SearchModal.askAiScreen.relatedSourcesText": { + "message": "相关来源", + "description": "The text for related sources" + }, + "theme.SearchModal.askAiScreen.thinkingText": { + "message": "正在思考……", + "description": "The text when AI is thinking" + }, + "theme.SearchModal.askAiScreen.copyButtonText": { + "message": "复制", + "description": "The text for copy button" + }, + "theme.SearchModal.askAiScreen.copyButtonCopiedText": { + "message": "已复制！", + "description": "The text for copy button when copied" + }, + "theme.SearchModal.askAiScreen.copyButtonTitle": { + "message": "复制", + "description": "The title for copy button" + }, + "theme.SearchModal.askAiScreen.likeButtonTitle": { + "message": "赞", + "description": "The title for like button" + }, + "theme.SearchModal.askAiScreen.dislikeButtonTitle": { + "message": "踩", + "description": "The title for dislike button" + }, + "theme.SearchModal.askAiScreen.thanksForFeedbackText": { + "message": "感谢您的反馈！", + "description": "The text for thanks for feedback" + }, + "theme.SearchModal.askAiScreen.preToolCallText": { + "message": "正在搜索……", + "description": "The text before tool call" + }, + "theme.SearchModal.askAiScreen.duringToolCallText": { + "message": "正在搜索 ", + "description": "The text during tool call" + }, + "theme.SearchModal.askAiScreen.afterToolCallText": { + "message": "已搜索", + "description": "The text after tool call" + }, + "theme.SearchModal.footer.selectText": { + "message": "选中", + "description": "The select text for footer" + }, + "theme.SearchModal.footer.submitQuestionText": { + "message": "提交问题", + "description": "The submit question text for footer" + }, + "theme.SearchModal.footer.selectKeyAriaLabel": { + "message": "Enter 键", + "description": "The ARIA label for select key in footer" + }, + "theme.SearchModal.footer.navigateText": { + "message": "导航", + "description": "The navigate text for footer" + }, + "theme.SearchModal.footer.navigateUpKeyAriaLabel": { + "message": "向上键", + "description": "The ARIA label for navigate up key in footer" + }, + "theme.SearchModal.footer.navigateDownKeyAriaLabel": { + "message": "向下键", + "description": "The ARIA label for navigate down key in footer" + }, + "theme.SearchModal.footer.closeText": { + "message": "关闭", + "description": "The close text for footer" + }, + "theme.SearchModal.footer.closeKeyAriaLabel": { + "message": "Esc 键", + "description": "The ARIA label for close key in footer" + }, + "theme.SearchModal.footer.searchByText": { + "message": "搜索提供", + "description": "The 'Powered by' text for footer" + }, + "theme.SearchModal.footer.backToSearchText": { + "message": "返回搜索", + "description": "The back to search text for footer" + }, + "theme.SearchModal.noResultsScreen.noResultsText": { + "message": "没有结果：", + "description": "The text when there are no results" + }, + "theme.SearchModal.noResultsScreen.suggestedQueryText": { + "message": "试试搜索", + "description": "The text for suggested query" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsText": { + "message": "认为这个查询应该有结果？", + "description": "The text for reporting missing results" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": { + "message": "请告知我们。", + "description": "The link text for reporting missing results" + }, + "theme.SearchModal.placeholder": { + "message": "搜索文档", + "description": "The placeholder of the input of the DocSearch pop-up modal" + }, + "theme.SearchBar.seeAll": { + "message": "查看全部 {count} 个结果" + }, + "theme.blog.post.plurals": { + "message": "{count} 篇博文", + "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} 含有标签「{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": "作者", + "description": "The title of the authors page" + }, + "theme.blog.authorsList.viewAll": { + "message": "查看所有作者", + "description": "The label of the link targeting the blog authors page" + }, + "theme.blog.author.noPosts": { + "message": "该作者尚未撰写任何文章。", + "description": "The text for authors with 0 blog post" + }, + "theme.contentVisibility.unlistedBanner.title": { + "message": "未列出的页面", + "description": "The unlisted content banner title" + }, + "theme.contentVisibility.unlistedBanner.message": { + "message": "此页面未列出。搜索引擎不会将其编入索引，只有拥有直接链接的用户才能访问。", + "description": "The unlisted content banner message" + }, + "theme.contentVisibility.draftBanner.title": { + "message": "草稿页面", + "description": "The draft content banner title" + }, + "theme.contentVisibility.draftBanner.message": { + "message": "此页面为草稿。它仅在开发环境中可见，并将从生产构建中排除。", + "description": "The draft content banner message" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "重试", + "description": "The label of the button to try again rendering when the React error boundary captures an error" + }, + "theme.common.skipToMainContent": { + "message": "跳到主要内容", + "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": "标签", + "description": "The title of the tag list page" + } +} 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..f176eee --- /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": "最新文章", + "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..0bea971 --- /dev/null +++ b/i18n/zh/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": "新功能与迁移", + "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": "新功能与迁移", + "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 方法", + "description": "The label for category 'RichText methods' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText internal API": { + "message": "RichText 内部 API", + "description": "The label for category 'RichText internal API' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText internal API.link.generated-index.title": { + "message": "内部 API 概览", + "description": "The generated-index page title for category 'RichText internal API' in sidebar 'docs'" + }, + "sidebar.docs.category.Event Bus methods": { + "message": "Event Bus 方法", + "description": "The label for category 'Event Bus methods' in sidebar 'docs'" + }, + "sidebar.docs.category.State methods": { + "message": "State 方法", + "description": "The label for category 'State methods' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText events": { + "message": "RichText 事件", + "description": "The label for category 'RichText events' in sidebar 'docs'" + }, + "sidebar.docs.category.RichText properties": { + "message": "RichText 属性", + "description": "The label for category 'RichText properties' in sidebar 'docs'" + }, + "sidebar.docs.category.Integration with frameworks": { + "message": "与框架集成", + "description": "The label for category 'Integration with frameworks' in sidebar 'docs'" + }, + "sidebar.docs.category.Integration with frameworks.link.generated-index.title": { + "message": "与框架集成", + "description": "The generated-index page title for category 'Integration with frameworks' in sidebar 'docs'" + }, + "sidebar.docs.category.Guides": { + "message": "指南", + "description": "The label for category 'Guides' in sidebar 'docs'" + }, + "sidebar.docs.category.Guides.link.generated-index.title": { + "message": "指南", + "description": "The generated-index page title for category 'Guides' in sidebar 'docs'" + } +} diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/.sync b/i18n/zh/docusaurus-plugin-content-docs/current/.sync new file mode 100644 index 0000000..ae89b0d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/.sync @@ -0,0 +1 @@ +8c89a96ada89b69f200dac7f3e5b216cc76aa8db 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..6085767 --- /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 + +### 描述 {#description} + +@short: 可选。为特定块类型指定默认样式值 + +### 用法 {#usage} + +~~~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` 块。 +::: + +### 默认配置 {#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} +// 初始化 RichText +new richtext.Richtext("#root", { + defaultStyles: { + h4: { + "font-family": "Roboto" + }, + h5: { + "font-family": "Roboto" + }, + h6: { + "font-family": "Roboto" + } + }, + // 其他配置属性 +}); +~~~ + +**更新日志：** 该属性在 v2.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..792625b --- /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 + +### 描述 {#description} + +@short: 可选。启用 RichText 全屏模式 + +### 用法 {#usage} + +~~~jsx {} +fullscreenMode?: boolean; +~~~ + +### 默认配置 {#default-config} + +~~~jsx +fullscreenMode: false; +~~~ + +### 示例 {#example} + +~~~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..c1b81fc --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md @@ -0,0 +1,56 @@ +--- +sidebar_label: imageUploadUrl +title: imageUploadUrl 配置项 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 imageUploadUrl 配置项。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# imageUploadUrl + +### 描述 {#description} + +@short: 可选。指定用于图片上传（来自工具栏、菜单栏、剪贴板粘贴或拖放操作）的 URL + +当该属性被设置时，RichText 会将每张插入的图片上传到指定端点，并插入服务器返回的 URL。 + +当该属性被省略或设置为假值（`""`、`null`、`undefined`）时，RichText 切换到**内联模式**：图片文件在客户端读取，并以 base64 数据 URL 的形式直接嵌入到内容中——无需服务器。大于 1024×800 的内联图片将按比例缩小以适应此限制。 + +:::note[注意] +内联（base64）图片无法通过内置的 DOCX / PDF [导出](api/events/export.md)功能保留。如果您依赖导出功能，请提供 `imageUploadUrl`，使图片引用外部地址。 +::: + +:::caution[谨慎] +Base64 编码会使编码后的数据量相比原始文件增加约三分之一。包含多张大型内联图片的文档体积会相应增长，这将影响 [`getValue()`](api/methods/get-value.md) 返回值的大小、编辑器的内存占用，以及持久化或传输内容的开销。对于包含大量或大尺寸图片的文档，建议使用服务器端 `imageUploadUrl`。 +::: + +### 用法 {#usage} + +~~~jsx {} +imageUploadUrl?: string; +~~~ + +### 示例 {#example} + +将图片上传到服务器端点： + +~~~jsx {3} +// 初始化 RichText +new richtext.Richtext("#root", { + imageUploadUrl: "https://example.com/upload" + // 其他配置属性 +}); +~~~ + +以 base64 方式内联插入图片（无需服务器）——省略该属性或传入空字符串： + +~~~jsx {2} +new richtext.Richtext("#root", { + // imageUploadUrl 未设置，图片将以 base64 数据 URL 的形式插入 + // 其他配置属性 +}); +~~~ + +**更新日志：** 该属性在 v2.0 中新增。自 v2.1 起，该属性为可选：省略时，图片将以 base64 数据 URL 的形式内联插入。 + +**相关文章：** [配置](guides/configuration.md)，[与服务器配合使用](guides/working_with_server.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..04d53f7 --- /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 + +### 描述 {#description} + +@short: 可选。指定主编辑区域的布局模式 + +### 用法 {#usage} + +~~~jsx {} +layoutMode: "classic" | "document"; +~~~ + +`"classic"` 模式将填充整个编辑区域。`"document"` 模式将编辑区域显示为文档页面。 + +### 默认配置 {#default-config} + +~~~jsx +layoutMode: "classic"; +~~~ + +### 示例 {#example} + +~~~jsx {3} +// 初始化 RichText +new richtext.Richtext("#root", { + layoutMode: "document" // 默认使用 "document" 模式初始化 RichText + // 其他配置属性 +}); +~~~ + +**变更日志：** 该属性在 v2.0 中新增，用于替代已移除的 `mode` 属性 + +**相关文章：** [配置](guides/configuration.md) + +**相关示例：** [RichText. 初始化](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..58bc2b9 --- /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 + +### 描述 {#description} + +@short: 可选。一个包含 RichText 本地化标签的对象 + +:::info[信息] +`locale` 对象需要包含 RichText 的所有标签及对应的翻译内容。 +::: + +### 用法 {#usage} + +~~~jsx {} +locale?: object; +~~~ + +### 默认配置 {#default-config} + +默认情况下，RichText 使用**英语**语言包。您也可以将其设置为自定义语言包。 + +:::tip[提示] +如需动态切换当前语言包，可以使用 RichText 的 [`setLocale()`](api/methods/set-locale.md) 方法 +::: + +### 示例 {#example} + +~~~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/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..90ffb4d --- /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 + +### 描述 {#description} + +@short: 可选。启用 RichText 顶部菜单栏 + +### 用法 {#usage} + +~~~jsx {} +menubar?: boolean; +~~~ + +### 示例 {#example} + +~~~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..7866b90 --- /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 + +### 描述 {#description} + +@short: 可选。启用工具栏，并允许用户指定/配置工具栏中显示的按钮 + +### 用法 {#usage} + +~~~jsx {} +toolbar?: boolean | Array any }>; +~~~ + +#### 工具栏中的可用按钮 {#available-buttons-within-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)之间切换（classic/document）| +| `shortcuts` | 显示可用键盘快捷键列表。 | +| `separator` | 在工具栏分组之间添加视觉分隔符。 | + +您可以使用这些字符串按如下方式配置工具栏按钮： + +~~~jsx {2-7} +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // 其他按钮 + ], + // 其他配置属性 +}); +~~~ + +#### 工具栏中的自定义按钮 {#custom-buttons-within-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", + }, + // 用户若要使用预定义控件（如 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: () => {/* 自定义逻辑 */} + } + ], + // 其他配置属性 +}); +~~~ + +#### 隐藏工具栏 {#hide-toolbar} + +如果需要隐藏工具栏，请将 `toolbar` 属性设置为 `false`，如下所示： + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false + // 其他配置属性 +}); +~~~ + +### 默认配置 {#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[提示] +RichText 组件导出了默认工具栏控件，可通过 `richtext.defaultToolbarButtons` 访问。 + +```jsx{4} +// 初始化 RichText +new richtext.Richtext("#root", { + toolbar: [ + ...richtext.defaultToolbarButtons, + { + type: "button", + id: "btn1", // 按钮 ID（若要应用自定义逻辑，不能与现有按钮 ID 重复） + icon: "wxo-help", // 按钮图标（与标签组合显示） + css: "rounded", // 分配给控件的 CSS 类名（默认支持的类：wx-primary、wx-secondary） + label: "Custom button", // 按钮标签（与图标组合显示） + tooltip: "Some tooltip", // 悬停时显示的提示信息（若未指定，则使用 "label" 的值） + } + ] + // 其他配置属性 +}); +``` +::: + +### 示例 {#example} + +~~~jsx {3-18} +// 初始化 RichText +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // 自定义按钮（以下使用了所有支持的选项） + // 用户目前只能定义自定义按钮（暂不支持 richselect/colorpicker） + { + type: "button", + id: "btn1", // 按钮 ID（若要应用自定义逻辑，不能与现有按钮 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. 自定义控件与简化工具栏](https://snippet.dhtmlx.com/wda202ih?tag=richtext) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/trigger-template.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/trigger-template.md new file mode 100644 index 0000000..166de2b --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/trigger-template.md @@ -0,0 +1,73 @@ +--- +sidebar_label: triggerTemplate +title: triggerTemplate 配置项 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 triggerTemplate 配置项。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# triggerTemplate + +### 描述 {#description} + +@short: 可选。自定义 RichText 在由 [`triggers`](api/config/triggers.md) 条目触发的建议下拉菜单中渲染各项内容的方式 + +默认情况下，下拉菜单以纯文本形式显示每个项目的 `label`。使用 `triggerTemplate` 可以渲染更丰富的行内容，例如头像加姓名和电子邮件。 + +### 用法 {#usage} + +~~~jsx {} +function triggerTemplate({ data, trigger }) { + return "HTML template of the suggestion item"; +}; +~~~ + +### 参数 {#parameters} + +回调函数接受一个包含以下参数的对象： + +- `data` - 当前建议项（`{ id, label, url }`，以及您添加到 trigger 的 `data` 数据源中的任何自定义字段） +- `trigger` - 打开下拉菜单的触发字符（`"@"`、`"#"` 等） + +:::tip[提示] +下拉菜单的默认宽度为 `160px`。如果您的模板需要更多空间，请在选择器前添加 `.wx-editor` 父级： + +~~~css {} +.wx-editor .wx-suggest-anchor { + width: 220px; +} +~~~ +::: + +### 示例 {#example} + +以下代码片段配置了两个触发器：`@` 用于提及，`#` 用于标签。使用 `triggerTemplate` 扩展 `trigger` 值以不同方式渲染每个下拉菜单。对于 `@` 下拉菜单，模板返回一个带有头像（`data.image`）、昵称（`data.label`）和全名（`data.name`）的自定义 HTML 行。对于 `#` 触发器，模板使用 `label`： + +~~~jsx {5-6,8-15} +const { template, Richtext } = richtext; + +new Richtext("#root", { + triggers: [ + { trigger: "@", data: people }, + { trigger: "#", data: tags } + ], + triggerTemplate: template(obj => { + if (obj.trigger === "@") { + return `
+ +
${obj.data.label}
+
${obj.data.name}
+
`; + } + // 其他触发器（例如 "#"）使用纯文本 label + return obj.data.label; + }) +}); +~~~ + +**更新日志：** 该属性在 v2.1 中新增 + +**相关示例：** + +- [RichText. 自定义每个触发器的下拉模板](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext) +- [RichText. 表情符号自动补全](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) + +**相关文章：** [提及与标签](guides/mentions_and_tags.md) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/triggers.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/triggers.md new file mode 100644 index 0000000..84ee30c --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/triggers.md @@ -0,0 +1,250 @@ +--- +sidebar_label: triggers +title: triggers 配置项 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 triggers 配置项。浏览开发指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# triggers + +### 描述 {#description} + +@short: 可选。定义用于插入提及、标签及其他标记的下拉触发器 + +当用户输入已配置的字符（例如 `@` 或 `#`）时，RichText 会打开一个包含预定义条目的下拉列表。当用户选择某个条目时，RichText 会将其作为不可编辑的标记（``）插入文档中。 + +### 用法 {#usage} + +~~~jsx {} +triggers?: Array<{ + trigger: string, + data: Array<{ id?: string | number; label?: string; url?: string }> + | ((query: string) => + Array<{ id?: string | number; label?: string; url?: string }> + | Promise>), + showTrigger?: boolean, + action?: (item) => void +}>; +~~~ + +### 参数 {#parameters} + +`triggers` 数组中的每个条目接受以下字段： + +- `trigger` —（必填）打开建议下拉列表的字符（例如 `"@"`、`"#"`、`"/"`、`"$"`） +- `data` —（必填）下拉列表的数据源；可以是数组、同步函数或异步函数。参见[数据源形式](#data-source-forms) +- `showTrigger` —（可选）当值为 `true`（默认值）时，RichText 在插入的标记中保留触发字符（例如 `@Alice`）；当值为 `false` 时，RichText 仅插入 `label`（例如 `Alice`） +- `action` —（可选）当用户选择条目时调用的自定义 callback。设置后，RichText 会删除已输入的触发文本（触发字符加查询字符串），并调用 `action(item)`，**而不是**插入标记。该 callback 接收选中的条目，可以插入任意内容来替代所选内容。`action` 参数优先于 `showTrigger`，设置 `action` 后 `showTrigger` 无效。参见[自定义 action](#custom-action) + +### 数据源形式 {#data-source-forms} + +* **静态数组** — RichText 通过将查询字符串与 `label` 进行匹配（不区分大小写，使用 `startsWith`）自动过滤数组： + +~~~jsx {3-7} +new richtext.Richtext("#root", { + triggers: [{ + trigger: "@", + data: [ + { id: "alice", label: "Alice" }, + { id: "bob", label: "Bob" } + ] + }] +}); +~~~ + +* **同步函数** — RichText 以当前 `query` 字符串为参数调用您的函数；由您执行过滤并返回匹配的数组： + +~~~jsx {3-6} +new richtext.Richtext("#root", { + triggers: [{ + trigger: "#", + data: query => tags.filter(t => + t.label.toLowerCase().startsWith(query.toLowerCase()) + ) + }] +}); +~~~ + +* **异步函数** — RichText 以当前 `query` 字符串为参数调用您的函数；返回一个解析为匹配数组的 `Promise`。适用于服务端搜索： + +~~~jsx {3-8} +new richtext.Richtext("#root", { + triggers: [{ + trigger: "+", + data: async query => { + const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`); + const users = await res.json(); + return users.map(u => ({ id: String(u.id), label: u.name, url: u.website })); + } + }] +}); +~~~ + +### 建议条目字段 {#suggestion-item-fields} + +`data` 中的每个条目（或函数返回的每个条目）具有以下字段： + +- `id` —（可选）保存在插入标记上的唯一标识符。如果省略，RichText 会自动生成一个 ID +- `label` —（可选）在下拉列表中显示并插入文档的文本。仅在使用默认渲染时为必填项；使用自定义 [`triggerTemplate`](api/config/trigger-template.md) 时，您可以从其他字段渲染条目（例如 `template(({ data }) => data.id)`），并省略 `label` +- `url` —（可选）与条目关联的 URL。RichText 将该 URL 存储为插入标记的 `href` 属性。`Ctrl+Click` 标记可打开链接 + +条目还可以包含 `id`、`label` 和 `url` 之外的任意数量的自定义字段（例如，用于 emoji 的 `code`，或用于头像的 `image` 和 `name`）。这些额外字段会传递给 [`triggerTemplate`](api/config/trigger-template.md) callback 和 `action` callback。 + +### 渲染的标记 {#rendered-token} + +当用户在下拉列表中选择条目时，RichText 会向文档中插入一个不可编辑的标记元素： + +~~~html {} +@Alice +~~~ + +- `@`（在 `data-token="@"` 中）— 条目的 `trigger` +- `alice`（在 `data-token-id="alice"` 中）— 条目的 `id` +- `mailto:alice@example.com`（在 `href="mailto:alice@example.com"` 中）— 条目的 `url` +- `@Alice` — `trigger` 与 `label` 的组合；当 `showTrigger: false` 时，仅显示 `Alice` + +使用 `data-token` 和 `data-token-id` 属性通过 CSS 定位标记，例如高亮显示某个用户的所有提及： + +~~~css {} +.wx-editor-content a[data-token="@"][data-token-id="alice"] { + background: #fb8500; + color: #fff; +} +~~~ + +### 自定义 action {#custom-action} + +默认情况下，当用户选择条目时，RichText 会将该条目作为标记插入文档。设置 `action` 参数可改为运行您的自定义代码：RichText 会删除已输入的触发字符串（触发字符和查询字符串），并以选中条目为参数调用 `action(item)` callback。由于不会插入标记，您可以自行决定向文档添加的内容（或运行自定义代码）。`action` 参数优先于 `showTrigger`。设置 `action` 后，`showTrigger` 将被忽略。 + +#### 插入 emoji {#add-emoji} + +一个常见用例是通过 `:` 触发器插入 emoji，其中每个条目包含一个自定义 `code` 字段。将 `action` 与 [`triggerTemplate`](api/config/trigger-template.md) 配合使用，可以在下拉列表中直接显示 emoji 本身，而不仅仅是其标签： + +~~~jsx {8,12} +const { template, Richtext } = richtext; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: emoji, // [{ id: "apple", label: "apple", code: "1F34E" }, ...] + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // 在下拉菜单中渲染表情符号本身（而不仅仅是其标签） + triggerTemplate: template(({ data }) => `${emojiFromCode(data.code)} ${data.label}`) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} +~~~ + +#### 按分类分组 emoji {#group-emoji-by-categories} + +当 `data` 参数是函数时，您不受内置 `label` 匹配的限制，可以运行自定义过滤逻辑，并在下拉列表中保留分类标题。添加包含 `label` 字段但不含 `code` 的标题条目。`data` 函数首先找到与查询匹配的 emoji，然后将 emoji 连同仍有匹配项的分类标题一起返回： + +~~~jsx {18-26,31-33,41} +const { template, Richtext } = richtext; + +// 标题条目不含 `code` 字段；表情符号条目则包含 +const emoji = [ + { id: "$smileys", label: "Smileys", category: 1 }, // 分类 + { id: "grinning", label: "grinning", code: "1F600", category: 1 }, + { id: "smile", label: "smile", code: "1F604", category: 1 }, + { id: "$animals", label: "Animals", category: 2 }, // 分类 + { id: "dog", label: "dog", code: "1F436", category: 2 }, + { id: "cat", label: "cat", code: "1F431", category: 2 } +]; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: query => { + const matched = emoji.filter(item => + item.code && + item.label.toLowerCase().startsWith(query.toLowerCase().trim()) + ); + const categories = new Set(matched.map(item => item.category)); + // 保留匹配的表情符号以及仍有匹配项的分类标题 + return emoji.filter(item => + item.code ? matched.includes(item) : categories.has(item.category) + ); + }, + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // 正常渲染表情符号行，并以粗体渲染分类标题 + triggerTemplate: template(({ data }) => + data.code ? `${emojiFromCode(data.code)} ${data.label}` : `${data.label}` + ) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} + +// 标题不含 `code` —— 忽略对它们的选择，使其永远不会被插入 +editor.api.intercept("insert-token", ({ data }) => !!data.code); +~~~ + +#### 添加斜杠风格命令菜单 {#add-slash-style-command-menu} + +您可以使用 `action` 构建斜杠风格的命令菜单（类似 Notion 或 Slack 中的 `/`）。将命令名称存储在每个条目的 `id` 中，将其选项存储在自定义 `config` 字段中，然后通过 callback 使用 [`api.exec`](api/internal/exec.md) 执行命令： + +~~~jsx {13} +// 每个条目在 `id` 中存储一个 api.exec 操作名称，在 `config` 中存储其参数 +const commands = [ + { id: "set-text-style", label: "Heading 1", config: { tag: "h1" } }, + { id: "insert-list", label: "Bulleted list", config: { type: "bulleted" } }, + { id: "insert-line", label: "Divider" } // 无 config → 应用 `|| {}` +]; + +const editor = new richtext.Richtext("#root", { + triggers: [ + { + trigger: "/", + data: commands, + action: item => editor.api.exec(item.id, item.config || {}) + } + ] +}); +~~~ + +### 示例 {#example} + +以下示例设置了两个触发器：`@` 用于提及（每个条目包含一个 `url`，该 URL 将成为标记的 `href`），`#` 用于标签（仅含标签文本）： + +~~~jsx {4,11} +new richtext.Richtext("#root", { + triggers: [ + { + trigger: "@", + data: [ + { id: "alice", label: "Alice", url: "mailto:alice@example.com" }, + { id: "bob", label: "Bob", url: "mailto:bob@example.com" } + ] + }, + { + trigger: "#", + data: [ + { id: "css", label: "CSS" }, + { id: "html", label: "HTML" } + ] + } + ] +}); +~~~ + +**变更日志：** 该属性在 v2.1 中添加 + +**相关示例：** + +- [RichText. 提及、标签与异步查询](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) +- [RichText. 每个触发器的自定义下拉模板](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext) +- [RichText. Emoji 自动补全](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) +- [RichText. 斜杠命令](https://snippet.dhtmlx.com/e0mrmyam?tag=richtext) +- [RichText. 查找并高亮提及](https://snippet.dhtmlx.com/8y6zvzh2?tag=richtext) +- [RichText. 高亮所有提及](https://snippet.dhtmlx.com/2rbo12jx?tag=richtext) + +**相关文章：** [提及与标签](guides/mentions_and_tags.md) 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..36c0844 --- /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 + +### 描述 {#description} + +@short: 可选。指定在 RichText 编辑器区域中显示的初始值（内容） + +:::tip[提示] +如果您希望使用自定义格式设置值（内容），请使用内置的 [`setValue()`](api/methods/set-value.md) 方法。 +::: + +### 用法 {#usage} + +~~~jsx {} +value?: string; +~~~ + +### 示例 {#example} + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" // 设置默认值（HTML 格式） + // 其他配置属性 +}); +~~~ + +**更新日志：** 该属性在 v2.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..b5d6069 --- /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 + +### 描述 {#description} + +@short: 当通过菜单栏/工具栏或 Event Bus 方法更改文本对齐方式时触发 + +### 用法 {#usage} + +~~~jsx {} +"align": ({ + align: "left" | "center" | "right" | "justify" +}) => boolean | void; +~~~ + +### 参数 {#parameters} + +`align` 事件的回调函数可接收一个包含以下参数的对象： + +- `align` - 文本对齐方式。可指定以下值之一：`"left" | "center" | "right" | "justify"` + +:::info[信息] +如需处理内部事件，可使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~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" +}); +~~~ + +**变更日志：** 该事件在 v2.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..2c59b63 --- /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 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# clear-text-format + +### 描述 {#description} + +@short: 当通过菜单栏/工具栏或 Event Bus 方法清除文本格式时触发 + +### 用法 {#usage} + +~~~jsx {} +"clear-text-format": () => boolean | void; +~~~ + +:::info[信息] +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-10} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "clear-text-format" 事件 +editor.api.on("clear-text-format", () => { + console.log("Text format was cleared"); +}); +// 清除文本格式 +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..1840974 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/copy.md @@ -0,0 +1,36 @@ +--- +sidebar_label: copy +title: copy 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 copy 事件。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# copy + +### 描述 {#description} + +@short: 在复制选中文本时触发 + +### 用法 {#usage} + +~~~jsx {} +"copy": () => boolean | void; +~~~ + +:::info[信息] +如需处理内部事件，可使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "copy" 事件 +editor.api.on("copy", () => { + console.log("Selected text was copied"); +}); +~~~ + +**更新日志：** 该事件在 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..2ace0e3 --- /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 + +### 描述 {#description} + +@short: 在菜单栏中点击"新建"选项或通过 Event Bus 方法触发时触发 + +### 用法 {#usage} + +~~~jsx {} +"create-new": ({ reset?: boolean }) => boolean | void; +~~~ + +### 参数 {#parameters} + +`create-new` 事件的回调可接受一个包含以下参数的对象： + +- `reset` - 创建新文件时重置历史记录 + +:::info[信息] +如需处理内部事件，可使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-10} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "create-new" 事件 +editor.api.on("create-new", ({ reset }) => { + console.log(`Document has been cleared. History has ${reset ? "" : "not"} been 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..844748d --- /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 + +### 描述 {#description} + +@short: 在剪切选中文本时触发 + +### 用法 {#usage} + +~~~jsx {} +"cut": () => boolean | void; +~~~ + +:::info[信息] +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "cut" 事件 +editor.api.on("cut", () => { + console.log("Selected text was cut"); +}); +~~~ + +**更新日志：** 该事件在 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..f7ba049 --- /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 + +### 描述 {#description} + +@short: 删除链接时触发 + +### 用法 {#usage} + +~~~jsx {} +"delete-link": () => boolean | void; +~~~ + +:::info[信息] +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "delete-link" 事件 +editor.api.on("delete-link", () => { + console.log("The link was deleted"); +}); +~~~ + +**变更日志：** 该事件于 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..f514543 --- /dev/null +++ b/i18n/zh/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 + +### 描述 {#description} + +@short: 在菜单栏中按下"Export"选项或通过 Event Bus 方法触发后触发 + +### 用法 {#usage} + +~~~jsx {} +"export": ({ options: IExportOptions; result?: any }) => boolean | void; + +interface IExportOptions { + format?: "docx" | "pdf"; + url?: string; + download?: boolean; + fileName?: string; +} +~~~ + +### 参数 {#parameters} + +`export` 事件的回调函数可接收一个包含以下参数的对象： + +- `format` - 文件格式 +- `url` - 文件导出的基础 URL +- `download` - 允许用户指定是否在收到服务器响应后下载文件。若该属性设置为 `"false"`，文件将不会下载，用户可通过事件对象获取 blob 数据（参见事件定义中的 `result` 属性） +- `fileName` - 要导出的文件名 + +:::info[信息] +如需处理内部事件，可使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-15} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "export" 事件 +editor.api.on("export", (obj) => { + console.log(obj); + console.log("The file was exported"); +}); +// 将值导出为 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/hide-suggest.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/hide-suggest.md new file mode 100644 index 0000000..18082ab --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/hide-suggest.md @@ -0,0 +1,51 @@ +--- +sidebar_label: hide-suggest +title: hide-suggest 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 hide-suggest 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。 +--- + +# hide-suggest + +### 描述 {#description} + +@short: 在建议下拉列表关闭时触发 + +当发生以下任意情况时，该事件会触发： + +- 用户从下拉列表中选择了一个条目 +- 用户按下 `Escape` +- 光标离开了触发上下文（例如，在触发字符之前按下 `Backspace`） +- 当前查询未返回任何匹配项 + +### 用法 {#usage} + +~~~jsx {} +"hide-suggest": () => boolean | void; +~~~ + +### 参数 {#parameters} + +`hide-suggest` 事件的回调函数不接收任何参数。 + +:::info[信息] +要处理内部事件，请使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)。 +::: + +### 示例 {#example} + +~~~jsx {5-7} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "hide-suggest" 事件 +editor.api.on("hide-suggest", () => { + console.log("Suggestion dropdown closed"); +}); +~~~ + +**变更日志：** 该事件已在 v2.1 中新增 + +**相关示例：** [RichText. 提及、标签与异步查询](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +**相关文章：** [提及与标签](guides/mentions_and_tags.md) 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..60b9526 --- /dev/null +++ b/i18n/zh/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 + +### 描述 {#description} + +@short: 在菜单栏中按下"Import"选项或通过 Event Bus 方法触发后触发 + +### 用法 {#usage} + +~~~jsx {} +"import": ({ html?: string }) => boolean | void; +~~~ + +### 参数 {#parameters} + +`import` 事件的回调函数可接受一个包含以下参数的对象： + +- `html` - HTML 格式的文本值 + +:::info[信息] +如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-13} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "import" 事件 +editor.api.on("import", (obj) => { + console.log(obj.html); + console.log("The new value was imported"); +}); +// 导入新值 +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..f3f10f2 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/indent.md @@ -0,0 +1,43 @@ +--- +sidebar_label: indent +title: indent 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 indent 事件。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# indent + +### 描述 {#description} + +@short: 当增加块缩进时触发 + +### 用法 {#usage} + +~~~jsx {} +"indent": ({ step: number }) => boolean | void; +~~~ + +### 参数 {#parameters} + +`indent` 事件的回调函数可以接收一个包含以下参数的对象： + +- `step` - 缩进增加的步长 + +:::info[信息] +要处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "indent" 事件 +editor.api.on("indent", (obj) => { + console.log(obj); + console.log("The indention was increased"); +}); +~~~ + +**更新日志：** 该事件在 v2.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..17682f1 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-image.md @@ -0,0 +1,54 @@ +--- +sidebar_label: insert-image +title: insert-image 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 insert-image 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。 +--- + +# insert-image + +### 描述 {#description} + +@short: 在插入图片时触发（通过工具栏、菜单栏、剪贴板粘贴或拖放操作） + +### 用法 {#usage} + +~~~jsx {} +"insert-image": (IImageContext) => boolean | void; + +interface IImageContext { + id: TID; + value: string; // 图片来源：当设置了 imageUploadUrl 时为服务器 URL，当图片内联时为 base64 数据 URL + width: number; + height: number; + // 来自上传器上下文的额外属性，实际操作中不是必需的 + name?: string; + file?: File; + status?: string; + selected: (ctx: IImageContext) => void; + uploaded: (ctx: IImageContext) => void; +} +~~~ + +:::note[注意] +`value` 字段保存的是外部 URL（当配置了 [`imageUploadUrl`](api/config/image-upload-url.md) 且上传成功时）或 base64 数据 URL（当省略 `imageUploadUrl` 且图片在客户端内联时）。处理图片来源的 handler（例如，用于重写 URL 或验证主机）必须同时兼容这两种格式。 +::: + +:::info[信息] +如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "insert-image" 事件 +editor.api.on("insert-image", (obj) => { + console.log(obj); + console.log("The image was inserted"); +}); +~~~ + +**变更日志：** 该事件在 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..4362d13 --- /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 + +### 描述 {#description} + +@short: 在插入水平线时触发 + +### 用法 {#usage} + +~~~jsx {} +"insert-line": () => boolean | void; +~~~ + +:::info[信息] +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "insert-line" 事件 +editor.api.on("insert-line", () => { + console.log("The horizontal line was inserted"); +}); +~~~ + +**变更日志：** 该事件在 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..786705b --- /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 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# insert-link + +### 描述 {#description} + +@short: 在插入链接时触发 + +### 用法 {#usage} + +~~~jsx {} +"insert-link": ({ url: string }) => boolean | void; +~~~ + +### 参数 {#parameters} + +`insert-link` 事件的回调函数可以接收一个包含以下参数的对象： + +- `url` - 要插入的 URL + +:::info[信息] +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "insert-link" 事件 +editor.api.on("insert-link", (obj) => { + console.log(obj) + console.log("The following link was inserted: " + 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..463a431 --- /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 + +### 描述 {#description} + +@short: 在插入列表时触发 + +### 用法 {#usage} + +~~~jsx {} +"insert-list": ({ type: TListType }) => boolean | void; + +type TListType = "bulleted" | "numbered"; +~~~ + +### 参数 {#parameters} + +`insert-list` 事件的回调函数可接收一个包含以下参数的对象： + +- `type` - 插入列表的类型。可指定以下值： + - `"bulleted"` - 无序列表 + - `"numbered"` - 有序列表 + +:::info[信息] +如需处理内部事件，可使用 [**事件总线方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "insert-list" 事件 +editor.api.on("insert-list", (obj) => { + console.log(obj.type); + console.log("The list was inserted"); +}); +~~~ + +**变更日志：** 该事件在 v2.0 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-token.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-token.md new file mode 100644 index 0000000..615def2 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-token.md @@ -0,0 +1,61 @@ +--- +sidebar_label: insert-token +title: insert-token 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 insert-token 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# insert-token + +### 描述 {#description} + +@short: 在用户选取建议项且 RichText 将其作为 token 插入后触发 + +`insert-token` 事件在用户从触发器下拉列表（提及、标签或通过 [`triggers`](api/config/triggers.md) 属性设置的任何自定义触发器）中选取项目后触发。 + +### 用法 {#usage} + +~~~jsx {} +"insert-token": ({ + data: { + id?: string | number, + label?: string, + url?: string, + // ...来自触发器数据源的任意自定义字段 + }, + trigger: string, + showTrigger?: boolean, + action?: (item) => void +}) => boolean | void; +~~~ + +### 参数 {#parameters} + +`insert-token` 事件的回调接收一个包含以下字段的对象： + +- `data` - 已选取的建议项。包含该项的 `id`、`label` 和 `url`，以及您添加到触发器 `data` 数据源中的任意自定义字段 +- `trigger` - 打开下拉列表的触发字符（例如 `"@"` 或 `"#"`） +- `showTrigger` - 当值为 `false` 时，RichText 仅插入 `label`；否则组件还会显示触发字符（默认行为） +- `action` - 为匹配的 [触发器](api/config/triggers.md) 定义的自定义动作。设置后，该参数优先于 token 插入：RichText 会删除已输入的文本（触发字符和查询内容），并调用 `action(data)` 而非插入 token。在此情况下，`showTrigger` 参数无效 + +:::info[信息] +要处理内部事件，请使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)。 +::: + +### 示例 {#example} + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "insert-token" 事件 +editor.api.on("insert-token", ({ data, trigger, showTrigger }) => { + console.log(`Inserted ${trigger}${data.label} (id: ${data.id})`); +}); +~~~ + +**变更日志：** 该事件在 v2.1 中添加 + +**相关示例：** [RichText. 提及、标签与异步查询](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +**相关文章：** [提及与标签](guides/mentions_and_tags.md) 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..6ef1624 --- /dev/null +++ b/i18n/zh/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 + +### 描述 {#description} + +@short: 当减少块缩进时触发 + +### 用法 {#usage} + +~~~jsx {} +"outdent": ({ step: number }) => boolean | void; +~~~ + +### 参数 {#parameters} + +`outdent` 事件的回调函数可接收一个包含以下参数的对象： + +- `step` - 缩进减少的步长 + +:::info[信息] +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "outdent" 事件 +editor.api.on("outdent", (obj) => { + console.log(obj); + console.log("The indention was decreased"); +}); +~~~ + +**变更日志：** 该事件在 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..2e9db4a --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/paste.md @@ -0,0 +1,36 @@ +--- +sidebar_label: paste +title: paste 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 paste 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载免费 30 天评估版 DHTMLX RichText。 +--- + +# paste + +### 描述 {#description} + +@short: 在粘贴内容时触发 + +### 用法 {#usage} + +~~~jsx {} +"paste": () => boolean | void; +~~~ + +:::info[信息] +如需处理内部事件，可以使用 [**事件总线方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "paste" 事件 +editor.api.on("paste", () => { + console.log("Content was pasted"); +}); +~~~ + +**更新日志：** 该事件在 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..f4d4ef6 --- /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 + +### 描述 {#description} + +@short: 在打印文档时触发 + +### 用法 {#usage} + +~~~jsx {} +"print": () => boolean | void; +~~~ + +:::info[信息] +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { +// 配置属性 +}); +// 订阅 "print" 事件 +editor.api.on("print", () => { + console.log("The document is printing"); +}); +~~~ + +**更新日志：** 该事件在 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..7dde00f --- /dev/null +++ b/i18n/zh/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 + +### 描述 {#description} + +@short: 当点击菜单栏/工具栏中的"Redo"按钮或通过 Event Bus 方法触发时触发 + +### 用法 {#usage} + +~~~jsx {} +"redo": () => boolean | void; +~~~ + +:::info[信息] +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "redo" 事件 +editor.api.on("redo", () => { + console.log("Redo operation was performed"); +}); +~~~ + +**变更日志：** 该事件在 v2.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..052ec7a --- /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 + +### 描述 {#description} + +@short: 在调整图片大小时触发 + +### 用法 {#usage} + +~~~jsx {} +"resize-image": ({ id: number, width: number, height: number }) => boolean | void; +~~~ + +### 参数 {#parameters} + +`resize-image` 事件的回调函数可接受一个包含以下参数的对象： + +- `id` - 图片 ID +- `width` - 图片宽度 +- `height` - 图片高度 + +:::info[信息] +如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { +// 配置属性 +}); +// 订阅 "resize-image" 事件 +editor.api.on("resize-image", (obj) => { + console.log(obj); + console.log("The image was resized") +}); +~~~ + +**变更日志：** 该事件在 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..722ab70 --- /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 + +### 描述 {#description} + +@short: 在设置字体系列时触发 + +### 用法 {#usage} + +~~~jsx {} +"set-font-family": ({ fontFamily: string }) => boolean | void; +~~~ + +### 参数 {#parameters} + +`set-font-family` 事件的回调函数可接收一个包含以下参数的对象： + +- `fontFamily` - 要应用的字体系列。可用字体如下：`"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"` + +:::info[信息] +如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~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("The font family was changed"); +}); +// 应用新的字体系列 +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..aa8e5bb --- /dev/null +++ b/i18n/zh/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 + +### 描述 {#description} + +@short: 在设置字体大小时触发 + +### 用法 {#usage} + +~~~jsx {} +"set-font-size": ({ fontSize: string }) => boolean | void; +~~~ + +### 参数 {#parameters} + +`set-font-size` 事件的回调函数可以接受一个包含以下参数的对象： + +- `fontSize` - 要应用的字体大小 + +:::info[信息] +要处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~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("The font size was changed"); +}); +// 应用新的字体大小 +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..3392e46 --- /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 + +### 描述 {#description} + +@short: 设置行高时触发 + +### 用法 {#usage} + +~~~jsx {} +"set-line-height": ({ lineHeight: string }) => boolean | void; +~~~ + +### 参数 {#parameters} + +`set-line-height` 事件的回调函数可接收一个包含以下参数的对象： + +- `lineHeight` - 行高值 + +:::info[信息] +如需处理内部事件，可使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~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("The line height was changed"); +}); +// 应用新的行高 +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..a2eeff8 --- /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 + +### 描述 {#description} + +@short: 设置文本颜色和/或文本背景颜色时触发 + +### 用法 {#usage} + +~~~jsx {} +"set-text-color": (ITextColor) => boolean | void; + +interface ITextColor { + color?: string; + background?: string; +} +~~~ + +### 参数 {#parameters} + +`set-text-color` 事件的回调函数可接收一个包含以下参数的对象： + +- `color` - 文本颜色 +- `background` - 文本背景颜色 + +:::info[信息] +如需处理内部事件，可使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~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("The text color and/or background text color were changed"); +}); +// 应用文本颜色和背景色 +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..ef14b4a --- /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 + +### 描述 {#description} + +@short: 在设置文本格式时触发 + +### 用法 {#usage} + +~~~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) +::: + +### 参数 {#parameters} + +`set-text-format` 事件的回调函数可接收一个包含以下参数的对象： + +- `bold` - 粗体文本格式 +- `italic` - 斜体文本格式 +- `strike` - 删除线文本格式 +- `underline` - 下划线文本格式 + +### 示例 {#example} + +~~~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("The text format was changed"); +}); +// 应用 "italic" 和 bold 文本格式 +editor.api.exec("set-text-format", { + italic: true, + bold: true +}); +~~~ + +**变更日志：** 该事件在 v2.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..6ca2bba --- /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 + +### 描述 {#description} + +@short: 在设置文本样式时触发 + +### 用法 {#usage} + +~~~jsx {} +"set-text-style": ({ tag: TBlockType }) => boolean | void; + +type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; +~~~ + +### 参数 {#parameters} + +`set-text-style` 事件的回调函数可接收一个包含以下参数的对象： + +- `tag` - 文本样式 + +:::info[信息] +如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~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("The text style was changed"); +}); +// 应用新的文本样式 +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..32432b4 --- /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 + +### 描述 {#description} + +@short: 当弹出框显示或隐藏时触发 + +### 用法 {#usage} + +~~~jsx {} +"show-popup": (IPopupConfig) => boolean | void; + +interface IPopupConfig { + type: "link" | null; + image?: boolean; +} +~~~ + +### 参数 {#parameters} + +`show-popup` 事件的回调函数可接收一个包含以下参数的对象： + +- `type` - 弹出框的类型 +- `image` - 提供对附加上下文的访问（当前光标是否指向图片） + +:::info[信息] +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-13} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "show-popup" 事件 +editor.api.on("show-popup", (obj) => { + console.log(obj); + console.log("The popup was shown/hidden"); +}); +// 向左对齐文本 +editor.api.exec("show-popup", { + type: "link" +}); +~~~ + +**更新日志：** 该事件在 v2.0 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/show-suggest.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/show-suggest.md new file mode 100644 index 0000000..1885a75 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/show-suggest.md @@ -0,0 +1,64 @@ +--- +sidebar_label: show-suggest +title: show-suggest 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 show-suggest 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# show-suggest + +### 描述 {#description} + +@short: 当为已配置的触发器打开建议下拉列表时触发 + +`show-suggest` 事件在 RichText 为当前触发器解析出非空列表后、下拉列表打开之前触发。可拦截该事件以调整列表项、移动下拉位置或取消显示。 + +### 用法 {#usage} + +~~~jsx {} +"show-suggest": ({ + trigger: string, + query: string, + items: Array<{ + id?: string | number, + label?: string, + url?: string, + // ...任何来自触发器数据源的自定义字段 + }>, + pos: DOMRect +}) => boolean | void; +~~~ + +### 参数 {#parameters} + +`show-suggest` 事件的回调接收一个包含以下字段的对象： + +- `trigger` - 触发下拉列表的触发字符 +- `query` - 在触发字符之后输入的文本（用于过滤 `items`） +- `items` - 已解析（且已过滤）的建议项列表。每个条目遵循[建议项结构](api/config/triggers.md#suggestion-item-fields)：可选的 `id`、`label` 和 `url`，以及 [`triggerTemplate`](api/config/trigger-template.md) 所使用的任意自定义字段（如 `image` 或 `name`） +- `pos` - 描述光标位置的 `DOMRect`，用于在屏幕上定位下拉列表 + +:::info[信息] +要处理内部事件，请使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md)。 +::: + +### 示例 {#example} + +~~~jsx {6-11} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + triggers: [{ trigger: "@", data: people }] + // 其他配置属性 +}); +// 在下拉列表打开之前覆盖建议列表 +editor.api.intercept("show-suggest", (state) => { + if (state.trigger === "@" && state.query === "") { + return { ...state, items: state.items.slice(0, 5) }; + } +}); +~~~ + +**变更日志：** 该事件在 v2.1 中新增 + +**相关示例：** [RichText. 提及、标签与异步查询](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +**相关文章：** [提及与标签](guides/mentions_and_tags.md) 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..66c916c --- /dev/null +++ b/i18n/zh/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 + +### 描述 {#description} + +@short: 当在菜单栏/工具栏中按下"下标"按钮或通过 Event Bus 方法触发时触发 + +### 用法 {#usage} + +~~~jsx {} +"subscript": () => boolean | void; +~~~ + +:::info[信息] +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-10} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "subscript" 事件 +editor.api.on("subscript", () => { + console.log("Subscript was applied"); +}); +// 触发 "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..c22d04f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/superscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: superscript +title: superscript 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 superscript 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载免费的 30 天评估版本。 +--- + +# superscript + +### 描述 {#description} + +@short: 当通过菜单栏/工具栏中的"上标"按钮或 Event Bus 方法触发时触发 + +### 用法 {#usage} + +~~~jsx {} +"superscript": () => boolean | void; +~~~ + +:::info[信息] +处理内部事件时，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "superscript" 事件 +editor.api.on("superscript", () => { + console.log("Superscript was applied"); +}); +// 触发 "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..07b41ee --- /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 + +### 描述 {#description} + +@short: 在切换全屏模式时触发 + +### 用法 {#usage} + +~~~jsx {} +"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void; +~~~ + +### 参数 {#parameters} + +`toggle-fullscreen-mode` 事件的回调函数可以接受一个包含以下参数的对象： + +- `mode` - 启用全屏模式 + +:::info[信息] +如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~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("The full screen mode was changed"); +}); +// 启用全屏模式 +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..67c8fd0 --- /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 + +### 描述 {#description} + +@short: 切换布局模式时触发 + +### 用法 {#usage} + +~~~jsx {} +"toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void; +~~~ + +### 参数 {#parameters} + +`toggle-layout-mode` 事件的回调函数可以接受一个包含以下参数的对象： + +- `mode` - 布局模式。可用的模式如下：`"classic" | "document"` + +:::info[信息] +如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~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("The layout mode was changed"); +}); +// 设置 "document" 布局模式 +editor.api.exec("toggle-layout-mode", { mode: "document" }); +~~~ + +**更新日志：** 该事件在 v2.0 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-list.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-list.md new file mode 100644 index 0000000..0e33660 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-list.md @@ -0,0 +1,56 @@ +--- +sidebar_label: toggle-list +title: toggle-list 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 toggle-list 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# toggle-list + +### 描述 {#description} + +@short: 当用户在所选块上切换列表时触发 + +`toggle-list` 事件为上下文感知的项目符号/编号列表按钮提供支持。该事件不会插入新列表，而是检查当前选区并自动选择以下四种行为之一： + +| 模式 | 触发条件 | 结果 | +| ----------- | --------------------------------------------------------------- | ------------------------------------------------------------------- | +| **包装** | 选区仅包含段落 | 每个段落成为一个新列表容器中的列表项 | +| **解包** | 所有选中项目均属于所点击类型的列表 | 这些项目还原为段落，列表容器被移除 | +| **转换** | 所有选中项目均在列表中，但至少有一个列表属于另一种类型 | 列表类型就地切换（项目符号 ↔ 编号） | +| **混合** | 选区同时包含段落和列表项 | 段落转为列表项，所有内容合并为该类型的一个列表 | + +### 用法 {#usage} + +~~~jsx {} +"toggle-list": ({ type: TListType }) => boolean | void; + +type TListType = "bulleted" | "numbered"; +~~~ + +### 参数 {#parameters} + +`toggle-list` 事件的回调函数可接受一个包含以下参数的对象： + +- `type` - 要切换的列表类型。可指定以下值： + - `"bulleted"` - 项目符号（无序）列表 + - `"numbered"` - 编号（有序）列表 + +:::info[信息] +要处理内部事件，请使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "toggle-list" 事件 +editor.api.on("toggle-list", (obj) => { + console.log(obj.type); + console.log("The list was toggled"); +}); +~~~ + +**变更日志：** 该事件在 v2.0.6 中新增 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..dc23fb7 --- /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 参考，试用代码示例和在线演示，并下载免费 30 天评估版 DHTMLX RichText。 +--- + +# toggle-shortcut-info + +### 描述 {#description} + +@short: 切换快捷键信息时触发 + +### 用法 {#usage} + +~~~jsx {} +"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void; +~~~ + +### 参数 {#parameters} + +`toggle-shortcut-info` 事件的回调函数可接收一个包含以下参数的对象： + +- `mode` - 启用快捷键信息；`true` 表示显示快捷键信息弹窗，`false` 表示隐藏快捷键信息弹窗 + +:::info[信息] +处理内部事件时，可使用 [**事件总线方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~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("The shortcut info was shown"); +}); +// 启用快捷键信息 +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..f1cb79a --- /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 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# undo + +### 描述 {#description} + +@short: 在菜单栏/工具栏中点击"撤销"按钮或通过 Event Bus 方法触发时触发 + +### 用法 {#usage} + +~~~jsx {} +"undo": () => boolean | void; +~~~ + +:::info[信息] +如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "undo" 事件 +editor.api.on("undo", () => { + console.log("Undo operation was performed"); +}); +~~~ + +**更新日志：** 该事件在 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..90d4f9e --- /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 参考，查看代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX RichText。 +--- + +# update-link + +### 描述 {#description} + +@short: 在更新链接时触发 + +### 用法 {#usage} + +~~~jsx {} +"update-link": ({ id: number, url: string }) => boolean | void; +~~~ + +### 参数 {#parameters} + +`update-link` 事件的回调函数可以接收一个包含以下参数的对象： + +- `id` - 链接 ID +- `url` - 修改后的 url + +:::info[信息] +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 {#example} + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "update-link" 事件 +editor.api.on("update-link", (obj) => { + console.log(obj); + console.log("The following link was updated:" + 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..0044fed --- /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 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。 +--- + +# api.detach() + +### 描述 {#description} + +@short: 用于移除/解绑事件处理程序 + +### 用法 {#usage} + +~~~jsx {} +api.detach( tag: string ): void; +~~~ + +### 参数 {#parameters} + +- `tag` - （必填）操作标签的名称 + +### 事件 {#events} + +:::info[信息] +RichText 内部事件的完整列表可在[**此处**](api/overview/events_overview.md)查看 +::: + +### 示例 {#example} + +~~~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..c315f51 --- /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() + +### 描述 {#description} + +@short: 允许触发内部事件 + +### 用法 {#usage} + +~~~jsx {} +api.exec( + event: string, + config: object +): void; +~~~ + +### 参数 {#parameters} + +- `event` - （必填）要触发的事件 +- `config` - （必填）包含参数的配置对象（参见要触发的事件） + +### 事件 {#events} + +:::info[信息] +RichText 内部事件的完整列表可在[**此处**](api/overview/events_overview.md)查看 +::: + +### 示例 {#example} + +~~~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..45e45c0 --- /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() + +### 描述 {#description} + +@short: 返回包含 RichText 响应式属性的对象 + +### 用法 {#usage} + +~~~jsx {} +api.getReactiveState(): object; +~~~ + +### 返回值 {#returns} + +该方法返回一个包含以下参数的对象： + +~~~jsx {} +{ + cursorState: { subscribe: any }, + defaultStyles {...}, + document {...}, + fullscreen {...}, + history {...}, + layoutMode {...}, + popup {...}, + selection {...} +} +~~~ + +### 示例 {#example} + +~~~jsx {5-7} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 获取 RichText 的响应式状态 +const reactive_state = editor.api.getReactiveState(); +console.log(reactive_state) +~~~ + +**更新日志：** 该方法已在 v2.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..7a9c6a8 --- /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 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费试用版。 +--- + +# api.getState() + +### 描述 {#description} + +@short: 返回包含 RichText 的 StateStore 属性的对象 + +### 用法 {#usage} + +~~~jsx {} +api.getState(): object; +~~~ + +### 返回值 {#returns} + +该方法返回一个包含以下参数的对象： + +~~~jsx {} +{ + cursorState: {}, + defaultStyles: {}, + document: {}, + fullscreen: boolean, + history: [] + layoutMode: string, + popup: any, + selection: {} +} +~~~ + +### 示例 {#example} + +~~~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..725ecef --- /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() + +### 描述 {#description} + +@short: 允许拦截并阻止内部事件 + +### 用法 {#usage} + +~~~jsx {} +api.intercept( + event: string, + callback: function +): void; +~~~ + +### 参数 {#parameters} + +- `event` - （必填）要触发的事件 +- `callback` - （必填）要执行的回调函数（回调参数取决于所触发的事件） + +### 事件 {#events} + +:::info[信息] +RichText 内部事件的完整列表可在[**此处**](api/overview/events_overview.md)查看 +::: + +### 示例 {#example} + +~~~jsx {5-10} +// 创建 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 禁止更改字体大小 +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..7ff72f9 --- /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() + +### 描述 {#description} + +@short: 允许为内部事件附加处理函数 + +### 用法 {#usage} + +~~~jsx {} +api.on( + event: string, + handler: function +): void; +~~~ + +### 参数 {#parameters} + +- `event` - （必填）要触发的事件 +- `handler` - （必填）要附加的处理函数（处理函数的参数取决于所触发的事件） + +### 事件 {#events} + +:::info[信息] +RichText 内部事件的完整列表可在[**此处**](api/overview/events_overview.md)查看 +::: + +### 示例 {#example} + +~~~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..20daa7f --- /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() + +### 描述 {#description} + +@short: 用于将某个操作添加到 Event Bus 顺序中 + +### 用法 {#usage} + +~~~jsx {} +api.setNext(next: any): void; +~~~ + +### 参数 {#parameters} + +- `next` - （必填）要加入 **Event Bus** 顺序的操作 + +### 示例 {#example} + +~~~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/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..601c314 --- /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() + +### 描述 {#description} + +@short: 移除 RichText 的所有 HTML 元素，并解除所有相关事件的绑定 + +### 用法 {#usage} + +~~~jsx {} +destructor(): void; +~~~ + +### 示例 {#example} + +~~~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..a014501 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/get-value.md @@ -0,0 +1,44 @@ +--- +sidebar_label: getValue() +title: getValue 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 getValue 方法。浏览开发指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。 +--- + +# getValue() + +### 描述 {#description} + +@short: 返回 RichText 的值 + +### 用法 {#usage} + +~~~jsx {} +getValue(encoder?: any): string; +~~~ + +### 参数 {#parameters} + +- `encoder` - （可选）用于将 RichText 内容编码为自定义格式的解析器。支持以下格式：`html`（默认）、`text` 和 `markdown` + +您可以通过以下方式获取所需的编码器： + +```jsx +const toTextEncoder = richtext.text.toText; // 文本编码器 +const toHTMLEncoder = richtext.html.toHTML; // html 编码器 +const toMarkdownEncoder = richtext.markdown.toMarkdown; // markdown 编码器 +``` + +### 示例 {#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." // 设置默认值（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/insert-value.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/insert-value.md new file mode 100644 index 0000000..c393bb4 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/insert-value.md @@ -0,0 +1,50 @@ +--- +sidebar_label: insertValue() +title: insertValue 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 insertValue 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# insertValue() + +### 描述 {#description} + +@short: 在当前光标位置插入文本、Markdown 或 HTML 内容，或替换选中的文本 + +### 用法 {#usage} + +~~~jsx {} +insertValue: (value: string, encoder?: any): void; +~~~ + +### 参数 {#parameters} + +- `value` - （必填）要插入到 RichText 当前光标位置的值。如果存在选区，则选区内容将被新值替换 +- `encoder` - （可选）用于解码插入值的解析器。支持以下格式：`html`（默认）、`text` 和 `markdown` + +可通过以下方式获取所需的 encoder： + +```jsx +const fromTextEncoder = richtext.text.fromText; // 文本编码器 +const fromHTMLEncoder = richtext.html.fromHTML; // html 编码器 +const fromMarkdownEncoder = richtext.markdown.fromMarkdown; // markdown 编码器 +``` + +### 示例 {#example} + +~~~jsx {6} +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); + +// 在光标位置插入带有自定义属性的 HTML 链接 +editor.insertValue("link"); +~~~ + +插入的内容作为单条历史记录添加，可通过一次**撤销**操作还原。 + +**变更日志：** 该方法于 v2.1 版本中新增 + +**相关示例：** + +- [RichText. 在光标处插入内容](https://snippet.dhtmlx.com/pew2g1ku?tag=richtext) +- [RichText. 使用不同格式（Markdown、HTML、text）](https://snippet.dhtmlx.com/cne4kujn?tag=richtext) 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..ff669f9 --- /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() + +### 描述 {#description} + +@short: 将新的配置参数应用于 RichText + +### 用法 {#usage} + +~~~jsx {} +setConfig(config: { [key:any]: any }): void; +~~~ + +### 参数 {#parameters} + +- `config` - （必填）RichText 配置参数对象。完整属性列表请参见[此处](api/overview/properties_overview.md) + +:::note[注意] +`setConfig()` 方法会保留所有之前设置的、未在本次 `setConfig()` 调用中显式提供的参数。 +::: + +### 示例 {#example} + +~~~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..a491aba --- /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() + +### 描述 {#description} + +@short: 为 RichText 应用新的语言环境 + +### 用法 {#usage} + +~~~jsx {} +setLocale(null | locale?: object): void; +~~~ + +### 参数 {#parameters} + +- `null` - （可选）重置为默认语言环境（*英语*） +- `locale` - （可选）要应用的新语言环境的数据对象 + +:::info[信息] +使用 `setLocale()` 方法为 RichText 应用新的语言环境。若要将 RichText 重置为默认语言环境，请不带参数（或传入 *null* 值）调用 `setLocale()` 方法。 +::: + +### 示例 {#example} + +~~~jsx {5-6} +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); + +// 为 RichText 应用 "de" 语言环境 +editor.setLocale(de); +~~~ + +**变更日志：** 该方法在 v2.0 中新增 + +**相关文章：** [本地化](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..09233c9 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-value.md @@ -0,0 +1,47 @@ +--- +sidebar_label: setValue() +title: setValue 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 setValue 方法。浏览开发指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# setValue() + +### 描述 {#description} + +@short: 向 RichText 应用新值 + +### 用法 {#usage} + +~~~jsx {} +setValue: (value: string, encoder?: any): void; +~~~ + +### 参数 {#parameters} + +- `value` - （必填）要插入到 RichText 中的值 +- `encoder` - （可选）用于将值从自定义格式解码的自定义解析器。支持以下格式：`html`（默认）、`text` 和 `markdown` + +您可以通过以下方式获取所需的 encoder： + +```jsx +const fromTextEncoder = richtext.text.fromText; // 文本编码器 +const fromHTMLEncoder = richtext.html.fromHTML; // html 编码器 +const fromMarkdownEncoder = richtext.markdown.fromMarkdown; // markdown 编码器 +``` + +### 示例 {#example} + +~~~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` 参数 + +**相关示例：** [RichText. 使用不同格式（Markdown、HTML、text）](https://snippet.dhtmlx.com/cne4kujn?tag=richtext) 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..bffb67a --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md @@ -0,0 +1,18 @@ +--- +sidebar_label: Event Bus 方法 +title: Event Bus 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中查看 JavaScript RichText 内部 Event Bus 方法概述。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载免费 30 天评估版 DHTMLX RichText。 +--- + +# Event Bus 方法 {#event-bus-methods} + +本页列出了 DHTMLX RichText 编辑器内部 Event Bus 的相关方法。 +这些方法适用于基于内部事件系统的高级集成和自定义行为。 + +| 名称 | 描述 | +| ------------------------------------------------- | -------------------------------------------- | +| [](api/internal/detach.md) | @getshort(api/internal/detach.md) | +| [](api/internal/exec.md) | @getshort(api/internal/exec.md) | +| [](api/internal/intercept.md) | @getshort(api/internal/intercept.md) | +| [](api/internal/on.md) | @getshort(api/internal/on.md) | +| [](api/internal/set-next.md) | @getshort(api/internal/set-next.md) | diff --git a/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..65cd320 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/events_overview.md @@ -0,0 +1,49 @@ +--- +sidebar_label: Events 概览 +title: Events 概览 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中查看 JavaScript RichText 的 Events 概览。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# Events 概览 {#events-overview} + +本页列出了 DHTMLX RichText 编辑器触发的所有 events。 +您可以使用这些 events 扩展功能、追踪用户交互或触发自定义行为。 + +| 名称 | 描述 | +| ------------------------------------------------------ | --------------------------------------------- | +| [](api/events/align.md) | @getshort(api/events/align.md) | +| [](api/events/clear-text-format.md) | @getshort(api/events/clear-text-format.md) | +| [](api/events/copy.md) | @getshort(api/events/copy.md) | +| [](api/events/create-new.md) | @getshort(api/events/create-new.md) | +| [](api/events/cut.md) | @getshort(api/events/cut.md) | +| [](api/events/delete-link.md) | @getshort(api/events/delete-link.md) | +| [](api/events/export.md) | @getshort(api/events/export.md) | +| [](api/events/hide-suggest.md) | @getshort(api/events/hide-suggest.md) | +| [](api/events/import.md) | @getshort(api/events/import.md) | +| [](api/events/indent.md) | @getshort(api/events/indent.md) | +| [](api/events/insert-image.md) | @getshort(api/events/insert-image.md) | +| [](api/events/insert-line.md) | @getshort(api/events/insert-line.md) | +| [](api/events/insert-link.md) | @getshort(api/events/insert-link.md) | +| [](api/events/insert-list.md) | @getshort(api/events/insert-list.md) | +| [](api/events/insert-token.md) | @getshort(api/events/insert-token.md) | +| [](api/events/outdent.md) | @getshort(api/events/outdent.md) | +| [](api/events/paste.md) | @getshort(api/events/paste.md) | +| [](api/events/print.md) | @getshort(api/events/print.md) | +| [](api/events/redo.md) | @getshort(api/events/redo.md) | +| [](api/events/resize-image.md) | @getshort(api/events/resize-image.md) | +| [](api/events/set-font-family.md) | @getshort(api/events/set-font-family.md) | +| [](api/events/set-font-size.md) | @getshort(api/events/set-font-size.md) | +| [](api/events/set-line-height.md) | @getshort(api/events/set-line-height.md) | +| [](api/events/set-text-color.md) | @getshort(api/events/set-text-color.md) | +| [](api/events/set-text-format.md) | @getshort(api/events/set-text-format.md) | +| [](api/events/set-text-style.md) | @getshort(api/events/set-text-style.md) | +| [](api/events/show-popup.md) | @getshort(api/events/show-popup.md) | +| [](api/events/show-suggest.md) | @getshort(api/events/show-suggest.md) | +| [](api/events/subscript.md) | @getshort(api/events/subscript.md) | +| [](api/events/superscript.md) | @getshort(api/events/superscript.md) | +| [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md)| +| [](api/events/toggle-layout-mode.md) | @getshort(api/events/toggle-layout-mode.md) | +| [](api/events/toggle-list.md) | @getshort(api/events/toggle-list.md) | +| [](api/events/toggle-shortcut-info.md) | @getshort(api/events/toggle-shortcut-info.md) | +| [](api/events/undo.md) | @getshort(api/events/undo.md) | +| [](api/events/update-link.md) | @getshort(api/events/update-link.md) | diff --git a/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..ffbeef7 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/main_overview.md @@ -0,0 +1,98 @@ +--- +sidebar_label: API 概览 +title: API 概览 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中查看 JavaScript RichText 的 API 概览。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# API 概览 {#api-overview} + +## RichText 构造函数 {#richtextconstructor} + +~~~js +new richtext.RichText("#root", { + // 配置参数 +}); +~~~ + +**参数**： + +- 一个 HTML 容器（例如，CSS 选择器或 DOM 元素） +- 一个配置对象（[查看属性](api/overview/properties_overview.md)） + +## RichText 方法 {#richtextmethods} + +| 名称 | 描述 | +| ----------------------------------------------|-------------------------------------------| +| [](api/methods/get-value.md) | @getshort(api/methods/get-value.md) | +| [](api/methods/set-value.md) | @getshort(api/methods/set-value.md) | +| [](api/methods/insert-value.md) | @getshort(api/methods/insert-value.md) | +| [](api/methods/set-config.md) | @getshort(api/methods/set-config.md) | +| [](api/methods/set-locale.md) | @getshort(api/methods/set-locale.md) | +| [](api/methods/destructor.md) | @getshort(api/methods/destructor.md) | + +## Event Bus 方法 {#event-bus-methods} + +| 名称 | 描述 | +| ----------------------------------------------|-------------------------------------------| +| [](api/internal/exec.md) | @getshort(api/internal/exec.md) | +| [](api/internal/intercept.md) | @getshort(api/internal/intercept.md) | +| [](api/internal/on.md) | @getshort(api/internal/on.md) | +| [](api/internal/detach.md) | @getshort(api/internal/detach.md) | +| [](api/internal/set-next.md) | @getshort(api/internal/set-next.md) | + +## State 方法 {#state-methods} + +| 名称 | 描述 | +| ----------------------------------------------|-------------------------------------------| +| [](api/internal/get-state.md) | @getshort(api/internal/get-state.md) | +| [](api/internal/get-reactive-state.md) | @getshort(api/internal/get-reactive-state.md) | + +## 事件 {#events} + +| 名称 | 描述 | +| ----------------------------------------------|-------------------------------------------| +| [](api/events/align.md) | @getshort(api/events/align.md) | +| [](api/events/clear-text-format.md) | @getshort(api/events/clear-text-format.md) | +| [](api/events/copy.md) | @getshort(api/events/copy.md) | +| [](api/events/create-new.md) | @getshort(api/events/create-new.md) | +| [](api/events/cut.md) | @getshort(api/events/cut.md) | +| [](api/events/delete-link.md) | @getshort(api/events/delete-link.md) | +| [](api/events/export.md) | @getshort(api/events/export.md) | +| [](api/events/import.md) | @getshort(api/events/import.md) | +| [](api/events/indent.md) | @getshort(api/events/indent.md) | +| [](api/events/insert-image.md) | @getshort(api/events/insert-image.md) | +| [](api/events/insert-line.md) | @getshort(api/events/insert-line.md) | +| [](api/events/insert-link.md) | @getshort(api/events/insert-link.md) | +| [](api/events/insert-list.md) | @getshort(api/events/insert-list.md) | +| [](api/events/outdent.md) | @getshort(api/events/outdent.md) | +| [](api/events/paste.md) | @getshort(api/events/paste.md) | +| [](api/events/print.md) | @getshort(api/events/print.md) | +| [](api/events/redo.md) | @getshort(api/events/redo.md) | +| [](api/events/resize-image.md) | @getshort(api/events/resize-image.md) | +| [](api/events/set-font-family.md) | @getshort(api/events/set-font-family.md) | +| [](api/events/set-font-size.md) | @getshort(api/events/set-font-size.md) | +| [](api/events/set-line-height.md) | @getshort(api/events/set-line-height.md) | +| [](api/events/set-text-color.md) | @getshort(api/events/set-text-color.md) | +| [](api/events/set-text-format.md) | @getshort(api/events/set-text-format.md) | +| [](api/events/set-text-style.md) | @getshort(api/events/set-text-style.md) | +| [](api/events/show-popup.md) | @getshort(api/events/show-popup.md) | +| [](api/events/subscript.md) | @getshort(api/events/subscript.md) | +| [](api/events/superscript.md) | @getshort(api/events/superscript.md) | +| [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md) | +| [](api/events/toggle-layout-mode.md) | @getshort(api/events/toggle-layout-mode.md) | +| [](api/events/toggle-shortcut-info.md) | @getshort(api/events/toggle-shortcut-info.md) | +| [](api/events/undo.md) | @getshort(api/events/undo.md) | +| [](api/events/update-link.md) | @getshort(api/events/update-link.md) | + +## 属性 {#properties} + +| 名称 | 描述 | +| ----------------------------------------------|-------------------------------------------| +| [](api/config/default-styles.md) | @getshort(api/config/default-styles.md) | +| [](api/config/fullscreen-mode.md) | @getshort(api/config/fullscreen-mode.md) | +| [](api/config/image-upload-url.md) | @getshort(api/config/image-upload-url.md) | +| [](api/config/layout-mode.md) | @getshort(api/config/layout-mode.md) | +| [](api/config/locale.md) | @getshort(api/config/locale.md) | +| [](api/config/menubar.md) | @getshort(api/config/menubar.md) | +| [](api/config/toolbar.md) | @getshort(api/config/toolbar.md) | +| [](api/config/value.md) | @getshort(api/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..71854a5 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md @@ -0,0 +1,19 @@ +--- +sidebar_label: 方法概览 +title: 方法概览 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中查看 JavaScript RichText 的方法概览。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX RichText。 +--- + +# 方法概览 {#methods-overview} + +本页面提供 DHTMLX RichText 编辑器中可用核心方法的摘要。 +使用此参考文档可快速跳转到每个方法的详细说明，了解其用途并查看使用示例。 + +| 名称 | 描述 | +| ------------------------------------------------------ | ----------------------------------------- | +| [](api/methods/destructor.md) | @getshort(api/methods/destructor.md) | +| [](api/methods/get-value.md) | @getshort(api/methods/get-value.md) | +| [](api/methods/set-value.md) | @getshort(api/methods/set-value.md) | +| [](api/methods/insert-value.md) | @getshort(api/methods/insert-value.md) | +| [](api/methods/set-config.md) | @getshort(api/methods/set-config.md) | +| [](api/methods/set-locale.md) | @getshort(api/methods/set-locale.md) | diff --git a/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..f340a37 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md @@ -0,0 +1,23 @@ +--- +sidebar_label: 属性概览 +title: 属性概览 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中查看 JavaScript RichText 的属性概览。浏览开发指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# 属性概览 {#properties-overview} + +本页列出了初始化 DHTMLX RichText 编辑器时可使用的所有配置属性。 +这些属性帮助您控制编辑器的布局、工具栏、值、本地化及其他方面。 + +| 名称 | 描述 | +| --------------------------------------------------------|----------------------------------------------| +| [](api/config/default-styles.md) | @getshort(api/config/default-styles.md) | +| [](api/config/fullscreen-mode.md) | @getshort(api/config/fullscreen-mode.md) | +| [](api/config/image-upload-url.md) | @getshort(api/config/image-upload-url.md) | +| [](api/config/layout-mode.md) | @getshort(api/config/layout-mode.md) | +| [](api/config/locale.md) | @getshort(api/config/locale.md) | +| [](api/config/menubar.md) | @getshort(api/config/menubar.md) | +| [](api/config/toolbar.md) | @getshort(api/config/toolbar.md) | +| [](api/config/trigger-template.md) | @getshort(api/config/trigger-template.md) | +| [](api/config/triggers.md) | @getshort(api/config/triggers.md) | +| [](api/config/value.md) | @getshort(api/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..4944c0d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md @@ -0,0 +1,15 @@ +--- +sidebar_label: State 方法 +title: State 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中查看 JavaScript RichText 内部 State 方法概览。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# State 方法 {#state-methods} + +本页列出了用于访问和操作 DHTMLX RichText 编辑器内部状态的方法。 +这些方法适用于调试、与响应式系统集成，或实现高级自定义逻辑。 + +| 名称 | 描述 | +| ----------------------------------------------------------- | ------------------------------------------------ | +| [](api/internal/get-reactive-state.md) | @getshort(api/internal/get-reactive-state.md) | +| [](api/internal/get-state.md) | @getshort(api/internal/get-state.md) | diff --git a/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..3a6a41d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/configuration.md @@ -0,0 +1,377 @@ +--- +sidebar_label: 配置 +title: 配置 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解有关配置的信息。浏览开发者指南和 API 参考，体验代码示例和在线演示，并下载免费 30 天评估版本的 DHTMLX RichText。 +--- + +# 配置 {#configuration} + +您可以通过以下属性配置 RichText 的外观和行为： + +- [`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) — 设置初始 HTML 内容 +- [`locale`](api/config/locale.md) — 在初始化时应用本地化对象 +- [`defaultStyles`](api/config/default-styles.md) — 为特定块类型设置默认样式 +- [`imageUploadUrl`](api/config/image-upload-url.md) — 设置图片上传的端点 +- [`triggers`](api/config/triggers.md) — 启用 @mentions、#tags 以及自定义下拉触发器（请参阅 [Mentions 和 Tags](guides/mentions_and_tags.md) 指南） + +## 布局模式 {#layout-modes} + +RichText 支持两种编辑区域的布局模式： + +- `"classic"` — 编辑区域填满整个页面 + +
+![经典布局模式下的 DHTMLX RichText 编辑器](/img/richtext/classic_mode.png) +
+ +- `"document"` — 编辑区域模拟文档页面 + +
+![文档模式下的 DHTMLX RichText 编辑器](/img/richtext/document_mode.png) +
+ +在初始化时设置 [`layoutMode`](api/config/layout-mode.md) 属性以选择模式： + +~~~jsx +const editor = new richtext.Richtext("#root", { + layoutMode: "document" +}); +~~~ + +**相关示例：** [RichText. 文档模式与经典模式](https://snippet.dhtmlx.com/jz8q432l?tag=richtext) + +## 工具栏 {#toolbar} + +RichText 工具栏将控件分组到多个区块中，您可以对其进行自定义。 + +### 默认工具栏控件 {#default-toolbar-controls} + +您可以在 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. 完整工具栏](https://snippet.dhtmlx.com/ziynafp7?tag=richtext) + +### 添加自定义工具栏控件 {#add-custom-toolbar-controls} + +向 [`toolbar`](api/config/toolbar.md) 数组传入一个对象，并包含以下字段之一： + +- `type: string` — 必填。控件类型：`"button"`、`"richselect"` 或 `"colorpicker"` +- `id: string` — 可选。自定义控件 ID；不能与现有控件 ID 重复 +- `icon: string` — 可选。图标 CSS 类名；与 label 组合使用 +- `label: string` — 可选。按钮标签；与 icon 组合使用 +- `tooltip: string` — 可选。鼠标悬停时显示的提示文字；若未设置则默认使用 `label` +- `css: string` — 可选。控件的 CSS 类。内置类：`wx-primary`、`wx-secondary` +- `handler: () => void` — 可选。点击时执行的回调函数 + +以下示例将内置按钮、预定义的 `richselect` 类型控件以及两个自定义按钮组合在一起： + +~~~jsx {6-32} +new richtext.Richtext("#root", { + toolbar: [ + // 字符串条目代表内置按钮 + "bold", + "italic", + // 预定义按钮仅接受 { 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: () => {/* 自定义逻辑 */} + }, + { + type: "button", + id: "other", + icon: "wxo-help", + label: "Other", + tooltip: "Some tooltip", + handler: () => {/* 自定义逻辑 */} + } + ], + // 其他配置属性 +}); +~~~ + +**相关示例：** [RichText. 自定义控件与简化工具栏](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### 隐藏工具栏 {#hide-the-toolbar} + +将 [`toolbar`](api/config/toolbar.md) 属性设置为 `false` 可隐藏工具栏： + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false, + // 其他配置属性 +}); +~~~ + +## 显示菜单栏 {#show-the-menubar} + +启用 [`menubar`](api/config/menubar.md) 属性可在工具栏上方渲染顶部菜单栏。默认值为 `false`。 + +~~~jsx {2} +new richtext.Richtext("#root", { + menubar: true + // 其他配置属性 +}); +~~~ + +**相关示例：** [RichText. 初始化时启用菜单栏](https://snippet.dhtmlx.com/tjryzka7?tag=richtext) + +## 设置初始内容 {#set-the-initial-content} + +使用 [`value`](api/config/value.md) 属性在初始化时向编辑器传入初始 HTML 内容： + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" + // 其他配置属性 +}); +~~~ + +若要在初始化后替换内容，或以非 HTML 格式通过自定义编码器加载内容，请调用 [`setValue()`](api/methods/set-value.md) 方法。 + +**相关示例：** [RichText. 使用不同格式（Markdown、HTML、纯文本）](https://snippet.dhtmlx.com/cne4kujn?tag=richtext) + +## 设置初始语言 {#set-the-initial-locale} + +使用 [`locale`](api/config/locale.md) 属性在初始化时应用本地化对象： + +~~~jsx {2} +new richtext.Richtext("#root", { + locale: richtext.locales.cn + // 其他配置属性 +}); +~~~ + +有关详情以及通过 [`setLocale()`](api/methods/set-locale.md) 动态切换语言，请参阅 [本地化](guides/localization.md) 指南。 + +## 以全屏模式启动 {#start-in-fullscreen-mode} + +将 [`fullscreenMode`](api/config/fullscreen-mode.md) 属性设置为 `true` 可在初始化时以全屏模式打开编辑器。默认值为 `false`。 + +~~~jsx {2} +new richtext.Richtext("#root", { + fullscreenMode: true + // 其他配置属性 +}); +~~~ + +## 配置图片插入 {#configure-image-insertion} + +RichText 支持两种通过工具栏、菜单栏、粘贴或拖放插入图片的模式。模式根据 [`imageUploadUrl`](api/config/image-upload-url.md) 属性自动选择。 + +### 上传图片到服务器 {#upload-images-to-a-server} + +向 [`imageUploadUrl`](api/config/image-upload-url.md) 属性传入 URL，可将每张插入的图片上传到您的端点。RichText 以 `multipart/form-data` 格式（字段名 `upload`）发送文件，并插入服务器返回的 URL： + +~~~jsx {2} +new richtext.Richtext("#root", { + imageUploadUrl: "https://example.com/upload" + // 其他配置属性 +}); +~~~ + +### 以 base64 格式内联插入图片 {#insert-images-inline-as-base64} + +省略 [`imageUploadUrl`](api/config/image-upload-url.md)（或将其设置为空字符串）可将图片作为 base64 数据 URL 直接嵌入文档内容中，无需服务器： + +~~~jsx {2} +new richtext.Richtext("#root", { + // imageUploadUrl 未设置，图片以内联方式插入 + // 其他配置属性 +}); +~~~ + +大于 1024×800 的内联图片将以缩小尺寸显示（`width`/`height` 属性会被限制在此范围内），但嵌入的字节数据仍为原始全分辨率文件——客户端不会对其进行降采样或重新编码。 + +:::note[注意] +内联（base64）图片不会被内置的 DOCX / PDF [导出](api/events/export.md) 功能保留。如果您依赖导出功能，请提供 `imageUploadUrl`，以便图片引用外部位置。 +::: + +请参阅 [与服务器配合使用](guides/working_with_server.md)，了解上传端点必须实现的完整请求/响应契约以及内联图片回退方式的详细说明。 + +## 配置默认样式 {#configure-default-styles} + +使用 [`defaultStyles`](api/config/default-styles.md) 属性为每种块类型设置默认样式。 + +[`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`](api/config/default-styles.md) 属性不会将 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..1642bd4 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/initialization.md @@ -0,0 +1,80 @@ +--- +sidebar_label: 初始化 +title: 初始化 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解初始化相关内容。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# 初始化 {#initialization} + +本指南介绍如何将 RichText 添加到页面中。请按照以下步骤获取可用的编辑器： + +1. [在页面中引入源文件](#include-the-source-files)。 +2. [为 RichText 创建容器](#create-a-container)。 +3. [初始化 RichText](#initialize-richtext)。 + +## 引入源文件 {#include-the-source-files} + +将 RichText 的 JavaScript 和 CSS 文件添加到您的项目中。[下载安装包](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml)并将内容解压到您的项目文件夹中。 + +要创建 RichText，请在页面中引入以下两个源文件： + +- *richtext.js* +- *richtext.css* + +在 HTML 中引用这些文件。请根据您的文件夹结构调整相对路径： + +~~~html title="index.html" + + +~~~ + +## 创建容器 {#create-a-container} + +为 RichText 添加一个带有 ID 的容器，例如 *"root"*： + +~~~jsx title="index.html" +
+~~~ + +## 初始化 RichText {#initialize-richtext} + +使用 `richtext.Richtext` 构造函数初始化 RichText。该构造函数接受两个参数： + +- 容器 — CSS 选择器或 DOM 元素 +- 包含编辑器属性的配置对象。请参阅下方的[完整属性列表](#configuration-properties) + +以下示例在 `#root` 容器中初始化 RichText： + +~~~jsx title="index.html" +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +~~~ + +### 配置属性 {#configuration-properties} + +将配置选项作为配置对象的键添加。 + +:::note[注意] +有关完整的配置属性列表，请参阅[属性概览](api/overview/properties_overview.md)。 +::: + +## 销毁 RichText 实例 {#destroy-the-richtext-instance} + +调用 [`destructor()`](api/methods/destructor.md) 方法可移除 RichText 的 HTML 并解绑所有相关事件： + +~~~jsx +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); + +editor.destructor(); +~~~ + +## 示例 {#example} + +以下示例初始化 RichText 并启用菜单栏： + + + +**相关示例：** [RichText. 初始化](https://snippet.dhtmlx.com/t55alxiy?tag=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..8844be4 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md @@ -0,0 +1,300 @@ +--- +sidebar_label: 与 Angular 集成 +title: 与 Angular 集成 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解与 Angular 的集成方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费试用版。 +--- + +# 与 Angular 集成 {#integration-with-angular} + +:::tip[提示] +请确保您已熟悉 Angular 的基本概念和模式。如需复习，请参阅 [Angular 文档](https://v17.angular.io/docs)。 +::: + +DHTMLX RichText 可与 Angular 配合使用。完整的代码示例请参见 [GitHub 演示](https://github.com/DHTMLX/angular-richtext-demo)。 + +## 创建项目 {#create-a-project} + +:::info[信息] +在创建新项目之前，请先安装 [Angular CLI](https://v17.angular.io/cli) 和 [Node.js](https://nodejs.org/en/)。 +::: + +使用 Angular CLI 创建一个名为 *my-angular-richtext-app* 的新项目： + +~~~bash +ng new my-angular-richtext-app +~~~ + +:::note[注意] +在项目创建过程中，当 Angular CLI 提示时，请禁用服务端渲染（SSR）和静态站点生成（SSG/Prerendering）。 +::: + +该命令会安装所有必要的工具，无需执行其他命令。 + +### 安装依赖 {#install-dependencies} + +切换到新应用的目录： + +~~~bash +cd my-angular-richtext-app +~~~ + +使用 [yarn](https://yarnpkg.com/) 包管理器安装依赖并启动开发服务器： + +~~~bash +yarn +yarn start +~~~ + +应用将在 localhost 上运行（例如 `http://localhost:3000`）。 + +## 创建 RichText {#create-richtext} + +停止应用并安装 RichText 包。 + +### 第一步：安装包 {#step-1-install-the-package} + +下载 [RichText 试用包](/how_to_start/#installing-richtext-via-npm-or-yarn) 并按照 README 文件中的步骤操作。试用许可证有效期为 30 天。 + +### 第二步：创建组件 {#step-2-create-the-component} + +创建一个 Angular 组件，将 RichText 添加到应用中。在 *src/app/* 目录下，创建 *richtext* 文件夹，并添加一个名为 *richtext.component.ts* 的新文件。 + +#### 导入源文件 {#import-source-files} + +打开 *richtext.component.ts* 并导入 RichText 源文件。 + +对于从本地文件夹安装的 PRO 版本，请使用： + +~~~jsx +import { Richtext } from 'dhx-richtext-package'; +~~~ + +对于试用版本，请使用： + +~~~jsx +import { Richtext } from '@dhx/trial-richtext'; +~~~ + +本教程使用 RichText 的试用版本。 + +#### 设置容器并初始化 RichText {#set-the-container-and-initialize-richtext} + +为 RichText 设置容器元素，并在 `ngOnInit()` 中使用 `Richtext` 构造函数初始化组件。在 `ngOnDestroy()` 中调用 [`destructor()`](api/methods/destructor.md) 方法进行清理： + +~~~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 中以 的形式使用 "richtext" 选择器 + 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 + } +} +~~~ + +#### 添加样式 {#add-styles} + +在 *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); +} +~~~ + +#### 加载数据 {#load-data} + +为 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()` 中将 `value` 属性传递给 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(); // 从 data 模块中提取值 + 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(); // 从 data 模块中提取值 + this._editor = new Richtext(this.richtext_container.nativeElement, { + // 其他配置属性 + }); + + // 通过 setValue() 方法应用数据 + this._editor.setValue(value); + } + + ngOnDestroy(): void { + this._editor.destructor(); + } +} +~~~ + +RichText 组件现已准备就绪。当 `` 元素挂载时，Angular 会渲染带有数据的编辑器。完整的配置选项列表请参见 [RichText API 概览](api/overview/main_overview.md)。 + +#### 处理事件 {#handle-events} + +RichText 会在用户操作时触发事件。使用 [`api.on()`](api/internal/on.md) 方法订阅事件以响应用户输入。请参见[完整的事件列表](api/overview/events_overview.md)。 + +打开 *richtext.component.ts* 并更新 `ngOnInit()` 方法。以下示例在每次触发 [`print`](api/events/print.md) 事件时记录一条消息： + +~~~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(); +} +~~~ + +### 第三步：将 RichText 添加到应用 {#step-3-add-richtext-to-the-app} + +打开 *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 在页面上渲染并显示数据。 + +
+![在 Angular 应用程序中渲染的 DHTMLX RichText（含示例内容）](/img/trial_richtext.png) +
+ +您现在已在 Angular 中完成了 RichText 的集成。请根据您的需求自定义代码。完整示例可在 [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..d59fb8b --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_react.md @@ -0,0 +1,253 @@ +--- +sidebar_label: 与 React 集成 +title: 与 React 集成 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解与 React 的集成方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。 +--- + +# 与 React 集成 {#integration-with-react} + +:::tip[提示] +请确保您已熟悉 [React](https://react.dev) 的基本概念和模式。如需复习，请参阅 [React 文档](https://react.dev/learn)。 +::: + +DHTMLX RichText 支持与 React 配合使用。完整的代码示例请参见 [GitHub 演示](https://github.com/DHTMLX/react-richtext-demo)。 + +## 创建项目 {#create-a-project} + +:::info[信息] +在创建新项目之前，请先安装 [Node.js](https://nodejs.org/en/) 以及（可选）[Vite](https://vite.dev/)。 +::: + +使用 Create React App 创建一个新的 *my-react-richtext-app* 项目： + +~~~bash +npx create-react-app my-react-richtext-app +~~~ + +### 安装依赖 {#install-dependencies} + +切换到新的应用目录： + +~~~bash +cd my-react-richtext-app +~~~ + +使用包管理器安装依赖并启动开发服务器。 + +使用 [yarn](https://yarnpkg.com/) 时，运行： + +~~~bash +yarn +yarn start +~~~ + +使用 [npm](https://www.npmjs.com/) 时，运行： + +~~~bash +npm install +npm start +~~~ + +应用将在本地运行（例如 `http://localhost:3000`）。 + +## 创建 RichText {#create-richtext} + +停止应用并安装 RichText 包。 + +### 第一步：安装包 {#step-1-install-the-package} + +下载 [试用版 RichText 包](/how_to_start/#installing-richtext-via-npm-or-yarn) 并按照 README 文件中的步骤操作。试用许可证有效期为 30 天。 + +### 第二步：创建组件 {#step-2-create-the-component} + +创建一个 React 组件以将 RichText 添加到应用中。在 *src/* 目录下，创建一个名为 *Richtext.jsx* 的新文件。 + +#### 导入源文件 {#import-source-files} + +打开 *Richtext.jsx* 并导入 RichText 源文件。 + +对于从本地文件夹安装的 PRO 版本，请使用： + +~~~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 {#set-the-container-and-initialize-richtext} + +为 RichText 设置一个容器元素，并在 `useEffect()` 内使用 `Richtext` 构造函数初始化组件。在清理函数中调用 [`destructor()`](api/methods/destructor.md) 方法以销毁 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
+
+
+} +~~~ + +#### 添加样式 {#add-styles} + +将 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); +} +~~~ + +#### 加载数据 {#load-data} + +为 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* 并将 `props.value` 传入 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) 方法将数据加载到 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(); + + let value = props.value; + + useEffect(() => { + const editor = new Richtext(richtext_container.current, { + // 配置属性 + }); + + editor.setValue(value); + + return () => { + editor.destructor(); + }; + }, []); + + return
+
+
+} +~~~ + +RichText 组件现已可以使用。当 `` 元素挂载时，React 会渲染带有数据的编辑器。完整的配置选项列表请参见 [RichText API 概览](api/overview/main_overview.md)。 + +#### 处理事件 {#handle-events} + +RichText 会在用户操作时触发事件。使用 [`api.on()`](api/internal/on.md) 方法订阅事件以响应用户输入。请参见[完整事件列表](api/overview/events_overview.md)。 + +打开 *Richtext.jsx* 并更新 `useEffect()` 钩子。以下示例在每次触发 [`print`](api/events/print.md) 事件时记录一条消息： + +~~~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 在页面上渲染并显示数据。 + +
+![在 React 应用程序中渲染的 DHTMLX RichText（含示例内容）](/img/trial_richtext.png) +
+ +现在您已在 React 中完成了 RichText 的集成。请根据需要自定义代码。完整示例可在 [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..f2e4066 --- /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 集成 {#integration-with-svelte} + +:::tip[提示] +请确保您已熟悉 [Svelte](https://svelte.dev/) 的基本概念和模式。如需复习，请参阅 [Svelte 文档](https://svelte.dev/docs)。 +::: + +DHTMLX RichText 可与 Svelte 配合使用。完整的代码示例请参见 [GitHub 演示](https://github.com/DHTMLX/svelte-richtext-demo)。 + +## 创建项目 {#create-a-project} + +:::info[信息] +在创建新项目之前，请先安装 [Node.js](https://nodejs.org/en/)，以及可选安装 [Vite](https://vite.dev/)。 +::: + +本教程使用基于 Vite 的 Svelte 项目。关于 SvelteKit 及其他选项，请参阅 [Svelte 项目指南](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit)。 + +创建一个新的 Vite 项目： + +~~~bash +npm create vite@latest +~~~ + +### 安装依赖 {#install-dependencies} + +当脚手架工具提示输入项目名称时，使用 *my-svelte-richtext-app*。然后切换到新目录： + +~~~bash +cd my-svelte-richtext-app +~~~ + +使用包管理器安装依赖并启动开发服务器。 + +使用 [yarn](https://yarnpkg.com/) 时，运行： + +~~~bash +yarn +yarn dev +~~~ + +使用 [npm](https://www.npmjs.com/) 时，运行： + +~~~bash +npm install +npm run dev +~~~ + +应用将在 localhost 上运行（例如 `http://localhost:3000`）。 + +## 创建 RichText {#create-richtext} + +停止应用并安装 RichText 包。 + +### 第一步：安装包 {#step-1-install-the-package} + +下载 [RichText 试用包](/how_to_start/#installing-richtext-via-npm-or-yarn) 并按照 README 文件中的步骤操作。试用许可证有效期为 30 天。 + +### 第二步：创建组件 {#step-2-create-the-component} + +创建一个 Svelte 组件，将 RichText 添加到应用中。在 *src/* 目录下，创建名为 *Richtext.svelte* 的新文件。 + +#### 导入源文件 {#import-source-files} + +打开 *Richtext.svelte* 并导入 RichText 源文件。 + +对于从本地文件夹安装的 PRO 版本，使用： + +~~~html title="Richtext.svelte" + +~~~ + +对于试用版本，使用： + +~~~html title="Richtext.svelte" + +~~~ + +本教程使用 RichText 试用版本。 + +#### 设置容器并初始化 RichText {#set-the-container-and-initialize-richtext} + +为 RichText 设置一个容器元素，并在 `onMount()` 中初始化组件。在 `onDestroy()` 中调用 [`destructor()`](api/methods/destructor.md) 方法以移除 RichText： + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +#### 添加样式 {#add-styles} + +将 RichText 及其容器的样式添加到项目的主 CSS 文件中（例如 *src/app.css*）： + +~~~css title="app.css" +/* 基础页面样式 */ +html, +body { + height: 100%; + padding: 0; + margin: 0; +} + +/* RichText 容器 */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* RichText 控件 */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### 加载数据 {#load-data} + +为 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.svelte*，导入数据，并将 value 作为 prop 传递给 `` 组件： + +~~~html {} title="App.svelte" + + + +~~~ + +打开 *Richtext.svelte*，将 prop 值传入 RichText 配置： + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +或者，在 `onMount()` 中调用 [`setValue()`](api/methods/set-value.md) 方法将数据加载到 RichText： + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +RichText 组件现已准备好使用。当 `` 元素挂载时，Svelte 会将带有数据的编辑器渲染出来。有关完整的配置选项列表，请参阅 [RichText API 概述](api/overview/main_overview.md)。 + +#### 处理事件 {#handle-events} + +RichText 会在用户操作时触发事件。使用 [`api.on()`](api/internal/on.md) 方法订阅事件以响应用户输入。请参阅[完整事件列表](api/overview/events_overview.md)。 + +打开 *Richtext.svelte* 并更新 `onMount()` 钩子。以下示例在每次触发 [`print`](api/events/print.md) 事件时记录一条日志： + +~~~html {} title="Richtext.svelte" + + +// ... +~~~ + +启动应用，查看 RichText 在页面上渲染数据的效果。 + +
+![在 Svelte 应用程序中渲染的 DHTMLX RichText（含示例内容）](/img/trial_richtext.png) +
+ +现在您已在 Svelte 中实现了一个可正常运行的 RichText 集成。请根据需求自定义代码。完整示例可在 [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..f1cb83a --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md @@ -0,0 +1,277 @@ +--- +sidebar_label: 与 Vue 集成 +title: 与 Vue 集成 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解与 Vue 的集成方式。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费试用版。 +--- + +# 与 Vue 集成 {#integration-with-vue} + +:::tip[提示] +请确保您已熟悉基本的 [Vue](https://vuejs.org/) 概念和模式。如需复习，请参阅 [Vue 3 文档](https://vuejs.org/guide/introduction.html#getting-started)。 +::: + +DHTMLX RichText 可与 Vue 配合使用。完整代码示例请参见 [GitHub 演示](https://github.com/DHTMLX/vue-richtext-demo)。 + +## 创建项目 {#create-a-project} + +:::info[信息] +在创建新项目之前，请先安装 [Node.js](https://nodejs.org/en/)。 +::: + +使用官方脚手架工具创建 Vue 项目： + +~~~bash +npm create vue@latest +~~~ + +该命令会安装并运行 `create-vue`。当脚手架提示输入项目名称时，使用 *my-vue-richtext-app*。详情请参阅 [Vue.js 快速入门](https://vuejs.org/guide/quick-start.html#creating-a-vue-application)。 + +### 安装依赖 {#install-dependencies} + +切换到应用目录： + +~~~bash +cd my-vue-richtext-app +~~~ + +使用包管理器安装依赖并启动开发服务器。 + +使用 [yarn](https://yarnpkg.com/)，运行： + +~~~bash +yarn +yarn dev +~~~ + +使用 [npm](https://www.npmjs.com/)，运行： + +~~~bash +npm install +npm run dev +~~~ + +应用将在 localhost 上运行（例如，`http://localhost:3000`）。 + +## 创建 RichText {#create-richtext} + +停止应用并安装 RichText 包。 + +### 第一步：安装包 {#step-1-install-the-package} + +下载 [RichText 试用包](/how_to_start/#installing-richtext-via-npm-or-yarn) 并按照 README 文件中的步骤操作。试用许可证有效期为 30 天。 + +### 第二步：创建组件 {#step-2-create-the-component} + +创建一个 Vue 组件以将 RichText 添加到应用中。在 *src/components/* 目录下，创建一个名为 *Richtext.vue* 的新文件。 + +#### 导入源文件 {#import-source-files} + +打开 *Richtext.vue* 并导入 RichText 源文件。 + +对于从本地文件夹安装的 PRO 版本，使用： + +~~~html title="Richtext.vue" + +~~~ + +对于试用版本，使用： + +~~~html title="Richtext.vue" + +~~~ + +本教程使用 RichText 的试用版本。 + +#### 设置容器并初始化 RichText {#set-the-container-and-initialize-richtext} + +为 RichText 设置容器元素，并在 `mounted()` 中使用 `Richtext` 构造函数初始化组件。在 `unmounted()` 中调用 [`destructor()`](api/methods/destructor.md) 方法以移除 RichText： + +~~~html {} title="Richtext.vue" + + + +~~~ + +#### 添加样式 {#add-styles} + +将 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); +} +~~~ + +#### 加载数据 {#load-data} + +为 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.vue*，导入数据，并通过 `data()` 方法初始化。将值作为 prop 传递给 `` 组件： + +~~~html {} title="App.vue" + + + +~~~ + +打开 *Richtext.vue* 并将 prop 值传递给 RichText 配置： + +~~~html {} title="Richtext.vue" + + + +~~~ + +或者，在 `mounted()` 中调用 [`setValue()`](api/methods/set-value.md) 方法将数据加载到 RichText 中： + +~~~html {} title="Richtext.vue" + + + +~~~ + +RichText 组件已准备好使用。当 `` 元素挂载时，Vue 会渲染带有数据的编辑器。完整的配置选项列表，请参阅 [RichText API 概览](api/overview/main_overview.md)。 + +#### 处理事件 {#handle-events} + +RichText 会在用户操作时触发事件。使用 [`api.on()`](api/internal/on.md) 方法订阅事件以响应用户输入。请参阅[完整事件列表](api/overview/events_overview.md)。 + +打开 *Richtext.vue* 并更新 `mounted()` 钩子。以下示例在每次 [`print`](api/events/print.md) 事件触发时记录一条消息： + +~~~html {} title="Richtext.vue" + + +// ... +~~~ + +启动应用，查看 RichText 在页面上渲染数据的效果。 + +
+![在 Vue 应用程序中渲染的 DHTMLX RichText（含示例内容）](/img/trial_richtext.png) +
+ +您现在已在 Vue 中完成 RichText 的集成。可根据需要自定义代码。完整示例可在 [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..10a903f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/localization.md @@ -0,0 +1,495 @@ +--- +sidebar_label: 本地化 +title: 本地化 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解本地化相关内容。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# 本地化 {#localization} + +RichText 支持对所有界面标签进行本地化。您可以创建新的语言包或修改内置语言包，然后通过编辑器配置将其应用。 + +## 默认语言包 {#default-locale} + +默认情况下，RichText 使用英语语言包： + +~~~jsx +const en = { + richtext: { + // 按钮/操作 + 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", + + // 菜单栏专属选项 + 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", + + // 剪贴板 + "Operation failed. Please check your browser's clipboard permissions.": + "Operation failed. Please check your browser's clipboard permissions.", + + // 块样式下拉菜单 + Heading: "Heading", + Quote: "Quote", + Paragraph: "Paragraph", + "Text style": "Text style", + Lists: "Lists", + + normal: "normal", + default: "default", + + // 列表 + "Bulleted list": "Bulleted list", + "Numbered list": "Numbered list", + + // 链接 + "Enter text to display": "Enter text to display", + "Paste link": "Paste link", + "Link copied to clipboard": "Link copied to clipboard", + + // 快捷键分组 + "Text formatting": "Text formatting", + Editing: "Editing", + "Special actions": "Special actions", + + // 颜色 + 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", + + // 色调 + "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[信息] +RichText 还内置了德语（`de`）和中文（`cn`）语言包。可通过 `richtext.locales` 命名空间访问任意内置语言包：`richtext.locales.en`、`richtext.locales.de`、`richtext.locales.cn`。 +::: + +
+de locale + +~~~jsx +const de = { + richtext: { + // 按钮/操作 + 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", + + // 菜单栏专属选项 + 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", + + // 剪贴板 + "Operation failed. Please check your browser's clipboard permissions.": + "Operation fehlgeschlagen. Bitte überprüfen Sie die Berechtigungen für die Zwischenablage Ihres Browsers.", + + // 块样式下拉菜单 + Heading: "Überschrift", + Quote: "Zitat", + Paragraph: "Absatz", + "Text style": "Textstil", + Lists: "Listen", + + normal: "normal", + default: "standard", + + // 列表 + "Bulleted list": "Liste mit Aufzählungszeichen", + "Numbered list": "Nummerierte Liste", + + // 链接 + "Enter text to display": "Text zum Anzeigen eingeben", + "Paste link": "Link einfügen", + "Link copied to clipboard": "Link in die Zwischenablage kopiert", + + // 快捷键分组 + "Text formatting": "Textformatierung", + Editing: "Bearbeitung", + "Special actions": "Spezielle Aktionen", + + // 颜色 + 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", + + // 色调 + "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: { + // 按钮/操作 + 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": "文档模式", + + // 菜单栏专属选项 + 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": "键盘快捷键", + + // 剪贴板 + "Operation failed. Please check your browser's clipboard permissions.": + "操作失败。请检查浏览器的剪贴板权限。", + + // 块样式下拉菜单 + Heading: "标题", + Quote: "引用", + Paragraph: "段落", + "Text style": "文本样式", + Lists: "列表", + + normal: "普通的", + default: "默认", + + // 列表 + "Bulleted list": "项目符号列表", + "Numbered list": "编号列表", + + // 链接 + "Enter text to display": "输入要显示的文本", + "Paste link": "粘贴链接", + "Link copied to clipboard": "链接已复制到剪贴板", + + // 快捷键分组 + "Text formatting": "文本格式化", + Editing: "编辑", + "Special actions": "特殊操作", + + // 颜色 + Black: "黑色", + Gray: "灰色", + White: "白色", + Red: "红色", + Orange: "橙色", + Yellow: "黄色", + Lime: "酸橙色", + Green: "绿色", + Teal: "水鸭色", + Cyan: "青色", + Blue: "蓝色", + Indigo: "靛蓝色", + Magenta: "洋红色", + + // 色调 + "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": "深洋红色" + } +}; +~~~ +
+ +## 应用自定义语言包 {#apply-a-custom-locale} + +创建一个包含所有界面标签翻译的语言包对象（或修改内置语言包）。可在初始化时应用该语言包，也可在运行时切换，如下所示。 + +### 在初始化时应用语言包 {#apply-the-locale-at-initialization} + +在构造函数配置中，将语言包传递给 [`locale`](api/config/locale.md) 属性： + +~~~jsx +const editor = new richtext.Richtext("#root", { + locale: richtext.locales.de + // 其他配置属性 +}); +~~~ + +### 在运行时切换语言包 {#switch-the-locale-at-runtime} + +调用 [`setLocale()`](api/methods/set-locale.md) 方法，可在初始化后切换语言包： + +~~~jsx +editor.setLocale(richtext.locales.cn); +~~~ + +若要恢复默认英语语言包，可不传参数或传入 `null` 来调用 [`setLocale()`](api/methods/set-locale.md)： + +~~~jsx +editor.setLocale(); +~~~ + +## 示例 {#example} + +以下示例演示了在多个 RichText 语言包之间循环切换： + + diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/mentions_and_tags.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/mentions_and_tags.md new file mode 100644 index 0000000..6af6bf8 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/mentions_and_tags.md @@ -0,0 +1,274 @@ +--- +sidebar_label: 提及与标签 +title: 提及与标签 +description: '了解如何在 DHTMLX RichText 中配置 @提及、#标签以及自定义下拉触发器。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费试用版。' +--- + +# 提及与标签 {#mentions-and-tags} + +RichText 支持用户自定义触发字符，在文档中输入后会弹出建议下拉菜单。用户从菜单中选择一项后，RichText 会将一个不可编辑的 token 插入文档。典型使用场景： + +- `@` — 提及某人 +- `#` — 添加标签 +- `/` — 插入命令或模板 +- `$` — 插入金融代码或变量 +- `:` — 插入表情符号 + +通过 [`triggers`](api/config/triggers.md) 属性配置相关行为。每个条目将一个字符绑定到一个数据源。 + +## 配置触发器 {#configure-triggers} + +每个触发器是 [`triggers`](api/config/triggers.md) 数组中形如 `{ trigger, data, showTrigger?, action? }` 的对象。[`data`](api/config/triggers.md#data-source-forms) 字段支持三种形式： + +- 静态数组 — RichText 会自动按 `label` 进行过滤（不区分大小写，使用 `startsWith`）： + +~~~jsx {} +{ trigger: "@", data: people } +~~~ + +- 同步函数 — 由你自己处理结果过滤： + +~~~jsx {} +{ + trigger: "#", + data: query => tags.filter(t => + t.label.toLowerCase().startsWith(query.toLowerCase()) + ) +} +~~~ + +- 异步函数 — 用于服务端搜索： + +~~~jsx {} +{ + trigger: "+", + data: async query => { + const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`); + const users = await res.json(); + return users.map(u => ({ + id: String(u.id), + label: u.name, + url: u.website + })); + } +} +~~~ + +**相关示例：** [RichText. 提及、标签与异步查询](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) + +## Token 渲染 {#token-rendering} + +用户从下拉菜单中选择一项后，RichText 会将其以带有两个 data 属性的 `` 元素形式插入： + +~~~html {2-3} +@Alice +~~~ + +该 token 是一个不可编辑的单节点。按 `Backspace` 可一次性将其删除。RichText 将 `url` 字段存储在 `href` 中，因此 `Ctrl+Click` token 可跳转链接。 + +你可以使用 `data-token` 选择器为 token 设置样式： + +~~~css {} +.wx-editor-content a[data-token="@"][data-token-id="alice"] { + background: #fb8500; + color: #fff; + border-radius: 3px; + padding: 0 2px; +} +~~~ + +**相关示例：** + +- [RichText. 查找并高亮提及](https://snippet.dhtmlx.com/8y6zvzh2?tag=richtext) +- [RichText. 高亮所有提及](https://snippet.dhtmlx.com/2rbo12jx?tag=richtext) + +## 隐藏触发字符 {#hide-the-trigger-character} + +在触发器上设置 `showTrigger: false`，可仅插入条目标签，而不显示触发符号： + +~~~jsx {4} +{ + trigger: "/", + data: commands, + showTrigger: false +} +~~~ + +## 键盘交互 {#keyboard-interaction} + +在建议下拉菜单中可使用以下快捷键： + +- `↑` / `↓` — 在条目间移动 +- `Enter` — 插入当前选中的条目 +- `Escape` — 关闭下拉菜单且不插入内容 + +## 监听建议事件 {#listen-to-suggestion-events} + +三个事件通过 Event Bus 暴露下拉菜单的生命周期： + +- [`insert-token`](api/events/insert-token.md) — 用户选择条目时触发 +- [`show-suggest`](api/events/show-suggest.md) — 下拉菜单打开时触发 +- [`hide-suggest`](api/events/hide-suggest.md) — 下拉菜单关闭时触发 + +~~~jsx {5-7} +const editor = new richtext.Richtext("#root", { + triggers: [{ trigger: "@", data: people }] +}); + +editor.api.on("insert-token", ({ data, trigger, showTrigger }) => { + console.log(`Inserted ${trigger}${data.label} (id: ${data.id})`); +}); +~~~ + +## 自定义下拉条目 {#customize-the-dropdown-item} + +默认情况下，下拉菜单显示每个条目的 `label`。如需渲染自定义建议项（例如头像、姓名和邮箱），可通过 [`triggerTemplate`](api/config/trigger-template.md) 属性传入模板。 + +### 示例 {#example} + +~~~jsx {1,4-9} +const { template } = richtext; + +new richtext.Richtext("#root", { + triggers: [{ trigger: "@", data: people }], + triggerTemplate: template(({ data, trigger }) => ` +
+
${trigger}${data.label}
+
${data.url || ""}
+
+ `) +}); +~~~ + +**相关示例：** [RichText. 每个触发器的自定义下拉模板](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext) + +## 选择时执行自定义动作 {#custom-action-on-select} + +默认情况下，选择条目会将其作为 token 插入文档。若要改为执行自己的代码，可在触发器中添加 `action` callback。RichText 会删除已输入的触发文本并以所选条目调用 `action(item)`——不插入 token，由你决定添加什么内容。 + +:::note[注意] +`action` 优先于 `showTrigger`。设置 `action` 后，`showTrigger` 将被忽略。 +::: + +### 添加表情符号 {#add-emoji} + +`:` 触发器可插入表情符号，每个条目包含自定义的 `code` 字段。将 `action` 与 [`triggerTemplate`](api/config/trigger-template.md) 配合使用，使下拉菜单显示表情符号本身而非仅显示其标签： + +~~~jsx {18-20,24} +const { template, Richtext } = richtext; + +const emoji = [ + { + id: "apple", label: "apple", code: "1F34E" + }, + { + id: "blue_car", label: "blue_car", code: "1F699" + }, + { + id: "computer", label: "computer", code: "1F4BB" + } +]; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: emoji, // [{ id: "apple", label: "apple", code: "1F34E" }, ...] + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // 在下拉菜单中渲染表情符号本身（而不仅仅是其标签） + triggerTemplate: template(({ data }) => `${emojiFromCode(data.code)} ${data.label}`) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} +~~~ + +**相关示例：** [RichText. Emoji 自动补全](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) + +### 按分类分组表情符号 {#group-emoji-by-categories} + +当 `data` 参数为函数时，你不必局限于内置的 `label` 匹配逻辑，可以自行过滤并在下拉菜单中保留分类标题。添加包含 `label` 字段但不含 `code` 的标题条目。`data` 函数首先找到匹配查询的表情符号，然后将表情符号与仍有匹配项的分类标题一并返回： + +~~~jsx {17-26,31-33} +const { template, Richtext } = richtext; + +// 标题条目不含 `code` 字段；表情符号条目则包含 +const emoji = [ + { id: "$smileys", label: "Smileys", category: 1 }, // 分类 + { id: "grinning", label: "grinning", code: "1F600", category: 1 }, + { id: "smile", label: "smile", code: "1F604", category: 1 }, + { id: "$animals", label: "Animals", category: 2 }, // 分类 + { id: "dog", label: "dog", code: "1F436", category: 2 }, + { id: "cat", label: "cat", code: "1F431", category: 2 } +]; + +const editor = new Richtext("#root", { + triggers: [ + { + trigger: ":", + data: query => { + const matched = emoji.filter(item => + item.code && + item.label.toLowerCase().startsWith(query.toLowerCase().trim()) + ); + const categories = new Set(matched.map(item => item.category)); + // 保留匹配的表情符号以及仍有匹配项的分类标题 + return emoji.filter(item => + item.code ? matched.includes(item) : categories.has(item.category) + ); + }, + action: item => editor.insertValue(`${emojiFromCode(item.code)} `) + } + ], + // 正常渲染表情符号行，并以粗体渲染分类标题 + triggerTemplate: template(({ data }) => + data.code ? `${emojiFromCode(data.code)} ${data.label}` : `${data.label}` + ) +}); + +function emojiFromCode(code) { + return String.fromCodePoint(parseInt(code, 16)); +} + +// 标题不含 `code` —— 忽略对它们的选择，使其永远不会被插入 +editor.api.intercept("insert-token", ({ data }) => !!data.code); +~~~ + +### 添加斜杠命令菜单 {#add-slash-style-command-menu} + +你可以使用 `action` 构建斜杠命令菜单（类似 Notion 或 Slack 中的 `/`）。将命令名称存储在每个条目的 `id` 中，将其选项存储在自定义的 `config` 字段中，并让 callback 通过 [`api.exec`](api/internal/exec.md) 执行命令： + +~~~jsx {13} +// 每个条目在 `id` 中存储一个 api.exec 操作名称，在 `config` 中存储其参数 +const commands = [ + { id: "set-text-style", label: "Heading 1", config: { tag: "h1" } }, + { id: "insert-list", label: "Bulleted list", config: { type: "bulleted" } }, + { id: "insert-line", label: "Divider" } // 无 config → 应用 `|| {}` +]; + +const editor = new richtext.Richtext("#root", { + triggers: [ + { + trigger: "/", + data: commands, + action: item => editor.api.exec(item.id, item.config || {}) + } + ] +}); +~~~ + +**相关示例：** [RichText. 斜杠命令](https://snippet.dhtmlx.com/e0mrmyam?tag=richtext) + +## 相关 API {#related-api} + +- [`triggers`](api/config/triggers.md) +- [`triggerTemplate`](api/config/trigger-template.md) +- [`insert-token`](api/events/insert-token.md) +- [`show-suggest`](api/events/show-suggest.md) +- [`hide-suggest`](api/events/hide-suggest.md) 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..47f6cfe --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/stylization.md @@ -0,0 +1,93 @@ +--- +title: 样式定制 +sidebar_label: 样式定制 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解样式定制的相关内容。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# 样式定制 {#styling} + +通过在编辑器容器及其子元素上覆盖 CSS 变量，可以自定义 DHTMLX RichText 的外观。 + +本指南介绍如何应用**深色主题**，以及如何使用 CSS 类选择器定位菜单栏、工具栏、弹出层和内容区域。 + +## 默认结构与类名 {#default-structure-and-class-names} + +RichText 使用以下核心类来构建 UI 结构： + +| 类名 | 说明 | +|------------------------|---------------------------------------------| +| `.wx-richtext` | RichText 组件的根容器 | +| `.wx-richtext-menubar` | 菜单栏容器 | +| `.wx-richtext-menu` | 菜单栏下拉菜单容器 | +| `.wx-richtext-toolbar` | 工具栏容器 | +| `.wx-editor-area` | 主可编辑内容区域容器 | + +在自定义 CSS 选择器中使用这些类，可以覆盖编辑器的外观样式。 + +## 覆盖默认样式 {#override-default-styles} + +要覆盖默认样式，请在 `#root` 容器或特定子元素上重新定义 CSS 变量： + +```html +
+ + +``` + +:::note[注意] +这些样式应用了深色背景，调整了按钮和图标颜色，并提升了深色 UI 主题下的可读性。 +::: + +## 支持的 CSS 变量 {#supported-css-variables} + +| 变量名 | 说明 | +| ---------------------------- | ------------------------------------------------------------ | +| `--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` | 弹出层元素的边框样式 | + +## 最佳实践 {#best-practices} + +* 使用 `color-scheme: dark` 以改善深色模式下原生输入框的样式表现 +* 避免在没有充分理由的情况下修改布局相关属性（如 `display`、`position`） + +:::tip[提示] +如需对特定标签设置排版样式（字体系列、字体大小、颜色、`h1`、`p`、`blockquote` 及其他块级标签的背景），请使用 [`defaultStyles`](api/config/default-styles.md) 配置属性并搭配对应的 CSS 规则。完整用法请参阅[配置指南](guides/configuration.md#configure-default-styles)。 +::: + +## 在线演示 {#live-demo} + +以下示例为 RichText 应用了自定义样式： + + + +**相关文章：** [配置](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..4eea3e9 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/typescript_support.md @@ -0,0 +1,38 @@ +--- +sidebar_label: TypeScript 支持 +title: TypeScript 支持 +description: 您可以在文档中了解如何将 TypeScript 与 DHTMLX JavaScript RichText 库结合使用。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# TypeScript 支持 {#typescript-support} + +从 v2.0 起，DHTMLX RichText 内置了 TypeScript 类型定义，无需额外配置。 + +:::note[注意] +在 Snippet Tool 中体验编辑器。 +::: + +## TypeScript 的优势 {#advantages-of-typescript} + +在 DHTMLX RichText 中使用 TypeScript 可带来： + +- 类型安全 — 编译器在构建阶段即可捕获配置属性和方法参数的错误用法 +- 自动补全 — IDE 在输入时会提示合法的属性名、方法签名及值类型 +- 自文档化 API — 配置对象和方法上的类型注解同时充当内联文档 + +## 在 TypeScript 中初始化 RichText {#initialize-richtext-in-typescript} + +以下示例展示了如何在 TypeScript 中初始化 RichText，并借助内置类型定义获得自动补全支持： + +~~~ts +import { Richtext } from "@dhx/richtext"; + +const editor = new Richtext("#root", { + menubar: true, + layoutMode: "document" +}); +~~~ + +## 参考 API 类型 {#reference-api-types} + +有关每个配置属性的 TypeScript 签名，请参阅 [属性概览](api/overview/properties_overview.md)。有关方法签名，请参阅 [方法概览](api/overview/methods_overview.md)。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/working_with_server.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/working_with_server.md new file mode 100644 index 0000000..8ee6080 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/working_with_server.md @@ -0,0 +1,121 @@ +--- +sidebar_label: 与服务器协作 +title: 与服务器协作 +description: 了解 RichText 如何与后端进行图片上传通信，包括请求/响应协议以及如何接入自定义服务器。浏览开发者指南和 API 参考，体验代码示例和在线演示，并下载免费 30 天评估版 DHTMLX RichText。 +--- + +# 与服务器协作 {#working-with-the-server} + +RichText 完全在浏览器中运行，无需后端即可进行内容编辑或保存。您的应用可以自由选择持久化编辑器内容的方式。唯一需要服务器的功能是**图片上传**：当用户在文档中插入图片时，RichText 可以将文件以内联方式嵌入内容，或将其发送到 HTTP 端点并存储其链接。 + +本指南说明： + +- 未配置上传服务器时的默认行为 +- 服务器需要实现的 HTTP 协议规范 +- RichText 如何使用服务器返回的 URL +- 如何使用演示后端测试该功能 + +## 默认行为：内联图片 {#default-behavior-inline-images} + +如果未设置 [`imageUploadUrl`](api/config/image-upload-url.md) 属性，RichText 将回退到内联图片模式。当用户插入图片时，RichText 在浏览器中读取文件，将原始文件编码为 `data:image/...;base64,...` URL，并将其直接写入编辑器内容，作为 `` 元素的 `src`。RichText 通过 `width`/`height` 属性将显示尺寸限制在 1024×800 的范围内，但嵌入的字节仍是原始的全分辨率文件——客户端不会对其进行缩放或重新编码。 + +此方式无需任何后端，适合快速演示，但存在明显的局限性： + +- 编码后的字节存储在文档内部，因此每插入一张图片，保存的 HTML 文件就会增大 +- 同一张图片在两份文档中各存储一份，没有共享资源可供去重 +- 由于字节不是独立资源，服务器无法通过 CDN 提供服务，也无法对其进行后处理（缩放、重新编码、扫描） +- 内联图片不会被内置的 DOCX / PDF [导出](api/events/export.md) 功能保留——如果依赖导出功能，请配置上传服务器，使图片引用外部 URL + +## 编写自己的服务器 {#write-your-own-server} + +在生产应用中，通过 [`imageUploadUrl`](api/config/image-upload-url.md) 将 RichText 指向服务器： + +~~~jsx {2} +new richtext.Richtext("#root", { + imageUploadUrl: "https://example.com/upload" + // 其他配置属性 +}); +~~~ + +一个最简上传端点需要： + +1. 接受包含名为 `upload` 的文件字段的 `multipart/form-data` POST 请求。 +2. 验证文件（允许的类型、最大尺寸）。 +3. 将文件存储在用户浏览器可访问的位置（本地磁盘通过 HTTP 提供服务、S3、CDN 等）。 +4. 可选：对图片进行缩放或其他处理。 +5. 响应一个 JSON 对象，包含 `status: "server"`、设置为存储文件公开 URL 的 `value`，以及图片的像素 `width` 和 `height`。 + +### 客户端发送的内容 {#what-the-client-sends} + +当设置了 [`imageUploadUrl`](api/config/image-upload-url.md) 时，RichText 将所选文件直接 POST 到该 URL（不会附加 `/images` 或其他路径），因此您传入的 URL 就是完整的 POST 目标地址。 + +请求使用标准 HTML 表单上传方式： + +- **Method：** `POST` +- **Content-Type：** `multipart/form-data` +- **Body：** 一个名为 `upload` 的文件字段 + +### 客户端期望的响应 {#what-the-client-expects-back} + +服务器必须返回一个 JSON 对象。RichText 读取以下字段： + +| 字段 | 类型 | 说明 | +| -------- | ------- | -------------------------------------------------------------------- | +| `status` | string | 成功标识——上传成功时返回 `"server"`。上传器通过该字段区分上传成功与失败；任何其他值（例如 `"error"`）均表示上传失败。插入的图片本身由 `value`、`width` 和 `height` 构建。 | +| `value` | string | 已存储图片的 URL。RichText 将该字符串原样写入文档，作为插入的 `` 的 `src`。 | +| `width` | integer | 插入图片的显示宽度，单位为像素。 | +| `height` | integer | 插入图片的显示高度，单位为像素。 | + +#### 成功响应 {#successful-response} + +上传成功后，返回已存储图片的 URL 及其尺寸： + +~~~json +{ + "status": "server", + "value": "https://cdn.example.com/uploads/abc123.png", + "width": 320, + "height": 207 +} +~~~ + +#### 上传失败 {#failed-upload} + +上传失败时，返回任何非 `"server"` 的状态值： + +~~~json +{ + "status": "error" +} +~~~ + +### 提供已上传图片的访问 {#serve-the-uploaded-image} + +`value` URL 是上传与文档后续每次读取之间的唯一链接。RichText 将该 URL 直接写入文档，因此任何打开已保存内容的客户端（编辑器本身、导出文件、已发布页面）都会通过普通 `GET` 请求从该 URL 获取图片。 + +这意味着： + +- 该 URL 必须可从用户浏览器访问，通常需要是**绝对路径** +- 该 URL 的域名可以与上传端点不同（例如，您可以在自己的服务器上接受上传，并返回 CDN 或对象存储的 URL） +- 如果图片域名与页面域名不同，请确保图片域名允许页面加载图片（通过 CORS 或直接开放公共读取权限） +- 只要文档引用该 URL，服务器就必须保持其可访问性；RichText 不会缓存或复制图片字节 + +URL 的具体格式**不在**协议规范之内。只要浏览器能够通过 `GET` 请求访问该 URL 并获取图片字节，路径、查询字符串乃至协议方案完全由后端决定。 + +### 使用演示服务器进行测试 {#try-it-against-the-demo-server} + +可以使用以下实现了该协议的工作后端来测试此功能： + +~~~jsx +new richtext.Richtext("#root", { + imageUploadUrl: "https://docs.dhtmlx.com/richtext-backend/images" + // 其他配置属性 +}); +~~~ + +演示服务器会对大图片进行缩放，将其存储到磁盘，并返回由其自身提供服务的 URL。该服务器仅用于评估和演示，请勿将生产环境中的编辑器指向它。 + +**相关文章：** + +- [配置](guides/configuration.md) +- [`imageUploadUrl`](api/config/image-upload-url.md) 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..4cc19ef --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/how_to_start.md @@ -0,0 +1,109 @@ +--- +sidebar_label: 快速入门 +title: 快速入门 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解如何开始使用 DHTMLX RichText。浏览开发指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# 快速入门 {#how-to-start} + +本清晰全面的教程将引导您完成在页面上创建一个功能齐全的 RichText 所需的步骤。 + +
+![在网页上运行的 DHTMLX RichText 所见即所得编辑器](/img/richtext/classic_mode.png) +
+ +## 第一步：引入源文件 {#step-1-including-source-files} + +首先创建一个 HTML 文件并将其命名为 *index.html*，然后将 RichText 源文件引入该文件中。 + +需要引入以下两个文件： + +- RichText 的 JS 文件 +- RichText 的 CSS 文件 + +~~~html {5-6} title="index.html" + + + + How to Start with RichText + + + + + + + +~~~ + +### 通过 npm 或 yarn 安装 RichText {#installing-richtext-via-npm-or-yarn} + +您可以使用 **yarn** 或 **npm** 包管理器将 JavaScript RichText 导入到您的项目中。 + +#### 通过 npm 或 yarn 安装试用版 RichText {#installing-trial-richtext-via-npm-or-yarn} + +:::info[信息] +如果您想使用 RichText 的试用版，请下载 [**RichText 试用包**](https://dhtmlx.com/docs/products/dhtmlxRichtext/download.shtml) 并按照 *README* 文件中的步骤操作。请注意，试用版 RichText 仅提供 30 天的使用期限。 +::: + +#### 通过 npm 或 yarn 安装专业版 RichText {#installing-pro-richtext-via-npm-or-yarn} + +:::info[信息] +您可以在 [客户专区](https://dhtmlx.com/clients/) 中生成您的 **npm** 登录名和密码，从而直接访问 DHTMLX 私有 **npm**。详细的安装指南也可在该页面获取。请注意，访问私有 **npm** 的权限仅在您的专有 RichText 许可证有效期内可用。 +::: + +## 第二步：创建 RichText {#step-2-creating-richtext} + +现在您可以将 RichText 添加到页面中了。首先，为 RichText 创建一个 `
` 容器，按以下步骤操作： + +- 在 *index.html* 文件中指定一个 DIV 容器 +- 使用 `richtext.Richtext` 构造函数初始化 RichText + +构造函数接受任意有效的 CSS 选择器（用于指定 RichText 所在的 HTML 容器）以及相应的配置对象作为参数。 + +~~~html {9,12-14} title="index.html" + + + + How to Start with RichText + + + + +
+ + + + +~~~ + +## 第三步：配置 RichText {#step-3-configuring-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) 以及 [**默认样式**](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" + }, + // 其他设置 + } +}); +~~~ + +## 下一步 {#whats-next} + +就这些。只需三个简单的步骤，您就拥有了一个便捷的内容编辑工具。现在您可以开始处理内容，或继续探索 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..5e3633f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/index.md @@ -0,0 +1,176 @@ +--- +sidebar_label: RichText 概述 +title: RichText 概述 +slug: / +description: 您可以在本文档中了解 DHTMLX JavaScript RichText 库的概述。浏览开发者指南和 API 参考，体验代码示例和在线演示，并下载 DHTMLX RichText 免费 30 天评估版本。 +--- + +# RichText 概述 {#richtext-overview} + +**DHTMLX RichText** 是一款基于 JavaScript 构建的灵活轻量级所见即所得编辑器。它专为在现代 Web 应用中提供流畅的编辑体验而设计，具备简洁的 UI、丰富的格式化能力以及对内容渲染的全面控制。无论您是在构建 CMS、内部管理工具还是嵌入式文档编辑器，RichText 均可轻松集成并按需定制。 + +**DHTMLX RichText** 组件包含以下功能： + +- 两种 [**布局模式**](api/config/layout-mode.md) + +- 将内容序列化为 HTML、纯文本和 Markdown + +- 可配置的 [`toolbar`](api/config/toolbar.md)，支持内置按钮和自定义按钮 + +- 静态 [`menubar`](api/config/menubar.md)，可显示或隐藏 + +- 图片上传功能，支持可选的服务器 [上传](api/config/image-upload-url.md) 或内联 base64 嵌入，以及丰富的格式化、自定义样式和全屏模式 + +- [完整的 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-structure} + +### 菜单栏 {#menubar} + +RichText 菜单栏提供对编辑操作的访问，例如新建文档、打印、导入/导出内容等。默认情况下它处于隐藏状态。 + +使用 [`menubar`](api/config/menubar.md) 属性可切换其可见性。菜单栏可以启用或禁用，但其内容目前不支持配置。 + +
+![带有文档和文件操作的 DHTMLX RichText 菜单栏](/img/richtext/menubar.png) +
+ +### 工具栏 {#toolbar} + +RichText 工具栏提供对文本格式化和结构化编辑功能的快速访问。默认情况下，[工具栏](api/config/toolbar.md#default-config) 处于启用状态，并显示一组预定义的常用控件，例如加粗、斜体、字体设置、列表格式化等。 + +[`toolbar`](api/config/toolbar.md) 属性允许您完全自定义工具栏的内容和布局。您可以启用或禁用工具栏、重新排列默认控件，或使用预定义按钮标识符数组和自定义按钮对象来定义完全自定义的工具栏。 + +
+![带有文本格式化控件的 DHTMLX RichText 工具栏](/img/richtext/toolbar.png) +
+ +### 编辑器 {#editor} + +RichText 编辑器是用户创建和格式化内容的核心区域。您可以通过配置选项（如 [`value`](api/config/value.md)、[`layoutMode`](api/config/layout-mode.md) 和 [`defaultStyles`](api/config/default-styles.md)）来控制编辑器的外观和行为。RichText 还支持自定义样式、图片嵌入以及响应式布局调整，以满足应用程序的需求。 + +#### 两种工作模式 {#two-working-modes} + +DHTMLX RichText 可以在"classic"和"document"模式下处理内容。您可以选择最适合的模式，以便在编辑文本时获得舒适的体验。使用 [`layoutMode`](api/config/layout-mode.md) 属性可以通过编程方式切换模式。 + +- `"classic"` + +
+![经典布局模式下的 DHTMLX RichText 编辑器](/img/richtext/classic_mode.png) +
+ +- `"document"` + +
+![文档模式下的 DHTMLX RichText 编辑器](/img/richtext/document_mode.png) +
+ +## 支持的格式 {#supported-formats} + +RichText 编辑器支持 **HTML**、**纯文本** 和 **Markdown** 格式的 [解析](api/methods/set-value.md) 和 [序列化](api/methods/get-value.md)。 + +#### HTML 格式 {#html-format} + +
+![序列化为 HTML 格式的 DHTMLX RichText 内容](/img/richtext/html_format.png) +
+ +#### 文本格式 {#text-format} + +
+![序列化为纯文本的 DHTMLX RichText 内容](/img/richtext/text_format.png) +
+ +#### Markdown 格式 {#markdown-format} + +将内置的 `markdown` 编码器传递给 [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md)，以 Markdown 格式加载或序列化内容： + +~~~jsx +const editor = new richtext.Richtext("#root", { + value: "Hello world" + // 其他配置属性 +}); + +// 将 Markdown 加载到编辑器中 +editor.setValue("# Title\n\nParagraph", richtext.markdown.fromMarkdown); + +// 以 Markdown 格式读取编辑器内容 +const md = editor.getValue(richtext.markdown.toMarkdown); +~~~ + +:::note[注意] +Markdown 支持涵盖有限的语法子集——包括标题、段落、换行、强调、块引用、列表和链接等常见块级和内联元素。在序列化时，没有对应 Markdown 语法的格式（字体系列、字体大小、颜色、对齐方式、行高）将被丢弃。 + +不支持嵌套内联结构，唯一的例外是 **斜体中的加粗**。加粗内嵌链接、列表项中的斜体或多级（嵌套）列表等组合将无法正确渲染。 +::: + +## 复制与粘贴 {#copy-and-paste} + +RichText 编辑器通过标准系统快捷键支持剪贴板操作（Windows/Linux 上的 `Ctrl+C` / `Ctrl+X` / `Ctrl+V`，macOS 上的 `⌘+C` / `⌘+X` / `⌘+V`），以及相应的 [工具栏](api/config/toolbar.md) 按钮和 [菜单栏](api/config/menubar.md) 条目。 + +复制或剪切内容时，RichText 会将两种表示形式写入系统剪贴板： + +- **纯文本** 版本，用于与简单目标（终端、代码编辑器、纯文本输入框）的兼容 +- **HTML** 版本，携带所有内联和块级格式（加粗、斜体、下划线、删除线、字体系列、字体大小、文字和背景颜色、标题、块引用、列表、对齐方式、缩进、行高、链接和图片） + +粘贴行为取决于剪贴板内容的来源： + +- 在两个 RichText 实例之间粘贴（在同一文档或不同页面中）将使用 HTML 表示形式并保留原始格式。 +- 从任何外部来源粘贴——包括浏览器、文字处理器和其他编辑器——将作为纯文本处理。插入的内容将以不带外部格式的文本形式添加。 + +:::note[注意] +工具栏的 **粘贴** 按钮使用异步 Clipboard API，该 API 仅公开纯文本。若要粘贴从另一个 RichText 复制的内容并保留其格式，请使用 `Ctrl+V` / `⌘+V` 快捷键，该快捷键可直接从浏览器的剪贴板事件中接收完整的 HTML 内容。 +::: + +## 键盘快捷键 {#keyboard-shortcuts} + +RichText 编辑器支持一组常用键盘快捷键，以加快格式化和编辑速度。这些快捷键遵循平台惯例，在 **Windows/Linux**（`Ctrl`）和 **macOS**（`⌘`）上均可使用。 + +### 文本格式化 {#text-formatting} + +| 操作 | Windows/Linux | macOS | +|-----------------|-----------------|---------------| +| 加粗* | `Ctrl+B` | `⌘B` | +| 斜体 | `Ctrl+I` | `⌘I` | +| 下划线 | `Ctrl+U` | `⌘U` | +| 删除线 | `Ctrl+Shift+X` | `⌘⇧X` | + +### 编辑 {#editing} + +| 操作 | Windows/Linux | macOS | +|-----------|--------------------------|---------------| +| 撤销 | `Ctrl+Z` | `⌘Z` | +| 重做 | `Ctrl+Y` / `Ctrl+Shift+Z`| `⌘Y` / `⌘⇧Z` | +| 剪切 | `Ctrl+X` | `⌘X` | +| 复制 | `Ctrl+C` | `⌘C` | +| 粘贴 | `Ctrl+V` | `⌘V` | +| 删除单词 | `Ctrl+Backspace` / `Ctrl+Delete` | `⌥⌫` / `⌥⌦` | +| 删除行 | — | `⌘⌫` / `⌘⌦` | + +### 缩进 {#indentation} + +| 操作 | Windows/Linux | macOS | +|-----------------------|---------------|-------| +| 增加块缩进 / 嵌套列表 | `Tab` | `⇥` | +| 减少块缩进 / 提升列表 | `Shift+Tab` | `⇧⇥` | + +### 特殊操作 {#special-actions} + +| 操作 | Windows/Linux | macOS | +|------------|---------------|-------| +| 插入链接 | `Ctrl+K` | `⌘K` | +| 打印 | `Ctrl+P` | `⌘P` | + +:::info[信息] +更多快捷键可能会在未来的更新中引入。 +::: + +若要获取与 RichText 键盘快捷键相关的实际参考，请按 **帮助** 并选择 **键盘快捷键** 选项： + +
+![DHTMLX RichText 键盘快捷键参考窗口](/img/richtext/shortcut_reference.png) +
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..22eadc4 --- /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 天免费评估版本。 +--- + +# 迁移至新版本 {#migration-to-newer-versions} + +## 1.2 -> 2.0 {#12---20} + +### 属性迁移 {#properties-migration} + +| 旧版属性 | 替代方案 | 说明 | +| --------------- | ------------------------- | ----------------------------------------- | +| `customStats` | *(已移除)* | 新版本 2.0 中不再可用 | +| `toolbarBlocks` | `toolbar` | 现支持详细的工具栏结构 | +| `defaultStyles` | `defaultStyles`（已更新） | 结构现为按块和基于 CSS | +| `mode` | `layoutMode` | 已替换为更严格的枚举设置 | + +### - `customStats` {#--customstats} + +`customStats` 属性已被移除。当前版本的 RichText 不再支持显示用户自定义的统计信息（例如字符数、单词数、句子数）。 + +如果您仍需计算文本指标，可以通过访问编辑器内容并手动处理来在外部实现： + +```jsx +const content = editor.getValue(); +const wordCount = content.split(/\s+/).length; +``` + +### - `toolbarBlocks` → [`toolbar`](api/config/toolbar.md) {#--toolbarblocks--toolbar} + +**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) {#--defaultstyles} + +**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) {#--mode--layoutmode} + +```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"` 两个值。 + +### 方法迁移 {#methods-migration} + +| 旧版方法 | 新版等效方法 | 说明 | +| ----------------------- | ------------------------------------ | ----------------------------------------------------- | +| `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) {#--setvalue--getvalue} + +```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) {#--on--detach} + +```jsx title="Before 2.0" +editor.events.on("Change", function(action, canUndo, canRedo){ + // 你的代码 +}); + +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) {#--fire--use-exec-and-intercept} + +```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..a68d129 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/news/whats_new.md @@ -0,0 +1,256 @@ +--- +sidebar_label: 最新动态 +title: 最新动态 +description: 您可以在 DHTMLX JavaScript UI 库文档中了解 DHTMLX RichText 的最新功能及版本历史。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。 +--- + +## 版本 2.1 {#version-21} + +发布于 2026 年 6 月 22 日 + +### 新功能 {#new-functionality} + +- [`imageUploadUrl`](api/config/image-upload-url.md) 现为可选项：省略时，图片将以 base64 数据 URL 的形式内联插入，无需服务器支持 +- 拖放图片插入：将图片文件直接拖入编辑器区域即可插入 +- Markdown 支持：通过 [`setValue()`](api/methods/set-value.md)、[`getValue()`](api/methods/get-value.md) 和 [`insertValue()`](api/methods/insert-value.md) 方法中的 `markdown` 编码器，解析和序列化编辑器内容为 Markdown 格式（参见 [RichText. 使用不同格式（Markdown、HTML、纯文本）](https://snippet.dhtmlx.com/cne4kujn?tag=richtext) 示例） +- 通过 [`triggers`](api/config/triggers.md) 属性支持提及、标签和自定义下拉触发器：输入 `@`、`#`、`/` 或 `:` 等字符可打开建议下拉框，并将所选项作为不可编辑的 token 插入（参见[提及与标签](guides/mentions_and_tags.md)指南和 [RichText. 提及、标签与异步查询](https://snippet.dhtmlx.com/nfvvfize?tag=richtext) 示例） +- 通过 [`triggerTemplate`](api/config/trigger-template.md) 属性自定义建议项的渲染方式（例如，显示头像、姓名和邮箱）（参见 [RichText. 每个触发器的自定义下拉模板](https://snippet.dhtmlx.com/0p3bbnhz?tag=richtext) 示例） +- 用户选择触发器时的自定义操作：执行自定义代码（插入 emoji、触发斜杠命令等），而非插入 token（参见 [RichText. Emoji 自动补全](https://snippet.dhtmlx.com/g5z1d868?tag=richtext) 和 [RichText. 斜杠命令](https://snippet.dhtmlx.com/e0mrmyam?tag=richtext) 示例） +- 剪贴板支持（复制、剪切和粘贴）：在 RichText 实例之间保留格式，将外部内容以纯文本形式插入 +- 按词和按行删除快捷键：使用 `Ctrl+Backspace` / `Ctrl+Delete`（Windows/Linux）或 `Opt+Backspace` / `Opt+Delete`（macOS）删除前一个/后一个单词；使用 `Cmd+Backspace` / `Cmd+Delete`（仅 macOS）删除前一个/后一个可视行 +- 用于更改块缩进的新快捷键：使用 `Tab` 增加块的缩进，使用 `Shift+Tab` 减少缩进；在列表中，相同的按键可嵌套或提升列表项（在子列表中最为明显） + +### 新增 API {#new-api} + +#### 新增属性 {#new-properties} + +- [`triggers`](api/config/triggers.md) — 定义用于插入提及、标签和其他 token 的下拉触发器 +- [`triggerTemplate`](api/config/trigger-template.md) — 自定义 RichText 在建议下拉框中渲染条目的方式 + +#### 新增方法 {#new-methods} + +- [`insertValue()`](api/methods/insert-value.md) — 在光标位置插入文本、Markdown 或 HTML 内容，或替换选中的文本（参见 [RichText. 在光标处插入内容](https://snippet.dhtmlx.com/pew2g1ku?tag=richtext) 示例） + +#### 新增事件 {#new-events} + +- [`show-suggest`](api/events/show-suggest.md) — 当已配置触发器的建议下拉框打开时触发 +- [`insert-token`](api/events/insert-token.md) — 用户在下拉框中选择建议项且 RichText 将其作为 token 插入后触发 +- [`hide-suggest`](api/events/hide-suggest.md) — 当建议下拉框关闭时触发 + +### 修复 {#fixes} + +- 粘贴内联内容时出现的问题（包括放置在提及、图片等内联元素内部或附近的内容） +- 将图片拖放到其自身上时抛出错误 + +## 版本 2.0.6 {#version-206} + +发布于 2026 年 5 月 28 日 + +### 新功能 {#new-functionality-1} + +- 上下文感知的 OL/UL 工具栏按钮，可根据选区切换或转换列表类型 +- 通过**增加缩进**和**减少缩进**按钮更改列表嵌套级别 +- 在空列表项中按 Enter 键可退出列表或减少其嵌套级别 +- 已访问链接显示独特颜色 + +### 新增 API {#new-api-1} + +#### 新增事件 {#new-events-1} + +- [`toggle-list`](api/events/toggle-list.md) — 用户切换所选块的列表时触发 + +### 修复 {#fixes-1} + +- 列表标记的水平对齐不正确 +- 有序列表与无序列表之间的内边距不一致 +- 清除格式时未清除块级属性 +- 列表项内的标题和块引用样式不正确 +- 水平线内可见多余的 input 元素 +- 在列表中间或末尾插入水平线时编辑器卡死 + +## 版本 2.0.5 {#version-205} + +发布于 2026 年 3 月 6 日 + +### 修复 {#fixes-2} + +- IME 输入未被正确处理 +- 基于组合输入法的输入（例如，桌面端的中文、日文、韩文）未被正确处理 +- 解析 HTML 时忽略 `margin-left` 和 `line-height` 属性 +- 内联元素从块级父元素继承属性 +- 无法在两个编辑器实例之间复制文本 +- 两个（或更多）编辑器实例同时激活时选区处理不正确 +- 段落中唯一内容为图片时光标定位不正确 +- 上标和下标元素无限嵌套 +- 粘贴图片时内联插入而非先上传 +- 在特定位置（首行或末行）无法移除空内联块 +- 输入时编辑器未滚动至光标位置 +- Android 上的输入未被正确处理 +- HR 元素的选区处理不正确 +- 初始值为空时渲染不正确 +- 内容包含自闭合块时复制可能失败 +- Chrome：无法从右键菜单插入 emoji +- Firefox：全选（CTRL+A）未被正确处理 + +## 版本 2.0.4 {#version-204} + +发布于 2025 年 10 月 15 日 + +### 修复 {#fixes-3} + +- 段落的范围选区不正确 +- 与链接图片相邻时链接弹出框不显示 +- 工具栏初始值与实际内容不一致 + +## 版本 2.0.3 {#version-203} + +发布于 2025 年 8 月 27 日 + +### 修复 {#fixes-4} + +- 点击水平线导致脚本错误 +- 默认行高不正确 +- 内容样式包含重复选择器 +- 解析 HTML 时纯文本块忽略样式更改 +- 解析器忽略 HTML 中转义的字体名称 +- 解析器忽略 HTML 中的 `margin-left` 和 `line-height` 属性 + +## 版本 2.0.2 {#version-202} + +发布于 2025 年 8 月 4 日 + +### 修复 {#fixes-5} + +- 更新了软件包内容 + +## 版本 2.0.1 {#version-201} + +发布于 2025 年 7 月 30 日 + +### 修复 {#fixes-6} + +- 更新 `defaultStyles` 属性的类型定义 + +## 版本 2.0 {#version-20} + +发布于 2025 年 7 月 30 日 + +:::note[注意] +v1.2 的 API 与 v2.0 不兼容。请参阅[**迁移指南**](news/migration.md)获取更多信息。 +::: + +### 新功能 {#new-functionality-2} + +- **新一代文本渲染** + 全新渲染引擎带来更流畅、更快速、更精准的文本渲染体验 + +- **精细化工具栏配置** + 全面掌控工具栏： + - 定义[单个工具栏控件](guides/configuration.md/#default-toolbar-controls)及其顺序 + - 添加[自定义控件](guides/configuration.md/#add-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 {#new-api-2} + +#### 新增属性 {#new-properties-1} + +- [`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-1} + +- [`setConfig()`](api/methods/set-config.md) — 动态更新配置 +- [`setLocale()`](api/methods/set-locale.md) — 动态切换语言 + +#### 新增内部方法 {#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-2} + +完整的新增事件列表请参见[此处](api/overview/events_overview.md) + +### 更新的 API {#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) + +## 已移除的 API {#removed-api} + +:::warning[警告] +请勿在您的项目中使用已移除的 API！
请参阅[迁移](news/migration.md)主题获取更多信息。 +::: + +### [已移除的属性](news/migration.md#properties-migration) {#removed-properties} + +- [`customStats`](news/migration.md#--customstats) +- [`mode`](news/migration.md#--mode--layoutmode) +- [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar) + +### [已移除的方法](news/migration.md#methods-migration) {#removed-methods} + +- `exitFullScreen()` +- `fullScreen()` +- `getEditorAPI()` +- `getStats()` +- `paint()` + +### 已移除的内部方法 {#removed-internal-methods} + +- [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept) + +### 已移除的事件 {#removed-events} + +- `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..a23c5f5 --- /dev/null +++ b/i18n/zh/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "开发中心", + "description": "The title of the footer links column with title=Development center in the footer" + }, + "link.title.Community": { + "message": "社区", + "description": "The title of the footer links column with title=Community in the footer" + }, + "link.title.Company": { + "message": "公司", + "description": "The title of the footer links column with title=Company in the footer" + }, + "link.item.label.Download RichText": { + "message": "下载 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": "示例", + "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/t55alxiy?tag=richtext" + }, + "link.item.label.Blog": { + "message": "博客", + "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/tag/richtext/" + }, + "link.item.label.Forum": { + "message": "论坛", + "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": "关于我们", + "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "联系我们", + "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "许可", + "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxRichText/#editions-licenses" + } +} diff --git a/i18n/zh/docusaurus-theme-classic/navbar.json b/i18n/zh/docusaurus-theme-classic/navbar.json new file mode 100644 index 0000000..f8bb489 --- /dev/null +++ b/i18n/zh/docusaurus-theme-classic/navbar.json @@ -0,0 +1,26 @@ +{ + "title": { + "message": "JavaScript RichText 文档", + "description": "The title in the navbar" + }, + "logo.alt": { + "message": "DHTMLX RichText 文档", + "description": "The alt text of navbar logo" + }, + "item.label.Examples": { + "message": "示例", + "description": "Navbar item with label Examples" + }, + "item.label.Forum": { + "message": "论坛", + "description": "Navbar item with label Forum" + }, + "item.label.Support": { + "message": "支持", + "description": "Navbar item with label Support" + }, + "item.label.Download": { + "message": "下载", + "description": "Navbar item with label Download" + } +} 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/sidebars.js b/sidebars.js index 4be1cb8..a61db3d 100644 --- a/sidebars.js +++ b/sidebars.js @@ -49,6 +49,7 @@ module.exports = { "api/methods/destructor", "api/methods/get-value", "api/methods/set-value", + "api/methods/insert-value", "api/methods/set-config", "api/methods/set-locale" ] @@ -117,12 +118,14 @@ module.exports = { "api/events/cut", "api/events/delete-link", "api/events/export", + "api/events/hide-suggest", "api/events/import", "api/events/indent", "api/events/insert-image", "api/events/insert-line", "api/events/insert-link", "api/events/insert-list", + "api/events/insert-token", "api/events/outdent", "api/events/paste", "api/events/print", @@ -135,6 +138,7 @@ module.exports = { "api/events/set-text-format", "api/events/set-text-style", "api/events/show-popup", + "api/events/show-suggest", "api/events/subscript", "api/events/superscript", "api/events/toggle-fullscreen-mode", @@ -162,7 +166,9 @@ module.exports = { "api/config/locale", "api/config/menubar", "api/config/toolbar", - "api/config/value" + "api/config/trigger-template", + "api/config/triggers", + "api/config/value" ] } ] @@ -198,6 +204,8 @@ module.exports = { items: [ "guides/initialization", "guides/configuration", + "guides/working_with_server", + "guides/mentions_and_tags", "guides/localization", "guides/stylization", "guides/typescript_support" 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