diff --git a/.claude/scheduled_tasks.lock b/.claude/scheduled_tasks.lock new file mode 100644 index 0000000..c57b108 --- /dev/null +++ b/.claude/scheduled_tasks.lock @@ -0,0 +1 @@ +{"sessionId":"550f6571-02fc-4442-bf50-fea94be1632b","pid":38370,"procStart":"Thu May 28 13:52:59 2026","acquiredAt":1779976938898} \ No newline at end of file diff --git a/docs/news/whats_new.md b/docs/news/whats_new.md index 27dc4f3..976d4a0 100644 --- a/docs/news/whats_new.md +++ b/docs/news/whats_new.md @@ -82,13 +82,13 @@ 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) + - Define [individual toolbar controls](guides/configuration.md#default-toolbar-controls) and their order + - 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 -- **Enhanced [document mode](guides/configuration.md/#layout-modes)** +- **Enhanced [document mode](guides/configuration.md#layout-modes)** Added support for different document sizes - **Image support** diff --git a/docusaurus.config.js b/docusaurus.config.js index 0beadf1..5f08bc6 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -194,6 +194,17 @@ const config = { tagline: 'DHTMLX RichText Documentation', url: 'https://docs.dhtmlx.com', baseUrl: '/richtext/', + 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-Hans' }, + ko: { label: '한국어', htmlLang: 'ko' }, + } + }, onBrokenLinks: 'warn', // onBrokenMarkdownLinks: 'warn', // deprecated in v3.9.1 onBrokenAnchors: 'warn', @@ -314,6 +325,10 @@ const config = { label: 'Download', href: 'https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml', position: 'right' + }, + { + type: 'localeDropdown', + position: 'right' } ] }, diff --git a/i18n/de/code.json b/i18n/de/code.json new file mode 100644 index 0000000..9810572 --- /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.breadcrumbs.navAriaLabel": { + "message": "Breadcrumbs", + "description": "The ARIA label for the breadcrumbs" + }, + "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.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": "Tags:", + "description": "The label alongside a tag list" + }, + "theme.AnnouncementBar.closeButtonAriaLabel": { + "message": "Schließen", + "description": "The ARIA label for close button of announcement bar" + }, + "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.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}' ausklappen", + "description": "The ARIA label to expand the sidebar category" + }, + "theme.DocSidebarItem.collapseCategoryAriaLabel": { + "message": "Kategorie '{label}' einklappen", + "description": "The ARIA label to collapse the sidebar category" + }, + "theme.IconExternalLink.ariaLabel": { + "message": "(öffnet in neuem Tab)", + "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 ausklappen", + "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": "Clear the query", + "description": "The label and ARIA label for search box reset button" + }, + "theme.SearchModal.searchBox.cancelButtonText": { + "message": "Cancel", + "description": "The label and ARIA label for search box cancel button" + }, + "theme.SearchModal.searchBox.placeholderText": { + "message": "Dokumentation durchsuchen", + "description": "The placeholder text for the main search input field" + }, + "theme.SearchModal.searchBox.placeholderTextAskAi": { + "message": "Weitere Frage stellen...", + "description": "The placeholder text when in AI question mode" + }, + "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": { + "message": "Antwortet...", + "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": "eingeben", + "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": "Recent", + "description": "The title for recent searches" + }, + "theme.SearchModal.startScreen.noRecentSearchesText": { + "message": "No recent searches", + "description": "The text when there are no recent searches" + }, + "theme.SearchModal.startScreen.saveRecentSearchButtonTitle": { + "message": "Save this search", + "description": "The title for save recent search button" + }, + "theme.SearchModal.startScreen.removeRecentSearchButtonTitle": { + "message": "Remove this search from history", + "description": "The title for remove recent search button" + }, + "theme.SearchModal.startScreen.favoriteSearchesTitle": { + "message": "Favorite", + "description": "The title for favorite searches" + }, + "theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle": { + "message": "Remove this search from favorites", + "description": "The title for remove favorite search button" + }, + "theme.SearchModal.startScreen.recentConversationsTitle": { + "message": "Letzte Gespräche", + "description": "The title for recent conversations" + }, + "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": { + "message": "Dieses Gespräch aus dem Verlauf entfernen", + "description": "The title for remove recent conversation button" + }, + "theme.SearchModal.errorScreen.titleText": { + "message": "Unable to fetch results", + "description": "The title for error screen" + }, + "theme.SearchModal.errorScreen.helpText": { + "message": "You might want to check your network connection.", + "description": "The help text for error screen" + }, + "theme.SearchModal.resultsScreen.askAiPlaceholder": { + "message": "KI fragen: ", + "description": "The placeholder text for Ask AI input" + }, + "theme.SearchModal.askAiScreen.disclaimerText": { + "message": "Antworten werden von KI generiert und können Fehler enthalten. Bitte ü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": "Danke für Ihr Feedback!", + "description": "The text for thanks for feedback" + }, + "theme.SearchModal.askAiScreen.preToolCallText": { + "message": "Suche...", + "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": "Enter key", + "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": "Arrow up", + "description": "The ARIA label for navigate up key in footer" + }, + "theme.SearchModal.footer.navigateDownKeyAriaLabel": { + "message": "Arrow down", + "description": "The ARIA label for navigate down key in footer" + }, + "theme.SearchModal.footer.closeText": { + "message": "to close", + "description": "The close text for footer" + }, + "theme.SearchModal.footer.closeKeyAriaLabel": { + "message": "Escape key", + "description": "The ARIA label for close key in footer" + }, + "theme.SearchModal.footer.searchByText": { + "message": "Powered by", + "description": "The 'Powered by' text for footer" + }, + "theme.SearchModal.footer.backToSearchText": { + "message": "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": "Try searching for", + "description": "The text for suggested query" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsText": { + "message": "Believe this query should return results?", + "description": "The text for reporting missing results" + }, + "theme.SearchModal.noResultsScreen.reportMissingResultsLinkText": { + "message": "Let us know.", + "description": "The link text for reporting missing results" + }, + "theme.SearchModal.placeholder": { + "message": "Search docs", + "description": "The placeholder of the input of the DocSearch pop-up modal" + }, + "theme.blog.post.plurals": { + "message": "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": "Authors", + "description": "The title of the authors page" + }, + "theme.blog.authorsList.viewAll": { + "message": "View All Authors", + "description": "The label of the link targeting the blog authors page" + }, + "theme.blog.author.noPosts": { + "message": "This author has not written any posts yet.", + "description": "The text for authors with 0 blog post" + }, + "theme.contentVisibility.unlistedBanner.title": { + "message": "Unlisted page", + "description": "The unlisted content banner title" + }, + "theme.contentVisibility.unlistedBanner.message": { + "message": "This page is unlisted. Search engines will not index it, and only users having a direct link can access it.", + "description": "The unlisted content banner message" + }, + "theme.contentVisibility.draftBanner.title": { + "message": "Draft page", + "description": "The draft content banner title" + }, + "theme.contentVisibility.draftBanner.message": { + "message": "This page is a draft. It will only be visible in dev and be excluded from the production build.", + "description": "The draft content banner message" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "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": "Tags", + "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..9239ff7 --- /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": "Recent posts", + "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..1b28fa1 --- /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": "Neuerungen 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": "Neuerungen 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-Ereignisse", + "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..fc8fd13 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/.sync @@ -0,0 +1 @@ +86e82543d8ec99c4c601caf46a91475f4d19c0f3 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..2905c35 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/default-styles.md @@ -0,0 +1,144 @@ +--- +sidebar_label: defaultStyles +title: defaultStyles Config +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die defaultStyles-Konfiguration. 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. +--- + +# defaultStyles + +### Beschreibung + +@short: Optional. Legt Standardstilwerte für bestimmte Blocktypen fest + +### Verwendung + +~~~jsx {} +defaultStyles?: { + "*"?: { // wirkt sich auf alle Blöcke aus und ermöglicht das Festlegen gemeinsamer Eigenschaften für alle diese Blöcke + "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` legt KEINE tatsächlichen CSS-Stile auf die betroffenen Blöcke fest. 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 werden allen `h2`-Blöcken die Schriftfamilie `"Roboto"` mit einer Schriftgröße von 28px zugewiesen sowie Vorder- und Hintergrundfarbe geändert. CSS-Stile werden ebenfalls auf `h2`-Blöcke angewendet. +::: + +### Standardkonfiguration + +~~~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 + +~~~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. Ändern des Standardwerts für Typografie (Schrift, 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..6988199 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md @@ -0,0 +1,39 @@ +--- +sidebar_label: fullscreenMode +title: fullscreenMode Config +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die fullscreenMode-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. +--- + +# fullscreenMode + +### Beschreibung + +@short: Optional. Aktiviert den Vollbildmodus von RichText + +### Verwendung + +~~~jsx {} +fullscreenMode?: boolean; +~~~ + +### Standardkonfiguration + +~~~jsx +fullscreenMode: false; +~~~ + +### Beispiel + +~~~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. Full toolbar](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..53aca3d --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md @@ -0,0 +1,33 @@ +--- +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-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# imageUploadUrl + +### Beschreibung + +@short: Optional. Gibt die URL an, die für den Bild-Upload verwendet wird + +### Verwendung + +~~~jsx {} +imageUploadUrl?: string; +~~~ + +### Beispiel + +~~~jsx {3} +// RichText initialisieren +new richtext.Richtext("#root", { + imageUploadUrl: "some URL" + // 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/config/layout-mode.md b/i18n/de/docusaurus-plugin-content-docs/current/api/config/layout-mode.md new file mode 100644 index 0000000..b6bba21 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/layout-mode.md @@ -0,0 +1,41 @@ +--- +sidebar_label: layoutMode +title: layoutMode Config +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die Konfigurationsoption layoutMode. Entwicklerhandbücher und API-Referenz, Code-Beispiele und Live-Demos sowie ein kostenloser 30-Tage-Evaluierungsdownload von DHTMLX RichText. +--- + +# layoutMode + +### Beschreibung + +@short: Optional. Gibt den Layout-Modus für den Haupteditorbereich an + +### Verwendung + +~~~jsx {} +layoutMode: "classic" | "document"; +~~~ + +Der Modus `"classic"` füllt den gesamten Bearbeitungsbereich aus. Der Modus `"document"` zeigt den Bearbeitungsbereich als Dokumentseite an. + +### Standardkonfiguration + +~~~jsx +layoutMode: "classic"; +~~~ + +### Beispiel + +~~~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. Initialization](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..0af0f94 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/locale.md @@ -0,0 +1,47 @@ +--- +sidebar_label: locale +title: locale Config +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die locale-Konfiguration. Entwicklerhandbücher und API-Referenz, Code-Beispiele und Live-Demos sowie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText. +--- + +# locale + +### Beschreibung + +@short: Optional. Ein Objekt, das Lokalisierungsbezeichnungen von RichText enthält + +:::info +Das **locale**-Objekt muss alle Bezeichnungen von RichText mit den entsprechenden Übersetzungen enthalten. +::: + +### Verwendung + +~~~jsx {} +locale?: object; +~~~ + +### Standardkonfiguration + +Standardmäßig verwendet RichText das **englische** Gebietsschema. Sie können auch ein benutzerdefiniertes Gebietsschema festlegen. + +:::tip +Um das aktuelle Gebietsschema dynamisch zu ändern, können Sie die Methode [**setLocale()**](api/methods/set-locale.md) von RichText verwenden +::: + +### Beispiel + +~~~jsx {3} +// RichText initialisieren +const editor = new richtext.RichText("#root", { + locale: richtext.locales.cn // das chinesische Gebietsschema wird initial gesetzt + // locale: richtext.locales.en // das englische Gebietsschema wird initial gesetzt + // locale: richtext.locales.de // das deutsche Gebietsschema 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..a3a7bfc --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/menubar.md @@ -0,0 +1,33 @@ +--- +sidebar_label: menubar +title: menubar Config +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 Code-Beispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# menubar + +### Beschreibung + +@short: Optional. Aktiviert die obere Menüleiste von RichText + +### Verwendung + +~~~jsx {} +menubar?: boolean; +~~~ + +### Beispiel + +~~~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..ef6bc4d --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/config/toolbar.md @@ -0,0 +1,219 @@ +--- +sidebar_label: toolbar +title: toolbar Config +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die toolbar-Konfiguration. Entwicklerhandbücher und API-Referenz, Code-Beispiele und Live-Demos sowie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText. +--- + +# toolbar + +### Beschreibung + +@short: Optional. Aktiviert die Toolbar und ermöglicht es Benutzern, die darin angezeigten Schaltflächen festzulegen und zu konfigurieren + +### Verwendung + +~~~jsx {} +toolbar?: boolean | Array any }>; +~~~ + +#### Verfügbare Schaltflächen in der Toolbar + +In der RichText-Toolbar können folgende Schaltflächen angegeben werden: + +| Schaltfläche | Beschreibung | +|---------------------|------------------------------------------------------------------------------| +| `undo` | Macht die letzte Benutzeraktion rückgängig. | +| `redo` | Stellt die zuletzt 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 Textes. | +| `font-size` | Passt die Schriftgröß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 tiefgestellten Text. | +| `superscript` | Formatiert den Text als hochgestellten Text. | +| `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 Einzug des Textblocks. | +| `outdent` | Verringert den Absatzeinzug. | +| `line-height` | Passt den Zeilenabstand (Zeilenhöhe) an. | +| `quote` | Formatiert den Text als Blockzitat. | +| `bulleted-list` | Erstellt eine Aufzählungsliste. | +| `numbered-list` | Erstellt eine nummerierte Liste. | +| `link` | Fügt einen Hyperlink ein. | +| `image` | Fügt ein Bild ein. | +| `line` | Fügt eine horizontale Linie ein. | +| `clear` | Entfernt alle Formatierungen vom ausgewählten Text. | +| `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. | + +Mit diesen Zeichenketten können die Toolbar-Schaltflächen wie folgt konfiguriert werden: + +~~~jsx {2-7} +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // weitere Schaltflächen + ], + // weitere Konfigurationseigenschaften +}); +~~~ + +#### Benutzerdefinierte Schaltflächen in der Toolbar + +Benutzerdefinierte Schaltflächen können als Objekte mit folgenden Parametern angegeben werden: + +- `type` - (erforderlich) gibt den Typ des benutzerdefinierten Steuerelements an. Folgende Typen sind verfügbar: `"button"`, `"richselect"`, `"colorpicker"` +- `id` - (optional) eine benutzerdefinierte Steuerelement-ID (darf nicht mit vorhandenen Steuerelement-IDs ü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 von "label" verwendet) +- `css` - (optional) ein CSS-Klassenname, der dem Steuerelement zugewiesen wird (standardmäßig unterstützte Klassen: 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 (Benutzer kann keine weiteren Optionen festlegen (keine Labels, Tooltips, Optionen usw.), daher nur ({ type: "button", id: string }) + { + type: "button", + id: "fullscreen", + }, + // Benutzer muss den korrekten 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 siehe unten) + // Benutzer kann nur benutzerdefinierte Schaltflächen definieren (noch 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 + +Um die Toolbar auszublenden, 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[Hinweis] +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 benutzerdefinierte Logik angewendet werden soll) + icon: "wxo-help", // Schaltflächensymbol (wird mit der Beschriftung kombiniert) + css: "rounded", // CSS-Klassenname, der dem Steuerelement zugewiesen wird (standardmäßig unterstützte Klassen: 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 von "label" verwendet) + } + ] + // weitere Konfigurationseigenschaften +}); +``` +::: + +### Beispiel + +~~~jsx {3-18} +// RichText initialisieren +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // benutzerdefinierte Schaltflächen (alle unterstützten Optionen werden unten verwendet) + // Benutzer kann nur benutzerdefinierte Schaltflächen definieren (noch keine Unterstützung für richselect/colorpicker) + { + type: "button", + id: "btn1", // Schaltflächen-ID (darf nicht mit vorhandenen Schaltflächen-IDs übereinstimmen, wenn benutzerdefinierte Logik angewendet werden soll) + icon: "wxo-help", // Schaltflächensymbol (wird mit der Beschriftung kombiniert) + css: "rounded", // CSS-Klassenname, der dem Steuerelement zugewiesen wird (standardmäßig unterstützte Klassen: 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 von "label" verwendet) + handler: () => ..., // benutzerdefinierte Logik, die dieser Schaltfläche zugeordnet ist + } + ] + // weitere Konfigurationseigenschaften +}); +~~~ + +**Änderungsprotokoll:** Die Eigenschaft wurde in v2.0 hinzugefügt + +**Verwandte Artikel:** [Konfiguration](guides/configuration.md) + +**Verwandtes Beispiel:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) 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..fc1b7aa --- /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 Entwickleranleitungen und die API-Referenz, testen Sie Codebeispiele und Live-Demos, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# value + +### Beschreibung + +@short: Optional. Gibt den Anfangswert (Inhalt) an, der im Editorbereich von RichText angezeigt wird + +:::tip[Hinweis] +Wenn Sie den Wert (Inhalt) in einem benutzerdefinierten Format festlegen möchten, verwenden Sie die integrierte Methode [`setValue()`](api/methods/set-value.md). +::: + +### Verwendung + +~~~jsx {} +value?: string; +~~~ + +### Beispiel + +~~~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..fbcf9f4 --- /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. 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. +--- + +# align + +### Beschreibung + +@short: Wird ausgelöst, wenn die Textausrichtung über die Menüleiste/Symbolleiste oder Event-Bus-Methoden geändert wird + +### Verwendung + +~~~jsx {} +"align": ({ + align: "left" | "center" | "right" | "justify" +}) => boolean | void; +~~~ + +### Parameter + +Der Callback des **align**-Events kann ein Objekt mit folgendem Parameter entgegennehmen: + +- `align` - eine Textausrichtung. Folgende Werte sind möglich: `"left" | "center" | "right" | "justify"` + +:::info +Zur Verarbeitung interner Events können Sie [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~jsx {5-12} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "align"-Event abonnieren +editor.api.on("align", (obj) => { + console.log(`Align to: ${obj.align}`); +}); +// 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..08b9b9b --- /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 mehr über das clear-text-format-Event. 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. +--- + +# clear-text-format + +### Beschreibung + +@short: Wird ausgelöst, wenn eine Textformatierung über die Menüleiste/Toolbar oder Event-Bus-Methoden entfernt wird + +### Verwendung + +~~~jsx {} +"clear-text-format": () => boolean | void; +~~~ + +:::info +Zur Verarbeitung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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 entfernen +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..06d179b --- /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. 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. +--- + +# copy + +### Beschreibung + +@short: Wird ausgelöst, wenn ausgewählter Text kopiert wird + +### Verwendung + +~~~jsx {} +"copy": () => boolean | void; +~~~ + +:::info +Zur Verarbeitung interner Events können Sie [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..28234c7 --- /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 mehr über das create-new Event. Entwicklerhandbücher und API-Referenz, Code-Beispiele und Live-Demos sowie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText stehen zum Download bereit. +--- + +# create-new + +### Beschreibung + +@short: Wird ausgelöst, wenn die Option „Neu" in der Menüleiste oder über Event Bus-Methoden aufgerufen wird + +### Verwendung + +~~~jsx {} +"create-new": ({ reset?: boolean }) => boolean | void; +~~~ + +### Parameter + +Der Callback des **create-new** Events kann ein Objekt mit folgendem Parameter entgegennehmen: + +- `reset` - setzt den Verlauf beim Erstellen einer neuen Datei zurück + +:::info +Zur Verarbeitung interner Events können [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwendet werden +::: + +### Beispiel + +~~~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 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..d125f01 --- /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-Referenz, testen Sie Codebeispiele und Live-Demos, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# cut + +### Beschreibung + +@short: Wird ausgelöst, wenn ausgewählter Text ausgeschnitten wird + +### Verwendung + +~~~jsx {} +"cut": () => boolean | void; +~~~ + +:::info +Zur Behandlung interner Events können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..d51a523 --- /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. 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. +--- + +# delete-link + +### Beschreibung + +@short: Wird ausgelöst, wenn ein Link gelöscht wird + +### Verwendung + +~~~jsx {} +"delete-link": () => boolean | void; +~~~ + +:::info +Zur Verarbeitung interner Events können Sie [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..21ecf8f --- /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: Sie können mehr über das export-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. +--- + +# export + +### Beschreibung + +@short: Wird ausgelöst, nachdem die Option „Exportieren" in der Menüleiste oder über Event-Bus-Methoden aufgerufen wurde + +### Verwendung + +~~~jsx {} +"export": ({ options: IExportOptions; result?: any }) => boolean | void; + +interface IExportOptions { + format?: "docx" | "pdf"; + url?: string; + download?: boolean; + fileName?: string; +} +~~~ + +### Parameter + +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 Erhalt der Serverantwort heruntergeladen werden soll. Wenn die Eigenschaft auf „false" gesetzt ist, wird die Datei nicht heruntergeladen, der Benutzer kann jedoch stattdessen die Blob-Daten aus dem Event-Objekt abrufen (siehe die `result`-Eigenschaft in der Event-Definition) +- `fileName` - ein Dateiname für den Export + +:::info +Zur Verarbeitung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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/import.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/import.md new file mode 100644 index 0000000..07cb6f8 --- /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. 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. +--- + +# import + +### Beschreibung + +@short: Wird ausgelöst, nachdem die Option „Import" in der Menüleiste oder über Event-Bus-Methoden aufgerufen wurde + +### Verwendung + +~~~jsx {} +"import": ({ html?: string }) => boolean | void; +~~~ + +### Parameter + +Der Callback des **import**-Events kann ein Objekt mit folgendem Parameter entgegennehmen: + +- `html` - ein Textwert im HTML-Format + +:::info +Zur Verarbeitung interner Events können Sie [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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 +}); +~~~ + +**Change log:** 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..472b993 --- /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-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# indent + +### Beschreibung + +@short: Wird ausgelöst, wenn der Block-Einzug vergrößert wird + +### Verwendung + +~~~jsx {} +"indent": ({ step: number }) => boolean | void; +~~~ + +### Parameter + +Der Callback des **indent**-Events kann ein Objekt mit den folgenden Parametern entgegennehmen: + +- `step` - der Schritt, um den der Einzug vergrößert wurde + +:::info +Zur Verarbeitung interner Events können Sie [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..d849b8b --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/events/insert-image.md @@ -0,0 +1,50 @@ +--- +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. 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. +--- + +# insert-image + +### Beschreibung + +@short: Wird ausgelöst beim Einfügen eines Bildes + +### Verwendung + +~~~jsx {} +"insert-image": (IImageContext) => boolean | void; + +interface IImageContext { + id: TID; + value: string; + 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; +} +~~~ + +:::info +Zur Verarbeitung interner Events können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..c95e2cd --- /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-Evaluierungsversion von DHTMLX RichText. +--- + +# insert-line + +### Beschreibung + +@short: Wird ausgelöst, wenn eine horizontale Linie eingefügt wird + +### Verwendung + +~~~jsx {} +"insert-line": () => boolean | void; +~~~ + +:::info +Zur Behandlung der internen Events können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..ac06019 --- /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, Codebeispiele und Live-Demos sowie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText. +--- + +# insert-link + +### Beschreibung + +@short: Wird ausgelöst, wenn ein Link eingefügt wird + +### Verwendung + +~~~jsx {} +"insert-link": ({ url: string }) => boolean | void; +~~~ + +### Parameter + +Der Callback des **update-link**-Events kann ein Objekt mit folgendem Parameter entgegennehmen: + +- `url` - die einzufügende URL + +:::info +Zur Behandlung interner Events können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..5675053 --- /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. Entwicklerhandbücher und API-Referenz, Code-Beispiele und Live-Demos sowie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText. +--- + +# insert-list + +### Beschreibung + +@short: Wird ausgelöst, wenn eine Liste eingefügt wird + +### Verwendung + +~~~jsx {} +"insert-list": ({ type: TListType }) => boolean | void; + +type TListType = "bulleted" | "numbered"; +~~~ + +### Parameter + +Der Callback des **insert-list**-Events kann ein Objekt mit folgendem Parameter entgegennehmen: + +- `type` - der Typ der eingefügten Liste. Folgende Werte sind möglich: + - `"bulleted"` - Aufzählungsliste + - `"numbered"` - nummerierte Liste + +:::info +Zur Verarbeitung interner Events können die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwendet werden. +::: + +### Beispiel + +~~~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/outdent.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/outdent.md new file mode 100644 index 0000000..77b98fa --- /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 mehr über das outdent-Event. 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. +--- + +# outdent + +### Beschreibung + +@short: Wird ausgelöst, wenn der Blockeinzug verringert wird + +### Verwendung + +~~~jsx {} +"outdent": ({ step: number }) => boolean | void; +~~~ + +### Parameter + +Der Callback des **outdent**-Events kann ein Objekt mit den folgenden Parametern entgegennehmen: + +- `step` - der Schritt, um den der Einzug verringert wurde + +:::info +Zur Verarbeitung interner Events können Sie [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..9a4b07b --- /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. 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. +--- + +# paste + +### Beschreibung + +@short: Wird beim Einfügen von Inhalten ausgelöst + +### Verwendung + +~~~jsx {} +"paste": () => boolean | void; +~~~ + +:::info +Zum Verarbeiten interner Events können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..40ba543 --- /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. Entwicklerhandbücher und API-Referenz durchsuchen, Codebeispiele und Live-Demos ausprobieren und eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunterladen. +--- + +# print + +### Beschreibung + +@short: Wird beim Drucken des Dokuments ausgelöst + +### Verwendung + +~~~jsx {} +"print": () => boolean | void; +~~~ + +:::info +Zur Verarbeitung interner Events können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..c0632e4 --- /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 die API-Referenz, testen Sie Codebeispiele und Live-Demos, und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# redo + +### Beschreibung + +@short: Wird ausgelöst, wenn die Schaltfläche „Redo" in der Menü- oder Symbolleiste gedrückt oder über Event Bus-Methoden aufgerufen wird + +### Verwendung + +~~~jsx {} +"redo": () => boolean | void; +~~~ + +:::info +Zur Behandlung interner Events können Sie [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..6f792e5 --- /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. 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. +--- + +# resize-image + +### Beschreibung + +@short: Wird ausgelöst, wenn ein Bild in der Größe verändert wird + +### Verwendung + +~~~jsx {} +"resize-image": ({ id: number, width: number, height: number }) => boolean | void; +~~~ + +### Parameter + +Der Callback des **resize-image**-Events kann ein Objekt mit folgenden Parametern entgegennehmen: + +- `id` - die Bild-ID +- `width` - die Bildbreite +- `height` - die Bildhöhe + +:::info +Zur Behandlung interner Events können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..85dcdbc --- /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: Sie können mehr über das set-font-family-Event in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren. Lesen Sie Entwicklerhandbücher und die API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# set-font-family + +### Beschreibung + +@short: Wird ausgelöst, wenn eine Schriftfamilie festgelegt wird + +### Verwendung + +~~~jsx {} +"set-font-family": ({ fontFamily: string }) => boolean | void; +~~~ + +### Parameter + +Der Callback des **set-font-family**-Events kann ein Objekt mit folgendem Parameter entgegennehmen: + +- `fontFamily` - eine Schriftfamilie, die angewendet werden soll. Folgende Schriften sind verfügbar: `"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"` + +:::info +Zur Behandlung interner Events können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..934ce83 --- /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 Ereignis +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das set-font-size-Ereignis. Entdecken 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. +--- + +# set-font-size + +### Beschreibung + +@short: Wird ausgelöst, wenn eine Schriftgröße festgelegt wird + +### Verwendung + +~~~jsx {} +"set-font-size": ({ fontSize: string }) => boolean | void; +~~~ + +### Parameter + +Der Callback des **set-font-size**-Ereignisses kann ein Objekt mit folgendem Parameter entgegennehmen: + +- `fontSize` - eine anzuwendende Schriftgröße + +:::info +Zur Verarbeitung interner Ereignisse können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden. +::: + +### Beispiel + +~~~jsx {5-13} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "set-font-size"-Ereignis 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 Ereignis 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..a398059 --- /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-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# set-line-height + +### Beschreibung + +@short: Wird ausgelöst, wenn ein Zeilenabstand gesetzt wird + +### Verwendung + +~~~jsx {} +"set-line-height": ({ lineHeight: string }) => boolean | void; +~~~ + +### Parameter + +Der Callback des **set-line-height** Events kann ein Objekt mit dem folgenden Parameter entgegennehmen: + +- `lineHeight` - ein Zeilenabstand + +:::info +Zur Behandlung interner Events können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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"); +}); +// einen neuen Zeilenabstand 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..bb08a66 --- /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 Ereignis +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über das set-text-color-Ereignis. Entwicklerhandbücher und API-Referenz, Codebeispiele und Live-Demos sowie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText. +--- + +# set-text-color + +### Beschreibung + +@short: Wird ausgelöst, wenn eine Textfarbe und/oder eine Texthintergrundfarbe gesetzt wird + +### Verwendung + +~~~jsx {} +"set-text-color": (ITextColor) => boolean | void; + +interface ITextColor { + color?: string; + background?: string; +} +~~~ + +### Parameter + +Der Callback des **set-text-color**-Ereignisses kann ein Objekt mit folgenden Parametern entgegennehmen: + +- `color` - eine Textfarbe +- `background` - eine Texthintergrundfarbe + +:::info +Zur Behandlung interner Ereignisse können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~jsx {5-14} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das "set-text-color"-Ereignis 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 Ereignis 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..00b5540 --- /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 API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# set-text-format + +### Beschreibung + +@short: Wird ausgelöst, wenn ein Textformat gesetzt wird + +### Verwendung + +~~~jsx {} +"set-text-format": (ITextFormat) => boolean | void; + +interface ITextFormat { + bold?: boolean; + italic?: boolean; + strike?: boolean; + underline?: boolean; +} +~~~ + +:::info +Zur Behandlung interner Events können Sie [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Parameter + +Der Callback des **set-text-format**-Events kann ein Objekt mit folgenden Parametern entgegennehmen: + +- `bold` - fettes Textformat +- `italic` - kursives Textformat +- `strike` - durchgestrichenes Textformat +- `underline` - unterstrichenes Textformat + +### Beispiel + +~~~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 fette 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..4a1ef55 --- /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. Entwicklerhandbücher und API-Referenz durchsuchen, Codebeispiele und Live-Demos ausprobieren und eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunterladen. +--- + +# set-text-style + +### Beschreibung + +@short: Wird ausgelöst, wenn ein Textstil festgelegt wird + +### Verwendung + +~~~jsx {} +"set-text-style": ({ tag: TBlockType }) => boolean | void; + +type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; +~~~ + +### Parameter + +Der Callback des **set-text-style**-Events kann ein Objekt mit folgenden Parametern entgegennehmen: + +- `tag` - ein Textstil + +:::info +Zur Verarbeitung interner Events können Sie [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..6e7812e --- /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 API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# show-popup + +### Beschreibung + +@short: Wird ausgelöst, wenn ein Popup angezeigt oder ausgeblendet wird + +### Verwendung + +~~~jsx {} +"show-popup": (IPopupConfig) => boolean | void; + +interface IPopupConfig { + type: "link" | null; + image?: boolean; +} +~~~ + +### Parameter + +Der Callback des **show-popup**-Events kann ein Objekt mit folgenden Parametern entgegennehmen: + +- `type` - der Typ des Popups +- `image` - bietet Zugriff auf zusätzlichen Kontext (ob der aktuelle Cursor auf ein Bild zeigt oder nicht) + +:::info +Zur Verarbeitung interner Events können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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 the text to the left +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/subscript.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/subscript.md new file mode 100644 index 0000000..c5c7dc5 --- /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: Informationen zum subscript-Event finden Sie in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek. 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. +--- + +# subscript + +### Beschreibung + +@short: Wird ausgelöst, wenn die Schaltfläche „Subscript" in der Menü- oder Symbolleiste oder über Event-Bus-Methoden gedrückt wird + +### Verwendung + +~~~jsx {} +"subscript": () => boolean | void; +~~~ + +:::info +Zur Behandlung interner Events können Sie [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..17432b5 --- /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. 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. +--- + +# superscript + +### Beschreibung + +@short: Wird ausgelöst, wenn die Schaltfläche „Hochgestellt" in der Menüleiste/Symbolleiste oder über Event-Bus-Methoden gedrückt wird + +### Verwendung + +~~~jsx {} +"superscript": () => boolean | void; +~~~ + +:::info +Zur Verarbeitung interner Events können Sie [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..61c7ccd --- /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. Lesen Sie Entwicklerhandbücher und API-Referenzen, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# toggle-fullscreen-mode + +### Beschreibung + +@short: Wird ausgelöst, wenn der Vollbildmodus umgeschaltet wird + +### Verwendung + +~~~jsx {} +"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void; +~~~ + +### Parameter + +Der Callback des **toggle-fullscreen-mode**-Events kann ein Objekt mit folgendem Parameter entgegennehmen: + +- `mode` - aktiviert den Vollbildmodus + +:::info +Zur Behandlung der internen Events können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..103ef8a --- /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. 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-layout-mode + +### Beschreibung + +@short: Wird ausgelöst, wenn der Layout-Modus umgeschaltet wird + +### Verwendung + +~~~jsx {} +"toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void; +~~~ + +### Parameter + +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 +Zur Verarbeitung interner Events können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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-shortcut-info.md b/i18n/de/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md new file mode 100644 index 0000000..10d8d9f --- /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-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# toggle-shortcut-info + +### Beschreibung + +@short: Wird ausgelöst, wenn die Tastenkürzel-Info ein- oder ausgeblendet wird + +### Verwendung + +~~~jsx {} +"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void; +~~~ + +### Parameter + +Der Callback des **toggle-shortcut-info**-Events kann ein Objekt mit folgendem Parameter entgegennehmen: + +- `mode` - aktiviert die Tastenkürzel-Info; `true`, um das Tastenkürzel-Info-Popup anzuzeigen, `false`, um es auszublenden + +:::info +Zur Verarbeitung interner Events können Sie die [**Event-Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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 Tastenkürzel-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..bbd01df --- /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: Informationen zum undo-Event finden Sie in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek. 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 + +@short: Wird ausgelöst, wenn die Schaltfläche „Rückgängig" in der Menü- oder Symbolleiste gedrückt wird oder über Event Bus-Methoden + +### Verwendung + +~~~jsx {} +"undo": () => boolean | void; +~~~ + +:::info +Zur Behandlung interner Events können Sie [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..41ac9c3 --- /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. Lesen 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 + +@short: Wird ausgelöst, wenn ein Link aktualisiert wird + +### Verwendung + +~~~jsx {} +"update-link": ({ id: number, url: string }) => boolean | void; +~~~ + +### Parameter + +Der Callback des **update-link**-Events kann ein Objekt mit folgenden Parametern entgegennehmen: + +- `id` - die Link-ID +- `url` - die geänderte URL + +:::info +Zur Verarbeitung interner Events können Sie die [**Event Bus-Methoden**](api/overview/event_bus_methods_overview.md) verwenden +::: + +### Beispiel + +~~~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..d79ed58 --- /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. Entwicklerhandbücher und API-Referenz, Codebeispiele und Live-Demos, sowie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText. +--- + +# api.detach() + +### Beschreibung + +@short: Ermöglicht das Entfernen/Abtrennen von Event-Handlern + +### Verwendung + +~~~jsx {} +api.detach( tag: string ): void; +~~~ + +### Parameter + +- `tag` - (erforderlich) der Name des Aktions-Tags + +### Events + +:::info +Die vollständige Liste der internen RichText-Events finden Sie [**hier**](api/overview/events_overview.md) +::: + +### Beispiel + +~~~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..1b1e74f --- /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. Entwicklerhandbücher und API-Referenz, Code-Beispiele und Live-Demos sowie eine kostenlose 30-Tage-Testversion von DHTMLX RichText. +--- + +# api.exec() + +### Beschreibung + +@short: Ermöglicht das Auslösen interner Events + +### Verwendung + +~~~jsx {} +api.exec( + event: string, + config: object +): void; +~~~ + +### Parameter + +- `event` - (erforderlich) ein auszulösendes Event +- `config` - (erforderlich) das Konfigurationsobjekt mit Parametern (siehe das auszulösende Event) + +### Events + +:::info +Die vollständige Liste der internen RichText-Events finden Sie [**hier**](api/overview/events_overview.md) +::: + +### Beispiel + +~~~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..47cf02c --- /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 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. +--- + +# api.getReactiveState() + +### Beschreibung + +@short: Gibt ein Objekt mit den reaktiven Eigenschaften von RichText zurück + +### Verwendung + +~~~jsx {} +api.getReactiveState(): object; +~~~ + +### Rückgabewert + +Die Methode gibt ein Objekt mit den folgenden Parametern zurück: + +~~~jsx {} +{ + cursorState: { subscribe: any }, + defaultStyles {...}, + document {...}, + fullscreen {...}, + history {...}, + layoutMode {...}, + popup {...}, + selection {...} +} +~~~ + +### Beispiel + +~~~jsx {5-7} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// den Reactive State 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..7e58171 --- /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. Sehen Sie sich Entwicklerhandbücher und API-Referenzen an, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# api.getState() + +### Beschreibung + +@short: Gibt ein Objekt mit den StateStore-Eigenschaften von RichText zurück + +### Verwendung + +~~~jsx {} +api.getState(): object; +~~~ + +### Rückgabewert + +Die Methode gibt ein Objekt mit den folgenden Parametern zurück: + +~~~jsx {} +{ + cursorState: {}, + defaultStyles: {}, + document: {}, + fullscreen: boolean, + history: [] + layoutMode: string, + popup: any, + selection: {} +} +~~~ + +### Beispiel + +~~~jsx {5-7} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// den State 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..4509828 --- /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. 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. +--- + +# api.intercept() + +### Beschreibung + +@short: Ermöglicht das Abfangen und Verhindern interner Events + +### Verwendung + +~~~jsx {} +api.intercept( + event: string, + callback: function +): void; +~~~ + +### Parameter + +- `event` - (erforderlich) ein auszulösendes Event +- `callback` - (erforderlich) ein auszuführender Callback (die Callback-Argumente hängen vom ausgelösten Event ab) + +### Events + +:::info +Die vollständige Liste der internen RichText-Events finden Sie [**hier**](api/overview/events_overview.md) +::: + +### Beispiel + +~~~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..536c964 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/internal/on.md @@ -0,0 +1,46 @@ +--- +sidebar_label: api.on() +title: on Method +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die Methode on. 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.on() + +### Beschreibung + +@short: Ermöglicht das Hinzufügen eines Handlers für interne Events + +### Verwendung + +~~~jsx {} +api.on( + event: string, + handler: function +): void; +~~~ + +### Parameter + +- `event` - (erforderlich) ein Event, das ausgelöst werden soll +- `handler` - (erforderlich) ein hinzuzufügender Handler (die Handler-Argumente hängen vom ausgelösten Event ab) + +### Events + +:::info +Die vollständige Liste der internen RichText-Events finden Sie [**hier**](api/overview/events_overview.md) +::: + +### Beispiel + +~~~jsx {5-8} +// RichText initialisieren +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); +// das Event "set-font-size" 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..9320f83 --- /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 API-Referenzen, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# api.setNext() + +### Beschreibung + +@short: Ermöglicht das Hinzufügen einer Aktion in die Event Bus-Reihenfolge + +### Verwendung + +~~~jsx {} +api.setNext(next: any): void; +~~~ + +### Parameter + +- `next` - (erforderlich) die Aktion, die in die **Event Bus**-Reihenfolge aufgenommen werden soll + +### Beispiel + +~~~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..c6bf308 --- /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: Informationen zur destructor-Methode 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. +--- + +# destructor() + +### Beschreibung + +@short: Entfernt alle HTML-Elemente von RichText und trennt alle zugehörigen Events + +### Verwendung + +~~~jsx {} +destructor(): void; +~~~ + +### Beispiel + +~~~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..dee2b11 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/get-value.md @@ -0,0 +1,43 @@ +--- +sidebar_label: getValue() +title: getValue Method +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die getValue-Methode. Entwicklerhandbücher und API-Referenz, Code-Beispiele und Live-Demos sowie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText. +--- + +# getValue() + +### Beschreibung + +@short: Gibt den Wert des RichText zurück + +### Verwendung + +~~~jsx {} +getValue(encoder?: any): string; +~~~ + +### Parameter + +- `encoder` - (optional) ein Parser, der den Inhalt des RichText in ein benutzerdefiniertes Format kodiert. Folgende Formate sind verfügbar: `html` (Standard) und `text` + +Den benötigten Encoder erhalten Sie auf folgende Weise: + +```jsx +const toTextEncoder = richtext.text.toText; // Text-Encoder +const toHTMLEncoder = richtext.html.toHTML; // HTML-Encoder +``` + +### Beispiel + +~~~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/set-config.md b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-config.md new file mode 100644 index 0000000..2942a11 --- /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 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. +--- + +# setConfig() + +### Beschreibung + +@short: Wendet neue Konfigurationsparameter auf RichText an + +### Verwendung + +~~~jsx {} +setConfig(config: { [key:any]: any }): void; +~~~ + +### Parameter + +- `config` - (erforderlich) das Objekt mit den RichText-Konfigurationsparametern. Die vollständige Liste der Eigenschaften finden Sie [hier](api/overview/properties_overview.md) + +:::note +Die Methode `setConfig()` behält alle zuvor gesetzten Parameter bei, die nicht explizit im Aufruf von `setConfig()` angegeben werden. +::: + +### Beispiel + +~~~jsx {6-8} +const editor = new richtext.Richtext("#root", { + value: "

Some text

", + // andere 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..0df8dec --- /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: Erfahren Sie mehr über die setLocale-Methode in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek. Lesen Sie Entwicklerhandbücher und API-Referenz, testen Sie Codebeispiele und Live-Demos und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# setLocale() + +### Beschreibung + +@short: Wendet eine neue Locale auf RichText an + +### Verwendung + +~~~jsx {} +setLocale(null | locale?: object): void; +~~~ + +### Parameter + +- `null` - (optional) setzt die Standard-Locale zurück (*Englisch*) +- `locale` - (optional) das Objekt mit den Daten der neuen anzuwendenden Locale + +:::info +Verwenden Sie die Methode `setLocale()`, um eine neue Locale auf RichText anzuwenden. Um RichText auf die Standard-Locale zurückzusetzen, rufen Sie die Methode `setLocale()` ohne Argumente auf (oder mit dem Wert *null*). +::: + +### Beispiel + +~~~jsx {5-6} +const editor = new richtext.Richtext("#root", { + // Konfigurationseigenschaften +}); + +// die Locale "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..1dcace8 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/methods/set-value.md @@ -0,0 +1,44 @@ +--- +sidebar_label: setValue() +title: setValue Methode +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie mehr über die setValue-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. +--- + +# setValue() + +### Beschreibung + +@short: Wendet einen neuen Wert auf RichText an + +### Verwendung + +~~~jsx {} +setValue: (value: string, encoder?: any): void; +~~~ + +### Parameter + +- `value` - (erforderlich) ein Wert, der in den RichText eingefügt werden soll +- `encoder` - (optional) ein benutzerdefinierter Parser, der den Inhalt des RichText in ein benutzerdefiniertes Format kodiert. Die folgenden Formate sind verfügbar: `html` (Standard) und `text` + +Der erforderliche Encoder kann wie folgt abgerufen werden: + +```jsx +const fromTextEncoder = richtext.text.fromText; // text encoder +const fromHTMLEncoder = richtext.html.fromHTML; // html encoder +``` + +### Beispiel + +~~~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 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..f83a550 --- /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 methods +title: Event Bus Methods +description: Eine Übersicht der internen Event-Bus-Methoden des 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. +--- + +# Event Bus methods + +Diese Seite enthält eine Liste der Methoden des internen Event Bus, der vom DHTMLX RichText-Editor verwendet wird. +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..c0e9959 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/events_overview.md @@ -0,0 +1,45 @@ +--- +sidebar_label: Events-Übersicht +title: Events-Übersicht +description: Eine Übersicht aller Events des JavaScript RichText-Editors finden Sie in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek. 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. +--- + +# Events-Übersicht + +Diese Seite listet alle Events auf, die vom DHTMLX RichText-Editor ausgelöst werden. +Sie können diese Events verwenden, um die Funktionalität 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/import.md) | @getshort(api/events/import.md) | +| [](api/events/indent.md) | @getshort(api/events/indent.md) | +| [](api/events/insert-image.md) | @getshort(api/events/insert-image.md) | +| [](api/events/insert-line.md) | @getshort(api/events/insert-line.md) | +| [](api/events/insert-link.md) | @getshort(api/events/insert-link.md) | +| [](api/events/insert-list.md) | @getshort(api/events/insert-list.md) | +| [](api/events/outdent.md) | @getshort(api/events/outdent.md) | +| [](api/events/paste.md) | @getshort(api/events/paste.md) | +| [](api/events/print.md) | @getshort(api/events/print.md) | +| [](api/events/redo.md) | @getshort(api/events/redo.md) | +| [](api/events/resize-image.md) | @getshort(api/events/resize-image.md) | +| [](api/events/set-font-family.md) | @getshort(api/events/set-font-family.md) | +| [](api/events/set-font-size.md) | @getshort(api/events/set-font-size.md) | +| [](api/events/set-line-height.md) | @getshort(api/events/set-line-height.md) | +| [](api/events/set-text-color.md) | @getshort(api/events/set-text-color.md) | +| [](api/events/set-text-format.md) | @getshort(api/events/set-text-format.md) | +| [](api/events/set-text-style.md) | @getshort(api/events/set-text-style.md) | +| [](api/events/show-popup.md) | @getshort(api/events/show-popup.md) | +| [](api/events/subscript.md) | @getshort(api/events/subscript.md) | +| [](api/events/superscript.md) | @getshort(api/events/superscript.md) | +| [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md)| +| [](api/events/toggle-layout-mode.md) | @getshort(api/events/toggle-layout-mode.md) | +| [](api/events/toggle-shortcut-info.md) | @getshort(api/events/toggle-shortcut-info.md) | +| [](api/events/undo.md) | @getshort(api/events/undo.md) | +| [](api/events/update-link.md) | @getshort(api/events/update-link.md) | diff --git a/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..a5739a7 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/main_overview.md @@ -0,0 +1,97 @@ +--- +sidebar_label: API overview +title: API-Übersicht +description: Eine API-Übersicht von JavaScript RichText finden Sie in der Dokumentation der DHTMLX JavaScript RichText-Bibliothek. Lesen Sie Entwickleranleitungen und API-Referenz, testen Sie Code-Beispiele und Live-Demos, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# API-Übersicht + +## RichText-Konstruktor + +~~~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 + +| 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/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 + +| 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 + +| 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 + +| 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 + +| 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..2de0b65 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md @@ -0,0 +1,18 @@ +--- +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. 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. +--- + +# Methodenübersicht + +Diese Seite bietet eine Zusammenfassung der wichtigsten Methoden des DHTMLX RichText-Editors. +Verwenden Sie diese Referenz, um schnell zu detaillierten Beschreibungen der einzelnen Methoden zu navigieren, deren Zweck zu verstehen und Verwendungsbeispiele anzusehen. + +| 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/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..ea0dc5c --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md @@ -0,0 +1,21 @@ +--- +sidebar_label: Eigenschaften-Übersicht +title: Eigenschaften-Übersicht +description: Eine Übersicht der Eigenschaften 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. +--- + +# Eigenschaften-Übersicht + +Diese Seite listet alle Konfigurationseigenschaften auf, die bei der Initialisierung des DHTMLX RichText-Editors verwendet werden können. +Sie helfen Ihnen, Layout, Toolbar, Wert, Lokalisierung und andere 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/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..012650c --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md @@ -0,0 +1,15 @@ +--- +sidebar_label: State methods +title: State Methods +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 + +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/assets/richtext/classic_mode.png b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png new file mode 100644 index 0000000..baeb296 Binary files /dev/null and b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png differ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png new file mode 100644 index 0000000..bf4312c Binary files /dev/null and b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png differ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/editor.png b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/editor.png new file mode 100644 index 0000000..f9213b2 Binary files /dev/null and b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/editor.png differ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png new file mode 100644 index 0000000..f9213b2 Binary files /dev/null and b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png differ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png new file mode 100644 index 0000000..e6d70b9 Binary files /dev/null and b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png differ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png new file mode 100644 index 0000000..8b207e6 Binary files /dev/null and b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png differ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png new file mode 100644 index 0000000..c62be84 Binary files /dev/null and b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png differ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png new file mode 100644 index 0000000..07410f7 Binary files /dev/null and b/i18n/de/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png differ diff --git a/i18n/de/docusaurus-plugin-content-docs/current/assets/trial_richtext.png b/i18n/de/docusaurus-plugin-content-docs/current/assets/trial_richtext.png new file mode 100644 index 0000000..cdee98c Binary files /dev/null and b/i18n/de/docusaurus-plugin-content-docs/current/assets/trial_richtext.png differ 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..a6b1038 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/configuration.md @@ -0,0 +1,347 @@ +--- +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 Code-Beispiele und Live-Demos aus, und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# Konfiguration + +Das Erscheinungsbild und Verhalten von RichText lässt sich mit folgenden Eigenschaften konfigurieren: + +- [`menubar`](api/config/menubar.md) — Menüleiste oben ein- oder ausblenden +- [`toolbar`](api/config/toolbar.md) — Sichtbarkeit und Schaltflächen der Toolbar konfigurieren +- [`fullscreenMode`](api/config/fullscreen-mode.md) — Editor im Vollbildmodus starten +- [`layoutMode`](api/config/layout-mode.md) — zwischen dem `"classic"`- und dem `"document"`-Layout wechseln +- [`value`](api/config/value.md) — initialen 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 + +## Layout-Modi {#layout-modes} + +RichText unterstützt zwei Layout-Modi für den Bearbeitungsbereich: + +- **"classic"** — der Bearbeitungsbereich füllt die gesamte Seite + +
+![Classic mode](./../assets/richtext/classic_mode.png) +
+ +- **"document"** — der Bearbeitungsbereich ahmt eine Dokumentseite nach + +
+![Document mode](./../assets/richtext/document_mode.png) +
+ +Legen Sie die Eigenschaft [`layoutMode`](api/config/layout-mode.md) bei der Initialisierung fest, um den Modus zu wählen: + +~~~jsx +const editor = new richtext.Richtext("#root", { + layoutMode: "document" +}); +~~~ + +## Toolbar + +Die RichText-Toolbar gruppiert Steuerelemente in mehrere Blöcke, die Sie anpassen können. + +### Standardmäßige Toolbar-Steuerelemente {#default-toolbar-controls} + +Sie können folgende Schaltflächen und Steuerelemente in die RichText-Toolbar aufnehmen: + +| Schaltfläche | Beschreibung | +|---------------------|-----------------------------------------------------------------------------| +| `undo` | Macht die letzte Benutzeraktion rückgängig | +| `redo` | Stellt die zuletzt 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 Hintergrund-(Hervorhebungs-)farbe 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 ungeordnete Liste | +| `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 vom ausgewählten Text | +| `print` | Öffnet den Druckdialog | +| `fullscreen` | Schaltet den Vollbildmodus ein oder aus | +| `mode` | Wechselt zwischen zwei Layout-Modi: `classic` und `document` | +| `shortcuts` | Zeigt eine Liste der verfügbaren Tastatürkürzel an | +| `separator` | Fügt einen visuellen Trenner zwischen Steuerelementen ein | + +Verwenden Sie die Eigenschaft [`toolbar`](api/config/toolbar.md), um die Toolbar als Array von Steuerelement-Namen (Strings) 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" + // weitere Schaltflächen + ], + // weitere Konfigurationseigenschaften +}); +~~~ + +**Verwandtes Beispiel:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### Benutzerdefinierte Toolbar-Steuerelemente hinzufügen {#add-custom-toolbar-controls} + +Übergeben Sie dem Array [`toolbar`](api/config/toolbar.md) ein Objekt mit einem der folgenden Felder: + +- `type: string` — erforderlich. Steuerelementtyp: `"button"`, `"richselect"` oder `"colorpicker"` +- `id: string` — optional. Benutzerdefinierte Steuerelement-ID; darf sich nicht mit vorhandenen IDs überschneiden +- `icon: string` — optional. Icon-Klassenname; wird mit dem Label kombiniert +- `label: string` — optional. Schaltflächen-Label; wird mit dem Icon kombiniert +- `tooltip: string` — optional. Tooltip, der beim Hover erscheint; standardmäßig wird `label` verwendet, wenn nicht gesetzt +- `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 nicht passendem 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 */} + } + ], + // weitere Konfigurationseigenschaften +}); +~~~ + +**Verwandtes Beispiel:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### Toolbar ausblenden + +Setzen Sie die Eigenschaft [`toolbar`](api/config/toolbar.md) auf `false`, um die Toolbar auszublenden: + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false, + // weitere Konfigurationseigenschaften +}); +~~~ + +## Menüleiste anzeigen + +Aktivieren Sie die Eigenschaft [`menubar`](api/config/menubar.md), um die Menüleiste oberhalb der Toolbar anzuzeigen. Der Standardwert ist `false`. + +~~~jsx {2} +new richtext.Richtext("#root", { + menubar: true + // weitere Konfigurationseigenschaften +}); +~~~ + +## Initialen Inhalt festlegen + +Verwenden Sie die Eigenschaft [`value`](api/config/value.md), um bei der Initialisierung initialen HTML-Inhalt in den Editor zu übergeben: + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" + // weitere 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. + +## Initiale Sprache festlegen + +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 + // weitere 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 + +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 + // weitere Konfigurationseigenschaften +}); +~~~ + +## Bild-Upload-URL konfigurieren + +Übergeben Sie der Eigenschaft [`imageUploadUrl`](api/config/image-upload-url.md) eine URL, um den Server-Endpunkt für Bild-Uploads über die Toolbar festzulegen: + +~~~jsx {2} +new richtext.Richtext("#root", { + imageUploadUrl: "https://example.com/upload" + // weitere Konfigurationseigenschaften +}); +~~~ + +## 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 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. Passende CSS-Stile müssen separat angewendet werden: + +```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 auf rosa Hintergrund. Die passende CSS-Regel wendet dieselben Werte auf die gerenderten `h2`-Elemente an. + +**Verwandtes Beispiel:** [RichText. Changing the default value for typography (font, font size, etc.)](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..18c0c6c --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/initialization.md @@ -0,0 +1,78 @@ +--- +sidebar_label: Initialisierung +title: Initialisierung +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über die Initialisierung. 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. +--- + +# Initialisierung + +Dieses Handbuch erklärt, wie RichText zu einer Seite hinzugefügt wird. Führen Sie die folgenden Schritte aus, um einen einsatzbereiten Editor zu erhalten: + +1. [Quelldateien in die Seite einbinden](#include-the-source-files). +2. [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 die 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 nimmt zwei Parameter entgegen: + +- 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 +Die vollständige Liste der Konfigurationseigenschaften finden Sie in der [Eigenschaftsübersicht](api/overview/properties_overview.md). +::: + +## RichText-Instanz zerstören + +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 + +Das folgende Beispiel initialisiert RichText mit aktivierter Menüleiste: + + 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..ac16c4c --- /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, wie die Integration mit Angular funktioniert. Lesen Sie Entwicklerhandbücher und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# Integration mit Angular + +:::tip +Stellen Sie sicher, dass Sie mit den grundlegenden Angular-Konzepten und -Mustern vertraut sind. Eine Auffrischung finden Sie in der [Angular-Dokumentation](https://v17.angular.io/docs). +::: + +DHTMLX RichText funktioniert mit Angular. Ein vollständiges Codebeispiel finden Sie in der [GitHub-Demo](https://github.com/DHTMLX/angular-richtext-demo). + +## Projekt erstellen + +:::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 +Deaktivieren Sie Server-Side Rendering (SSR) und Static Site Generation (SSG/Prerendering), wenn Angular CLI Sie während der Projekterstellung dazu auffordert. +::: + +Der Befehl installiert alle erforderlichen Tools. Es sind keine weiteren Befehle notwendig. + +### Abhängigkeiten installieren + +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 + +Beenden Sie die App und installieren Sie das RichText-Paket. + +### Schritt 1. Paket installieren + +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 + +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 + +Ö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'; +~~~ + +In diesem Tutorial wird die Testversion von RichText verwendet. + +#### Container festlegen und RichText initialisieren + +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 Ressourcen freizugeben: + +~~~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", // use the "richtext" selector in app.component.ts as + styleUrls: ["./richtext.component.css"], // include the css file + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + // container for RichText + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: Richtext; + + ngOnInit() { + // initialize the RichText component + this._editor = new Richtext(this.richtext_container.nativeElement, {}); + } + + ngOnDestroy(): void { + this._editor.destructor(); // destroy RichText + } +} +~~~ + +#### Styles hinzufügen + +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" +/* import RichText styles */ +@import "@dhx/trial-richtext/dist/richtext.css"; + +/* base page styles */ +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 + +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 Eigenschaft `value` an die RichText-Konfiguration innerhalb von `ngOnInit()`: + +~~~jsx {} title="richtext.component.ts" +import { Richtext } from '@dhx/trial-richtext'; +import { getData } from "./data"; // import data +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", + styleUrls: ["./richtext.component.css"], + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: Richtext; + + ngOnInit() { + const { value } = getData(); // extract the value from the data module + this._editor = new Richtext(this.richtext_container.nativeElement, { + value + // other configuration properties + }); + } + + 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"; // import data +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", + styleUrls: ["./richtext.component.css"], + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: Richtext; + + ngOnInit() { + const { value } = getData(); // extract the value from the data module + this._editor = new Richtext(this.richtext_container.nativeElement, { + // other configuration properties + }); + + // apply the data via the setValue() method + this._editor.setValue(value); + } + + ngOnDestroy(): void { + this._editor.destructor(); + } +} +~~~ + +Die RichText-Komponente ist einsatzbereit. Angular rendert den Editor mit Daten, wenn das Element `` eingebunden wird. Eine vollständige Liste der Konfigurationsoptionen finden Sie in der [RichText API-Übersicht](api/overview/main_overview.md). + +#### Events verarbeiten + +RichText löst Events bei Benutzeraktionen aus. Abonnieren Sie Events mit der Methode [`api.on()`](api/internal/on.md), um auf Benutzereingaben zu reagieren. Siehe die [vollständige Liste der Events](api/overview/events_overview.md). + +Öffnen Sie *richtext.component.ts* und aktualisieren Sie die Methode `ngOnInit()`. Das folgende Beispiel gibt bei jedem [`print`](api/events/print.md)-Event eine Meldung in der Konsole aus: + +~~~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 + +Ö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. + +
+![RichText initialization](../assets/trial_richtext.png) +
+ +Sie verfügen nun über eine funktionierende RichText-Integration in Angular. Passen Sie den Code an Ihre Anforderungen 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..bff12f8 --- /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 mehr über die Integration mit React. 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. +--- + +# Integration mit React + +:::tip +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 + +:::info +Installieren Sie [Node.js](https://nodejs.org/en/) und (optional) [Vite](https://vite.dev/), bevor Sie ein neues Projekt erstellen. +::: + +Erstellen Sie ein neues *my-react-richtext-app*-Projekt mit Create React App: + +~~~bash +npx create-react-app my-react-richtext-app +~~~ + +### Abhängigkeiten installieren + +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 + +Stoppen Sie die App und installieren Sie das RichText-Paket. + +### Schritt 1. Paket installieren + +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 + +Erstellen Sie eine React-Komponente, um RichText zur Anwendung hinzuzufügen. Erstellen Sie im Verzeichnis *src/* eine neue Datei mit dem Namen *Richtext.jsx*. + +#### Quelldateien importieren + +Ö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 + +Legen Sie ein Container-Element für RichText fest und initialisieren Sie die Komponente mit dem `Richtext`-Konstruktor innerhalb von `useEffect()`. Rufen Sie die Methode [`destructor()`](api/methods/destructor.md) 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 + +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 + +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 Methode [`setValue()`](api/methods/set-value.md) 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. Eine vollständige Liste der Konfigurationsoptionen finden Sie in der [RichText API-Übersicht](api/overview/main_overview.md). + +#### Events verarbeiten + +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 Liste der Events](api/overview/events_overview.md). + +Öffnen Sie *Richtext.jsx* und aktualisieren Sie den `useEffect()`-Hook. Das folgende Beispiel protokolliert eine Nachricht bei jedem [`print`](api/events/print.md)-Event: + +~~~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. + +
+![RichText initialization](../assets/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..300639e --- /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, wie die Integration mit Svelte funktioniert. Lesen Sie Entwicklerleitfäden 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 + +:::tip[Hinweis] +Stellen Sie sicher, dass Sie mit den grundlegenden [Svelte](https://svelte.dev/)-Konzepten und -Mustern vertraut sind. Eine Auffrischung finden Sie in der [Svelte-Dokumentation](https://svelte.dev/docs). +::: + +DHTMLX RichText funktioniert mit Svelte. Ein vollständiges Codebeispiel finden Sie im [GitHub-Demo](https://github.com/DHTMLX/svelte-richtext-demo). + +## Projekt erstellen + +:::info[Hinweis] +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 den [Svelte-Projektleitfaden](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit). + +Erstellen Sie ein neues Vite-Projekt: + +~~~bash +npm create vite@latest +~~~ + +### Abhängigkeiten installieren + +Wenn der Scaffolder nach einem Projektnamen fragt, verwenden Sie *my-svelte-richtext-app*. Wechseln Sie anschließend 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 + +Stoppen Sie die Anwendung und installieren Sie das RichText-Paket. + +### Schritt 1. Paket installieren + +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 + +Erstellen Sie eine Svelte-Komponente, um RichText zur Anwendung hinzuzufügen. Erstellen Sie im Verzeichnis *src/* eine neue Datei namens *Richtext.svelte*. + +#### Quelldateien importieren + +Ö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 + +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" + + +
+
+
+~~~ + +#### Styles hinzufügen + +Fügen Sie die Styles für RichText und seinen Container zur Haupt-CSS-Datei 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 + +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 rufen Sie die Methode [`setValue()`](api/methods/set-value.md) innerhalb von `onMount()` auf, 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 + +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 Eventliste](api/overview/events_overview.md). + +Öffnen Sie *Richtext.svelte* und aktualisieren Sie den `onMount()`-Hook. Das folgende Beispiel gibt bei jedem [`print`](api/events/print.md)-Event eine Meldung in der Konsole aus: + +~~~html {} title="Richtext.svelte" + + +// ... +~~~ + +Starten Sie die Anwendung, um zu sehen, wie RichText mit Daten auf der Seite gerendert wird. + +
+![RichText initialization](../assets/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..264dccb --- /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 Entwickleranleitungen und die API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# Integration mit Vue + +:::tip +Stellen Sie sicher, dass Sie mit den grundlegenden [Vue](https://vuejs.org/)-Konzepten und -Mustern vertraut sind. Zur Auffrischung empfiehlt sich 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 + +:::info +Installieren Sie [Node.js](https://nodejs.org/en/), bevor Sie ein neues Projekt erstellen. +::: + +Erstellen Sie ein Vue-Projekt mit dem offiziellen Scaffolding-Tool: + +~~~bash +npm create vue@latest +~~~ + +Der Befehl installiert und startet `create-vue`. Wenn das Scaffolding-Tool nach einem Projektnamen fragt, verwenden Sie *my-vue-richtext-app*. Weitere Details finden Sie im [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application). + +### Abhängigkeiten installieren + +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 + +Stoppen Sie die App und installieren Sie das RichText-Paket. + +### Schritt 1. Paket installieren + +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 + +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 + +Ö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 + +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 + +Fügen Sie die Stile für RichText und seinen Container zur Haupt-CSS-Datei des Projekts hinzu: + +~~~css title="main.css" +/* Basisstile der Seite */ +html, +body, +#app { /* Root-Container #app 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 + +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, sobald das ``-Element eingebunden wird. Die vollständige Liste der Konfigurationsoptionen finden Sie in der [RichText-API-Übersicht](api/overview/main_overview.md). + +#### Events verarbeiten + +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.vue* und aktualisieren Sie den `mounted()`-Hook. Das folgende Beispiel gibt bei jedem [`print`](api/events/print.md)-Event eine Meldung in der Konsole aus: + +~~~html {} title="Richtext.vue" + + +// ... +~~~ + +Starten Sie die App, um zu sehen, wie RichText mit Daten auf der Seite gerendert wird. + +
+![RichText initialization](../assets/trial_richtext.png) +
+ +Sie verfügen nun über eine funktionierende RichText-Integration in Vue. Passen Sie den Code an Ihre Anforderungen 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..c3220f0 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/localization.md @@ -0,0 +1,495 @@ +--- +sidebar_label: Lokalisierung +title: Lokalisierung +description: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über die Lokalisierung. 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. +--- + +# Lokalisierung + +RichText unterstützt die Lokalisierung aller Schnittstellenbeschriftungen. Erstellen Sie ein neues Gebietsschema oder passen Sie ein integriertes an, und wenden Sie das Ergebnis über die Editor-Konfiguration an. + +## Standardgebietsschema + +Standardmäßig verwendet RichText das englische Gebietsschema: + +~~~jsx +const en = { + richtext: { + // buttons/actions + Undo: "Undo", + Redo: "Redo", + Style: "Style", + "Font family": "Font family", + "Font size": "Font size", + Bold: "Bold", + Italic: "Italic", + Underline: "Underline", + Strikethrough: "Strikethrough", + Subscript: "Subscript", + Superscript: "Superscript", + "Text color": "Text color", + "Background color": "Background color", + "Left align": "Left align", + "Center align": "Center align", + "Right align": "Right align", + Justify: "Justify", + "Line height": "Line height", + Outdent: "Outdent", + Indent: "Indent", + "Insert link": "Insert link", + "Insert image": "Insert image", + "Insert horizontal line": "Insert horizontal line", + "Clear formatting": "Clear formatting", + Print: "Print", + "Fullscreen mode": "Fullscreen mode", + "Layout mode": "Layout mode", + "Classic mode": "Classic mode", + "Document mode": "Document mode", + + // menubar exclusive options + File: "File", + Import: "Import", + Export: "Export", + Edit: "Edit", + Cut: "Cut", + Copy: "Copy", + Paste: "Paste", + View: "View", + Insert: "Insert", + Format: "Format", + Help: "Help", + New: "New", + Link: "Link", + Image: "Image", + "Horizontal line": "Horizontal line", + Text: "Text", + "Heading 1": "Heading 1", + "Heading 2": "Heading 2", + "Heading 3": "Heading 3", + "Heading 4": "Heading 4", + "Heading 5": "Heading 5", + "Heading 6": "Heading 6", + Align: "Align", + Left: "Left", + Center: "Center", + Right: "Right", + Justified: "Justified", + "Keyboard shortcuts": "Keyboard shortcuts", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "Operation failed. Please check your browser's clipboard permissions.", + + // block style dropdown + Heading: "Heading", + Quote: "Quote", + Paragraph: "Paragraph", + "Text style": "Text style", + Lists: "Lists", + + normal: "normal", + default: "default", + + // lists + "Bulleted list": "Bulleted list", + "Numbered list": "Numbered list", + + // links + "Enter text to display": "Enter text to display", + "Paste link": "Paste link", + "Link copied to clipboard": "Link copied to clipboard", + + // shortcut groups + "Text formatting": "Text formatting", + Editing: "Editing", + "Special actions": "Special actions", + + // colors + Black: "Black", + Gray: "Gray", + White: "White", + Red: "Red", + Orange: "Orange", + Yellow: "Yellow", + Lime: "Lime", + Green: "Green", + Teal: "Teal", + Cyan: "Cyan", + Blue: "Blue", + Indigo: "Indigo", + Magenta: "Magenta", + + // shades + "Light gray": "Light gray", + "Medium gray": "Medium gray", + "Dark gray": "Dark gray", + "Light red": "Light red", + "Medium red": "Medium red", + "Dark red": "Dark red", + "Light orange": "Light orange", + "Medium orange": "Medium orange", + "Dark orange": "Dark orange", + "Light yellow": "Light yellow", + "Medium yellow": "Medium yellow", + "Dark yellow": "Dark yellow", + "Light lime": "Light lime", + "Medium lime": "Medium lime", + "Dark lime": "Dark lime", + "Light green": "Light green", + "Medium green": "Medium green", + "Dark green": "Dark green", + "Light teal": "Light teal", + "Medium teal": "Medium teal", + "Dark teal": "Dark teal", + "Light cyan": "Light cyan", + "Medium cyan": "Medium cyan", + "Dark cyan": "Dark cyan", + "Light blue": "Light blue", + "Medium blue": "Medium blue", + "Dark blue": "Dark blue", + "Light indigo": "Light indigo", + "Medium indigo": "Medium indigo", + "Dark indigo": "Dark indigo", + "Light magenta": "Light magenta", + "Medium magenta": "Medium magenta", + "Dark magenta": "Dark magenta" + } +}; +~~~ + +:::info +RichText wird auch mit den integrierten Gebietsschemas Deutsch (`de`) und Chinesisch (`cn`) ausgeliefert. Auf ein beliebiges integriertes Gebietsschema kann über den Namespace `richtext.locales` zugegriffen werden: `richtext.locales.en`, `richtext.locales.de`, `richtext.locales.cn`. +::: + +
+de locale + +~~~jsx +const de = { + richtext: { + // buttons/actions + Undo: "Rückgängig", + Redo: "Wiederholen", + Style: "Stil", + "Font family": "Schriftart", + "Font size": "Schriftgröße", + Bold: "Fett", + Italic: "Kursiv", + Underline: "Unterstrichen", + Strikethrough: "Durchgestrichen", + Subscript: "Tiefgestellt", + Superscript: "Hochgestellt", + "Text color": "Textfarbe", + "Background color": "Hintergrundfarbe", + "Left align": "Linksbündig", + "Center align": "Zentriert", + "Right align": "Rechtsbündig", + Justify: "Blocksatz", + "Line height": "Zeilenhöhe", + Outdent: "Einzug verringern", + Indent: "Einzug erhöhen", + "Insert link": "Link einfügen", + "Insert image": "Bild einfügen", + "Insert horizontal line": "Horizontale Linie einfügen", + "Clear formatting": "Formatierung löschen", + Print: "Drucken", + "Fullscreen mode": "Vollbildmodus", + "Layout mode": "Layout-Modus", + "Classic mode": "Klassischer Modus", + "Document mode": "Dokumentenmodus", + + // menubar exclusive options + File: "Datei", + Import: "Importieren", + Export: "Exportieren", + Edit: "Bearbeiten", + Cut: "Ausschneiden", + Copy: "Kopieren", + Paste: "Einfügen", + View: "Ansicht", + Insert: "Einfügen", + Format: "Format", + Help: "Hilfe", + New: "Neu", + Link: "Link", + Image: "Bild", + "Horizontal line": "Horizontale Linie", + Text: "Text", + "Heading 1": "Überschrift 1", + "Heading 2": "Überschrift 2", + "Heading 3": "Überschrift 3", + "Heading 4": "Überschrift 4", + "Heading 5": "Überschrift 5", + "Heading 6": "Überschrift 6", + Align: "Ausrichten", + Left: "Links", + Center: "Zentriert", + Right: "Rechts", + Justified: "Blocksatz", + "Keyboard shortcuts": "Tastenkürzel", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "Operation fehlgeschlagen. Bitte überprüfen Sie die Berechtigungen für die Zwischenablage Ihres Browsers.", + + // block style dropdown + Heading: "Überschrift", + Quote: "Zitat", + Paragraph: "Absatz", + "Text style": "Textstil", + Lists: "Listen", + + normal: "normal", + default: "standard", + + // lists + "Bulleted list": "Liste mit Aufzählungszeichen", + "Numbered list": "Nummerierte Liste", + + // links + "Enter text to display": "Text zum Anzeigen eingeben", + "Paste link": "Link einfügen", + "Link copied to clipboard": "Link in die Zwischenablage kopiert", + + // shortcut groups + "Text formatting": "Textformatierung", + Editing: "Bearbeitung", + "Special actions": "Spezielle Aktionen", + + // colors + Black: "Schwarz", + Gray: "Grau", + White: "Weiß", + Red: "Rot", + Orange: "Orange", + Yellow: "Gelb", + Lime: "Limette", + Green: "Grün", + Teal: "Türkis", + Cyan: "Cyan", + Blue: "Blau", + Indigo: "Indigo", + Magenta: "Magenta", + + // shades + "Light gray": "Hellgrau", + "Medium gray": "Mittelgrau", + "Dark gray": "Dunkelgrau", + "Light red": "Hellrot", + "Medium red": "Mittelrot", + "Dark red": "Dunkelrot", + "Light orange": "Hellorange", + "Medium orange": "Mittelorange", + "Dark orange": "Dunkelorange", + "Light yellow": "Hellgelb", + "Medium yellow": "Mittleres Gelb", + "Dark yellow": "Dunkelgelb", + "Light lime": "Hellgrün", + "Medium lime": "Mittleres Grün", + "Dark lime": "Dunkelgrün", + "Light green": "Hellgrün", + "Medium green": "Mittleres Grün", + "Dark green": "Dunkelgrün", + "Light teal": "Hellblau", + "Medium teal": "Mittelblau", + "Dark teal": "Dunkelblau", + "Light cyan": "Hellcyan", + "Medium cyan": "Mittleres Cyan", + "Dark cyan": "Dunkelcyan", + "Light blue": "Hellblau", + "Medium blue": "Mittelblau", + "Dark blue": "Dunkelblau", + "Light indigo": "Hellindigo", + "Medium indigo": "Mittelindigo", + "Dark indigo": "Dunkelindigo", + "Light magenta": "Hellmagenta", + "Medium magenta": "Mittleres Magenta", + "Dark magenta": "Dunkelmagenta" + } +}; +~~~ +
+ +
+cn locale + +~~~jsx +const cn = { + richtext: { + // buttons/actions + Undo: "撤销", + Redo: "重做", + Style: "样式", + "Font family": "字体", + "Font size": "字体大小", + Bold: "粗体", + Italic: "斜体", + Underline: "下划线", + Strikethrough: "删除线", + Subscript: "下标", + Superscript: "上标", + "Text color": "文本颜色", + "Background color": "背景颜色", + "Left align": "左对齐", + "Center align": "居中对齐", + "Right align": "右对齐", + Justify: "两端对齐", + "Line height": "行高", + Outdent: "减少缩进", + Indent: "增加缩进", + "Insert link": "插入链接", + "Insert image": "插入图片", + "Insert horizontal line": "插入水平线", + "Clear formatting": "清除格式", + Print: "打印", + "Fullscreen mode": "全屏模式", + "Layout mode": "布局模式", + "Classic mode": "经典模式", + "Document mode": "文档模式", + + // menubar exclusive options + File: "文件", + Import: "导入", + Export: "导出", + Edit: "编辑", + Cut: "剪切", + Copy: "复制", + Paste: "粘贴", + View: "视图", + Insert: "插入", + Format: "格式", + Help: "帮助", + New: "新建", + Link: "链接", + Image: "图片", + "Horizontal line": "水平线", + Text: "文本", + "Heading 1": "标题 1", + "Heading 2": "标题 2", + "Heading 3": "标题 3", + "Heading 4": "标题 4", + "Heading 5": "标题 5", + "Heading 6": "标题 6", + Align: "对齐", + Left: "左", + Center: "居中", + Right: "右", + Justified: "两端对齐", + "Keyboard shortcuts": "键盘快捷键", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "操作失败。请检查浏览器的剪贴板权限。", + + // block style dropdown + Heading: "标题", + Quote: "引用", + Paragraph: "段落", + "Text style": "文本样式", + Lists: "列表", + + normal: "普通的", + default: "默认", + + // lists + "Bulleted list": "项目符号列表", + "Numbered list": "编号列表", + + // links + "Enter text to display": "输入要显示的文本", + "Paste link": "粘贴链接", + "Link copied to clipboard": "链接已复制到剪贴板", + + // shortcut groups + "Text formatting": "文本格式化", + Editing: "编辑", + "Special actions": "特殊操作", + + // colors + Black: "黑色", + Gray: "灰色", + White: "白色", + Red: "红色", + Orange: "橙色", + Yellow: "黄色", + Lime: "酸橙色", + Green: "绿色", + Teal: "水鸭色", + Cyan: "青色", + Blue: "蓝色", + Indigo: "靛蓝色", + Magenta: "洋红色", + + // shades + "Light gray": "浅灰色", + "Medium gray": "中灰色", + "Dark gray": "深灰色", + "Light red": "浅红色", + "Medium red": "中红色", + "Dark red": "深红色", + "Light orange": "浅橙色", + "Medium orange": "中橙色", + "Dark orange": "深橙色", + "Light yellow": "浅黄色", + "Medium yellow": "中黄色", + "Dark yellow": "深黄色", + "Light lime": "浅酸橙色", + "Medium lime": "中酸橙色", + "Dark lime": "深酸橙色", + "Light green": "浅绿色", + "Medium green": "中绿色", + "Dark green": "深绿色", + "Light teal": "浅水鸭色", + "Medium teal": "中水鸭色", + "Dark teal": "深水鸭色", + "Light cyan": "浅青色", + "Medium cyan": "中青色", + "Dark cyan": "深青色", + "Light blue": "浅蓝色", + "Medium blue": "中蓝色", + "Dark blue": "深蓝色", + "Light indigo": "浅靛蓝色", + "Medium indigo": "中靛蓝色", + "Dark indigo": "深靛蓝色", + "Light magenta": "浅洋红色", + "Medium magenta": "中洋红色", + "Dark magenta": "深洋红色" + } +}; +~~~ +
+ +## Benutzerdefiniertes Gebietsschema anwenden + +Erstellen Sie ein Gebietsschema-Objekt (oder passen Sie ein integriertes an) mit Übersetzungen für alle Schnittstellenbeschriftungen. Wenden Sie das Gebietsschema bei der Initialisierung an oder wechseln Sie es zur Laufzeit, wie unten gezeigt. + +### Gebietsschema bei der Initialisierung anwenden + +Übergeben Sie das Gebietsschema an die Eigenschaft [`locale`](api/config/locale.md) in der Konstruktorkonfiguration: + +~~~jsx +const editor = new richtext.Richtext("#root", { + locale: richtext.locales.de + // other configuration properties +}); +~~~ + +### Gebietsschema zur Laufzeit wechseln + +Rufen Sie die Methode [`setLocale()`](api/methods/set-locale.md) auf, um das Gebietsschema nach der Initialisierung zu wechseln: + +~~~jsx +editor.setLocale(richtext.locales.cn); +~~~ + +Um das standardmäßige englische Gebietsschema wiederherzustellen, rufen Sie [`setLocale()`](api/methods/set-locale.md) ohne Argumente oder mit `null` auf: + +~~~jsx +editor.setLocale(); +~~~ + +## Beispiel + +Das folgende Beispiel wechselt zwischen mehreren RichText-Gebietsschemas: + + 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..4c9e9be --- /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 mehr über die Gestaltungsmöglichkeiten. Erkunden Sie Entwickleranleitungen und API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +# Gestaltung + +Passen Sie das Erscheinungsbild von DHTMLX RichText an, indem Sie CSS-Variablen am Container des Editors und an Unterelementen überschreiben. + +Diese Anleitung zeigt, wie ein **dunkles Theme** angewendet wird und wie Menüleiste, Toolbar, Popup und Inhaltsbereich mit CSS-Klassenselektoren angesprochen werden. + +## Standardstruktur und Klassennamen + +RichText verwendet die folgenden Kernklassen zur Strukturierung der Benutzeroberfläche: + +| Klassenname | Beschreibung | +|------------------------|----------------------------------------------------| +| `.wx-richtext` | Wurzel-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 Toolbar | +| `.wx-editor-area` | Container für den Haupt-Bearbeitungsbereich | + +Verwenden Sie diese Klassen in benutzerdefinierten CSS-Selektoren, um das Erscheinungsbild des Editors zu überschreiben. + +## Standardstile überschreiben + +Um die Standardstile zu überschreiben, definieren Sie CSS-Variablen am `#root`-Container oder an bestimmten Unterelementen neu: + +```html +
+ + +``` + +:::note +Diese Stile wenden einen dunklen Hintergrund an, passen Schaltflächen- und Symbolfarben an und verbessern die Lesbarkeit für dunkle UI-Themes. +::: + +## Unterstützte CSS-Variablen + +| Variablenname | Beschreibung | +| ---------------------------- | -------------------------------------------------------------------- | +| `--wx-background` | Hintergrundfarbe von Editor und Popup | +| `--wx-background-alt` | Alternativer Hintergrund für die Menüleiste | +| `--wx-color-primary` | Akzentfarbe für Links, Blockzitate und Bildgrößenänderungs-Handles | +| `--wx-color-font` | Hauptschriftfarbe (für Editor, Menüleiste und Toolbar) | +| `--wx-color-font-alt` | Alternative Schriftfarbe | +| `--wx-color-font-disabled` | Schriftfarbe für deaktivierte Elemente (in Menüleiste und Toolbar) | +| `--wx-border` | Rahmenstil, der im gesamten Editor verwendet wird | +| `--wx-color-secondary-hover` | Hover-Hintergrund für Schaltflächen in Menüleiste und Toolbar | +| `--wx-button-active` | Aktiver Hintergrund für Schaltflächen in Menüleiste und Toolbar | +| `--wx-icon-color` | Farbe der Dropdown-Pfeilsymbole in der Toolbar | +| `--wx-popup-border` | Rahmen für Popup-Elemente | + +## Best Practices + +* Verwenden Sie `color-scheme: dark`, um die native Eingabegestaltung im Dunkelmodus zu verbessern +* Vermeiden Sie Änderungen an layoutbezogenen Eigenschaften (wie `display`, `position`) ohne triftigen Grund + +:::tip +Für die Typografie einzelner Tags (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 in der [Konfigurationsanleitung](guides/configuration.md#configure-default-styles). +::: + +## 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..474b53f --- /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: In der Dokumentation erfahren Sie, wie Sie TypeScript mit der DHTMLX JavaScript RichText-Bibliothek verwenden. 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. +--- + +# TypeScript-Unterstützung + +Ab v2.0 wird DHTMLX RichText mit integrierten TypeScript-Definitionen ausgeliefert, die keine zusätzliche Konfiguration erfordern. + +:::note +Probieren Sie den Editor im Snippet Tool aus. +::: + +## Vorteile von TypeScript + +TypeScript mit DHTMLX RichText bietet Ihnen: + +- Typsicherheit — der Compiler erkennt fehlerhafte Verwendung von Konfigurationseigenschaften und Methodenargumenten zur Build-Zeit +- Autovervollständigung — Ihre IDE schlägt gültige Eigenschaftsnamen, Methodensignaturen und Werttypen während der Eingabe vor +- selbstdokumentierende API — Typannotationen für das Konfigurationsobjekt und die Methoden dienen gleichzeitig als inline-Dokumentation + +## RichText in TypeScript initialisieren + +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 + +TypeScript-Signaturen für jede Konfigurationseigenschaft finden Sie in der [Eigenschaftsü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/how_to_start.md b/i18n/de/docusaurus-plugin-content-docs/current/how_to_start.md new file mode 100644 index 0000000..8e87f70 --- /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 die API-Referenz, probieren Sie Code-Beispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Testversion von DHTMLX RichText herunter. +--- + +# Erste Schritte + +Dieses übersichtliche und umfassende Tutorial führt Sie durch alle Schritte, die erforderlich sind, um ein voll funktionsfähiges RichText auf einer Seite einzubinden. + +
+![DHTMLX RichText Classic Mode](./assets/richtext/classic_mode.png) +
+ +## Schritt 1. Quelldateien einbinden + +Erstellen Sie zunächst eine HTML-Datei und nennen Sie sie *index.html*. Binden Sie anschließend 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 über den Paketmanager **yarn** oder **npm** in Ihr Projekt importieren. + +#### Testversion von RichText über npm oder yarn installieren + +:::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 folgen Sie den Schritten in der *README*-Datei. Beachten Sie, dass die Testversion von RichText nur 30 Tage verfügbar ist. +::: + +#### PRO-Version von RichText über npm oder yarn installieren + +:::info +Sie können direkt im [Kundenbereich](https://dhtmlx.com/clients/) auf das private DHTMLX-**npm**-Repository zugreifen, indem Sie Ihre Login-Daten für **npm** generieren. Eine ausführliche Installationsanleitung finden Sie ebenfalls dort. Bitte beachten Sie, dass der Zugriff auf das private **npm** nur verfügbar ist, solange Ihre proprietäre RichText-Lizenz aktiv ist. +::: + +## Schritt 2. RichText erstellen + +Jetzt können Sie RichText zur Seite hinzufügen. Erstellen Sie zunächst den `
`-Container für RichText. Gehen Sie dazu wie folgt vor: + +- Geben Sie einen DIV-Container in der Datei *index.html* an +- Initialisieren Sie RichText mit dem Konstruktor `richtext.Richtext` + +Der Konstruktor nimmt als Parameter einen beliebigen 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 + +Im nächsten Schritt können Sie die Konfigurationseigenschaften festlegen, die die RichText-Komponente bei der Initialisierung haben soll. + +Um mit RichText zu arbeiten, müssen Sie zunächst die Ausgangsdaten für den Editor über die Eigenschaft [`value`](api/config/value.md) bereitstellen. Darüber hinaus können Sie die [**Menüleiste**](api/config/menubar.md) aktivieren, die [**Toolbar**](api/config/toolbar.md) anpassen, den [**Vollbildmodus**](api/config/fullscreen-mode.md) und das [**Layout**](api/config/layout-mode.md) festlegen, ein neues [**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? + +Das war es schon. Mit nur drei einfachen Schritten steht Ihnen ein praktisches Tool zur Inhaltsbearbeitung zur Verfügung. Jetzt können Sie mit der Bearbeitung Ihrer Inhalte beginnen oder die Möglichkeiten 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..efa2890 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/index.md @@ -0,0 +1,126 @@ +--- +sidebar_label: RichText-Übersicht +title: RichText-Übersicht +slug: / +description: Eine Übersicht der DHTMLX JavaScript RichText-Bibliothek finden Sie in der Dokumentation. Entdecken 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. +--- + +# RichText-Übersicht + +**DHTMLX RichText** ist ein flexibler und schlanker WYSIWYG-Editor, der mit JavaScript entwickelt wurde. RichText bietet eine reibungslose Bearbeitungserfahrung in modernen Webanwendungen, eine übersichtliche Benutzeroberfläche, umfangreiche Formatierungsmöglichkeiten und vollständige Kontrolle über die Inhaltsdarstellung. Ob Sie ein CMS, ein internes Verwaltungswerkzeug oder einen eingebetteten Dokumenteneditor entwickeln – RichText lässt sich einfach integrieren und an Ihre Anforderungen anpassen. + +Die **DHTMLX RichText**-Komponente umfasst die folgenden Funktionen: + +- Zwei [**Layout-Modi**](api/config/layout-mode.md) + +- Inhaltsserialisierung in Nur-Text und HTML + +- Konfigurierbares [**Toolbar**](api/config/toolbar.md) mit integrierten und benutzerdefinierten Schaltflächen + +- Statische [**Menüleiste**](api/config/menubar.md), die ein- oder ausgeblendet werden kann + +- Bild-Upload, umfangreiche Formatierung, benutzerdefiniertes Styling und Vollbildmodus + +- [Vollständiger API-Zugriff](api/overview/main_overview.md) für [Ereignisbehandlung](api/overview/event_bus_methods_overview.md), [Inhaltsmanipulation](api/overview/methods_overview.md) und [reaktives Zustandsmanagement](api/overview/state_methods_overview.md) + +RichText ist framework-unabhängig und lässt sich problemlos mit [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 eine Vielzahl von Frontend-Ökosystemen geeignet macht. + +Diese Dokumentation bietet detaillierte Anleitungen zu Installation, Konfiguration, Verwendung und Anpassung. Sie finden Beispiele für häufige Anwendungsfälle, [vollständige API-Referenzen](api/overview/main_overview.md) und Best Practices für die Integration von RichText in Ihre Anwendung. + +## RichText-Struktur + +### Menüleiste + +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 aktiviert oder deaktiviert werden, ihr Inhalt ist jedoch derzeit nicht konfigurierbar. + +
+![Menüleiste](./assets/richtext/menubar.png) +
+ +### Toolbar + +Die RichText-Toolbar bietet schnellen Zugriff auf Textformatierung und strukturelle Bearbeitungsfunktionen. Standardmäßig ist die [Toolbar](api/config/toolbar.md#default-config) aktiviert und zeigt eine vordefinierte Auswahl häufig verwendeter Steuerelemente wie Fett, Kursiv, Schrifteinstellungen, Listenformatierung und mehr an. + +Die Eigenschaft [`toolbar`](api/config/toolbar.md) ermöglicht die vollständige Anpassung von Inhalt und Layout der Toolbar. Sie können die Toolbar aktivieren oder deaktivieren, Standardsteuerelemente neu anordnen oder eine vollständig benutzerdefinierte Toolbar mit einem Array aus vordefinierten Schaltflächen-IDs und benutzerdefinierten Schaltflächenobjekten definieren. + +
+![Toolbar](./assets/richtext/toolbar.png) +
+ +### 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 benutzerdefiniertes Styling, das Einbetten von Bildern und responsive Layout-Anpassungen, um den Anforderungen Ihrer Anwendung gerecht zu werden. + +#### Zwei Arbeitsmodi + +DHTMLX RichText kann Inhalte im „classic"- und „document"-Modus verarbeiten. Sie können den für Sie am besten geeigneten Modus wählen, um komfortabel Text zu bearbeiten. Verwenden Sie die Eigenschaft [`layoutMode`](api/config/layout-mode.md), um den Modus programmgesteuert zu wechseln. + +- **„classic"** + +
+![Classic-Modus](./assets/richtext/classic_mode.png) +
+ +- **„document"** + +
+![Document-Modus](./assets/richtext/document_mode.png) +
+ +## Unterstützte Formate + +Der RichText-Editor unterstützt das [Parsen](api/methods/set-value.md) und die [Serialisierung](api/methods/get-value.md) von Inhalten in den Formaten **HTML** und Nur-Text. + +#### HTML-Format + +
+![HTML-Format](./assets/richtext/html_format.png) +
+ +#### Textformat + +
+![Textformat](./assets/richtext/text_format.png) +
+ +## Tastaturkürzel + +Der RichText-Editor unterstützt eine Reihe gängiger Tastaturkürzel für schnelleres Formatieren und Bearbeiten. Die Kürzel folgen plattformspezifischen Konventionen und sind sowohl unter **Windows/Linux** (`Ctrl`) als auch unter **macOS** (`⌘`) verfügbar. + +### Textformatierung + +| Aktion | Windows/Linux | macOS | +|-----------------|-----------------|---------------| +| Fett* | `Ctrl+B` | `⌘B` | +| Kursiv | `Ctrl+I` | `⌘I` | +| Unterstrichen | `Ctrl+U` | `⌘U` | +| Durchgestrichen | `Ctrl+Shift+X` | `⌘⇧X` | + +### Bearbeitung + +| Aktion | Windows/Linux | macOS | +|------------|--------------------------|---------------| +| Rückgängig | `Ctrl+Z` | `⌘Z` | +| Wiederholen| `Ctrl+Y` / `Ctrl+Shift+Z`| `⌘Y` / `⌘⇧Z` | +| Ausschneiden| `Ctrl+X` | `⌘X` | +| Kopieren | `Ctrl+C` | `⌘C` | +| Einfügen | `Ctrl+V` | `⌘V` | + +### Sonderaktionen + +| Aktion | Windows/Linux | macOS | +|----------------|---------------|-------| +| Link einfügen | `Ctrl+K` | `⌘K` | +| Drucken | `Ctrl+P` | `⌘P` | + +:::info +Weitere Tastaturkürzel können in zukünftigen Updates hinzugefügt werden. +::: + +Um die aktuelle Referenz zu den RichText-Tastaturkürzeln aufzurufen, drücken Sie **Help** und wählen Sie die Option **Keyboard shortcuts**: + +
+![Tastaturkürzel](./assets/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..8e15259 --- /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: In der Dokumentation der DHTMLX JavaScript RichText-Bibliothek erfahren Sie alles über die Migration auf neuere Versionen. Lesen 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. +--- + +# Migration auf neuere Versionen + +## 1.2 -> 2.0 + +### Migration der Properties {#properties-migration} + +| Veraltete Property | Ersetzt durch | Hinweise | +| ------------------- | ------------------------- | ----------------------------------------------------- | +| `customStats` | *(Entfernt)* | In der neuen Version 2.0 nicht mehr verfügbar | +| `toolbarBlocks` | `toolbar` | Unterstützt jetzt eine detaillierte Toolbar-Struktur | +| `defaultStyles` | `defaultStyles` (updated) | Struktur ist jetzt blockbasiert und CSS-basiert | +| `mode` | `layoutMode` | Ersetzt durch eine striktere Enum-basierte Einstellung| + +### - `customStats` + +Die Property `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) + +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) + +Vor **2.0** konnten Benutzer Standardwerte für Toolbar-Auswahlsteuerelemente festlegen +```jsx title="Before 2.0" +defaultStyles: { + "font-family": "Tahoma", + "font-size": "14px" +} +``` + +Ab **2.0** können Benutzer Standardstilwerte für bestimmte Blocktypen festlegen +```jsx title="From 2.0" +defaultStyles: { + "*": { + "font-family": "Tahoma", + "font-size": "14px" + }, + h1: { + "font-size": "32px", + "color": "#333" + } +} +``` + +:::note +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) + +```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" +}); +``` + +Die neue Property [`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 öffentliche API verwenden | +| `fire()` | *Entfernt* | Ersetzt durch `exec()` und `intercept()` | +| `on()`, `detach()` | ✅ Erhalten (`api.on`, `api.detach`) | Jetzt über `richtext.api` zugänglich | +| `fullScreen()` | *Entfernt* | Config-Property `fullscreenMode` verwenden | +| `exitFullScreen()` | *Entfernt* | Config-Property `fullscreenMode` verwenden | +| `paint()` | *Entfernt* | Nicht mehr erforderlich | +| `destructor()` | ✅ Weiterhin verfügbar | Unverändert | +| `setConfig()` | ✅ Neu | Ermöglicht Live-Konfigurationsaktualisierungen | +| `setLocale()` | ✅ Neu | Ermöglicht dynamischen Locale-Wechsel | +| `getReactiveState()` | ✅ Neu | Ermöglicht reaktives State-Tracking | +| `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) + +```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 +Sie können `getValue()` und `setValue()` weiterhin ohne Encoder aufrufen — standardmäßig wird HTML verwendet +::: + +### - [`on`](api/internal/on.md) / [`detach`](api/internal/detach.md) + +```jsx title="Before 2.0" +editor.events.on("Change", function(action, canUndo, canRedo){ + // your code here +}); + +editor.events.detach("Change"); +``` + +```jsx title="From 2.0" +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}, { tag: "track" }); + +editor.api.detach("track"); +``` + +### - `fire()` → [`exec()`](api/internal/exec.md) 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..3437ad8 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/news/whats_new.md @@ -0,0 +1,192 @@ +--- +sidebar_label: Was ist neu +title: Was ist neu +description: Entdecken Sie die Neuerungen in DHTMLX RichText und den Versionsverlauf in der Dokumentation der DHTMLX JavaScript UI-Bibliothek. Lesen Sie Entwicklerleitfäden und API-Referenz, probieren Sie Codebeispiele und Live-Demos aus und laden Sie eine kostenlose 30-Tage-Evaluierungsversion von DHTMLX RichText herunter. +--- + +## Version 2.0.5 + +Veröffentlicht am 6. März 2026 + +### Fehlerbehebungen + +- 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 Parsen von HTML ignoriert +- Inline-Elemente erben Eigenschaften von übergeordneten Block-Elementen +- Text zwischen zwei Editor-Instanzen kann nicht kopiert werden +- Die Auswahl wird bei zwei (oder mehr) aktiven Editor-Instanzen nicht korrekt behandelt +- Der Cursor wird falsch positioniert, wenn der einzige Inhalt im Absatz ein Bild ist +- Unbegrenzte Umbrüche bei Tiefgestellt- und Hochgestellt-Elementen +- Beim Einfügen von Bildern werden diese direkt eingebettet, anstatt sie zunächst 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 +- Fehlerhafte Auswahlbehandlung für HR-Elemente +- Fehlerhafte 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" (STRG+A) wird nicht korrekt behandelt + +## Version 2.0.4 + +Veröffentlicht am 15. Oktober 2025 + +### Fehlerbehebungen + +- Fehlerhafte Bereichsauswahl für Absätze +- Link-Popups werden nicht angezeigt, wenn sie sich neben verknüpften Bildern befinden +- Anfängliche Toolbar-Werte stimmen nicht mit dem tatsächlichen Inhalt überein + +## Version 2.0.3 + +Veröffentlicht am 27. August 2025 + +### Fehlerbehebungen + +- Ein Klick auf eine horizontale Linie verursacht einen Skriptfehler +- Die standardmäßige Zeilenhöhe ist falsch +- Inhaltsstile enthalten doppelte Selektoren +- Nur-Text-Blöcke ignorieren Stiländerungen beim Parsen von HTML +- Der Parser ignoriert Schriftartennamen mit Escapezeichen in HTML +- Der Parser ignoriert die Eigenschaften `margin-left` und `line-height` in HTML + +## Version 2.0.2 + +Veröffentlicht am 4. August 2025 + +### Fehlerbehebungen + +- Paketinhalt aktualisiert + +## Version 2.0.1 + +Veröffentlicht am 30. Juli 2025 + +### Fehlerbehebungen + +- Typdefinitionen für die Eigenschaft `defaultStyles` aktualisiert + +## Version 2.0 + +Veröffentlicht am 30. Juli 2025 + +:::note +Die API von v1.2 ist nicht mit v2.0 kompatibel. Weitere Informationen finden Sie im [**Migrationsleitfaden**](news/migration.md). +::: + +### Neue Funktionen + +- **Textwiedergabe der nächsten Generation** + Erleben Sie eine flüssigere, schnellere und präzisere Textwiedergabe mit unserer neuen Engine + +- **Granulare Toolbar-Konfiguration** + Übernehmen Sie die volle Kontrolle über die Toolbar: + - Definieren Sie [einzelne Toolbar-Steuerelemente](guides/configuration.md#default-toolbar-controls) und deren Reihenfolge + - Fügen Sie [benutzerdefinierte Steuerelemente](guides/configuration.md#add-custom-toolbar-controls) hinzu + +- **Optionale [Menüleiste](api/config/menubar.md)** + Aktivieren Sie eine klassische menübasierte Oberfläche am oberen Rand des Editors + +- **Verbesserter [Dokumentmodus](guides/configuration.md#layout-modes)** + Unterstützung für verschiedene Dokumentgrößen hinzugefügt + +- **Bildunterstützung** + - Bilder mit [Upload-Funktion](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 vergrößern](api/events/indent.md) / [Einzug verkleinern](api/events/outdent.md) + - [Zeilenhöhe](api/events/set-line-height.md) festlegen + - [Tiefgestellt](api/events/subscript.md) / [Hochgestellt](api/events/superscript.md) anwenden + +- **Listenverwaltung** + [Listen einfügen und verwalten](api/events/insert-list.md) leicht gemacht + +- **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 Bearbeitungsverknüpfungen + +### Neue API + +#### Neue Eigenschaften + +- [`fullscreenMode`](api/config/fullscreen-mode.md) +- [`imageUploadUrl`](api/config/image-upload-url.md) +- [`layoutMode`](api/config/layout-mode.md) +- [`locale`](api/config/locale.md) +- [`menubar`](api/config/menubar.md) +- [`toolbar`](api/config/toolbar.md) +- [`value`](api/config/value.md) + +#### Neue Methoden + +- [`setConfig()`](api/methods/set-config.md) — Konfiguration dynamisch aktualisieren +- [`setLocale()`](api/methods/set-locale.md) — Locale zur Laufzeit ändern + +#### Neue interne Methoden + +- [`api.exec()`](api/internal/exec.md) +- [`api.intercept()`](api/internal/intercept.md) +- [`api.getReactiveState()`](api/internal/get-reactive-state.md) +- [`api.getState()`](api/internal/get-state.md) + +#### Neue Events + +Eine vollständige Liste der neuen Events ist [hier](api/overview/events_overview.md) verfügbar + +### Aktualisierte API + +#### Aktualisierte Eigenschaften + +- [`defaultStyles`](api/config/default-styles.md) + +#### Aktualisierte Methoden + +- [`setValue()`](api/methods/set-value.md) +- [`getValue()`](api/methods/get-value.md) + +#### Aktualisierte interne Methoden + +- [`api.detach()`](api/internal/detach.md) +- [`api.on()`](api/internal/on.md) + +## Entfernte API + +:::warning +Verwenden Sie die entfernte API nicht in Ihren Projekten!
Weitere Informationen finden Sie im Thema [Migration](news/migration.md). +::: + +### [Entfernte Eigenschaften](news/migration.md#properties-migration) + +- [`customStats`](news/migration.md#--customstats) +- [`mode`](news/migration.md#--mode--layoutmode) +- [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar) + +### [Entfernte Methoden](news/migration.md#methods-migration) + +- `exitFullScreen()` +- `fullScreen()` +- `getEditorAPI()` +- `getStats()` +- `paint()` + +### Entfernte interne Methoden + +- [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept) + +### Entfernte Events + +- `Action` +- `Change` +- `selectionChange` +- `selectionRefresh` diff --git a/i18n/de/docusaurus-theme-classic/footer.json b/i18n/de/docusaurus-theme-classic/footer.json new file mode 100644 index 0000000..cb5c883 --- /dev/null +++ b/i18n/de/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "Development center", + "description": "The title of the footer links column with title=Development center in the footer" + }, + "link.title.Community": { + "message": "Community", + "description": "The title of the footer links column with title=Community in the footer" + }, + "link.title.Company": { + "message": "Company", + "description": "The title of the footer links column with title=Company in the footer" + }, + "link.item.label.Download RichText": { + "message": "Download RichText", + "description": "The label of footer link with label=Download RichText linking to https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml" + }, + "link.item.label.Examples": { + "message": "Examples", + "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/t55alxiy?tag=richtext" + }, + "link.item.label.Blog": { + "message": "Blog", + "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/tag/richtext/" + }, + "link.item.label.Forum": { + "message": "Forum", + "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/richtext/" + }, + "link.item.label.GitHub": { + "message": "GitHub", + "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX" + }, + "link.item.label.Youtube": { + "message": "Youtube", + "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx" + }, + "link.item.label.Facebook": { + "message": "Facebook", + "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx" + }, + "link.item.label.Twitter": { + "message": "Twitter", + "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx" + }, + "link.item.label.Linkedin": { + "message": "Linkedin", + "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/" + }, + "link.item.label.About us": { + "message": "About us", + "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "Contact us", + "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "Licensing", + "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxRichText/#editions-licenses" + } +} diff --git a/i18n/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..c1e7434 --- /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.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.AnnouncementBar.closeButtonAriaLabel": { + "message": "닫기", + "description": "The ARIA label for close button of announcement bar" + }, + "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.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": "(opens in new tab)", + "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.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..9239ff7 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-blog/options.json @@ -0,0 +1,14 @@ +{ + "title": { + "message": "Blog", + "description": "The title for the blog used in SEO" + }, + "description": { + "message": "Blog", + "description": "The description for the blog used in SEO" + }, + "sidebar.title": { + "message": "Recent posts", + "description": "The label for the left sidebar" + } +} diff --git a/i18n/ko/docusaurus-plugin-content-docs/current.json b/i18n/ko/docusaurus-plugin-content-docs/current.json new file mode 100644 index 0000000..833fee2 --- /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-theme-classic/footer.json b/i18n/ko/docusaurus-theme-classic/footer.json new file mode 100644 index 0000000..cb5c883 --- /dev/null +++ b/i18n/ko/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "Development center", + "description": "The title of the footer links column with title=Development center in the footer" + }, + "link.title.Community": { + "message": "Community", + "description": "The title of the footer links column with title=Community in the footer" + }, + "link.title.Company": { + "message": "Company", + "description": "The title of the footer links column with title=Company in the footer" + }, + "link.item.label.Download RichText": { + "message": "Download RichText", + "description": "The label of footer link with label=Download RichText linking to https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml" + }, + "link.item.label.Examples": { + "message": "Examples", + "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/t55alxiy?tag=richtext" + }, + "link.item.label.Blog": { + "message": "Blog", + "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/tag/richtext/" + }, + "link.item.label.Forum": { + "message": "Forum", + "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/richtext/" + }, + "link.item.label.GitHub": { + "message": "GitHub", + "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX" + }, + "link.item.label.Youtube": { + "message": "Youtube", + "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx" + }, + "link.item.label.Facebook": { + "message": "Facebook", + "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx" + }, + "link.item.label.Twitter": { + "message": "Twitter", + "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx" + }, + "link.item.label.Linkedin": { + "message": "Linkedin", + "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/" + }, + "link.item.label.About us": { + "message": "About us", + "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "Contact us", + "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "Licensing", + "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxRichText/#editions-licenses" + } +} diff --git a/i18n/ko/docusaurus-theme-classic/navbar.json b/i18n/ko/docusaurus-theme-classic/navbar.json new file mode 100644 index 0000000..306efb4 --- /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": "Forum", + "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..90bc531 --- /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.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.BackToTopButton.buttonAriaLabel": { + "message": "Прокрутка к началу", + "description": "The ARIA label for the back to top button" + }, + "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.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.common.headingLinkTitle": { + "message": "Прямая ссылка на {heading}", + "description": "Title for link to heading" + }, + "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.AnnouncementBar.closeButtonAriaLabel": { + "message": "Закрыть", + "description": "The ARIA label for close button of announcement bar" + }, + "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.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.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.NavBar.navAriaLabel": { + "message": "Основная", + "description": "The ARIA label for the main navigation" + }, + "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.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.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.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.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.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.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} документ|{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.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": "Ask another question...", + "description": "The placeholder text when in AI question mode" + }, + "theme.SearchModal.searchBox.placeholderTextAskAiStreaming": { + "message": "Answering...", + "description": "The placeholder text for search box when AI is streaming an answer" + }, + "theme.SearchModal.searchBox.enterKeyHint": { + "message": "search", + "description": "The hint for the search box enter key text" + }, + "theme.SearchModal.searchBox.enterKeyHintAskAi": { + "message": "enter", + "description": "The hint for the Ask AI search box enter key text" + }, + "theme.SearchModal.searchBox.searchInputLabel": { + "message": "Search", + "description": "The ARIA label for search input" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonText": { + "message": "Back to keyword search", + "description": "The text for back to keyword search button" + }, + "theme.SearchModal.searchBox.backToKeywordSearchButtonAriaLabel": { + "message": "Back to keyword search", + "description": "The ARIA label for back to keyword search button" + }, + "theme.SearchModal.startScreen.recentSearchesTitle": { + "message": "Недавнее", + "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": "Recent conversations", + "description": "The title for recent conversations" + }, + "theme.SearchModal.startScreen.removeRecentConversationButtonTitle": { + "message": "Remove this conversation from history", + "description": "The title for remove recent conversation button" + }, + "theme.SearchModal.errorScreen.titleText": { + "message": "Невозможно загрузить результаты поиска", + "description": "The title for error screen" + }, + "theme.SearchModal.errorScreen.helpText": { + "message": "Проверьте подключение к интернету.", + "description": "The help text for error screen" + }, + "theme.SearchModal.resultsScreen.askAiPlaceholder": { + "message": "Ask AI: ", + "description": "The placeholder text for Ask AI input" + }, + "theme.SearchModal.askAiScreen.disclaimerText": { + "message": "Answers are generated with AI which can make mistakes. Verify responses.", + "description": "The disclaimer text for AI answers" + }, + "theme.SearchModal.askAiScreen.relatedSourcesText": { + "message": "Related sources", + "description": "The text for related sources" + }, + "theme.SearchModal.askAiScreen.thinkingText": { + "message": "Thinking...", + "description": "The text when AI is thinking" + }, + "theme.SearchModal.askAiScreen.copyButtonText": { + "message": "Copy", + "description": "The text for copy button" + }, + "theme.SearchModal.askAiScreen.copyButtonCopiedText": { + "message": "Copied!", + "description": "The text for copy button when copied" + }, + "theme.SearchModal.askAiScreen.copyButtonTitle": { + "message": "Copy", + "description": "The title for copy button" + }, + "theme.SearchModal.askAiScreen.likeButtonTitle": { + "message": "Like", + "description": "The title for like button" + }, + "theme.SearchModal.askAiScreen.dislikeButtonTitle": { + "message": "Dislike", + "description": "The title for dislike button" + }, + "theme.SearchModal.askAiScreen.thanksForFeedbackText": { + "message": "Thanks for your feedback!", + "description": "The text for thanks for feedback" + }, + "theme.SearchModal.askAiScreen.preToolCallText": { + "message": "Searching...", + "description": "The text before tool call" + }, + "theme.SearchModal.askAiScreen.duringToolCallText": { + "message": "Searching for ", + "description": "The text during tool call" + }, + "theme.SearchModal.askAiScreen.afterToolCallText": { + "message": "Searched for", + "description": "The text after tool call" + }, + "theme.SearchModal.footer.selectText": { + "message": "выбрать", + "description": "The select text for footer" + }, + "theme.SearchModal.footer.submitQuestionText": { + "message": "Submit question", + "description": "The submit question text for footer" + }, + "theme.SearchModal.footer.selectKeyAriaLabel": { + "message": "Клавиша Enter", + "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": "Back to search", + "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} запись|{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": "Authors", + "description": "The title of the authors page" + }, + "theme.blog.authorsList.viewAll": { + "message": "View All Authors", + "description": "The label of the link targeting the blog authors page" + }, + "theme.blog.author.noPosts": { + "message": "This author has not written any posts yet.", + "description": "The text for authors with 0 blog post" + }, + "theme.contentVisibility.unlistedBanner.title": { + "message": "Unlisted page", + "description": "The unlisted content banner title" + }, + "theme.contentVisibility.unlistedBanner.message": { + "message": "This page is unlisted. Search engines will not index it, and only users having a direct link can access it.", + "description": "The unlisted content banner message" + }, + "theme.contentVisibility.draftBanner.title": { + "message": "Draft page", + "description": "The draft content banner title" + }, + "theme.contentVisibility.draftBanner.message": { + "message": "This page is a draft. It will only be visible in dev and be excluded from the production build.", + "description": "The draft content banner message" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "Попробуйте ещё раз", + "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..9239ff7 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-blog/options.json @@ -0,0 +1,14 @@ +{ + "title": { + "message": "Blog", + "description": "The title for the blog used in SEO" + }, + "description": { + "message": "Blog", + "description": "The description for the blog used in SEO" + }, + "sidebar.title": { + "message": "Recent posts", + "description": "The label for the left sidebar" + } +} diff --git a/i18n/ru/docusaurus-plugin-content-docs/current.json b/i18n/ru/docusaurus-plugin-content-docs/current.json new file mode 100644 index 0000000..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..b46896e --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/.sync @@ -0,0 +1 @@ +afb5fb5016336be28b3492d89a67b0d22db8298b 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..e4d1904 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/default-styles.md @@ -0,0 +1,144 @@ +--- +sidebar_label: defaultStyles +title: defaultStyles Config +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о конфигурационном свойстве defaultStyles. Просматривайте руководства разработчика и справочник по АПИ, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# defaultStyles + +### Описание + +@short: Необязательное. Задаёт значения стилей по умолчанию для определённых типов блоков + +### Использование + +~~~jsx {} +defaultStyles?: { + "*"?: { // применяется ко всем блокам, позволяя задавать общие свойства для каждого из них + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + p?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + blockquote?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h1?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h2?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h3?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h4?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h5?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h6?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + } +}; +~~~ + +:::important[Важно] +Свойство `defaultStyles` НЕ применяет CSS-стили к затронутым блокам напрямую. CSS-стили необходимо задавать отдельно: + +```jsx title="index.js" +new richtext.Richtext("#root", { + defaultStyles: { + h2: { + "font-family": "Roboto", + "font-size": "28px", + color: "purple", + background: "#FFC0CB" + } + } +}); +``` + +```css title="index.css" + +``` + +В этом примере всем блокам `h2` назначается шрифт `"Roboto"` с размером 28px, а также изменяются цвет текста и фон. CSS-стили также применяются к блокам `h2`. +::: + +### Конфигурация по умолчанию + +~~~jsx +const defaultStyles = { + "*": { "font-family": "Arial" }, + p: { "font-size": "14px" }, + blockquote: { "font-size": "14px" }, + h1: { "font-size": "32px" }, + h2: { "font-size": "24px" }, + h3: { "font-size": "18px" }, + h4: { "font-size": "16px" }, + h5: { "font-size": "14px" }, + h6: { "font-size": "12px" } +}; +~~~ + +### Пример + +~~~jsx {3-13} +// инициализация RichText +new richtext.Richtext("#root", { + defaultStyles: { + h4: { + "font-family": "Roboto" + }, + h5: { + "font-family": "Roboto" + }, + h6: { + "font-family": "Roboto" + } + }, + // другие свойства конфигурации +}); +~~~ + +**Журнал изменений:** Свойство было обновлено в v2.0 + +**Связанные статьи:** [Конфигурация](guides/configuration.md) + +**Связанный пример:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md new file mode 100644 index 0000000..3a0de4a --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md @@ -0,0 +1,39 @@ +--- +sidebar_label: fullscreenMode +title: fullscreenMode Config +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о конфигурационном параметре fullscreenMode. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# fullscreenMode + +### Описание + +@short: Необязательный. Включает полноэкранный режим RichText + +### Использование + +~~~jsx {} +fullscreenMode?: boolean; +~~~ + +### Конфигурация по умолчанию + +~~~jsx +fullscreenMode: false; +~~~ + +### Пример + +~~~jsx {3} +// инициализация RichText +new richtext.Richtext("#root", { + fullscreenMode: true + // другие параметры конфигурации +}); +~~~ + +**Журнал изменений:** Свойство добавлено в v2.0 + +**Связанные статьи:** [Конфигурация](guides/configuration.md) + +**Связанный пример:** [RichText. Full toolbar](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..a9dd70a --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md @@ -0,0 +1,33 @@ +--- +sidebar_label: imageUploadUrl +title: imageUploadUrl Config +description: В документации библиотеки DHTMLX JavaScript RichText вы можете ознакомиться с конфигурационным параметром imageUploadUrl. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# imageUploadUrl + +### Описание + +@short: Необязательный. Задаёт URL, который будет использоваться для загрузки изображений + +### Использование + +~~~jsx {} +imageUploadUrl?: string; +~~~ + +### Пример + +~~~jsx {3} +// инициализация RichText +new richtext.Richtext("#root", { + imageUploadUrl: "some URL" + // другие параметры конфигурации +}); +~~~ + +**Лог изменений:** Свойство добавлено в v2.0 + +**Связанные статьи:** [Конфигурация](guides/configuration.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..dbc304a --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/layout-mode.md @@ -0,0 +1,41 @@ +--- +sidebar_label: layoutMode +title: layoutMode Config +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о конфиге layoutMode. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# layoutMode + +### Описание + +@short: Необязательный. Задаёт режим отображения основной области редактора + +### Использование + +~~~jsx {} +layoutMode: "classic" | "document"; +~~~ + +Режим `"classic"` заполняет всю область редактирования. Режим `"document"` отображает область редактирования как страницу документа. + +### Конфигурация по умолчанию + +~~~jsx +layoutMode: "classic"; +~~~ + +### Пример + +~~~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..0f20a4e --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/locale.md @@ -0,0 +1,47 @@ +--- +sidebar_label: locale +title: locale Config +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о конфигурационном свойстве locale. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# locale + +### Описание + +@short: Необязательный. Объект, содержащий метки локализации RichText + +:::info[Информация] +Объект **locale** должен включать все метки RichText с соответствующими переводами. +::: + +### Использование + +~~~jsx {} +locale?: object; +~~~ + +### Конфигурация по умолчанию + +По умолчанию RichText использует **английскую** локаль. Вы также можете задать пользовательскую локаль. + +:::tip[Совет] +Чтобы динамически изменить текущую локаль, используйте метод [**setLocale()**](api/methods/set-locale.md) компонента RichText +::: + +### Пример + +~~~jsx {3} +// инициализация RichText +const editor = new richtext.RichText("#root", { + locale: richtext.locales.cn // изначально будет установлена китайская локаль + // locale: richtext.locales.en // изначально будет установлена английская локаль + // locale: richtext.locales.de // изначально будет установлена немецкая локаль + // другие параметры конфигурации +}); +~~~ + +**История изменений:** Свойство добавлено в v2.0 + +**Связанные статьи:** [Локализация](guides/localization.md) + +**Связанный пример:** [RichText. Localization](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..7894f1b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/menubar.md @@ -0,0 +1,33 @@ +--- +sidebar_label: menubar +title: menubar Config +description: Вы можете узнать о конфигурационном параметре menubar в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, запускайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# menubar + +### Описание + +@short: Необязательный. Включает верхнее меню RichText + +### Использование + +~~~jsx {} +menubar?: boolean; +~~~ + +### Пример + +~~~jsx {3} +// инициализация RichText +new richtext.Richtext("#root", { + menubar: true + // другие параметры конфигурации +}); +~~~ + +**Список изменений:** Свойство добавлено в v2.0 + +**Связанные статьи:** [Конфигурация](guides/configuration.md) + +**Связанный пример:** [RichText. Инициализация с меню](https://snippet.dhtmlx.com/tjryzka7?tag=richtext) diff --git a/i18n/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..785729f --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/toolbar.md @@ -0,0 +1,219 @@ +--- +sidebar_label: toolbar +title: toolbar Config +description: В документации DHTMLX JavaScript RichText вы можете узнать о конфигурационном свойстве toolbar. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# toolbar + +### Описание + +@short: Необязательный. Включает панель инструментов и позволяет пользователям задавать и настраивать кнопки, отображаемые в ней + +### Использование + +~~~jsx {} +toolbar?: boolean | Array any }>; +~~~ + +#### Доступные кнопки панели инструментов + +В панели инструментов RichText можно использовать следующие кнопки: + +| Кнопка | Описание | +|---------------------|-----------------------------------------------------------------------------| +| `undo` | Отменяет последнее действие пользователя. | +| `redo` | Повторяет ранее отменённое действие. | +| `style` | Позволяет выбрать стиль текста (например, заголовки, абзац и т. д.). | +| `font-family` | Изменяет шрифт выделенного текста. | +| `font-size` | Изменяет размер выделенного текста. | +| `bold` | Применяет полужирное начертание к выделенному тексту. | +| `italic` | Применяет курсивное начертание к выделенному тексту. | +| `underline` | Подчёркивает выделенный текст. | +| `strike` | Применяет зачёркивание к тексту. | +| `subscript` | Форматирует текст как нижний индекс. | +| `superscript` | Форматирует текст как верхний индекс. | +| `text-color` | Изменяет цвет текста. | +| `background-color` | Изменяет цвет фона (выделения) текста. | +| `align` | Задаёт выравнивание текста (по левому краю, по центру, по правому краю, по ширине). | +| `indent` | Увеличивает отступ текстового блока. | +| `outdent` | Уменьшает отступ абзаца. | +| `line-height` | Регулирует межстрочный интервал. | +| `quote` | Форматирует текст как цитату (blockquote). | +| `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", + // другие кнопки + ], + // другие свойства конфигурации +}); +~~~ + +#### Пользовательские кнопки панели инструментов + +Пользовательские кнопки задаются в виде объектов со следующими параметрами: + +- `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: () => {/* пользовательская логика */} + } + ], + // другие свойства конфигурации +}); +~~~ + +#### Скрытие панели инструментов + +Чтобы скрыть панель инструментов, задайте для свойства `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") + } + ] + // другие свойства конфигурации +}); +``` +::: + +### Пример + +~~~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. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/config/value.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/value.md new file mode 100644 index 0000000..ce0ce50 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/config/value.md @@ -0,0 +1,36 @@ +--- +sidebar_label: value +title: value Config +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о конфигурационном свойстве value. Изучайте руководства разработчика и справочник АПИ, запускайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# value + +### Описание + +@short: Опциональное. Задаёт начальное значение (содержимое), отображаемое в области редактора RichText + +:::tip[Совет] +Если вы хотите задать значение (содержимое) в произвольном формате, используйте встроенный метод [`setValue()`](api/methods/set-value.md). +::: + +### Использование + +~~~jsx {} +value?: string; +~~~ + +### Пример + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" // задаёт значение по умолчанию (формат HTML) + // другие свойства конфигурации +}); +~~~ + +**Список изменений:** Свойство добавлено в 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..5ec3e01 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/align.md @@ -0,0 +1,48 @@ +--- +sidebar_label: align +title: align Event +description: Вы можете узнать о событии align в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# align + +### Описание + +@short: Срабатывает при изменении выравнивания текста через menubar/toolbar или методы Event Bus + +### Использование + +~~~jsx {} +"align": ({ + align: "left" | "center" | "right" | "justify" +}) => boolean | void; +~~~ + +### Параметры + +Колбэк события **align** может принимать объект со следующим параметром: + +- `align` - выравнивание текста. Допустимые значения: `"left" | "center" | "right" | "justify"` + +:::info +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-12} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "align" +editor.api.on("align", (obj) => { + console.log(`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..98fd89c --- /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 + +### Описание + +@short: Срабатывает при очистке форматирования текста через меню/панель инструментов или методы Event Bus + +### Использование + +~~~jsx {} +"clear-text-format": () => boolean | void; +~~~ + +:::info +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-10} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "clear-text-format" +editor.api.on("clear-text-format", () => { + console.log("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..cb93913 --- /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 + +### Описание + +@short: Срабатывает при копировании выделенного текста + +### Использование + +~~~jsx {} +"copy": () => boolean | void; +~~~ + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "copy" +editor.api.on("copy", () => { + console.log("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..711598c --- /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 Event +description: Вы можете узнать о событии create-new в документации библиотеки DHTMLX JavaScript RichText. Изучите руководства разработчика и справочник АПИ, ознакомьтесь с примерами кода и демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# create-new + +### Описание + +@short: Срабатывает при нажатии пункта "New" в строке меню или через методы Event Bus + +### Использование + +~~~jsx {} +"create-new": ({ reset?: boolean }) => boolean | void; +~~~ + +### Параметры + +Калбэк события **create-new** может принимать объект со следующим параметром: + +- `reset` - сбрасывает историю при создании нового файла + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-10} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "create-new" +editor.api.on("create-new", ({ reset }) => { + console.log(`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..3b40268 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/cut.md @@ -0,0 +1,36 @@ +--- +sidebar_label: cut +title: cut Event +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о событии cut. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# cut + +### Описание + +@short: Срабатывает при вырезании выделенного текста + +### Использование + +~~~jsx {} +"cut": () => boolean | void; +~~~ + +:::info +Для обработки внутренних событий используйте [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "cut" +editor.api.on("cut", () => { + console.log("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..60f5a47 --- /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 + +### Описание + +@short: Срабатывает при удалении ссылки + +### Использование + +~~~jsx {} +"delete-link": () => boolean | void; +~~~ + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "delete-link" +editor.api.on("delete-link", () => { + console.log("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..adbd5f5 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/export.md @@ -0,0 +1,59 @@ +--- +sidebar_label: export +title: export Event +description: Вы можете узнать о событии export в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, попробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# export + +### Описание + +@short: Срабатывает после нажатия на пункт «Экспорт» в панели меню или через методы Event Bus + +### Использование + +~~~jsx {} +"export": ({ options: IExportOptions; result?: any }) => boolean | void; + +interface IExportOptions { + format?: "docx" | "pdf"; + url?: string; + download?: boolean; + fileName?: string; +} +~~~ + +### Параметры + +Колбэк события **export** может принимать объект со следующими параметрами: + +- `format` - формат файла +- `url` - базовый URL для экспорта файла +- `download` - позволяет указать, нужно ли скачать файл после получения ответа от сервера. Если свойство установлено в `false`, файл не будет загружен, но пользователь сможет получить данные в виде blob из объекта события (см. свойство `result` в определении события) +- `fileName` - имя экспортируемого файла + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-15} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "export" +editor.api.on("export", (obj) => { + console.log(obj); + console.log("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/import.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/import.md new file mode 100644 index 0000000..46cbbbc --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/import.md @@ -0,0 +1,47 @@ +--- +sidebar_label: import +title: import Event +description: Вы можете узнать о событии import в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, запускайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# import + +### Описание + +@short: Срабатывает после нажатия опции «Import» в строке меню или через методы Event Bus + +### Использование + +~~~jsx {} +"import": ({ html?: string }) => boolean | void; +~~~ + +### Параметры + +Калбэк события **import** может принимать объект со следующим параметром: + +- `html` - текстовое значение в формате html + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-13} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "import" +editor.api.on("import", (obj) => { + console.log(obj.html); + console.log("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..1c9615f --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/indent.md @@ -0,0 +1,43 @@ +--- +sidebar_label: indent +title: indent Event +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о событии indent. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# indent + +### Описание + +@short: Срабатывает при увеличении отступа блока + +### Использование + +~~~jsx {} +"indent": ({ step: number }) => boolean | void; +~~~ + +### Параметры + +Калбэк события **indent** может принимать объект со следующими параметрами: + +- `step` - шаг, на который был увеличен отступ + +:::info +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "indent" +editor.api.on("indent", (obj) => { + console.log(obj); + console.log("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..9cbca2a --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/insert-image.md @@ -0,0 +1,50 @@ +--- +sidebar_label: insert-image +title: insert-image Event +description: Вы можете узнать о событии insert-image в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# insert-image + +### Описание + +@short: Срабатывает при вставке изображения + +### Использование + +~~~jsx {} +"insert-image": (IImageContext) => boolean | void; + +interface IImageContext { + id: TID; + value: string; + width: number; + height: number; + // дополнительные свойства из контекста загрузчика, не обязательны для выполнения действия + name?: string; + file?: File; + status?: string; + selected: (ctx: IImageContext) => void; + uploaded: (ctx: IImageContext) => void; +} +~~~ + +:::info[Примечание] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // параметры конфигурации +}); +// подписка на событие "insert-image" +editor.api.on("insert-image", (obj) => { + console.log(obj); + console.log("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..449375e --- /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 Event +description: В документации DHTMLX JavaScript RichText вы можете узнать о событии insert-line. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# insert-line + +### Описание + +@short: Срабатывает при вставке горизонтальной линии + +### Использование + +~~~jsx {} +"insert-line": () => boolean | void; +~~~ + +:::info[Информация] +Для обработки внутренних событий используйте [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "insert-line" +editor.api.on("insert-line", () => { + console.log("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..89d8db2 --- /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 Event +description: Вы можете узнать о событии insert-link в документации библиотеки DHTMLX JavaScript RichText. Изучите руководства разработчика и справочник АПИ, попробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# insert-link + +### Описание + +@short: Срабатывает при вставке ссылки + +### Использование + +~~~jsx {} +"insert-link": ({ url: string }) => boolean | void; +~~~ + +### Параметры + +Калбэк события **update-link** может принимать объект со следующим параметром: + +- `url` - url-адрес для вставки + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "insert-link" +editor.api.on("insert-link", (obj) => { + console.log(obj) + console.log("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..eeb74f1 --- /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 Event +description: В документации DHTMLX JavaScript RichText вы можете узнать о событии insert-list. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# insert-list + +### Описание + +@short: Срабатывает при вставке списка + +### Использование + +~~~jsx {} +"insert-list": ({ type: TListType }) => boolean | void; + +type TListType = "bulleted" | "numbered"; +~~~ + +### Параметры + +Колбэк события **insert-list** может принимать объект со следующим параметром: + +- `type` - тип вставляемого списка. Допустимые значения: + - `"bulleted"` - маркированный список + - `"numbered"` - нумерованный список + +:::info[Информация] +Для обработки внутренних событий используйте [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // параметры конфигурации +}); +// подписка на событие "insert-list" +editor.api.on("insert-list", (obj) => { + console.log(obj.type); + console.log("The list was inserted"); +}); +~~~ + +**Журнал изменений:** Событие добавлено в v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/outdent.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/outdent.md new file mode 100644 index 0000000..62ed1d7 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/outdent.md @@ -0,0 +1,43 @@ +--- +sidebar_label: outdent +title: outdent Event +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о событии outdent. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# outdent + +### Описание + +@short: Срабатывает при уменьшении отступа блока + +### Использование + +~~~jsx {} +"outdent": ({ step: number }) => boolean | void; +~~~ + +### Параметры + +Колбэк события **outdent** может принимать объект со следующими параметрами: + +- `step` - шаг, на который был уменьшен отступ + +:::info +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "outdent" +editor.api.on("outdent", (obj) => { + console.log(obj); + console.log("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..e2e51d2 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/paste.md @@ -0,0 +1,36 @@ +--- +sidebar_label: paste +title: paste Event +description: Вы можете узнать о событии paste в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# paste + +### Описание + +@short: Срабатывает при вставке содержимого + +### Использование + +~~~jsx {} +"paste": () => boolean | void; +~~~ + +:::info +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "paste" +editor.api.on("paste", () => { + console.log("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..f65ca64 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/print.md @@ -0,0 +1,36 @@ +--- +sidebar_label: print +title: print Event +description: Вы можете узнать о событии print в документации библиотеки DHTMLX JavaScript RichText. Изучите руководства разработчика и справочник АПИ, попробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# print + +### Описание + +@short: Срабатывает при печати документа + +### Использование + +~~~jsx {} +"print": () => boolean | void; +~~~ + +:::info +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~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..4c9889d --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/redo.md @@ -0,0 +1,36 @@ +--- +sidebar_label: redo +title: redo Event +description: Вы можете узнать о событии redo в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# redo + +### Описание + +@short: Срабатывает при нажатии кнопки "Redo" в меню/панели инструментов или через методы Event Bus + +### Использование + +~~~jsx {} +"redo": () => boolean | void; +~~~ + +:::info +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "redo" +editor.api.on("redo", () => { + console.log("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..299c1f5 --- /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 + +### Описание + +@short: Срабатывает при изменении размера изображения + +### Использование + +~~~jsx {} +"resize-image": ({ id: number, width: number, height: number }) => boolean | void; +~~~ + +### Параметры + +Колбэк события **resize-image** может принимать объект со следующими параметрами: + +- `id` - идентификатор изображения +- `width` - ширина изображения +- `height` - высота изображения + +:::info +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { +// свойства конфигурации +}); +// подписка на событие "resize-image" +editor.api.on("resize-image", (obj) => { + console.log(obj); + console.log("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..3b19751 --- /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 Event +description: Вы можете узнать о событии set-font-family в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# set-font-family + +### Описание + +@short: Срабатывает при установке гарнитуры шрифта + +### Использование + +~~~jsx {} +"set-font-family": ({ fontFamily: string }) => boolean | void; +~~~ + +### Параметры + +Колбэк события **set-font-family** может принимать объект со следующим параметром: + +- `fontFamily` - гарнитура шрифта, которая будет применена. Доступны следующие шрифты: `"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"` + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-13} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // параметры конфигурации +}); +// подписка на событие "set-font-family" +editor.api.on("set-font-family", (obj) => { + console.log(obj.fontFamily); + console.log("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..bf7b350 --- /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 Event +description: Вы можете узнать о событии set-font-size в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# set-font-size + +### Описание + +@short: Срабатывает при установке размера шрифта + +### Использование + +~~~jsx {} +"set-font-size": ({ fontSize: string }) => boolean | void; +~~~ + +### Параметры + +Калбэк события **set-font-size** может принимать объект со следующим параметром: + +- `fontSize` - размер шрифта, который будет применён + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-13} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "set-font-size" +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); + console.log("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..664f6dc --- /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 + +### Описание + +@short: Срабатывает при установке межстрочного интервала + +### Использование + +~~~jsx {} +"set-line-height": ({ lineHeight: string }) => boolean | void; +~~~ + +### Параметры + +Колбэк события **set-line-height** может принимать объект со следующим параметром: + +- `lineHeight` - межстрочный интервал + +:::info +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-13} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "set-line-height" +editor.api.on("set-line-height", (obj) => { + console.log(obj); + console.log("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..8ebf128 --- /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 + +### Описание + +@short: Срабатывает при установке цвета текста и/или цвета фона текста + +### Использование + +~~~jsx {} +"set-text-color": (ITextColor) => boolean | void; + +interface ITextColor { + color?: string; + background?: string; +} +~~~ + +### Параметры + +Калбэк события **set-text-color** может принимать объект со следующими параметрами: + +- `color` - цвет текста +- `background` - цвет фона текста + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-14} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "set-text-color" +editor.api.on("set-text-color", (obj) => { + console.log(obj); + console.log("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..d10f58f --- /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 Event +description: В документации библиотеки DHTMLX JavaScript RichText можно узнать о событии set-text-format. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# set-text-format + +### Описание + +@short: Срабатывает при установке формата текста + +### Использование + +~~~jsx {} +"set-text-format": (ITextFormat) => boolean | void; + +interface ITextFormat { + bold?: boolean; + italic?: boolean; + strike?: boolean; + underline?: boolean; +} +~~~ + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Параметры + +Калбэк события **set-text-format** может принимать объект со следующими параметрами: + +- `bold` - формат жирного текста +- `italic` - формат курсивного текста +- `strike` - формат зачёркнутого текста +- `underline` - формат подчёркнутого текста + +### Пример + +~~~jsx {5-14} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "set-text-format" +editor.api.on("set-text-format", (obj) => { + console.log(obj); + console.log("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..eb401ee --- /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 Event +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о событии set-text-style. Изучайте руководства разработчика и справочник АПИ, запускайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# set-text-style + +### Описание + +@short: Срабатывает при установке стиля текста + +### Использование + +~~~jsx {} +"set-text-style": ({ tag: TBlockType }) => boolean | void; + +type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; +~~~ + +### Параметры + +Калбэк события **set-text-style** может принимать объект со следующими параметрами: + +- `tag` - стиль текста + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-13} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "set-text-style" +editor.api.on("set-text-style", (obj) => { + console.log(obj.tag); + console.log("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..e3be545 --- /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 Event +description: Вы можете узнать о событии show-popup в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# show-popup + +### Описание + +@short: Срабатывает при отображении или скрытии всплывающего окна + +### Использование + +~~~jsx {} +"show-popup": (IPopupConfig) => boolean | void; + +interface IPopupConfig { + type: "link" | null; + image?: boolean; +} +~~~ + +### Параметры + +Колбэк события **show-popup** может принимать объект со следующими параметрами: + +- `type` - тип всплывающего окна +- `image` - предоставляет доступ к дополнительному контексту (указывает ли текущий курсор на изображение или нет) + +:::info +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-13} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "show-popup" +editor.api.on("show-popup", (obj) => { + console.log(obj); + console.log("The popup was shown/hidden"); +}); +// show-popup the text to the left +editor.api.exec("show-popup", { + type: "link" +}); +~~~ + +**История изменений:** Событие добавлено в v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/events/subscript.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/subscript.md new file mode 100644 index 0000000..d83e9c8 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/subscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: subscript +title: subscript Event +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о событии subscript. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# subscript + +### Описание + +@short: Срабатывает при нажатии кнопки "Subscript" в меню/панели инструментов или через методы Event Bus + +### Использование + +~~~jsx {} +"subscript": () => boolean | void; +~~~ + +:::info +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-10} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "subscript" +editor.api.on("subscript", () => { + console.log("Subscript 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..b684a90 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/superscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: superscript +title: superscript Event +description: Вы можете узнать о событии superscript в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# superscript + +### Описание + +@short: Срабатывает при нажатии кнопки «Надстрочный» на панели меню/инструментов или через методы Event Bus + +### Использование + +~~~jsx {} +"superscript": () => boolean | void; +~~~ + +:::info +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "superscript" +editor.api.on("superscript", () => { + console.log("Superscript 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..fdd3c2a --- /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 Event +description: Узнайте о событии toggle-fullscreen-mode в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# toggle-fullscreen-mode + +### Описание + +@short: Срабатывает при переключении полноэкранного режима + +### Использование + +~~~jsx {} +"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void; +~~~ + +### Параметры + +Колбэк события **toggle-fullscreen-mode** может принимать объект со следующим параметром: + +- `mode` - включает полноэкранный режим + +:::info +Для обработки внутренних событий используйте [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "toggle-fullscreen-mode" +editor.api.on("toggle-fullscreen-mode", (obj) => { + console.log(obj); + console.log("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..c87b5d2 --- /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 Event +description: Вы можете узнать о событии toggle-layout-mode в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# toggle-layout-mode + +### Описание + +@short: Срабатывает при переключении режима макета + +### Использование + +~~~jsx {} +"toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void; +~~~ + +### Параметры + +Колбэк события **toggle-layout-mode** может принимать объект со следующими параметрами: + +- `mode` - режим макета. Доступны следующие режимы: `"classic" | "document"` + +:::info +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-11} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "toggle-layout-mode" +editor.api.on("toggle-layout-mode", (obj) => { + console.log(obj); + console.log("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-shortcut-info.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md new file mode 100644 index 0000000..be48d1f --- /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 Event +description: Вы можете узнать о событии toggle-shortcut-info в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# toggle-shortcut-info + +### Описание + +@short: Срабатывает при переключении информации о горячих клавишах + +### Использование + +~~~jsx {} +"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void; +~~~ + +### Параметры + +Колбэк события **toggle-shortcut-info** может принимать объект со следующим параметром: + +- `mode` - включает информацию о горячих клавишах; `true` — показать всплывающее окно с горячими клавишами, `false` — скрыть всплывающее окно с горячими клавишами + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "toggle-shortcut-info" +editor.api.on("toggle-shortcut-info", (obj) => { + console.log(obj); + console.log("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..f86a812 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/events/undo.md @@ -0,0 +1,36 @@ +--- +sidebar_label: undo +title: undo Event +description: Вы можете узнать о событии undo в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# undo + +### Описание + +@short: Срабатывает при нажатии кнопки «Отменить» в панели меню/тулбаре или через методы Event Bus + +### Использование + +~~~jsx {} +"undo": () => boolean | void; +~~~ + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "undo" +editor.api.on("undo", () => { + console.log("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..3a5cb44 --- /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 + +### Описание + +@short: Срабатывает при обновлении ссылки + +### Использование + +~~~jsx {} +"update-link": ({ id: number, url: string }) => boolean | void; +~~~ + +### Параметры + +Колбэк события **update-link** может принимать объект со следующими параметрами: + +- `id` - идентификатор ссылки +- `url` - изменённый url + +:::info[Информация] +Для обработки внутренних событий можно использовать [**методы Event Bus**](api/overview/event_bus_methods_overview.md) +::: + +### Пример + +~~~jsx {5-9} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "update-link" +editor.api.on("update-link", (obj) => { + console.log(obj); + console.log("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..86025ea --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/detach.md @@ -0,0 +1,44 @@ +--- +sidebar_label: api.detach() +title: on Method +description: В документации DHTMLX JavaScript RichText вы можете узнать о методе on. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# api.detach() + +### Описание + +@short: Позволяет удалять/отсоединять обработчики событий + +### Использование + +~~~jsx {} +api.detach( tag: string ): void; +~~~ + +### Параметры + +- `tag` - (обязательный) имя тега действия + +### События + +:::info +Полный список внутренних событий RichText можно найти [**здесь**](api/overview/events_overview.md) +::: + +### Пример + +~~~jsx {6-8,10} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); + +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}, { tag: "track" }); + +editor.api.detach("track"); +~~~ + +**Журнал изменений:** Метод был обновлён в v2.0. Параметры `name` и `context` были удалены diff --git a/i18n/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..9196930 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/exec.md @@ -0,0 +1,46 @@ +--- +sidebar_label: api.exec() +title: Метод exec +description: Вы можете узнать о методе exec в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# api.exec() + +### Описание + +@short: Позволяет вызывать внутренние события + +### Использование + +~~~jsx {} +api.exec( + event: string, + config: object +): void; +~~~ + +### Параметры + +- `event` - (обязательный) событие, которое необходимо вызвать +- `config` - (обязательный) объект конфигурации с параметрами (см. вызываемое событие) + +### События + +:::info +Полный список внутренних событий RichText можно найти [**здесь**](api/overview/events_overview.md) +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// задать размер шрифта текста +editor.api.exec("set-font-size", { + fontSize: "16px" +}); +~~~ + +**Журнал изменений:** Метод добавлен в v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md new file mode 100644 index 0000000..7ae59c4 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.getReactiveState() +title: Метод getReactiveState +description: Вы можете узнать о методе getReactiveState в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, запускайте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# api.getReactiveState() + +### Описание + +@short: Возвращает объект с реактивными свойствами RichText + +### Использование + +~~~jsx {} +api.getReactiveState(): object; +~~~ + +### Возвращает + +Метод возвращает объект со следующими параметрами: + +~~~jsx {} +{ + cursorState: { subscribe: any }, + defaultStyles {...}, + document {...}, + fullscreen {...}, + history {...}, + layoutMode {...}, + popup {...}, + selection {...} +} +~~~ + +### Пример + +~~~jsx {5-7} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// получение реактивного состояния RichText +const reactive_state = editor.api.getReactiveState(); +console.log(reactive_state) +~~~ + +**Список изменений:** Метод добавлен в 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..a8c15bc --- /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: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о методе getState. Изучайте руководства разработчика и справочник АПИ, запускайте примеры и живые демо, загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# api.getState() + +### Описание + +@short: Возвращает объект со свойствами StateStore компонента RichText + +### Использование + +~~~jsx {} +api.getState(): object; +~~~ + +### Возвращает + +Метод возвращает объект со следующими параметрами: + +~~~jsx {} +{ + cursorState: {}, + defaultStyles: {}, + document: {}, + fullscreen: boolean, + history: [] + layoutMode: string, + popup: any, + selection: {} +} +~~~ + +### Пример + +~~~jsx {5-7} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// получение состояния RichText +const state = editor.api.getState(); +console.log(state); +~~~ + +**Журнал изменений:** Метод добавлен в v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/intercept.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/intercept.md new file mode 100644 index 0000000..2c624f4 --- /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() + +### Описание + +@short: Позволяет перехватывать и отменять внутренние события + +### Использование + +~~~jsx {} +api.intercept( + event: string, + callback: function +): void; +~~~ + +### Параметры + +- `event` - (обязательный) событие, которое необходимо отслеживать +- `callback` - (обязательный) калбэк-функция, выполняемая при возникновении события (аргументы калбэка зависят от конкретного события) + +### События + +:::info +Полный список внутренних событий RichText можно найти [**здесь**](api/overview/events_overview.md) +::: + +### Пример + +~~~jsx {5-10} +// создание RichText +const editor = new richtext.Richtext("#root", { + // параметры конфигурации +}); +// запретить изменение размера шрифта +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..2e468ed --- /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() + +### Описание + +@short: Позволяет привязать обработчик к внутренним событиям + +### Использование + +~~~jsx {} +api.on( + event: string, + handler: function +): void; +~~~ + +### Параметры + +- `event` - (обязательный) событие, которое должно быть обработано +- `handler` - (обязательный) привязываемый обработчик (аргументы обработчика зависят от обрабатываемого события) + +### События + +:::info +Полный список внутренних событий RichText можно найти [**здесь**](api/overview/events_overview.md) +::: + +### Пример + +~~~jsx {5-8} +// инициализация RichText +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); +// подписка на событие "set-font-size" +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}); +~~~ + +**Журнал изменений:** Метод был обновлён в v2.0. Параметр `context` был удалён diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/set-next.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/set-next.md new file mode 100644 index 0000000..47a8cf3 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/internal/set-next.md @@ -0,0 +1,40 @@ +--- +sidebar_label: api.setNext() +title: Метод setNext +description: Вы можете узнать о методе setNext в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства для разработчиков и справочник АПИ, пробуйте примеры кода и живые демо, а также загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# api.setNext() + +### Описание + +@short: Позволяет добавить действие в очередь Event Bus + +### Использование + +~~~jsx {} +api.setNext(next: any): void; +~~~ + +### Параметры + +- `next` - (обязательный) действие, которое будет включено в очередь **Event Bus** + +### Пример + +~~~jsx {10-11} +const server = "https://some-backend-url"; +// Предположим, что у вас есть пользовательский класс серверного сервиса someServerService +const someServerService = new ServerDataService(server); + +fetch(server + "/data").then((res) => res.json()).then((data) => { + const editor = new richtext.Richtext("#root", { + value: data + }); + + // Встроить someServerService в очередь Event Bus виджета + editor.api.setNext(someServerService); +}); +~~~ + +**Журнал изменений:** Метод был добавлен в v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/destructor.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/destructor.md new file mode 100644 index 0000000..d3667b4 --- /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() + +### Описание + +@short: Удаляет все HTML-элементы RichText и отсоединяет все связанные события + +### Использование + +~~~jsx {} +destructor(): void; +~~~ + +### Пример + +~~~jsx {5-6} +const editor = new richtext.Richtext("#root", { + // свойства конфигурации +}); + +// удалить RichText +editor.destructor(); +~~~ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/get-value.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/get-value.md new file mode 100644 index 0000000..ecdb23d --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/get-value.md @@ -0,0 +1,43 @@ +--- +sidebar_label: getValue() +title: Метод getValue +description: Вы можете узнать о методе getValue в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# getValue() + +### Описание + +@short: Возвращает значение RichText + +### Использование + +~~~jsx {} +getValue(encoder?: any): string; +~~~ + +### Параметры + +- `encoder` - (опционально) парсер, используемый для кодирования содержимого RichText в пользовательский формат. Доступны следующие форматы: `html` (по умолчанию) и `text` + +Получить необходимый энкодер можно следующим образом: + +```jsx +const toTextEncoder = richtext.text.toText; // текстовый энкодер +const toHTMLEncoder = richtext.html.toHTML; // HTML-энкодер +``` + +### Пример + +~~~jsx {6-8} +const editor = new richtext.Richtext("#root", { + value: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." // задаёт значение по умолчанию (формат HTML) + // другие свойства конфигурации +}); + +const toTextEncoder = richtext.text.toText; +const editor_value = editor.getValue(toTextEncoder); +console.log(editor_value); +~~~ + +**Журнал изменений:** Метод обновлён в v2.0. Параметр `mode` удалён. Добавлен параметр `encoder` diff --git a/i18n/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..3c89965 --- /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() + +### Описание + +@short: Применяет новые параметры конфигурации к RichText + +### Использование + +~~~jsx {} +setConfig(config: { [key:any]: any }): void; +~~~ + +### Параметры + +- `config` - (обязательный) объект параметров конфигурации RichText. Полный список свойств см. [здесь](api/overview/properties_overview.md) + +:::note +Метод `setConfig()` сохраняет все ранее заданные параметры, которые явно не указаны в вызове метода `setConfig()`. +::: + +### Пример + +~~~jsx {6-8} +const editor = new richtext.Richtext("#root", { + value: "

Some text

", + // другие параметры конфигурации +}); + +editor.setConfig({ + layoutMode: "document" +}); +~~~ + +**История изменений:** Метод добавлен в v2.0 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-locale.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-locale.md new file mode 100644 index 0000000..a439d0b --- /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() + +### Описание + +@short: Применяет новую локаль к RichText + +### Использование + +~~~jsx {} +setLocale(null | locale?: object): void; +~~~ + +### Параметры + +- `null` - (необязательно) сбрасывает до локали по умолчанию (*английская*) +- `locale` - (необязательно) объект с данными новой локали, которую необходимо применить + +:::info +Используйте метод `setLocale()` для применения новой локали к RichText. Чтобы сбросить RichText до локали по умолчанию, вызовите метод `setLocale()` без аргументов (или со значением *null*). +::: + +### Пример + +~~~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..5e598d2 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/methods/set-value.md @@ -0,0 +1,44 @@ +--- +sidebar_label: setValue() +title: Метод setValue +description: Вы можете узнать о методе setValue в документации библиотеки DHTMLX JavaScript RichText. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# setValue() + +### Описание + +@short: Применяет новое значение к RichText + +### Использование + +~~~jsx {} +setValue: (value: string, encoder?: any): void; +~~~ + +### Параметры + +- `value` - (обязательный) значение, которое будет вставлено в RichText +- `encoder` - (необязательный) пользовательский парсер для кодирования содержимого RichText в нужный формат. Доступны следующие форматы: `html` (по умолчанию) и `text` + +Получить нужный энкодер можно следующим образом: + +```jsx +const fromTextEncoder = richtext.text.fromText; // text encoder +const fromHTMLEncoder = richtext.html.fromHTML; // html encoder +``` + +### Пример + +~~~jsx {7-8} +const editor = new richtext.Richtext("#root", { + // configuration properties +}); + +const editor_value = "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." + +const fromTextEncoder = richtext.text.fromText; +editor.setValue(editor_value, fromTextEncoder); +~~~ + +**Лог изменений:** Метод был обновлён в v2.0. Параметр `mode` удалён. Добавлен параметр `encoder` diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md new file mode 100644 index 0000000..0f96b7d --- /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 methods +title: Методы Event Bus +description: В документации библиотеки DHTMLX JavaScript RichText представлен обзор методов внутренней шины событий. Изучайте руководства разработчика и справочник по АПИ, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Методы 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..ec5d4fa --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/events_overview.md @@ -0,0 +1,45 @@ +--- +sidebar_label: Обзор событий +title: Обзор событий +description: В документации библиотеки DHTMLX JavaScript RichText представлен обзор событий JavaScript RichText. Изучите руководства разработчика и справочник АПИ, ознакомьтесь с примерами кода и живыми демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Обзор событий + +На этой странице перечислены все события, генерируемые редактором 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/import.md) | @getshort(api/events/import.md) | +| [](api/events/indent.md) | @getshort(api/events/indent.md) | +| [](api/events/insert-image.md) | @getshort(api/events/insert-image.md) | +| [](api/events/insert-line.md) | @getshort(api/events/insert-line.md) | +| [](api/events/insert-link.md) | @getshort(api/events/insert-link.md) | +| [](api/events/insert-list.md) | @getshort(api/events/insert-list.md) | +| [](api/events/outdent.md) | @getshort(api/events/outdent.md) | +| [](api/events/paste.md) | @getshort(api/events/paste.md) | +| [](api/events/print.md) | @getshort(api/events/print.md) | +| [](api/events/redo.md) | @getshort(api/events/redo.md) | +| [](api/events/resize-image.md) | @getshort(api/events/resize-image.md) | +| [](api/events/set-font-family.md) | @getshort(api/events/set-font-family.md) | +| [](api/events/set-font-size.md) | @getshort(api/events/set-font-size.md) | +| [](api/events/set-line-height.md) | @getshort(api/events/set-line-height.md) | +| [](api/events/set-text-color.md) | @getshort(api/events/set-text-color.md) | +| [](api/events/set-text-format.md) | @getshort(api/events/set-text-format.md) | +| [](api/events/set-text-style.md) | @getshort(api/events/set-text-style.md) | +| [](api/events/show-popup.md) | @getshort(api/events/show-popup.md) | +| [](api/events/subscript.md) | @getshort(api/events/subscript.md) | +| [](api/events/superscript.md) | @getshort(api/events/superscript.md) | +| [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md)| +| [](api/events/toggle-layout-mode.md) | @getshort(api/events/toggle-layout-mode.md) | +| [](api/events/toggle-shortcut-info.md) | @getshort(api/events/toggle-shortcut-info.md) | +| [](api/events/undo.md) | @getshort(api/events/undo.md) | +| [](api/events/update-link.md) | @getshort(api/events/update-link.md) | diff --git a/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..54a7d64 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/main_overview.md @@ -0,0 +1,97 @@ +--- +sidebar_label: API overview +title: Обзор АПИ +description: В документации библиотеки DHTMLX JavaScript RichText доступен обзор АПИ. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Обзор АПИ + +## Конструктор RichText + +~~~js +new richtext.RichText("#root", { + // параметры конфигурации +}); +~~~ + +**Параметры**: + +- HTML-контейнер (например, CSS-селектор или DOM-элемент) +- объект конфигурации ([см. свойства](api/overview/properties_overview.md)) + +## Методы RichText + +| Название | Описание | +| ----------------------------------------------|-------------------------------------------| +| [](api/methods/get-value.md) | @getshort(api/methods/get-value.md) | +| [](api/methods/set-value.md) | @getshort(api/methods/set-value.md) | +| [](api/methods/set-config.md) | @getshort(api/methods/set-config.md) | +| [](api/methods/set-locale.md) | @getshort(api/methods/set-locale.md) | +| [](api/methods/destructor.md) | @getshort(api/methods/destructor.md) | + +## Методы Event Bus + +| Название | Описание | +| ----------------------------------------------|-------------------------------------------| +| [](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) | + +## Методы состояния + +| Название | Описание | +| ----------------------------------------------|-------------------------------------------| +| [](api/internal/get-state.md) | @getshort(api/internal/get-state.md) | +| [](api/internal/get-reactive-state.md) | @getshort(api/internal/get-reactive-state.md) | + +## События + +| Название | Описание | +| ----------------------------------------------|-------------------------------------------| +| [](api/events/align.md) | @getshort(api/events/align.md) | +| [](api/events/clear-text-format.md) | @getshort(api/events/clear-text-format.md) | +| [](api/events/copy.md) | @getshort(api/events/copy.md) | +| [](api/events/create-new.md) | @getshort(api/events/create-new.md) | +| [](api/events/cut.md) | @getshort(api/events/cut.md) | +| [](api/events/delete-link.md) | @getshort(api/events/delete-link.md) | +| [](api/events/export.md) | @getshort(api/events/export.md) | +| [](api/events/import.md) | @getshort(api/events/import.md) | +| [](api/events/indent.md) | @getshort(api/events/indent.md) | +| [](api/events/insert-image.md) | @getshort(api/events/insert-image.md) | +| [](api/events/insert-line.md) | @getshort(api/events/insert-line.md) | +| [](api/events/insert-link.md) | @getshort(api/events/insert-link.md) | +| [](api/events/insert-list.md) | @getshort(api/events/insert-list.md) | +| [](api/events/outdent.md) | @getshort(api/events/outdent.md) | +| [](api/events/paste.md) | @getshort(api/events/paste.md) | +| [](api/events/print.md) | @getshort(api/events/print.md) | +| [](api/events/redo.md) | @getshort(api/events/redo.md) | +| [](api/events/resize-image.md) | @getshort(api/events/resize-image.md) | +| [](api/events/set-font-family.md) | @getshort(api/events/set-font-family.md) | +| [](api/events/set-font-size.md) | @getshort(api/events/set-font-size.md) | +| [](api/events/set-line-height.md) | @getshort(api/events/set-line-height.md) | +| [](api/events/set-text-color.md) | @getshort(api/events/set-text-color.md) | +| [](api/events/set-text-format.md) | @getshort(api/events/set-text-format.md) | +| [](api/events/set-text-style.md) | @getshort(api/events/set-text-style.md) | +| [](api/events/show-popup.md) | @getshort(api/events/show-popup.md) | +| [](api/events/subscript.md) | @getshort(api/events/subscript.md) | +| [](api/events/superscript.md) | @getshort(api/events/superscript.md) | +| [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md) | +| [](api/events/toggle-layout-mode.md) | @getshort(api/events/toggle-layout-mode.md) | +| [](api/events/toggle-shortcut-info.md) | @getshort(api/events/toggle-shortcut-info.md) | +| [](api/events/undo.md) | @getshort(api/events/undo.md) | +| [](api/events/update-link.md) | @getshort(api/events/update-link.md) | + +## Свойства + +| Название | Описание | +| ----------------------------------------------|-------------------------------------------| +| [](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..5f7b1b1 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md @@ -0,0 +1,18 @@ +--- +sidebar_label: Обзор методов +title: Обзор методов +description: В документации библиотеки DHTMLX JavaScript RichText представлен обзор методов. Изучайте руководства разработчика и справочник АПИ, запускайте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Обзор методов + +На этой странице представлен краткий обзор основных методов, доступных в редакторе 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/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..67f4ed3 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md @@ -0,0 +1,21 @@ +--- +sidebar_label: Обзор свойств +title: Обзор свойств +description: В документации библиотеки DHTMLX JavaScript RichText вы найдёте обзор свойств конфигурации редактора. Просматривайте руководства разработчика и справочник АПИ, изучайте примеры кода и живые демо, а также скачивайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Обзор свойств + +На этой странице перечислены все свойства конфигурации, которые можно использовать при инициализации редактора 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/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..d6099a4 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md @@ -0,0 +1,15 @@ +--- +sidebar_label: State methods +title: State Methods +description: Обзор методов внутреннего состояния JavaScript RichText в документации библиотеки DHTMLX JavaScript RichText. Руководства разработчика и справочник АПИ, примеры кода и живые демо, а также бесплатная 30-дневная ознакомительная версия DHTMLX RichText. +--- + +# Методы состояния + +На этой странице перечислены методы для доступа к внутреннему состоянию редактора 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/assets/richtext/classic_mode.png b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png new file mode 100644 index 0000000..baeb296 Binary files /dev/null and b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png differ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png new file mode 100644 index 0000000..bf4312c Binary files /dev/null and b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png differ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/editor.png b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/editor.png new file mode 100644 index 0000000..f9213b2 Binary files /dev/null and b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/editor.png differ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png new file mode 100644 index 0000000..f9213b2 Binary files /dev/null and b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png differ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png new file mode 100644 index 0000000..e6d70b9 Binary files /dev/null and b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png differ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png new file mode 100644 index 0000000..8b207e6 Binary files /dev/null and b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png differ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png new file mode 100644 index 0000000..c62be84 Binary files /dev/null and b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png differ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png new file mode 100644 index 0000000..07410f7 Binary files /dev/null and b/i18n/ru/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png differ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/assets/trial_richtext.png b/i18n/ru/docusaurus-plugin-content-docs/current/assets/trial_richtext.png new file mode 100644 index 0000000..cdee98c Binary files /dev/null and b/i18n/ru/docusaurus-plugin-content-docs/current/assets/trial_richtext.png differ 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..8be0fff --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/configuration.md @@ -0,0 +1,347 @@ +--- +sidebar_label: Конфигурация +title: Конфигурация +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать о параметрах конфигурации. Изучайте руководства разработчика и справочник АПИ, пробуйте примеры кода и живые демо, загружайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Конфигурация + +Внешний вид и поведение 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) — задать эндпоинт для загрузки изображений + +## Режимы макета {#layout-modes} + +RichText поддерживает два режима макета для области редактирования: + +- **"classic"** — область редактирования занимает всю страницу + +
+![Classic mode](./../assets/richtext/classic_mode.png) +
+ +- **"document"** — область редактирования имитирует страницу документа + +
+![Document mode](./../assets/richtext/document_mode.png) +
+ +Задайте свойство [`layoutMode`](api/config/layout-mode.md) при инициализации, чтобы выбрать режим: + +~~~jsx +const editor = new richtext.Richtext("#root", { + layoutMode: "document" +}); +~~~ + +## Панель инструментов + +Панель инструментов 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. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### Добавление пользовательских элементов управления {#add-custom-toolbar-controls} + +Передайте объект в массив [`toolbar`](api/config/toolbar.md) с одним из следующих полей: + +- `type: string` — обязательное. Тип элемента управления: `"button"`, `"richselect"` или `"colorpicker"` +- `id: string` — необязательное. Пользовательский идентификатор элемента управления; не должен совпадать с существующими идентификаторами +- `icon: string` — необязательное. Класс иконки; используется вместе с меткой +- `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. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### Скрытие панели инструментов + +Установите свойство [`toolbar`](api/config/toolbar.md) в значение `false`, чтобы скрыть панель инструментов: + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false, + // другие свойства конфигурации +}); +~~~ + +## Отображение строки меню + +Включите свойство [`menubar`](api/config/menubar.md), чтобы отобразить верхнюю строку меню над панелью инструментов. Значение по умолчанию — `false`. + +~~~jsx {2} +new richtext.Richtext("#root", { + menubar: true + // другие свойства конфигурации +}); +~~~ + +## Задание исходного содержимого + +Используйте свойство [`value`](api/config/value.md), чтобы передать исходное HTML-содержимое в редактор при инициализации: + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" + // другие свойства конфигурации +}); +~~~ + +Чтобы заменить содержимое после инициализации или загрузить его в формате, отличном от HTML, с пользовательским кодировщиком, вызовите метод [`setValue()`](api/methods/set-value.md). + +## Задание исходной локали + +Используйте свойство [`locale`](api/config/locale.md), чтобы применить объект локализации при инициализации: + +~~~jsx {2} +new richtext.Richtext("#root", { + locale: richtext.locales.cn + // другие свойства конфигурации +}); +~~~ + +Подробнее о динамическом переключении локали с помощью [`setLocale()`](api/methods/set-locale.md) см. в руководстве [Локализация](guides/localization.md). + +## Запуск в полноэкранном режиме + +Установите свойство [`fullscreenMode`](api/config/fullscreen-mode.md) в значение `true`, чтобы открыть редактор в полноэкранном режиме при инициализации. Значение по умолчанию — `false`. + +~~~jsx {2} +new richtext.Richtext("#root", { + fullscreenMode: true + // другие свойства конфигурации +}); +~~~ + +## Настройка URL для загрузки изображений + +Передайте URL в свойство [`imageUploadUrl`](api/config/image-upload-url.md), чтобы задать серверный эндпоинт для загрузки изображений через панель инструментов: + +~~~jsx {2} +new richtext.Richtext("#root", { + imageUploadUrl: "https://example.com/upload" + // другие свойства конфигурации +}); +~~~ + +## Настройка стилей по умолчанию {#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. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext) diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/initialization.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/initialization.md new file mode 100644 index 0000000..293d400 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/initialization.md @@ -0,0 +1,78 @@ +--- +sidebar_label: Инициализация +title: Инициализация +description: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать об инициализации редактора. Изучайте руководства разработчика и справочник АПИ, просматривайте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Инициализация + +В этом руководстве описано, как добавить 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 +}); +~~~ + +### Свойства конфигурации {#configuration-properties} + +Добавляйте параметры конфигурации в качестве ключей объекта конфигурации. + +:::note +Полный список свойств конфигурации смотрите в разделе [Обзор свойств](api/overview/properties_overview.md). +::: + +## Уничтожение экземпляра RichText + +Вызовите метод [`destructor()`](api/methods/destructor.md), чтобы удалить HTML-разметку RichText и отвязать все связанные события: + +~~~jsx +const editor = new richtext.Richtext("#root", { + // configuration properties +}); + +editor.destructor(); +~~~ + +## Пример + +В примере ниже 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..f08d6f6 --- /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 + +:::tip[Совет] +Убедитесь, что вы знакомы с основными концепциями и паттернами Angular. Для повторения см. [документацию Angular](https://v17.angular.io/docs). +::: + +DHTMLX RichText работает с Angular. Полный пример кода см. в [демо на GitHub](https://github.com/DHTMLX/angular-richtext-demo). + +## Создание проекта + +:::info[Информация] +Установите [Angular CLI](https://v17.angular.io/cli) и [Node.js](https://nodejs.org/en/) перед созданием нового проекта. +::: + +Создайте новый проект *my-angular-richtext-app* с помощью Angular CLI: + +~~~bash +ng new my-angular-richtext-app +~~~ + +:::note[Примечание] +Отключите Server-Side Rendering (SSR) и Static Site Generation (SSG/Prerendering), когда Angular CLI предложит выбор в процессе создания проекта. +::: + +Команда устанавливает все необходимые инструменты. Дополнительных команд не требуется. + +### Установка зависимостей + +Перейдите в директорию нового приложения: + +~~~bash +cd my-angular-richtext-app +~~~ + +Установите зависимости и запустите сервер разработки с помощью пакетного менеджера [yarn](https://yarnpkg.com/): + +~~~bash +yarn +yarn start +~~~ + +Приложение запустится на localhost (например, `http://localhost:3000`). + +## Создание RichText + +Остановите приложение и установите пакет RichText. + +### Шаг 1. Установка пакета + +Загрузите [пробный пакет RichText](/how_to_start/#installing-richtext-via-npm-or-yarn) и следуйте инструкциям в файле README. Пробная лицензия действительна в течение 30 дней. + +### Шаг 2. Создание компонента + +Создайте Angular-компонент для добавления RichText в приложение. В директории *src/app/* создайте папку *richtext* и добавьте новый файл *richtext.component.ts*. + +#### Импорт исходных файлов + +Откройте *richtext.component.ts* и импортируйте исходные файлы RichText. + +Для PRO-версии, установленной из локальной папки, используйте: + +~~~jsx +import { Richtext } from 'dhx-richtext-package'; +~~~ + +Для пробной версии используйте: + +~~~jsx +import { Richtext } from '@dhx/trial-richtext'; +~~~ + +В этом руководстве используется пробная версия RichText. + +#### Установка контейнера и инициализация RichText + +Задайте контейнерный элемент для 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", // use the "richtext" selector in app.component.ts as + styleUrls: ["./richtext.component.css"], // include the css file + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + // container for RichText + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: Richtext; + + ngOnInit() { + // initialize the RichText component + this._editor = new Richtext(this.richtext_container.nativeElement, {}); + } + + ngOnDestroy(): void { + this._editor.destructor(); // destroy RichText + } +} +~~~ + +#### Добавление стилей + +Создайте файл *richtext.component.css* в директории *src/app/richtext/* со стилями для RichText и его контейнера: + +~~~css title="richtext.component.css" +/* import RichText styles */ +@import "@dhx/trial-richtext/dist/richtext.css"; + +/* base page styles */ +html, +body{ + height: 100%; + padding: 0; + margin: 0; +} + +/* RichText container */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* RichText widget */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### Загрузка данных + +Подготовьте данные для RichText. Создайте файл *data.ts* в директории *src/app/richtext/*: + +~~~jsx {} title="data.ts" +export function getData() { + const value = ` +

RichText 2.0

+

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

+

`; + return { value }; +} +~~~ + +Откройте *richtext.component.ts*. Импортируйте данные и передайте свойство `value` в конфигурацию RichText внутри `ngOnInit()`: + +~~~jsx {} title="richtext.component.ts" +import { Richtext } from '@dhx/trial-richtext'; +import { getData } from "./data"; // import data +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", + styleUrls: ["./richtext.component.css"], + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: Richtext; + + ngOnInit() { + const { value } = getData(); // extract the value from the data module + this._editor = new Richtext(this.richtext_container.nativeElement, { + value + // other configuration properties + }); + } + + 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 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(); // extract the value from the data module + this._editor = new Richtext(this.richtext_container.nativeElement, { + // other configuration properties + }); + + // apply the data via the setValue() method + this._editor.setValue(value); + } + + ngOnDestroy(): void { + this._editor.destructor(); + } +} +~~~ + +Компонент RichText готов к использованию. Angular отрисовывает редактор с данными при монтировании элемента ``. Полный список параметров конфигурации см. в [обзоре АПИ RichText](api/overview/main_overview.md). + +#### Обработка событий + +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 в приложение + +Откройте *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 с данными на странице. + +
+![RichText initialization](../assets/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..ec4247d --- /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 + +:::tip[Совет] +Убедитесь, что вы знакомы с основными концепциями и паттернами [React](https://react.dev). Для повторения материала обратитесь к [документации React](https://react.dev/learn). +::: + +DHTMLX RichText работает с React. Полный пример кода смотрите в [демо на GitHub](https://github.com/DHTMLX/react-richtext-demo). + +## Создание проекта + +:::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 +~~~ + +### Установка зависимостей + +Перейдите в директорию нового приложения: + +~~~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 + +Остановите приложение и установите пакет RichText. + +### Шаг 1. Установка пакета + +Загрузите [ознакомительный пакет RichText](/how_to_start/#installing-richtext-via-npm-or-yarn) и следуйте инструкциям в файле README. Ознакомительная лицензия действительна 30 дней. + +### Шаг 2. Создание компонента + +Создайте React-компонент для добавления RichText в приложение. В директории *src/* создайте новый файл *Richtext.jsx*. + +#### Импорт исходных файлов + +Откройте *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 + +Задайте элемент-контейнер для 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'; // include RichText styles + +export default function RichTextComponent(props) { + let richtext_container = useRef(); // container for RichText + + useEffect(() => { + // initialize the RichText component + const editor = new Richtext(richtext_container.current, {}); + + return () => { + editor.destructor(); // destroy RichText + }; + }, []); + + return
+
+
+} +~~~ + +#### Добавление стилей + +Добавьте стили для RichText и его контейнера в главный CSS-файл проекта: + +~~~css title="index.css" +/* base page styles */ +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); +} +~~~ + +#### Загрузка данных + +Подготовьте данные для 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, // apply value + // other configuration properties + }); + + 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, { + // configuration properties + }); + + editor.setValue(value); + + return () => { + editor.destructor(); + }; + }, []); + + return
+
+
+} +~~~ + +Компонент RichText готов к использованию. React отрисовывает редактор с данными при монтировании элемента ``. Полный список параметров конфигурации смотрите в [обзоре АПИ RichText](api/overview/main_overview.md). + +#### Обработка событий + +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 с данными на странице. + +
+![RichText initialization](../assets/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..53cf2e1 --- /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: В документации библиотеки DHTMLX JavaScript RichText вы можете узнать об интеграции со Svelte. Изучите руководства разработчика и справочник АПИ, ознакомьтесь с примерами кода и живыми демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Интеграция со Svelte + +:::tip[Совет] +Убедитесь, что вы знакомы с основными концепциями и паттернами [Svelte](https://svelte.dev/). Для повторения см. [документацию Svelte](https://svelte.dev/docs). +::: + +DHTMLX RichText работает со Svelte. Полный пример кода см. в [демо на GitHub](https://github.com/DHTMLX/svelte-richtext-demo). + +## Создание проекта + +:::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 +~~~ + +### Установка зависимостей + +Когда сборщик запросит имя проекта, введите *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 + +Остановите приложение и установите пакет RichText. + +### Шаг 1. Установка пакета + +Скачайте [ознакомительный пакет RichText](/how_to_start/#installing-richtext-via-npm-or-yarn) и следуйте инструкциям в файле README. Ознакомительная лицензия действительна 30 дней. + +### Шаг 2. Создание компонента + +Создайте Svelte-компонент для добавления RichText в приложение. В директории *src/* создайте новый файл *Richtext.svelte*. + +#### Импорт исходных файлов + +Откройте *Richtext.svelte* и импортируйте исходные файлы RichText. + +Для PRO-версии, установленной из локальной папки, используйте: + +~~~html title="Richtext.svelte" + +~~~ + +Для ознакомительной версии используйте: + +~~~html title="Richtext.svelte" + +~~~ + +В этом руководстве используется ознакомительная версия RichText. + +#### Задание контейнера и инициализация RichText + +Задайте контейнерный элемент для RichText и инициализируйте компонент внутри `onMount()`. Вызовите метод [`destructor()`](api/methods/destructor.md) внутри `onDestroy()` для удаления RichText: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +#### Добавление стилей + +Добавьте стили для 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); +} +~~~ + +#### Загрузка данных + +Подготовьте данные для 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). + +#### Обработка событий + +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 с данными на странице. + +
+![RichText initialization](../assets/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..bceb028 --- /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 + +:::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). + +## Создание проекта + +:::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). + +### Установка зависимостей + +Перейдите в директорию приложения: + +~~~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 + +Остановите приложение и установите пакет RichText. + +### Шаг 1. Установка пакета + +Загрузите [ознакомительный пакет RichText](/how_to_start/#installing-richtext-via-npm-or-yarn) и следуйте инструкциям из файла README. Ознакомительная лицензия действительна в течение 30 дней. + +### Шаг 2. Создание компонента + +Создайте компонент Vue для добавления RichText в приложение. В директории *src/components/* создайте новый файл *Richtext.vue*. + +#### Импорт исходных файлов + +Откройте *Richtext.vue* и импортируйте исходные файлы RichText. + +Для PRO-версии, установленной из локальной папки, используйте: + +~~~html title="Richtext.vue" + +~~~ + +Для ознакомительной версии используйте: + +~~~html title="Richtext.vue" + +~~~ + +В этом руководстве используется ознакомительная версия RichText. + +#### Установка контейнера и инициализация RichText + +Задайте контейнерный элемент для RichText и инициализируйте компонент с помощью конструктора `Richtext` внутри `mounted()`. Вызовите метод [`destructor()`](api/methods/destructor.md) внутри `unmounted()`, чтобы удалить RichText: + +~~~html {} title="Richtext.vue" + + + +~~~ + +#### Добавление стилей + +Добавьте стили для RichText и его контейнера в основной CSS-файл проекта: + +~~~css title="main.css" +/* базовые стили страницы */ +html, +body, +#app { /* используем корневой контейнер #app */ + height: 100%; + padding: 0; + margin: 0; +} + +/* контейнер RichText */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* виджет RichText */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### Загрузка данных + +Предоставьте данные для RichText. Создайте файл *data.js* в директории *src/*: + +~~~jsx {} title="data.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). + +#### Обработка событий + +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 с данными на странице. + +
+![Инициализация RichText](../assets/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..477745b --- /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. +--- + +# Локализация + +RichText поддерживает локализацию всех подписей интерфейса. Создайте новую локаль или измените встроенную, а затем примените её через конфигурацию редактора. + +## Локаль по умолчанию + +По умолчанию RichText использует английскую локаль: + +~~~jsx +const en = { + richtext: { + // buttons/actions + Undo: "Undo", + Redo: "Redo", + Style: "Style", + "Font family": "Font family", + "Font size": "Font size", + Bold: "Bold", + Italic: "Italic", + Underline: "Underline", + Strikethrough: "Strikethrough", + Subscript: "Subscript", + Superscript: "Superscript", + "Text color": "Text color", + "Background color": "Background color", + "Left align": "Left align", + "Center align": "Center align", + "Right align": "Right align", + Justify: "Justify", + "Line height": "Line height", + Outdent: "Outdent", + Indent: "Indent", + "Insert link": "Insert link", + "Insert image": "Insert image", + "Insert horizontal line": "Insert horizontal line", + "Clear formatting": "Clear formatting", + Print: "Print", + "Fullscreen mode": "Fullscreen mode", + "Layout mode": "Layout mode", + "Classic mode": "Classic mode", + "Document mode": "Document mode", + + // menubar exclusive options + File: "File", + Import: "Import", + Export: "Export", + Edit: "Edit", + Cut: "Cut", + Copy: "Copy", + Paste: "Paste", + View: "View", + Insert: "Insert", + Format: "Format", + Help: "Help", + New: "New", + Link: "Link", + Image: "Image", + "Horizontal line": "Horizontal line", + Text: "Text", + "Heading 1": "Heading 1", + "Heading 2": "Heading 2", + "Heading 3": "Heading 3", + "Heading 4": "Heading 4", + "Heading 5": "Heading 5", + "Heading 6": "Heading 6", + Align: "Align", + Left: "Left", + Center: "Center", + Right: "Right", + Justified: "Justified", + "Keyboard shortcuts": "Keyboard shortcuts", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "Operation failed. Please check your browser's clipboard permissions.", + + // block style dropdown + Heading: "Heading", + Quote: "Quote", + Paragraph: "Paragraph", + "Text style": "Text style", + Lists: "Lists", + + normal: "normal", + default: "default", + + // lists + "Bulleted list": "Bulleted list", + "Numbered list": "Numbered list", + + // links + "Enter text to display": "Enter text to display", + "Paste link": "Paste link", + "Link copied to clipboard": "Link copied to clipboard", + + // shortcut groups + "Text formatting": "Text formatting", + Editing: "Editing", + "Special actions": "Special actions", + + // colors + Black: "Black", + Gray: "Gray", + White: "White", + Red: "Red", + Orange: "Orange", + Yellow: "Yellow", + Lime: "Lime", + Green: "Green", + Teal: "Teal", + Cyan: "Cyan", + Blue: "Blue", + Indigo: "Indigo", + Magenta: "Magenta", + + // shades + "Light gray": "Light gray", + "Medium gray": "Medium gray", + "Dark gray": "Dark gray", + "Light red": "Light red", + "Medium red": "Medium red", + "Dark red": "Dark red", + "Light orange": "Light orange", + "Medium orange": "Medium orange", + "Dark orange": "Dark orange", + "Light yellow": "Light yellow", + "Medium yellow": "Medium yellow", + "Dark yellow": "Dark yellow", + "Light lime": "Light lime", + "Medium lime": "Medium lime", + "Dark lime": "Dark lime", + "Light green": "Light green", + "Medium green": "Medium green", + "Dark green": "Dark green", + "Light teal": "Light teal", + "Medium teal": "Medium teal", + "Dark teal": "Dark teal", + "Light cyan": "Light cyan", + "Medium cyan": "Medium cyan", + "Dark cyan": "Dark cyan", + "Light blue": "Light blue", + "Medium blue": "Medium blue", + "Dark blue": "Dark blue", + "Light indigo": "Light indigo", + "Medium indigo": "Medium indigo", + "Dark indigo": "Dark indigo", + "Light magenta": "Light magenta", + "Medium magenta": "Medium magenta", + "Dark magenta": "Dark magenta" + } +}; +~~~ + +:::info[Информация] +RichText также поставляется со встроенными немецкой (`de`) и китайской (`cn`) локалями. Доступ к любой встроенной локали осуществляется через пространство имён `richtext.locales`: `richtext.locales.en`, `richtext.locales.de`, `richtext.locales.cn`. +::: + +
+de locale + +~~~jsx +const de = { + richtext: { + // buttons/actions + Undo: "Rückgängig", + Redo: "Wiederholen", + Style: "Stil", + "Font family": "Schriftart", + "Font size": "Schriftgröße", + Bold: "Fett", + Italic: "Kursiv", + Underline: "Unterstrichen", + Strikethrough: "Durchgestrichen", + Subscript: "Tiefgestellt", + Superscript: "Hochgestellt", + "Text color": "Textfarbe", + "Background color": "Hintergrundfarbe", + "Left align": "Linksbündig", + "Center align": "Zentriert", + "Right align": "Rechtsbündig", + Justify: "Blocksatz", + "Line height": "Zeilenhöhe", + Outdent: "Einzug verringern", + Indent: "Einzug erhöhen", + "Insert link": "Link einfügen", + "Insert image": "Bild einfügen", + "Insert horizontal line": "Horizontale Linie einfügen", + "Clear formatting": "Formatierung löschen", + Print: "Drucken", + "Fullscreen mode": "Vollbildmodus", + "Layout mode": "Layout-Modus", + "Classic mode": "Klassischer Modus", + "Document mode": "Dokumentenmodus", + + // menubar exclusive options + File: "Datei", + Import: "Importieren", + Export: "Exportieren", + Edit: "Bearbeiten", + Cut: "Ausschneiden", + Copy: "Kopieren", + Paste: "Einfügen", + View: "Ansicht", + Insert: "Einfügen", + Format: "Format", + Help: "Hilfe", + New: "Neu", + Link: "Link", + Image: "Bild", + "Horizontal line": "Horizontale Linie", + Text: "Text", + "Heading 1": "Überschrift 1", + "Heading 2": "Überschrift 2", + "Heading 3": "Überschrift 3", + "Heading 4": "Überschrift 4", + "Heading 5": "Überschrift 5", + "Heading 6": "Überschrift 6", + Align: "Ausrichten", + Left: "Links", + Center: "Zentriert", + Right: "Rechts", + Justified: "Blocksatz", + "Keyboard shortcuts": "Tastenkürzel", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "Operation fehlgeschlagen. Bitte überprüfen Sie die Berechtigungen für die Zwischenablage Ihres Browsers.", + + // block style dropdown + Heading: "Überschrift", + Quote: "Zitat", + Paragraph: "Absatz", + "Text style": "Textstil", + Lists: "Listen", + + normal: "normal", + default: "standard", + + // lists + "Bulleted list": "Liste mit Aufzählungszeichen", + "Numbered list": "Nummerierte Liste", + + // links + "Enter text to display": "Text zum Anzeigen eingeben", + "Paste link": "Link einfügen", + "Link copied to clipboard": "Link in die Zwischenablage kopiert", + + // shortcut groups + "Text formatting": "Textformatierung", + Editing: "Bearbeitung", + "Special actions": "Spezielle Aktionen", + + // colors + Black: "Schwarz", + Gray: "Grau", + White: "Weiß", + Red: "Rot", + Orange: "Orange", + Yellow: "Gelb", + Lime: "Limette", + Green: "Grün", + Teal: "Türkis", + Cyan: "Cyan", + Blue: "Blau", + Indigo: "Indigo", + Magenta: "Magenta", + + // shades + "Light gray": "Hellgrau", + "Medium gray": "Mittelgrau", + "Dark gray": "Dunkelgrau", + "Light red": "Hellrot", + "Medium red": "Mittelrot", + "Dark red": "Dunkelrot", + "Light orange": "Hellorange", + "Medium orange": "Mittelorange", + "Dark orange": "Dunkelorange", + "Light yellow": "Hellgelb", + "Medium yellow": "Mittleres Gelb", + "Dark yellow": "Dunkelgelb", + "Light lime": "Hellgrün", + "Medium lime": "Mittleres Grün", + "Dark lime": "Dunkelgrün", + "Light green": "Hellgrün", + "Medium green": "Mittleres Grün", + "Dark green": "Dunkelgrün", + "Light teal": "Hellblau", + "Medium teal": "Mittelblau", + "Dark teal": "Dunkelblau", + "Light cyan": "Hellcyan", + "Medium cyan": "Mittleres Cyan", + "Dark cyan": "Dunkelcyan", + "Light blue": "Hellblau", + "Medium blue": "Mittelblau", + "Dark blue": "Dunkelblau", + "Light indigo": "Hellindigo", + "Medium indigo": "Mittelindigo", + "Dark indigo": "Dunkelindigo", + "Light magenta": "Hellmagenta", + "Medium magenta": "Mittleres Magenta", + "Dark magenta": "Dunkelmagenta" + } +}; +~~~ +
+ +
+cn locale + +~~~jsx +const cn = { + richtext: { + // buttons/actions + Undo: "撤销", + Redo: "重做", + Style: "样式", + "Font family": "字体", + "Font size": "字体大小", + Bold: "粗体", + Italic: "斜体", + Underline: "下划线", + Strikethrough: "删除线", + Subscript: "下标", + Superscript: "上标", + "Text color": "文本颜色", + "Background color": "背景颜色", + "Left align": "左对齐", + "Center align": "居中对齐", + "Right align": "右对齐", + Justify: "两端对齐", + "Line height": "行高", + Outdent: "减少缩进", + Indent: "增加缩进", + "Insert link": "插入链接", + "Insert image": "插入图片", + "Insert horizontal line": "插入水平线", + "Clear formatting": "清除格式", + Print: "打印", + "Fullscreen mode": "全屏模式", + "Layout mode": "布局模式", + "Classic mode": "经典模式", + "Document mode": "文档模式", + + // menubar exclusive options + File: "文件", + Import: "导入", + Export: "导出", + Edit: "编辑", + Cut: "剪切", + Copy: "复制", + Paste: "粘贴", + View: "视图", + Insert: "插入", + Format: "格式", + Help: "帮助", + New: "新建", + Link: "链接", + Image: "图片", + "Horizontal line": "水平线", + Text: "文本", + "Heading 1": "标题 1", + "Heading 2": "标题 2", + "Heading 3": "标题 3", + "Heading 4": "标题 4", + "Heading 5": "标题 5", + "Heading 6": "标题 6", + Align: "对齐", + Left: "左", + Center: "居中", + Right: "右", + Justified: "两端对齐", + "Keyboard shortcuts": "键盘快捷键", + + // clipboard + "Operation failed. Please check your browser's clipboard permissions.": + "操作失败。请检查浏览器的剪贴板权限。", + + // block style dropdown + Heading: "标题", + Quote: "引用", + Paragraph: "段落", + "Text style": "文本样式", + Lists: "列表", + + normal: "普通的", + default: "默认", + + // lists + "Bulleted list": "项目符号列表", + "Numbered list": "编号列表", + + // links + "Enter text to display": "输入要显示的文本", + "Paste link": "粘贴链接", + "Link copied to clipboard": "链接已复制到剪贴板", + + // shortcut groups + "Text formatting": "文本格式化", + Editing: "编辑", + "Special actions": "特殊操作", + + // colors + Black: "黑色", + Gray: "灰色", + White: "白色", + Red: "红色", + Orange: "橙色", + Yellow: "黄色", + Lime: "酸橙色", + Green: "绿色", + Teal: "水鸭色", + Cyan: "青色", + Blue: "蓝色", + Indigo: "靛蓝色", + Magenta: "洋红色", + + // shades + "Light gray": "浅灰色", + "Medium gray": "中灰色", + "Dark gray": "深灰色", + "Light red": "浅红色", + "Medium red": "中红色", + "Dark red": "深红色", + "Light orange": "浅橙色", + "Medium orange": "中橙色", + "Dark orange": "深橙色", + "Light yellow": "浅黄色", + "Medium yellow": "中黄色", + "Dark yellow": "深黄色", + "Light lime": "浅酸橙色", + "Medium lime": "中酸橙色", + "Dark lime": "深酸橙色", + "Light green": "浅绿色", + "Medium green": "中绿色", + "Dark green": "深绿色", + "Light teal": "浅水鸭色", + "Medium teal": "中水鸭色", + "Dark teal": "深水鸭色", + "Light cyan": "浅青色", + "Medium cyan": "中青色", + "Dark cyan": "深青色", + "Light blue": "浅蓝色", + "Medium blue": "中蓝色", + "Dark blue": "深蓝色", + "Light indigo": "浅靛蓝色", + "Medium indigo": "中靛蓝色", + "Dark indigo": "深靛蓝色", + "Light magenta": "浅洋红色", + "Medium magenta": "中洋红色", + "Dark magenta": "深洋红色" + } +}; +~~~ +
+ +## Применение пользовательской локали + +Создайте объект локали (или измените встроенный) с переводами всех подписей интерфейса. Примените локаль при инициализации или переключите её во время работы, как показано ниже. + +### Применение локали при инициализации + +Передайте локаль в свойство [`locale`](api/config/locale.md) в конфигурации конструктора: + +~~~jsx +const editor = new richtext.Richtext("#root", { + locale: richtext.locales.de + // other configuration properties +}); +~~~ + +### Переключение локали во время работы + +Вызовите метод [`setLocale()`](api/methods/set-locale.md) для смены локали после инициализации: + +~~~jsx +editor.setLocale(richtext.locales.cn); +~~~ + +Чтобы восстановить английскую локаль по умолчанию, вызовите [`setLocale()`](api/methods/set-locale.md) без аргументов или с `null`: + +~~~jsx +editor.setLocale(); +~~~ + +## Пример + +Пример ниже переключает несколько локалей RichText по кругу: + + 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..7efa731 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/stylization.md @@ -0,0 +1,93 @@ +--- +title: Стилизация +sidebar_label: Стилизация +description: Вы можете узнать о стилизации в документации библиотеки DHTMLX JavaScript RichText. Изучайте руководства разработчика и справочник по АПИ, пробуйте примеры кода и живые демо, а также скачайте бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Стилизация + +Настройте внешний вид DHTMLX RichText, переопределив CSS-переменные на контейнере редактора и его дочерних элементах. + +Это руководство показывает, как применить **тёмную тему** и задать стили для менюбара, тулбара, попапа и области контента с помощью CSS-селекторов по классам. + +## Структура по умолчанию и имена классов + +RichText использует следующие основные классы для структурирования интерфейса: + +| Имя класса | Описание | +|------------------------|------------------------------------------------------| +| `.wx-richtext` | Корневой контейнер виджета RichText | +| `.wx-richtext-menubar` | Контейнер менюбара | +| `.wx-richtext-menu` | Контейнер выпадающего меню менюбара | +| `.wx-richtext-toolbar` | Контейнер тулбара | +| `.wx-editor-area` | Контейнер основной редактируемой области контента | + +Используйте эти классы в пользовательских CSS-селекторах для переопределения внешнего вида редактора. + +## Переопределение стилей по умолчанию + +Чтобы переопределить стили по умолчанию, переопределите CSS-переменные на контейнере `#root` или на конкретных дочерних элементах: + +```html +
+ + +``` + +:::note +Эти стили применяют тёмный фон, настраивают цвета кнопок и иконок, а также улучшают читаемость для тёмных тем интерфейса. +::: + +## Поддерживаемые CSS-переменные + +| Имя переменной | Описание | +| ---------------------------- | --------------------------------------------------------------------- | +| `--wx-background` | Цвет фона редактора и попапа | +| `--wx-background-alt` | Альтернативный фон для менюбара | +| `--wx-color-primary` | Акцентный цвет для ссылок, цитат и маркеров изменения размера изображений | +| `--wx-color-font` | Основной цвет шрифта (для редактора, менюбара и тулбара) | +| `--wx-color-font-alt` | Альтернативный цвет шрифта | +| `--wx-color-font-disabled` | Цвет отключённого текста (для элементов менюбара и тулбара) | +| `--wx-border` | Стиль рамки, используемый во всём редакторе | +| `--wx-color-secondary-hover` | Фон состояния наведения для кнопок менюбара и тулбара | +| `--wx-button-active` | Фон активного состояния для кнопок менюбара и тулбара | +| `--wx-icon-color` | Цвет иконок стрелок выпадающих списков тулбара | +| `--wx-popup-border` | Рамка для попап-элементов | + +## Рекомендации + +* Используйте `color-scheme: dark` для улучшения нативной стилизации полей ввода в тёмном режиме +* Избегайте изменения свойств, связанных с макетом (таких как `display`, `position`), без веской причины + +:::tip[Совет] +Для типографики на уровне тегов (семейство шрифтов, размер шрифта, цвет, фон для `h1`, `p`, `blockquote` и других блочных тегов) используйте свойство конфигурации [`defaultStyles`](api/config/default-styles.md) с соответствующими CSS-правилами. Полный пример смотрите в [руководстве по конфигурации](guides/configuration.md#configure-default-styles). +::: + +## Живое демо + +Пример ниже применяет пользовательский стиль к 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..d5a266c --- /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 + +Начиная с версии v2.0, DHTMLX RichText поставляется со встроенными определениями TypeScript, не требующими дополнительной настройки. + +:::note +Попробуйте редактор в Snippet Tool. +::: + +## Преимущества TypeScript + +TypeScript совместно с DHTMLX RichText предоставляет: + +- типобезопасность — компилятор обнаруживает некорректное использование свойств конфигурации и аргументов методов на этапе сборки +- автодополнение — IDE подсказывает допустимые имена свойств, сигнатуры методов и типы значений по мере ввода +- самодокументируемый АПИ — аннотации типов для объекта конфигурации и методов служат встроенной документацией + +## Инициализация RichText в TypeScript + +Пример ниже демонстрирует инициализацию RichText в TypeScript с автодополнением на основе встроенных определений типов: + +~~~ts +import { Richtext } from "@dhx/richtext"; + +const editor = new Richtext("#root", { + menubar: true, + layoutMode: "document" +}); +~~~ + +## Справочник по типам АПИ + +Сигнатуры TypeScript для каждого свойства конфигурации описаны в разделе [Обзор свойств](api/overview/properties_overview.md). Сигнатуры методов — в разделе [Обзор методов](api/overview/methods_overview.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..1941b99 --- /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. +--- + +# Начало работы + +Это понятное и подробное руководство проведёт вас через все шаги, необходимые для того, чтобы разместить полнофункциональный RichText на странице. + +
+![DHTMLX RichText Classic Mode](./assets/richtext/classic_mode.png) +
+ +## Шаг 1. Подключение исходных файлов + +Начните с создания 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 + +:::info +Если вы хотите использовать пробную версию RichText, скачайте [**пакет пробной версии RichText**](https://dhtmlx.com/docs/products/dhtmlxRichtext/download.shtml) и следуйте инструкциям из файла *README*. Обратите внимание, что пробная версия RichText доступна только 30 дней. +::: + +#### Установка PRO-версии RichText через npm или yarn + +:::info +Вы можете получить доступ к приватному **npm**-репозиторию DHTMLX напрямую в [Личном кабинете](https://dhtmlx.com/clients/), сгенерировав логин и пароль для **npm**. Подробное руководство по установке также доступно там. Обратите внимание, что доступ к приватному **npm** предоставляется только при наличии активной лицензии на RichText. +::: + +## Шаг 2. Создание RichText + +Теперь можно добавить RichText на страницу. Сначала создайте контейнер `
` для RichText. Для этого: + +- укажите DIV-контейнер в файле *index.html* +- инициализируйте RichText с помощью конструктора `richtext.Richtext` + +В качестве параметров конструктор принимает любой допустимый CSS-селектор HTML-контейнера, в который будет помещён RichText, а также соответствующие объекты конфигурации. + +~~~html {9,12-14} title="index.html" + + + + How to Start with RichText + + + + +
+ + + + +~~~ + +## Шаг 3. Настройка RichText + +Далее вы можете задать свойства конфигурации, с которыми компонент RichText будет инициализирован. + +Для начала работы с 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), применить новую [**локаль**](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" + }, + // другие настройки + } +}); +~~~ + +## Что дальше + +Вот и всё. Всего три простых шага — и у вас есть удобный инструмент для редактирования контента. Теперь вы можете приступить к работе со своим контентом или продолжить изучение возможностей 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..6ad11f6 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/index.md @@ -0,0 +1,126 @@ +--- +sidebar_label: Обзор RichText +title: Обзор RichText +slug: / +description: Ознакомьтесь с обзором библиотеки DHTMLX JavaScript RichText в документации. Изучите руководства разработчика и справочник АПИ, попробуйте примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +# Обзор RichText + +**DHTMLX RichText** — гибкий и легковесный WYSIWYG-редактор, созданный на JavaScript. Разработанный для обеспечения удобного редактирования в современных веб-приложениях, RichText предлагает чистый интерфейс, широкие возможности форматирования и полный контроль над отображением контента. Независимо от того, создаёте ли вы CMS, внутренний инструмент администрирования или встроенный редактор документов, RichText легко интегрируется и настраивается под ваши нужды. + +Компонент **DHTMLX RichText** включает следующие возможности: + +- Два [**режима отображения**](api/config/layout-mode.md) + +- Сериализация контента в форматы простого текста и HTML + +- Настраиваемая [**панель инструментов**](api/config/toolbar.md) со встроенными и пользовательскими кнопками + +- Статическая [**строка меню**](api/config/menubar.md), которую можно показать или скрыть + +- Загрузка изображений, расширенное форматирование, пользовательские стили и полноэкранный режим + +- [Полный доступ к АПИ](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 предоставляет доступ к действиям редактирования: создание нового документа, печать, импорт/экспорт контента и многое другое. По умолчанию она скрыта. + +Используйте свойство [`menubar`](api/config/menubar.md) для управления её видимостью. Строку меню можно включить или отключить, однако её содержимое на данный момент не настраивается. + +
+![Menubar](./assets/richtext/menubar.png) +
+ +### Панель инструментов + +Панель инструментов RichText обеспечивает быстрый доступ к форматированию текста и структурному редактированию. По умолчанию [панель инструментов](api/config/toolbar.md#default-config) включена и отображает предопределённый набор часто используемых элементов управления: полужирный, курсив, настройки шрифта, форматирование списков и другие. + +Свойство [`toolbar`](api/config/toolbar.md) позволяет полностью настроить содержимое и компоновку панели инструментов. Вы можете включить или отключить панель, изменить порядок элементов управления по умолчанию или задать полностью пользовательскую панель с помощью массива идентификаторов предопределённых кнопок и объектов пользовательских кнопок. + +
+![Toolbar](./assets/richtext/toolbar.png) +
+ +### Редактор + +Редактор RichText — центральная область, в которой пользователи создают и форматируют контент. Вы можете управлять внешним видом и поведением редактора с помощью параметров конфигурации: [`value`](api/config/value.md), [`layoutMode`](api/config/layout-mode.md) и [`defaultStyles`](api/config/default-styles.md). RichText также поддерживает пользовательские стили, встраивание изображений и адаптивную компоновку в соответствии с требованиями вашего приложения. + +#### Два режима работы + +DHTMLX RichText может работать с контентом в режимах «классический» и «документ». Вы можете выбрать наиболее подходящий режим для комфортного редактирования текста. Используйте свойство [`layoutMode`](api/config/layout-mode.md) для программного переключения режимов. + +- **"classic"** + +
+![Classic mode](./assets/richtext/classic_mode.png) +
+ +- **"document"** + +
+![Document mode](./assets/richtext/document_mode.png) +
+ +## Поддерживаемые форматы + +Редактор RichText поддерживает [разбор](api/methods/set-value.md) и [сериализацию](api/methods/get-value.md) контента в форматах **HTML** и простого текста. + +#### Формат HTML + +
+![HTML format](./assets/richtext/html_format.png) +
+ +#### Формат текста + +
+![Text format](./assets/richtext/text_format.png) +
+ +## Горячие клавиши + +Редактор RichText поддерживает набор стандартных горячих клавиш для ускорения форматирования и редактирования. Сочетания клавиш соответствуют платформенным соглашениям и доступны как на **Windows/Linux** (`Ctrl`), так и на **macOS** (`⌘`). + +### Форматирование текста + +| Действие | Windows/Linux | macOS | +|-----------------|-----------------|---------------| +| Bold* | `Ctrl+B` | `⌘B` | +| Italic | `Ctrl+I` | `⌘I` | +| Underline | `Ctrl+U` | `⌘U` | +| Strikethrough | `Ctrl+Shift+X` | `⌘⇧X` | + +### Редактирование + +| Действие | Windows/Linux | macOS | +|----------|--------------------------|---------------| +| Undo | `Ctrl+Z` | `⌘Z` | +| Redo | `Ctrl+Y` / `Ctrl+Shift+Z`| `⌘Y` / `⌘⇧Z` | +| Cut | `Ctrl+X` | `⌘X` | +| Copy | `Ctrl+C` | `⌘C` | +| Paste | `Ctrl+V` | `⌘V` | + +### Специальные действия + +| Действие | Windows/Linux | macOS | +|------------------|---------------|-------| +| Вставить ссылку | `Ctrl+K` | `⌘K` | +| Печать | `Ctrl+P` | `⌘P` | + +:::info +В будущих обновлениях могут быть добавлены новые сочетания клавиш. +::: + +Чтобы получить актуальный справочник горячих клавиш RichText, нажмите **Help** и выберите пункт **Keyboard shortcuts**: + +
+![Keyboard shortcuts](./assets/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..be340cc --- /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. +--- + +# Миграция на новые версии + +## 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..09153b9 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/news/whats_new.md @@ -0,0 +1,192 @@ +--- +sidebar_label: Что нового +title: Что нового +description: Узнайте, что нового в DHTMLX RichText, и ознакомьтесь с историей релизов в документации библиотеки JavaScript UI от DHTMLX. Изучайте руководства разработчика и справочник по API, смотрите примеры кода и живые демо, а также загрузите бесплатную 30-дневную ознакомительную версию DHTMLX RichText. +--- + +## Версия 2.0.5 + +Выпущена 6 марта 2026 г. + +### Исправления + +- Некорректная обработка IME-ввода +- Некорректная обработка ввода на основе композиции (например, китайский, японский, корейский на десктопе) +- Свойства `margin-left` и `line-height` игнорируются при разборе HTML +- Строчные элементы наследуют свойства блочных родительских элементов +- Невозможно скопировать текст между двумя экземплярами редактора +- Некорректная обработка выделения при двух (и более) активных экземплярах редактора +- Некорректное позиционирование курсора, если единственным содержимым абзаца является изображение +- Бесконечное вложение элементов подстрочного и надстрочного текста +- При вставке изображения оно вставляется как строчный элемент, а не загружается предварительно +- Пустые строчные блоки не удаляются в определённых позициях (первая или последняя строка) +- Редактор не прокручивается к курсору при вводе текста +- Некорректная обработка ввода на Android +- Некорректная обработка выделения для элементов HR +- Некорректная отрисовка при пустых начальных значениях +- Копирование содержимого может завершаться ошибкой, если оно содержит самозакрывающиеся блоки +- Chrome: невозможно вставить эмодзи из контекстного меню +- Firefox: выделение всего текста (CTRL+A) обрабатывается некорректно + +## Версия 2.0.4 + +Выпущена 15 октября 2025 г. + +### Исправления + +- Некорректное выделение диапазона для абзацев +- Всплывающие окна ссылок не отображаются рядом со связанными изображениями +- Начальные значения панели инструментов не соответствуют фактическому содержимому + +## Версия 2.0.3 + +Выпущена 27 августа 2025 г. + +### Исправления + +- Клик по горизонтальной линии вызывает ошибку скрипта +- Некорректная высота строки по умолчанию +- Стили содержимого содержат дублирующиеся селекторы +- Блоки простого текста игнорируют изменения стилей при разборе HTML +- Парсер игнорирует экранированные названия шрифтов в HTML +- Парсер игнорирует свойства `margin-left` и `line-height` в HTML + +## Версия 2.0.2 + +Выпущена 4 августа 2025 г. + +### Исправления + +- Обновлено содержимое пакета + +## Версия 2.0.1 + +Выпущена 30 июля 2025 г. + +### Исправления + +- Обновлены определения типов для свойства `defaultStyles` + +## Версия 2.0 + +Выпущена 30 июля 2025 г. + +:::note +АПИ v1.2 не совместим с v2.0. Подробную информацию см. в [**руководстве по миграции**](news/migration.md). +::: + +### Новые возможности + +- **Новый движок отрисовки текста** + Более плавная, быстрая и точная отрисовка текста благодаря новому движку + +- **Гибкая настройка панели инструментов** + Полный контроль над панелью инструментов: + - Задавайте [отдельные элементы управления](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) документов прямо из редактора + +- **Горячие клавиши** + Расширенная поддержка стандартных сочетаний клавиш для форматирования и редактирования + +### Новый АПИ + +#### Новые свойства + +- [`fullscreenMode`](api/config/fullscreen-mode.md) +- [`imageUploadUrl`](api/config/image-upload-url.md) +- [`layoutMode`](api/config/layout-mode.md) +- [`locale`](api/config/locale.md) +- [`menubar`](api/config/menubar.md) +- [`toolbar`](api/config/toolbar.md) +- [`value`](api/config/value.md) + +#### Новые методы + +- [`setConfig()`](api/methods/set-config.md) — Динамическое обновление конфигурации +- [`setLocale()`](api/methods/set-locale.md) — Смена локали на лету + +#### Новые внутренние методы + +- [`api.exec()`](api/internal/exec.md) +- [`api.intercept()`](api/internal/intercept.md) +- [`api.getReactiveState()`](api/internal/get-reactive-state.md) +- [`api.getState()`](api/internal/get-state.md) + +#### Новые события + +Полный список новых событий доступен [здесь](api/overview/events_overview.md) + +### Обновлённый АПИ + +#### Обновлённые свойства + +- [`defaultStyles`](api/config/default-styles.md) + +#### Обновлённые методы + +- [`setValue()`](api/methods/set-value.md) +- [`getValue()`](api/methods/get-value.md) + +#### Обновлённые внутренние методы + +- [`api.detach()`](api/internal/detach.md) +- [`api.on()`](api/internal/on.md) + +## Удалённый АПИ + +:::warning +Не используйте удалённый АПИ в своих проектах!
Подробную информацию см. в разделе [Миграция](news/migration.md). +::: + +### [Удалённые свойства](news/migration.md#properties-migration) + +- [`customStats`](news/migration.md#--customstats) +- [`mode`](news/migration.md#--mode--layoutmode) +- [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar) + +### [Удалённые методы](news/migration.md#methods-migration) + +- `exitFullScreen()` +- `fullScreen()` +- `getEditorAPI()` +- `getStats()` +- `paint()` + +### Удалённые внутренние методы + +- [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept) + +### Удалённые события + +- `Action` +- `Change` +- `selectionChange` +- `selectionRefresh` diff --git a/i18n/ru/docusaurus-theme-classic/footer.json b/i18n/ru/docusaurus-theme-classic/footer.json new file mode 100644 index 0000000..cb5c883 --- /dev/null +++ b/i18n/ru/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "Development center", + "description": "The title of the footer links column with title=Development center in the footer" + }, + "link.title.Community": { + "message": "Community", + "description": "The title of the footer links column with title=Community in the footer" + }, + "link.title.Company": { + "message": "Company", + "description": "The title of the footer links column with title=Company in the footer" + }, + "link.item.label.Download RichText": { + "message": "Download RichText", + "description": "The label of footer link with label=Download RichText linking to https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml" + }, + "link.item.label.Examples": { + "message": "Examples", + "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/t55alxiy?tag=richtext" + }, + "link.item.label.Blog": { + "message": "Blog", + "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/tag/richtext/" + }, + "link.item.label.Forum": { + "message": "Forum", + "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/richtext/" + }, + "link.item.label.GitHub": { + "message": "GitHub", + "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX" + }, + "link.item.label.Youtube": { + "message": "Youtube", + "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx" + }, + "link.item.label.Facebook": { + "message": "Facebook", + "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx" + }, + "link.item.label.Twitter": { + "message": "Twitter", + "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx" + }, + "link.item.label.Linkedin": { + "message": "Linkedin", + "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/" + }, + "link.item.label.About us": { + "message": "About us", + "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "Contact us", + "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "Licensing", + "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxRichText/#editions-licenses" + } +} diff --git a/i18n/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..5e7f8bf --- /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.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.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.common.headingLinkTitle": { + "message": "{heading}的直接链接", + "description": "Title for link to heading" + }, + "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.AnnouncementBar.closeButtonAriaLabel": { + "message": "关闭", + "description": "The ARIA label for close button of announcement bar" + }, + "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.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.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.navbar.mobileLanguageDropdown.label": { + "message": "选择语言", + "description": "The label for the mobile language switcher dropdown" + }, + "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.docs.breadcrumbs.home": { + "message": "主页面", + "description": "The ARIA label for the home page in the breadcrumbs" + }, + "theme.CodeBlock.wordWrapToggle": { + "message": "切换自动换行", + "description": "The title attribute for toggle word wrapping button of code block lines" + }, + "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.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.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..9239ff7 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-blog/options.json @@ -0,0 +1,14 @@ +{ + "title": { + "message": "Blog", + "description": "The title for the blog used in SEO" + }, + "description": { + "message": "Blog", + "description": "The description for the blog used in SEO" + }, + "sidebar.title": { + "message": "Recent posts", + "description": "The label for the left sidebar" + } +} diff --git a/i18n/zh/docusaurus-plugin-content-docs/current.json b/i18n/zh/docusaurus-plugin-content-docs/current.json new file mode 100644 index 0000000..2b7f3f1 --- /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..4f426b2 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/.sync @@ -0,0 +1 @@ +733291261c10c688edc631568f0fca737b0f7b10 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/default-styles.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/default-styles.md new file mode 100644 index 0000000..1891f37 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/default-styles.md @@ -0,0 +1,144 @@ +--- +sidebar_label: defaultStyles +title: defaultStyles Config +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 defaultStyles 配置项。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。 +--- + +# defaultStyles + +### 描述 + +@short: 可选。为特定块类型指定默认样式值 + +### 用法 + +~~~jsx {} +defaultStyles?: { + "*"?: { // 影响所有块，允许您为所有这些块设置通用属性 + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + p?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + blockquote?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h1?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h2?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h3?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h4?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h5?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h6?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + } +}; +~~~ + +:::important +`defaultStyles` 属性不会直接将 CSS 应用于受影响的块。CSS 样式需要单独设置： + +```jsx title="index.js" +new richtext.Richtext("#root", { + defaultStyles: { + h2: { + "font-family": "Roboto", + "font-size": "28px", + color: "purple", + background: "#FFC0CB" + } + } +}); +``` + +```css title="index.css" + +``` + +在此示例中，所有 `h2` 块被分配了 `"Roboto"` 字体族，字体大小为 28px，前景色和背景色也同样进行了更改。CSS 样式也被应用于 `h2` 块。 +::: + +### 默认配置 + +~~~jsx +const defaultStyles = { + "*": { "font-family": "Arial" }, + p: { "font-size": "14px" }, + blockquote: { "font-size": "14px" }, + h1: { "font-size": "32px" }, + h2: { "font-size": "24px" }, + h3: { "font-size": "18px" }, + h4: { "font-size": "16px" }, + h5: { "font-size": "14px" }, + h6: { "font-size": "12px" } +}; +~~~ + +### 示例 + +~~~jsx {3-13} +// 初始化 RichText +new richtext.Richtext("#root", { + defaultStyles: { + h4: { + "font-family": "Roboto" + }, + h5: { + "font-family": "Roboto" + }, + h6: { + "font-family": "Roboto" + } + }, + // 其他配置属性 +}); +~~~ + +**更新日志：** 该属性在 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..97058f4 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md @@ -0,0 +1,39 @@ +--- +sidebar_label: fullscreenMode +title: fullscreenMode Config +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 fullscreenMode 配置项。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。 +--- + +# fullscreenMode + +### 描述 + +@short: 可选。启用 RichText 全屏模式 + +### 用法 + +~~~jsx {} +fullscreenMode?: boolean; +~~~ + +### 默认配置 + +~~~jsx +fullscreenMode: false; +~~~ + +### 示例 + +~~~jsx {3} +// 初始化 RichText +new richtext.Richtext("#root", { + fullscreenMode: true + // 其他配置属性 +}); +~~~ + +**变更日志：** 该属性在 v2.0 中新增 + +**相关文章：** [配置](guides/configuration.md) + +**相关示例：** [RichText. Full toolbar](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..fc5a2f1 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md @@ -0,0 +1,33 @@ +--- +sidebar_label: imageUploadUrl +title: imageUploadUrl Config +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 imageUploadUrl 配置项。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。 +--- + +# imageUploadUrl + +### 描述 + +@short: 可选。指定用于上传图片的 URL + +### 用法 + +~~~jsx {} +imageUploadUrl?: string; +~~~ + +### 示例 + +~~~jsx {3} +// 初始化 RichText +new richtext.Richtext("#root", { + imageUploadUrl: "some URL" + // 其他配置属性 +}); +~~~ + +**变更日志：** 该属性在 v2.0 中添加 + +**相关文章：** [配置](guides/configuration.md) + +**相关示例：** [RichText. Initialization](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..5b39ee8 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/layout-mode.md @@ -0,0 +1,41 @@ +--- +sidebar_label: layoutMode +title: layoutMode Config +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 layoutMode 配置项。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# layoutMode + +### 描述 + +@short: 可选。指定主编辑区域的布局模式 + +### 用法 + +~~~jsx {} +layoutMode: "classic" | "document"; +~~~ + +`"classic"` 模式填充整个编辑区域。`"document"` 模式将编辑区域显示为文档页面。 + +### 默认配置 + +~~~jsx +layoutMode: "classic"; +~~~ + +### 示例 + +~~~jsx {3} +// 初始化 RichText +new richtext.Richtext("#root", { + layoutMode: "document" // 默认以 "document" 模式初始化 RichText + // 其他配置属性 +}); +~~~ + +**变更日志：** 该属性在 v2.0 中新增，替代了已移除的 `mode` 属性 + +**相关文章：** [配置](guides/configuration.md) + +**相关示例：** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/locale.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/locale.md new file mode 100644 index 0000000..0a1d3f4 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/locale.md @@ -0,0 +1,47 @@ +--- +sidebar_label: locale +title: locale 配置项 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 locale 配置项。浏览开发指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# locale + +### 描述 + +@short: 可选。包含 RichText 本地化标签的对象 + +:::info +**locale** 对象需要包含 RichText 的所有标签及其对应的翻译内容。 +::: + +### 用法 + +~~~jsx {} +locale?: object; +~~~ + +### 默认配置 + +默认情况下，RichText 使用**英语**语言环境。您也可以将其设置为自定义语言环境。 + +:::tip +要动态更改当前语言环境，可以使用 RichText 的 [**setLocale()**](api/methods/set-locale.md) 方法 +::: + +### 示例 + +~~~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..483367d --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/menubar.md @@ -0,0 +1,33 @@ +--- +sidebar_label: menubar +title: menubar 配置 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 menubar 配置项。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# menubar + +### 描述 + +@short: 可选。启用 RichText 顶部菜单栏 + +### 用法 + +~~~jsx {} +menubar?: boolean; +~~~ + +### 示例 + +~~~jsx {3} +// 初始化 RichText +new richtext.Richtext("#root", { + menubar: true + // 其他配置属性 +}); +~~~ + +**变更日志：** 该属性在 v2.0 中添加 + +**相关文章：** [配置](guides/configuration.md) + +**相关示例：** [RichText. Initialization with menubar](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..53cb381 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/toolbar.md @@ -0,0 +1,219 @@ +--- +sidebar_label: toolbar +title: toolbar Config +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 toolbar 配置项。浏览开发指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# toolbar + +### 描述 + +@short: 可选。启用工具栏，并允许用户指定/配置工具栏中显示的按钮 + +### 用法 + +~~~jsx {} +toolbar?: boolean | Array any }>; +~~~ + +#### 工具栏中的可用按钮 + +您可以在 RichText 工具栏中指定以下按钮： + +| 按钮 | 描述 | +|---------------------|-----------------------------------------------------------------------------| +| `undo` | 撤销最近的用户操作。 | +| `redo` | 重新应用之前撤销的操作。 | +| `style` | 允许选择文本样式（例如标题、段落等）。 | +| `font-family` | 更改所选文本的字体。 | +| `font-size` | 调整所选文本的大小。 | +| `bold` | 对所选文本应用粗体格式。 | +| `italic` | 对所选文本应用斜体格式。 | +| `underline` | 为所选文本添加下划线。 | +| `strike` | 应用删除线格式。 | +| `subscript` | 将文本格式设置为下标。 | +| `superscript` | 将文本格式设置为上标。 | +| `text-color` | 更改文本颜色。 | +| `background-color` | 更改文本的背景（高亮）颜色。 | +| `align` | 设置文本对齐方式（左对齐、居中、右对齐、两端对齐）。 | +| `indent` | 增加文本块缩进。 | +| `outdent` | 减少段落缩进。 | +| `line-height` | 调整行间距（行高）。 | +| `quote` | 将文本格式设置为块引用。 | +| `bulleted-list` | 创建项目符号列表。 | +| `numbered-list` | 创建编号列表。 | +| `link` | 插入超链接。 | +| `image` | 插入图像。 | +| `line` | 插入水平线。 | +| `clear` | 移除所选文本的所有格式。 | +| `print` | 打开打印对话框。 | +| `fullscreen` | 切换全屏模式。 | +| `mode` | 在[布局模式](api/config/layout-mode.md)之间切换（经典/文档） | +| `shortcuts` | 显示可用键盘快捷键列表。 | +| `separator` | 在工具栏组之间添加视觉分隔符。 | + +您可以使用这些字符串按如下方式配置工具栏按钮： + +~~~jsx {2-7} +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // 其他按钮 + ], + // 其他配置属性 +}); +~~~ + +#### 工具栏中的自定义按钮 + +您可以将自定义按钮指定为具有以下参数的对象： + +- `type` - （必填）指定自定义控件类型。可用的类型有：`"button"`、`"richselect"`、`"colorpicker"` +- `id` - （可选）自定义控件 ID（不能与现有控件 ID 重复） +- `label` - （可选）按钮标签（与图标组合使用） +- `tooltip` - （可选）悬停时显示的提示信息（若未指定，则使用 "label" 的值） +- `css` - （可选）分配给控件的 CSS 类名（默认支持的类：wx-primary、wx-secondary） +- `handler` - （可选）点击按钮时执行的回调函数 + +~~~jsx {6-32} +new richtext.Richtext("#root", { + toolbar: [ + // 按钮（字符串仅表示按钮） + "bold", + "italic", + // 预定义按钮（用户无法为这些按钮定义其他选项（无标签、提示信息、选项等），因此只能使用 ({ type: "button", id: string })） + { + type: "button", + id: "fullscreen", + }, + // 如果用户想使用预定义控件（例如 richselect/colorpicker），必须指定正确的类型 + // 类型不匹配将被忽略（不添加到工具栏） + { + type: "richselect", // type: "button" - 错误，将被忽略 + id: "mode", + }, + // 自定义按钮（支持的选项如下） + // 用户只能定义自定义按钮（目前不支持 richselect/colorpicker） + { + type: "button", + id: "some", + label: "Some", + handler: () => {/* custom logic */} + }, + { + type: "button", + id: "other", + icon: "wxo-help", + label: "Other", + tooltip: "Some tooltip", + handler: () => {/* custom logic */} + } + ], + // 其他配置属性 +}); +~~~ + +#### 隐藏工具栏 + +如果需要隐藏工具栏，请将 `toolbar` 属性设置为 `false`，如下所示： + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false + // 其他配置属性 +}); +~~~ + +### 默认配置 + +~~~jsx +const defaultToolbarButtons = { + "undo", + "redo", + "separator", + "style", + "separator", + "font-family", + "font-size", + "separator", + "bold", + "italic", + "underline", + "strike", + "separator", + "text-color", + "background-color", + "separator", + "align", + "line-height", + "outdent", + "indent", + "separator", + "bulleted-list", + "numbered-list", + "quote", + "separator", + "link", + "image", + "separator", + "clear", + "separator", + "fullscreen", + "mode" +}; +~~~ + +:::tip +默认工具栏控件由 RichText widget 导出，可通过 `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" 的值） + } + ] + // 其他配置属性 +}); +``` +::: + +### 示例 + +~~~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. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/config/value.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/value.md new file mode 100644 index 0000000..3b7e472 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/config/value.md @@ -0,0 +1,36 @@ +--- +sidebar_label: value +title: value 配置项 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 value 配置项。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。 +--- + +# value + +### 描述 + +@short: 可选。指定在 RichText 编辑器区域中显示的初始值（内容） + +:::tip +如果您希望使用自定义格式设置值（内容），请使用内置的 [`setValue()`](api/methods/set-value.md) 方法。 +::: + +### 用法 + +~~~jsx {} +value?: string; +~~~ + +### 示例 + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" // 设置默认值（HTML 格式） + // 其他配置属性 +}); +~~~ + +**变更日志：** 该属性在 v2.0 中添加 + +**相关文章：** [配置](guides/configuration.md) + +**相关示例：** [RichText. Initialization](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..ebc23d8 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/align.md @@ -0,0 +1,48 @@ +--- +sidebar_label: align +title: align 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 align 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# align + +### 描述 + +@short: 当通过菜单栏/工具栏或 Event Bus 方法更改文本对齐方式时触发 + +### 用法 + +~~~jsx {} +"align": ({ + align: "left" | "center" | "right" | "justify" +}) => boolean | void; +~~~ + +### 参数 + +**align** 事件的回调函数可接收一个包含以下参数的对象： + +- `align` - 文本对齐方式。可指定以下值之一：`"left" | "center" | "right" | "justify"` + +:::info +如需处理内部事件，可使用 [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-12} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "align" 事件 +editor.api.on("align", (obj) => { + console.log(`Align to: ${obj.align}`); +}); +// 将文本左对齐 +editor.api.exec("align", { + align: "left" +}); +~~~ + +**变更日志：** 该事件在 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..8566806 --- /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 + +### 描述 + +@short: 当通过菜单栏/工具栏或 Event Bus 方法清除文本格式时触发 + +### 用法 + +~~~jsx {} +"clear-text-format": () => boolean | void; +~~~ + +:::info +如需处理内部事件，您可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-10} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "clear-text-format" 事件 +editor.api.on("clear-text-format", () => { + console.log("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..f86742e --- /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 + +### 描述 + +@short: 复制选定文本时触发 + +### 用法 + +~~~jsx {} +"copy": () => boolean | void; +~~~ + +:::info +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "copy" 事件 +editor.api.on("copy", () => { + console.log("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..835133c --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/create-new.md @@ -0,0 +1,44 @@ +--- +sidebar_label: create-new +title: create-new 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 create-new 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。 +--- + +# create-new + +### 描述 + +@short: 在菜单栏中点击"New"选项或通过 Event Bus 方法触发时触发 + +### 用法 + +~~~jsx {} +"create-new": ({ reset?: boolean }) => boolean | void; +~~~ + +### 参数 + +**create-new** 事件的回调函数可接收一个包含以下参数的对象： + +- `reset` - 创建新文件时重置历史记录 + +:::info +如需处理内部事件，可使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-10} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "create-new" 事件 +editor.api.on("create-new", ({ reset }) => { + console.log(`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..3ec91e5 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/cut.md @@ -0,0 +1,36 @@ +--- +sidebar_label: cut +title: cut 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 cut 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# cut + +### 描述 + +@short: 在剪切所选文本时触发 + +### 用法 + +~~~jsx {} +"cut": () => boolean | void; +~~~ + +:::info +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "cut" 事件 +editor.api.on("cut", () => { + console.log("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..9f508f2 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/delete-link.md @@ -0,0 +1,36 @@ +--- +sidebar_label: delete-link +title: delete-link 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 delete-link 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# delete-link + +### 描述 + +@short: 删除链接时触发 + +### 用法 + +~~~jsx {} +"delete-link": () => boolean | void; +~~~ + +:::info +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "delete-link" 事件 +editor.api.on("delete-link", () => { + console.log("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..70c855a --- /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 参考，查看代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX RichText。 +--- + +# export + +### 描述 + +@short: 在菜单栏中按下"导出"选项或通过 Event Bus 方法触发后触发 + +### 用法 + +~~~jsx {} +"export": ({ options: IExportOptions; result?: any }) => boolean | void; + +interface IExportOptions { + format?: "docx" | "pdf"; + url?: string; + download?: boolean; + fileName?: string; +} +~~~ + +### 参数 + +**export** 事件的回调函数可接收一个包含以下参数的对象： + +- `format` - 文件格式 +- `url` - 文件导出的基础 URL +- `download` - 允许用户指定是否在收到服务器响应后下载文件。若该属性设置为 "false"，文件将不会下载，用户可通过事件对象获取 blob 数据（参见事件定义中的 `result` 属性） +- `fileName` - 要导出的文件名 + +:::info +如需处理内部事件，可使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-15} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "export" 事件 +editor.api.on("export", (obj) => { + console.log(obj); + console.log("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/import.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/import.md new file mode 100644 index 0000000..6d61d40 --- /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 + +### 描述 + +@short: 在菜单栏中按下"Import"选项或通过 Event Bus 方法触发后触发 + +### 用法 + +~~~jsx {} +"import": ({ html?: string }) => boolean | void; +~~~ + +### 参数 + +**import** 事件的回调可以接受一个包含以下参数的对象： + +- `html` - HTML 格式的文本值 + +:::info +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-13} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "import" 事件 +editor.api.on("import", (obj) => { + console.log(obj.html); + console.log("The new value was imported"); +}); +// 导入新值 +editor.api.exec("import", { + html: "

some value

" // simply calls 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..13f86f7 --- /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 + +### 描述 + +@short: 增加块缩进时触发 + +### 用法 + +~~~jsx {} +"indent": ({ step: number }) => boolean | void; +~~~ + +### 参数 + +**indent** 事件的回调函数可接收一个包含以下参数的对象： + +- `step` - 缩进增加的步长 + +:::info +如需处理内部事件，可使用 [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "indent" 事件 +editor.api.on("indent", (obj) => { + console.log(obj); + console.log("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..cafeb11 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-image.md @@ -0,0 +1,50 @@ +--- +sidebar_label: insert-image +title: insert-image Event +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 insert-image 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX RichText。 +--- + +# insert-image + +### 描述 + +@short: 在插入图片时触发 + +### 用法 + +~~~jsx {} +"insert-image": (IImageContext) => boolean | void; + +interface IImageContext { + id: TID; + value: string; + width: number; + height: number; + // 来自上传器上下文的额外属性，实际操作不需要 + name?: string; + file?: File; + status?: string; + selected: (ctx: IImageContext) => void; + uploaded: (ctx: IImageContext) => void; +} +~~~ + +:::info +处理内部事件可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "insert-image" 事件 +editor.api.on("insert-image", (obj) => { + console.log(obj); + console.log("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..54967fb --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-line.md @@ -0,0 +1,36 @@ +--- +sidebar_label: insert-line +title: insert-line 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 insert-line 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# insert-line + +### 描述 + +@short: 在插入水平线时触发 + +### 用法 + +~~~jsx {} +"insert-line": () => boolean | void; +~~~ + +:::info +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "insert-line" 事件 +editor.api.on("insert-line", () => { + console.log("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..095e514 --- /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 + +### 描述 + +@short: 插入链接时触发 + +### 用法 + +~~~jsx {} +"insert-link": ({ url: string }) => boolean | void; +~~~ + +### 参数 + +**update-link** 事件的回调函数可接受包含以下参数的对象： + +- `url` - 要插入的链接地址 + +:::info +如需处理内部事件，可使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "insert-link" 事件 +editor.api.on("insert-link", (obj) => { + console.log(obj) + console.log("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..555070b --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/insert-list.md @@ -0,0 +1,47 @@ +--- +sidebar_label: insert-list +title: insert-list 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 insert-list 事件。浏览开发指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 免费 30 天评估版本。 +--- + +# insert-list + +### 描述 + +@short: 插入列表时触发 + +### 用法 + +~~~jsx {} +"insert-list": ({ type: TListType }) => boolean | void; + +type TListType = "bulleted" | "numbered"; +~~~ + +### 参数 + +**insert-list** 事件的回调函数可接受一个包含以下参数的对象： + +- `type` - 插入列表的类型。可指定以下值： + - `"bulleted"` - 无序列表 + - `"numbered"` - 有序列表 + +:::info +如需处理内部事件，可使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "insert-list" 事件 +editor.api.on("insert-list", (obj) => { + console.log(obj.type); + console.log("The list was inserted"); +}); +~~~ + +**变更日志：** 该事件在 v2.0 中新增 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/outdent.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/outdent.md new file mode 100644 index 0000000..9863fba --- /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 + +### 描述 + +@short: 减少块缩进时触发 + +### 用法 + +~~~jsx {} +"outdent": ({ step: number }) => boolean | void; +~~~ + +### 参数 + +**outdent** 事件的回调函数可接受一个包含以下参数的对象： + +- `step` - 缩进减少的步长 + +:::info +如需处理内部事件，可使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "outdent" 事件 +editor.api.on("outdent", (obj) => { + console.log(obj); + console.log("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..14ad6d3 --- /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 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# paste + +### 描述 + +@short: 在粘贴内容时触发 + +### 用法 + +~~~jsx {} +"paste": () => boolean | void; +~~~ + +:::info +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "paste" 事件 +editor.api.on("paste", () => { + console.log("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..bd2139f --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/print.md @@ -0,0 +1,36 @@ +--- +sidebar_label: print +title: print 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 print 事件。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# print + +### 描述 + +@short: 打印文档时触发 + +### 用法 + +~~~jsx {} +"print": () => boolean | void; +~~~ + +:::info +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~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..a968411 --- /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 + +### 描述 + +@short: 在菜单栏/工具栏中按下"Redo"按钮或通过 Event Bus 方法触发时激发 + +### 用法 + +~~~jsx {} +"redo": () => boolean | void; +~~~ + +:::info +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "redo" 事件 +editor.api.on("redo", () => { + console.log("Redo 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..c03ebe2 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/resize-image.md @@ -0,0 +1,45 @@ +--- +sidebar_label: resize-image +title: resize-image 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 resize-image 事件。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# resize-image + +### 描述 + +@short: 调整图片大小时触发 + +### 用法 + +~~~jsx {} +"resize-image": ({ id: number, width: number, height: number }) => boolean | void; +~~~ + +### 参数 + +**resize-image** 事件的回调函数可以接收一个包含以下参数的对象： + +- `id` - 图片 ID +- `width` - 图片宽度 +- `height` - 图片高度 + +:::info +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { +// 配置属性 +}); +// 订阅 "resize-image" 事件 +editor.api.on("resize-image", (obj) => { + console.log(obj); + console.log("The image was resized") +}); +~~~ + +**Change log:** 该事件在 v2.0 中添加 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-font-family.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-font-family.md new file mode 100644 index 0000000..886b818 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-font-family.md @@ -0,0 +1,47 @@ +--- +sidebar_label: set-font-family +title: set-font-family 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 set-font-family 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# set-font-family + +### 描述 + +@short: 设置字体系列时触发 + +### 用法 + +~~~jsx {} +"set-font-family": ({ fontFamily: string }) => boolean | void; +~~~ + +### 参数 + +**set-font-family** 事件的回调函数可接收一个包含以下参数的对象： + +- `fontFamily` - 要应用的字体系列。可用字体如下：`"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"` + +:::info +如需处理内部事件，可使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-13} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "set-font-family" 事件 +editor.api.on("set-font-family", (obj) => { + console.log(obj.fontFamily); + console.log("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..0c96700 --- /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 + +### 描述 + +@short: 在设置字体大小时触发 + +### 用法 + +~~~jsx {} +"set-font-size": ({ fontSize: string }) => boolean | void; +~~~ + +### 参数 + +**set-font-size** 事件的 callback 可接受一个包含以下参数的对象： + +- `fontSize` - 要应用的字体大小 + +:::info +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-13} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "set-font-size" 事件 +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); + console.log("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..97d4342 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-line-height.md @@ -0,0 +1,47 @@ +--- +sidebar_label: set-line-height +title: set-line-height 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 set-line-height 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# set-line-height + +### 描述 + +@short: 在设置行高时触发 + +### 用法 + +~~~jsx {} +"set-line-height": ({ lineHeight: string }) => boolean | void; +~~~ + +### 参数 + +**set-line-height** 事件的回调函数可接受一个包含以下参数的对象： + +- `lineHeight` - 行高 + +:::info +如需处理内部事件，可使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-13} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "set-line-height" 事件 +editor.api.on("set-line-height", (obj) => { + console.log(obj); + console.log("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..a970fa8 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-color.md @@ -0,0 +1,54 @@ +--- +sidebar_label: set-text-color +title: set-text-color 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 set-text-color 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# set-text-color + +### 描述 + +@short: 在设置文本颜色和/或文本背景颜色时触发 + +### 用法 + +~~~jsx {} +"set-text-color": (ITextColor) => boolean | void; + +interface ITextColor { + color?: string; + background?: string; +} +~~~ + +### 参数 + +**set-text-color** 事件的回调函数可接受一个包含以下参数的对象： + +- `color` - 文本颜色 +- `background` - 文本背景颜色 + +:::info +处理内部事件可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-14} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "set-text-color" 事件 +editor.api.on("set-text-color", (obj) => { + console.log(obj); + console.log("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..df02205 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-format.md @@ -0,0 +1,58 @@ +--- +sidebar_label: set-text-format +title: set-text-format 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 set-text-format 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 免费 30 天评估版本。 +--- + +# set-text-format + +### 描述 + +@short: 在设置文本格式时触发 + +### 用法 + +~~~jsx {} +"set-text-format": (ITextFormat) => boolean | void; + +interface ITextFormat { + bold?: boolean; + italic?: boolean; + strike?: boolean; + underline?: boolean; +} +~~~ + +:::info +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 参数 + +**set-text-format** 事件的回调函数可接收一个包含以下参数的对象： + +- `bold` - 粗体文本格式 +- `italic` - 斜体文本格式 +- `strike` - 删除线文本格式 +- `underline` - 下划线文本格式 + +### 示例 + +~~~jsx {5-14} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "set-text-format" 事件 +editor.api.on("set-text-format", (obj) => { + console.log(obj); + console.log("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..9d33127 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/set-text-style.md @@ -0,0 +1,49 @@ +--- +sidebar_label: set-text-style +title: set-text-style 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 set-text-style 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# set-text-style + +### 描述 + +@short: 在设置文本样式时触发 + +### 用法 + +~~~jsx {} +"set-text-style": ({ tag: TBlockType }) => boolean | void; + +type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; +~~~ + +### 参数 + +**set-text-style** 事件的回调函数可以接收一个包含以下参数的对象： + +- `tag` - 文本样式 + +:::info +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-13} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "set-text-style" 事件 +editor.api.on("set-text-style", (obj) => { + console.log(obj.tag); + console.log("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..a461f84 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/show-popup.md @@ -0,0 +1,53 @@ +--- +sidebar_label: show-popup +title: show-popup 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 show-popup 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# show-popup + +### 描述 + +@short: 当弹出窗口显示或隐藏时触发 + +### 用法 + +~~~jsx {} +"show-popup": (IPopupConfig) => boolean | void; + +interface IPopupConfig { + type: "link" | null; + image?: boolean; +} +~~~ + +### 参数 + +**show-popup** 事件的回调函数可接受一个包含以下参数的对象： + +- `type` - 弹出窗口的类型 +- `image` - 提供对附加上下文的访问（当前光标是否指向图片） + +:::info +处理内部事件时，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-13} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "show-popup" 事件 +editor.api.on("show-popup", (obj) => { + console.log(obj); + console.log("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/subscript.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/subscript.md new file mode 100644 index 0000000..4589886 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/subscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: subscript +title: subscript Event +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 subscript 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# subscript + +### 描述 + +@short: 在菜单栏/工具栏中按下"下标"按钮或通过 Event Bus 方法触发时触发 + +### 用法 + +~~~jsx {} +"subscript": () => boolean | void; +~~~ + +:::info +处理内部事件可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-10} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "subscript" 事件 +editor.api.on("subscript", () => { + console.log("Subscript 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..24d383e --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/superscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: superscript +title: superscript Event +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 superscript 事件。浏览开发指南和 API 参考，查看代码示例和在线演示，并下载免费 30 天评估版 DHTMLX RichText。 +--- + +# superscript + +### 描述 + +@short: 当在菜单栏/工具栏中按下"Superscript"按钮或通过 Event Bus 方法触发时触发 + +### 用法 + +~~~jsx {} +"superscript": () => boolean | void; +~~~ + +:::info +如需处理内部事件，您可以使用 [**Event Bus methods**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "superscript" 事件 +editor.api.on("superscript", () => { + console.log("Superscript 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..4acd3df --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md @@ -0,0 +1,45 @@ +--- +sidebar_label: toggle-fullscreen-mode +title: toggle-fullscreen-mode 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 toggle-fullscreen-mode 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# toggle-fullscreen-mode + +### 描述 + +@short: 切换全屏模式时触发 + +### 用法 + +~~~jsx {} +"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void; +~~~ + +### 参数 + +**toggle-fullscreen-mode** 事件的回调函数可接受一个包含以下参数的对象： + +- `mode` - 启用全屏模式 + +:::info +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "toggle-fullscreen-mode" 事件 +editor.api.on("toggle-fullscreen-mode", (obj) => { + console.log(obj); + console.log("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..341a289 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md @@ -0,0 +1,45 @@ +--- +sidebar_label: toggle-layout-mode +title: toggle-layout-mode 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 toggle-layout-mode 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# toggle-layout-mode + +### 描述 + +@short: 切换布局模式时触发 + +### 用法 + +~~~jsx {} +"toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void; +~~~ + +### 参数 + +**toggle-layout-mode** 事件的回调函数可接收一个包含以下参数的对象： + +- `mode` - 布局模式。可用的模式如下：`"classic" | "document"` + +:::info +如需处理内部事件，可使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-11} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "toggle-layout-mode" 事件 +editor.api.on("toggle-layout-mode", (obj) => { + console.log(obj); + console.log("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-shortcut-info.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md new file mode 100644 index 0000000..b80948e --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md @@ -0,0 +1,45 @@ +--- +sidebar_label: toggle-shortcut-info +title: toggle-shortcut-info 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 toggle-shortcut-info 事件。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# toggle-shortcut-info + +### 描述 + +@short: 切换快捷键信息时触发 + +### 用法 + +~~~jsx {} +"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void; +~~~ + +### 参数 + +**toggle-shortcut-info** 事件的回调函数可接受一个包含以下参数的对象： + +- `mode` - 启用快捷键信息；`true` 表示显示快捷键信息弹窗，`false` 表示隐藏快捷键信息弹窗 + +:::info +如需处理内部事件，可使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "toggle-shortcut-info" 事件 +editor.api.on("toggle-shortcut-info", (obj) => { + console.log(obj); + console.log("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..5edc6b3 --- /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 + +### 描述 + +@short: 当在菜单栏/工具栏中按下"撤销"按钮或通过 Event Bus 方法触发时触发 + +### 用法 + +~~~jsx {} +"undo": () => boolean | void; +~~~ + +:::info +如需处理内部事件，可以使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "undo" 事件 +editor.api.on("undo", () => { + console.log("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..38f65f8 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/events/update-link.md @@ -0,0 +1,44 @@ +--- +sidebar_label: update-link +title: update-link 事件 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 update-link 事件。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# update-link + +### 描述 + +@short: 更新链接时触发 + +### 用法 + +~~~jsx {} +"update-link": ({ id: number, url: string }) => boolean | void; +~~~ + +### 参数 + +**update-link** 事件的回调函数可接收一个包含以下参数的对象： + +- `id` - 链接 ID +- `url` - 修改后的 url + +:::info +处理内部事件可使用 [**Event Bus 方法**](api/overview/event_bus_methods_overview.md) +::: + +### 示例 + +~~~jsx {5-9} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "update-link" 事件 +editor.api.on("update-link", (obj) => { + console.log(obj); + console.log("The following link was updated:" + obj.url); +}); +~~~ + +**Change log:** 该事件于 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..35e5c25 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/detach.md @@ -0,0 +1,44 @@ +--- +sidebar_label: api.detach() +title: on Method +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 on 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# api.detach() + +### 描述 + +@short: 用于移除/解绑事件处理程序 + +### 用法 + +~~~jsx {} +api.detach( tag: string ): void; +~~~ + +### 参数 + +- `tag` - （必填）操作标签的名称 + +### 事件 + +:::info +RichText 内部事件的完整列表可在[**此处**](api/overview/events_overview.md)查看 +::: + +### 示例 + +~~~jsx {6-8,10} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); + +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}, { tag: "track" }); + +editor.api.detach("track"); +~~~ + +**更新日志：** 该方法在 v2.0 中已更新。`name` 和 `context` 参数已被移除 diff --git a/i18n/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..b321217 --- /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 参考，试用代码示例和在线演示，并下载免费 30 天评估版 DHTMLX RichText。 +--- + +# api.exec() + +### 描述 + +@short: 允许触发内部事件 + +### 用法 + +~~~jsx {} +api.exec( + event: string, + config: object +): void; +~~~ + +### 参数 + +- `event` - （必填）要触发的事件 +- `config` - （必填）包含参数的配置对象（参见要触发的事件） + +### 事件 + +:::info +RichText 内部事件的完整列表可在[**此处**](api/overview/events_overview.md)找到 +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 设置文本字体大小 +editor.api.exec("set-font-size", { + fontSize: "16px" +}); +~~~ + +**变更日志：** 该方法在 v2.0 中新增 diff --git a/i18n/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..16f69f5 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.getReactiveState() +title: getReactiveState 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 getReactiveState 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# api.getReactiveState() + +### 描述 + +@short: 返回包含 RichText 响应式属性的对象 + +### 用法 + +~~~jsx {} +api.getReactiveState(): object; +~~~ + +### 返回值 + +该方法返回一个包含以下参数的对象： + +~~~jsx {} +{ + cursorState: { subscribe: any }, + defaultStyles {...}, + document {...}, + fullscreen {...}, + history {...}, + layoutMode {...}, + popup {...}, + selection {...} +} +~~~ + +### 示例 + +~~~jsx {5-7} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 获取 RichText 的响应式状态 +const reactive_state = editor.api.getReactiveState(); +console.log(reactive_state) +~~~ + +**变更日志：** 该方法在 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..4410cc8 --- /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() + +### 描述 + +@short: 返回包含 RichText StateStore 属性的对象 + +### 用法 + +~~~jsx {} +api.getState(): object; +~~~ + +### 返回值 + +该方法返回一个包含以下参数的对象： + +~~~jsx {} +{ + cursorState: {}, + defaultStyles: {}, + document: {}, + fullscreen: boolean, + history: [] + layoutMode: string, + popup: any, + selection: {} +} +~~~ + +### 示例 + +~~~jsx {5-7} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 获取 RichText 的 State +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..06c0871 --- /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 参考，查看代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX RichText。 +--- + +# api.intercept() + +### 描述 + +@short: 允许拦截并阻止内部事件 + +### 用法 + +~~~jsx {} +api.intercept( + event: string, + callback: function +): void; +~~~ + +### 参数 + +- `event` - （必填）要触发的事件 +- `callback` - （必填）要执行的 callback（callback 参数取决于所触发的事件） + +### 事件 + +:::info +RichText 内部事件的完整列表请参见[**此处**](api/overview/events_overview.md) +::: + +### 示例 + +~~~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..ce024bc --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/on.md @@ -0,0 +1,46 @@ +--- +sidebar_label: api.on() +title: on 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 on 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# api.on() + +### 描述 + +@short: 允许为内部事件附加处理程序 + +### 用法 + +~~~jsx {} +api.on( + event: string, + handler: function +): void; +~~~ + +### 参数 + +- `event` - （必填）要触发的事件 +- `handler` - （必填）要附加的处理程序（处理程序的参数取决于所触发的事件） + +### 事件 + +:::info +RichText 内部事件的完整列表可在 [**此处**](api/overview/events_overview.md) 查看 +::: + +### 示例 + +~~~jsx {5-8} +// 初始化 RichText +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +// 订阅 "set-font-size" 事件 +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}); +~~~ + +**变更日志：** 该方法在 v2.0 中进行了更新，`context` 参数已被移除 diff --git a/i18n/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..9562ad7 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/internal/set-next.md @@ -0,0 +1,40 @@ +--- +sidebar_label: api.setNext() +title: setNext 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 setNext 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# api.setNext() + +### 描述 + +@short: 允许将某个操作添加到 Event Bus 顺序中 + +### 用法 + +~~~jsx {} +api.setNext(next: any): void; +~~~ + +### 参数 + +- `next` - （必填）要添加到 **Event Bus** 顺序中的操作 + +### 示例 + +~~~jsx {10-11} +const server = "https://some-backend-url"; +// 假设您有一个名为 someServerService 的自定义服务器服务类 +const someServerService = new ServerDataService(server); + +fetch(server + "/data").then((res) => res.json()).then((data) => { + const editor = new richtext.Richtext("#root", { + value: data + }); + + // 将 someServerService 集成到 widget 的 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..a6587ab --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/destructor.md @@ -0,0 +1,28 @@ +--- +sidebar_label: destructor() +title: destructor 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 destructor 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# destructor() + +### 描述 + +@short: 移除 RichText 的所有 HTML 元素，并解绑所有相关事件 + +### 用法 + +~~~jsx {} +destructor(): void; +~~~ + +### 示例 + +~~~jsx {5-6} +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); + +// 移除 RichText +editor.destructor(); +~~~ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/get-value.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/get-value.md new file mode 100644 index 0000000..0f34866 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/get-value.md @@ -0,0 +1,43 @@ +--- +sidebar_label: getValue() +title: getValue 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 getValue 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# getValue() + +### 描述 + +@short: 返回 RichText 的值 + +### 用法 + +~~~jsx {} +getValue(encoder?: any): string; +~~~ + +### 参数 + +- `encoder` - （可选）用于将 RichText 内容编码为自定义格式的解析器。支持以下格式：`html`（默认）和 `text` + +您可以通过以下方式获取所需的编码器： + +```jsx +const toTextEncoder = richtext.text.toText; // text 编码器 +const toHTMLEncoder = richtext.html.toHTML; // html 编码器 +``` + +### 示例 + +~~~jsx {6-8} +const editor = new richtext.Richtext("#root", { + value: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." // 设置默认值（HTML 格式） + // 其他配置属性 +}); + +const toTextEncoder = richtext.text.toText; +const editor_value = editor.getValue(toTextEncoder); +console.log(editor_value); +~~~ + +**更新日志：** 该方法在 v2.0 中进行了更新。`mode` 参数已移除，新增了 `encoder` 参数 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-config.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-config.md new file mode 100644 index 0000000..e337de6 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-config.md @@ -0,0 +1,40 @@ +--- +sidebar_label: setConfig() +title: setConfig 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 setConfig 方法。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# setConfig() + +### 描述 + +@short: 将新的配置参数应用于 RichText + +### 用法 + +~~~jsx {} +setConfig(config: { [key:any]: any }): void; +~~~ + +### 参数 + +- `config` - （必填）RichText 配置参数对象。查看完整属性列表，请参阅[此处](api/overview/properties_overview.md) + +:::note +`setConfig()` 方法会保留所有之前设置的参数，这些参数不会因未在 `setConfig()` 方法调用中显式提供而被清除。 +::: + +### 示例 + +~~~jsx {6-8} +const editor = new richtext.Richtext("#root", { + value: "

Some text

", + // other configuration properties +}); + +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..b5594de --- /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 参考，尝试代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX RichText。 +--- + +# setLocale() + +### 描述 + +@short: 为 RichText 应用新的语言环境 + +### 用法 + +~~~jsx {} +setLocale(null | locale?: object): void; +~~~ + +### 参数 + +- `null` - （可选）重置为默认语言环境（*英语*） +- `locale` - （可选）要应用的新语言环境的数据对象 + +:::info +使用 `setLocale()` 方法为 RichText 应用新的语言环境。若要将 RichText 重置为默认语言环境，请不带参数（或传入 *null* 值）调用 `setLocale()` 方法。 +::: + +### 示例 + +~~~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..5992318 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/methods/set-value.md @@ -0,0 +1,44 @@ +--- +sidebar_label: setValue() +title: setValue 方法 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解 setValue 方法。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# setValue() + +### 描述 + +@short: 为 RichText 应用新值 + +### 用法 + +~~~jsx {} +setValue: (value: string, encoder?: any): void; +~~~ + +### 参数 + +- `value` - （必填）要插入到 RichText 中的值 +- `encoder` - （可选）用于将 RichText 内容编码为自定义格式的自定义解析器。支持以下格式：`html`（默认）和 `text` + +您可以通过以下方式获取所需的编码器： + +```jsx +const fromTextEncoder = richtext.text.fromText; // text encoder +const fromHTMLEncoder = richtext.html.fromHTML; // html encoder +``` + +### 示例 + +~~~jsx {7-8} +const editor = new richtext.Richtext("#root", { + // configuration properties +}); + +const editor_value = "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." + +const fromTextEncoder = richtext.text.fromText; +editor.setValue(editor_value, fromTextEncoder); +~~~ + +**变更日志：** 该方法在 v2.0 中进行了更新。`mode` 参数已移除，新增了 `encoder` 参数 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md new file mode 100644 index 0000000..1b6b9d4 --- /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 methods +title: Event Bus Methods +description: 您可以在 DHTMLX JavaScript RichText 库的文档中查看 JavaScript RichText 内部 Event Bus 方法概览。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 免费 30 天评估版本。 +--- + +# Event Bus 方法 + +本页面列出了 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..deb2bcd --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/events_overview.md @@ -0,0 +1,45 @@ +--- +sidebar_label: Events overview +title: Events Overview +description: 您可以在 DHTMLX JavaScript RichText 库的文档中查看 JavaScript RichText 的事件概览。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# 事件概览 + +本页列出了 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/import.md) | @getshort(api/events/import.md) | +| [](api/events/indent.md) | @getshort(api/events/indent.md) | +| [](api/events/insert-image.md) | @getshort(api/events/insert-image.md) | +| [](api/events/insert-line.md) | @getshort(api/events/insert-line.md) | +| [](api/events/insert-link.md) | @getshort(api/events/insert-link.md) | +| [](api/events/insert-list.md) | @getshort(api/events/insert-list.md) | +| [](api/events/outdent.md) | @getshort(api/events/outdent.md) | +| [](api/events/paste.md) | @getshort(api/events/paste.md) | +| [](api/events/print.md) | @getshort(api/events/print.md) | +| [](api/events/redo.md) | @getshort(api/events/redo.md) | +| [](api/events/resize-image.md) | @getshort(api/events/resize-image.md) | +| [](api/events/set-font-family.md) | @getshort(api/events/set-font-family.md) | +| [](api/events/set-font-size.md) | @getshort(api/events/set-font-size.md) | +| [](api/events/set-line-height.md) | @getshort(api/events/set-line-height.md) | +| [](api/events/set-text-color.md) | @getshort(api/events/set-text-color.md) | +| [](api/events/set-text-format.md) | @getshort(api/events/set-text-format.md) | +| [](api/events/set-text-style.md) | @getshort(api/events/set-text-style.md) | +| [](api/events/show-popup.md) | @getshort(api/events/show-popup.md) | +| [](api/events/subscript.md) | @getshort(api/events/subscript.md) | +| [](api/events/superscript.md) | @getshort(api/events/superscript.md) | +| [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md)| +| [](api/events/toggle-layout-mode.md) | @getshort(api/events/toggle-layout-mode.md) | +| [](api/events/toggle-shortcut-info.md) | @getshort(api/events/toggle-shortcut-info.md) | +| [](api/events/undo.md) | @getshort(api/events/undo.md) | +| [](api/events/update-link.md) | @getshort(api/events/update-link.md) | diff --git a/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..9aad282 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/main_overview.md @@ -0,0 +1,97 @@ +--- +sidebar_label: API 概览 +title: API 概览 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中查看 JavaScript RichText 的 API 概览。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# API 概览 + +## RichText 构造函数 + +~~~js +new richtext.RichText("#root", { + // 配置参数 +}); +~~~ + +**参数**： + +- HTML 容器（例如，CSS 选择器或 DOM 元素） +- 配置对象（[查看属性](api/overview/properties_overview.md)） + +## RichText 方法 + +| 名称 | 描述 | +| ----------------------------------------------|-------------------------------------------| +| [](api/methods/get-value.md) | @getshort(api/methods/get-value.md) | +| [](api/methods/set-value.md) | @getshort(api/methods/set-value.md) | +| [](api/methods/set-config.md) | @getshort(api/methods/set-config.md) | +| [](api/methods/set-locale.md) | @getshort(api/methods/set-locale.md) | +| [](api/methods/destructor.md) | @getshort(api/methods/destructor.md) | + +## Event Bus 方法 + +| 名称 | 描述 | +| ----------------------------------------------|-------------------------------------------| +| [](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) | + +## 状态方法 + +| 名称 | 描述 | +| ----------------------------------------------|-------------------------------------------| +| [](api/internal/get-state.md) | @getshort(api/internal/get-state.md) | +| [](api/internal/get-reactive-state.md) | @getshort(api/internal/get-reactive-state.md) | + +## 事件 + +| 名称 | 描述 | +| ----------------------------------------------|-------------------------------------------| +| [](api/events/align.md) | @getshort(api/events/align.md) | +| [](api/events/clear-text-format.md) | @getshort(api/events/clear-text-format.md) | +| [](api/events/copy.md) | @getshort(api/events/copy.md) | +| [](api/events/create-new.md) | @getshort(api/events/create-new.md) | +| [](api/events/cut.md) | @getshort(api/events/cut.md) | +| [](api/events/delete-link.md) | @getshort(api/events/delete-link.md) | +| [](api/events/export.md) | @getshort(api/events/export.md) | +| [](api/events/import.md) | @getshort(api/events/import.md) | +| [](api/events/indent.md) | @getshort(api/events/indent.md) | +| [](api/events/insert-image.md) | @getshort(api/events/insert-image.md) | +| [](api/events/insert-line.md) | @getshort(api/events/insert-line.md) | +| [](api/events/insert-link.md) | @getshort(api/events/insert-link.md) | +| [](api/events/insert-list.md) | @getshort(api/events/insert-list.md) | +| [](api/events/outdent.md) | @getshort(api/events/outdent.md) | +| [](api/events/paste.md) | @getshort(api/events/paste.md) | +| [](api/events/print.md) | @getshort(api/events/print.md) | +| [](api/events/redo.md) | @getshort(api/events/redo.md) | +| [](api/events/resize-image.md) | @getshort(api/events/resize-image.md) | +| [](api/events/set-font-family.md) | @getshort(api/events/set-font-family.md) | +| [](api/events/set-font-size.md) | @getshort(api/events/set-font-size.md) | +| [](api/events/set-line-height.md) | @getshort(api/events/set-line-height.md) | +| [](api/events/set-text-color.md) | @getshort(api/events/set-text-color.md) | +| [](api/events/set-text-format.md) | @getshort(api/events/set-text-format.md) | +| [](api/events/set-text-style.md) | @getshort(api/events/set-text-style.md) | +| [](api/events/show-popup.md) | @getshort(api/events/show-popup.md) | +| [](api/events/subscript.md) | @getshort(api/events/subscript.md) | +| [](api/events/superscript.md) | @getshort(api/events/superscript.md) | +| [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md) | +| [](api/events/toggle-layout-mode.md) | @getshort(api/events/toggle-layout-mode.md) | +| [](api/events/toggle-shortcut-info.md) | @getshort(api/events/toggle-shortcut-info.md) | +| [](api/events/undo.md) | @getshort(api/events/undo.md) | +| [](api/events/update-link.md) | @getshort(api/events/update-link.md) | + +## 属性 + +| 名称 | 描述 | +| ----------------------------------------------|-------------------------------------------| +| [](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..2cc5c22 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md @@ -0,0 +1,18 @@ +--- +sidebar_label: 方法概览 +title: 方法概览 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中查看 JavaScript RichText 的方法概览。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。 +--- + +# 方法概览 + +本页面提供 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/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..2a5107e --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md @@ -0,0 +1,21 @@ +--- +sidebar_label: 属性概览 +title: 属性概览 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中查看 JavaScript RichText 的属性概览。浏览开发者指南和 API 参考，试用代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。 +--- + +# 属性概览 + +本页列出了初始化 DHTMLX RichText 编辑器时可使用的所有配置属性。 +这些属性可帮助您控制编辑器的布局、工具栏、值、本地化及其他方面。 + +| 名称 | 描述 | +| --------------------------------------------------------|----------------------------------------------| +| [](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/state_methods_overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md new file mode 100644 index 0000000..e8333d3 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md @@ -0,0 +1,15 @@ +--- +sidebar_label: State methods +title: State Methods +description: 您可以在 DHTMLX JavaScript RichText 库的文档中查看 JavaScript RichText 内部状态方法概览。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# 状态方法 + +本页列出了用于访问和操作 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/assets/richtext/classic_mode.png b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png new file mode 100644 index 0000000..baeb296 Binary files /dev/null and b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png differ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png new file mode 100644 index 0000000..bf4312c Binary files /dev/null and b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png differ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/editor.png b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/editor.png new file mode 100644 index 0000000..f9213b2 Binary files /dev/null and b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/editor.png differ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png new file mode 100644 index 0000000..f9213b2 Binary files /dev/null and b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png differ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png new file mode 100644 index 0000000..e6d70b9 Binary files /dev/null and b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png differ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png new file mode 100644 index 0000000..8b207e6 Binary files /dev/null and b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png differ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png new file mode 100644 index 0000000..c62be84 Binary files /dev/null and b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png differ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png new file mode 100644 index 0000000..07410f7 Binary files /dev/null and b/i18n/zh/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png differ diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/assets/trial_richtext.png b/i18n/zh/docusaurus-plugin-content-docs/current/assets/trial_richtext.png new file mode 100644 index 0000000..cdee98c Binary files /dev/null and b/i18n/zh/docusaurus-plugin-content-docs/current/assets/trial_richtext.png differ 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..f111fd0 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/configuration.md @@ -0,0 +1,347 @@ +--- +sidebar_label: 配置 +title: 配置 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解有关配置的信息。浏览开发者指南和 API 参考，尝试代码示例和在线演示，并下载 DHTMLX RichText 的免费 30 天评估版本。 +--- + +# 配置 + +您可以使用以下属性配置 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) — 设置图片上传的端点 + +## 布局模式 + +RichText 支持两种编辑区域布局模式： + +- **"classic"** — 编辑区域填充整个页面 + +
+![Classic mode](./../assets/richtext/classic_mode.png) +
+ +- **"document"** — 编辑区域模拟文档页面 + +
+![Document mode](./../assets/richtext/document_mode.png) +
+ +在初始化时设置 [`layoutMode`](api/config/layout-mode.md) 属性以选择模式： + +~~~jsx +const editor = new richtext.Richtext("#root", { + layoutMode: "document" +}); +~~~ + +## 工具栏 + +RichText 工具栏将控件分组到多个块中，您可以对其进行自定义。 + +### 默认工具栏控件 + +您可以在 RichText 工具栏中包含以下按钮和控件： + +| 按钮 | 说明 | +|---------------------|-----------------------------------------------------------------------------| +| `undo` | 撤销最近的用户操作 | +| `redo` | 重做之前撤销的操作 | +| `style` | 选择文本样式（例如标题、段落、块引用） | +| `font-family` | 更改所选文本的字体 | +| `font-size` | 调整所选文本的大小 | +| `bold` | 对所选文本应用粗体格式 | +| `italic` | 对所选文本应用斜体格式 | +| `underline` | 为所选文本添加下划线 | +| `strike` | 应用删除线格式 | +| `subscript` | 将文本格式化为下标 | +| `superscript` | 将文本格式化为上标 | +| `text-color` | 更改文本颜色 | +| `background-color` | 更改文本的背景（高亮）颜色 | +| `align` | 设置文本对齐方式（左对齐、居中、右对齐、两端对齐） | +| `indent` | 增加段落缩进 | +| `outdent` | 减少段落缩进 | +| `line-height` | 调整行间距（行高） | +| `quote` | 将文本格式化为块引用 | +| `bulleted-list` | 创建项目符号列表 | +| `numbered-list` | 创建编号列表 | +| `link` | 插入或编辑超链接 | +| `image` | 插入图片 | +| `line` | 插入水平线 | +| `clear` | 移除所选文本的所有格式 | +| `print` | 打开打印对话框 | +| `fullscreen` | 切换全屏模式 | +| `mode` | 在两种布局模式之间切换：`classic` 和 `document` | +| `shortcuts` | 显示可用键盘快捷键列表 | +| `separator` | 在控件之间添加视觉分隔符 | + +使用 [`toolbar`](api/config/toolbar.md) 属性将工具栏定义为控件名称字符串数组： + +~~~jsx {2-36} +new richtext.Richtext("#root", { + toolbar: [ + "undo", + "redo", + "separator", + "style", + "separator", + "font-family", + "font-size", + "separator", + "bold", + "italic", + "underline", + "strike", + "separator", + "text-color", + "background-color", + "separator", + "align", + "line-height", + "outdent", + "indent", + "separator", + "bulleted-list", + "numbered-list", + "quote", + "separator", + "link", + "image", + "separator", + "clear", + "separator", + "fullscreen", + "mode" + // 其他按钮 + ], + // 其他配置属性 +}); +~~~ + +**相关示例：** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### 添加自定义工具栏控件 + +向 [`toolbar`](api/config/toolbar.md) 数组传递一个包含以下字段之一的对象： + +- `type: 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: "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. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### 隐藏工具栏 + +将 [`toolbar`](api/config/toolbar.md) 属性设置为 `false` 以隐藏工具栏： + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false, + // 其他配置属性 +}); +~~~ + +## 显示菜单栏 + +启用 [`menubar`](api/config/menubar.md) 属性以在工具栏上方渲染顶部菜单栏。默认值为 `false`。 + +~~~jsx {2} +new richtext.Richtext("#root", { + menubar: true + // 其他配置属性 +}); +~~~ + +## 设置初始内容 + +使用 [`value`](api/config/value.md) 属性在初始化时向编辑器传入初始 HTML 内容： + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" + // 其他配置属性 +}); +~~~ + +若要在初始化后替换内容，或使用自定义编码器以非 HTML 格式加载内容，请调用 [`setValue()`](api/methods/set-value.md) 方法。 + +## 设置初始语言环境 + +使用 [`locale`](api/config/locale.md) 属性在初始化时应用本地化对象： + +~~~jsx {2} +new richtext.Richtext("#root", { + locale: richtext.locales.cn + // 其他配置属性 +}); +~~~ + +有关详情及使用 [`setLocale()`](api/methods/set-locale.md) 动态切换语言环境的说明，请参阅[本地化](guides/localization.md)指南。 + +## 以全屏模式启动 + +将 [`fullscreenMode`](api/config/fullscreen-mode.md) 属性设置为 `true`，以在初始化时以全屏模式打开编辑器。默认值为 `false`。 + +~~~jsx {2} +new richtext.Richtext("#root", { + fullscreenMode: true + // 其他配置属性 +}); +~~~ + +## 配置图片上传 URL + +向 [`imageUploadUrl`](api/config/image-upload-url.md) 属性传递 URL，以设置工具栏图片上传的服务器端点： + +~~~jsx {2} +new richtext.Richtext("#root", { + imageUploadUrl: "https://example.com/upload" + // 其他配置属性 +}); +~~~ + +## 配置默认样式 + +使用 [`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. Changing the default value for typography (font, font size, etc.)](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..421e4b7 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/initialization.md @@ -0,0 +1,78 @@ +--- +sidebar_label: 初始化 +title: 初始化 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解初始化的相关内容。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX RichText。 +--- + +# 初始化 + +本指南介绍如何将 RichText 添加到页面。请按照以下步骤获取可用的编辑器： + +1. [在页面中引入源文件](#include-the-source-files)。 +2. [为 RichText 创建容器](#create-a-container)。 +3. [初始化 RichText](#initialize-richtext)。 + +## 引入源文件 + +将 RichText 的 JavaScript 和 CSS 文件添加到您的项目中。[下载安装包](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml)并将内容解压到您的项目文件夹中。 + +创建 RichText 需要在页面中引入以下两个源文件： + +- *richtext.js* +- *richtext.css* + +在 HTML 中引用这些文件。请根据实际的文件夹结构调整相对路径： + +~~~html title="index.html" + + +~~~ + +## 创建容器 + +为 RichText 添加一个带有 ID（如 *"root"*）的容器： + +~~~jsx title="index.html" +
+~~~ + +## 初始化 RichText + +使用 `richtext.Richtext` 构造函数初始化 RichText。该构造函数接受两个参数： + +- 容器 — CSS 选择器或 DOM 元素 +- 包含编辑器属性的配置对象。请参阅下方的[完整属性列表](#configuration-properties) + +以下示例在 `#root` 容器中初始化 RichText： + +~~~jsx title="index.html" +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); +~~~ + +### 配置属性 + +将配置选项作为配置对象的键值对添加。 + +:::note +有关完整的配置属性列表，请参阅 [属性概览](api/overview/properties_overview.md)。 +::: + +## 销毁 RichText 实例 + +调用 [`destructor()`](api/methods/destructor.md) 方法以移除 RichText 的 HTML 并解绑所有相关事件： + +~~~jsx +const editor = new richtext.Richtext("#root", { + // 配置属性 +}); + +editor.destructor(); +~~~ + +## 示例 + +以下示例在启用菜单栏的情况下初始化 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..89090d6 --- /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 集成 + +:::tip +请确保您熟悉 Angular 的基本概念和模式。如需复习，请参阅 [Angular 文档](https://v17.angular.io/docs)。 +::: + +DHTMLX RichText 支持与 Angular 配合使用。完整的代码示例请参见 [GitHub 演示](https://github.com/DHTMLX/angular-richtext-demo)。 + +## 创建项目 + +:::info +在创建新项目之前，请先安装 [Angular CLI](https://v17.angular.io/cli) 和 [Node.js](https://nodejs.org/en/)。 +::: + +使用 Angular CLI 创建一个新的 *my-angular-richtext-app* 项目： + +~~~bash +ng new my-angular-richtext-app +~~~ + +:::note +在项目创建过程中，当 Angular CLI 提示时，请禁用服务端渲染（SSR）和静态站点生成（SSG/预渲染）。 +::: + +该命令将安装所有必要的工具，无需额外命令。 + +### 安装依赖 + +切换到新应用目录： + +~~~bash +cd my-angular-richtext-app +~~~ + +使用 [yarn](https://yarnpkg.com/) 包管理器安装依赖并启动开发服务器： + +~~~bash +yarn +yarn start +~~~ + +应用将在 localhost 上运行（例如 `http://localhost:3000`）。 + +## 创建 RichText + +停止应用并安装 RichText 包。 + +### 第 1 步：安装包 + +下载 [试用版 RichText 包](/how_to_start/#installing-richtext-via-npm-or-yarn) 并按照 README 文件中的步骤操作。试用许可证有效期为 30 天。 + +### 第 2 步：创建组件 + +创建一个 Angular 组件以将 RichText 添加到应用程序中。在 *src/app/* 目录下，创建 *richtext* 文件夹并添加一个名为 *richtext.component.ts* 的新文件。 + +#### 导入源文件 + +打开 *richtext.component.ts* 并导入 RichText 源文件。 + +对于从本地文件夹安装的 PRO 版本，请使用： + +~~~jsx +import { Richtext } from 'dhx-richtext-package'; +~~~ + +对于试用版本，请使用： + +~~~jsx +import { Richtext } from '@dhx/trial-richtext'; +~~~ + +本教程使用 RichText 的试用版本。 + +#### 设置容器并初始化 RichText + +为 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 + } +} +~~~ + +#### 添加样式 + +在 *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 */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### 加载数据 + +为 RichText 提供数据。在 *src/app/richtext/* 目录下创建 *data.ts* 文件： + +~~~jsx {} title="data.ts" +export function getData() { + const value = ` +

RichText 2.0

+

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

+

`; + return { value }; +} +~~~ + +打开 *richtext.component.ts*，导入数据并在 `ngOnInit()` 中将 `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)。 + +#### 处理事件 + +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 添加到应用 + +打开 *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 在页面上渲染并显示数据。 + +
+![RichText initialization](../assets/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..1aad1da --- /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 集成 + +:::tip +请确保您已熟悉 [React](https://react.dev) 的基本概念和模式。如需复习，请参阅 [React 文档](https://react.dev/learn)。 +::: + +DHTMLX RichText 支持与 React 配合使用。完整代码示例请参见 [GitHub 演示](https://github.com/DHTMLX/react-richtext-demo)。 + +## 创建项目 + +:::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 +~~~ + +### 安装依赖 + +切换到新应用目录： + +~~~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 + +停止应用并安装 RichText 包。 + +### 步骤 1. 安装包 + +下载 [RichText 试用包](/how_to_start/#installing-richtext-via-npm-or-yarn) 并按照 README 文件中的步骤操作。试用许可证有效期为 30 天。 + +### 步骤 2. 创建组件 + +创建一个 React 组件，将 RichText 添加到应用中。在 *src/* 目录下新建一个名为 *Richtext.jsx* 的文件。 + +#### 导入源文件 + +打开 *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 + +为 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
+
+
+} +~~~ + +#### 添加样式 + +将 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 */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### 加载数据 + +为 RichText 提供数据。在 *src/* 目录下创建 *data.js* 文件： + +~~~jsx {} title="data.js" +export function getData() { + const value = ` +

RichText 2.0

+

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

+

`; + return { value }; +} +~~~ + +打开 *App.js* 并导入数据。将 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, // 应用 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)。 + +#### 处理事件 + +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 在页面上渲染并显示数据。 + +
+![RichText initialization](../assets/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..64683dc --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md @@ -0,0 +1,267 @@ +--- +sidebar_label: 与 Svelte 集成 +title: 与 Svelte 集成 +description: 您可以在 DHTMLX JavaScript RichText 库的文档中了解与 Svelte 的集成方式。浏览开发者指南和 API 参考，查看代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费试用版本。 +--- + +# 与 Svelte 集成 + +:::tip +请确保您已熟悉 [Svelte](https://svelte.dev/) 的基本概念和模式。如需复习，请参阅 [Svelte 文档](https://svelte.dev/docs)。 +::: + +DHTMLX RichText 支持与 Svelte 配合使用。完整的代码示例请参见 [GitHub 演示](https://github.com/DHTMLX/svelte-richtext-demo)。 + +## 创建项目 + +:::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 +~~~ + +### 安装依赖 + +当脚手架工具提示输入项目名称时，使用 *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 + +停止应用并安装 RichText 包。 + +### 第 1 步. 安装包 + +下载 [试用版 RichText 包](/how_to_start/#installing-richtext-via-npm-or-yarn) 并按照 README 文件中的步骤操作。试用许可证有效期为 30 天。 + +### 第 2 步. 创建组件 + +创建一个 Svelte 组件以将 RichText 添加到应用中。在 *src/* 目录下，创建一个名为 *Richtext.svelte* 的新文件。 + +#### 导入源文件 + +打开 *Richtext.svelte* 并导入 RichText 源文件。 + +对于从本地文件夹安装的 PRO 版本，使用： + +~~~html title="Richtext.svelte" + +~~~ + +对于试用版，使用： + +~~~html title="Richtext.svelte" + +~~~ + +本教程使用 RichText 的试用版本。 + +#### 设置容器并初始化 RichText + +为 RichText 设置容器元素，并在 `onMount()` 内部初始化组件。在 `onDestroy()` 内部调用 [`destructor()`](api/methods/destructor.md) 方法以移除 RichText： + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +#### 添加样式 + +将 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 */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### 加载数据 + +为 RichText 提供数据。在 *src/* 目录下创建 *data.js* 文件： + +~~~jsx {} title="data.js" +export function getData() { + const value = ` +

RichText 2.0

+

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

+

`; + return { value }; +} +~~~ + +打开 *App.svelte*，导入数据，并将值作为 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)。 + +#### 处理事件 + +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 在页面上渲染数据的效果。 + +
+![RichText initialization](../assets/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..60c49b2 --- /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 参考，查看代码示例和在线演示，并下载免费的 30 天评估版 DHTMLX RichText。 +--- + +# 与 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)。 + +## 创建项目 + +:::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)。 + +### 安装依赖 + +切换到应用目录： + +~~~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 + +停止应用并安装 RichText 包。 + +### 第 1 步：安装包 + +下载 [RichText 试用包](/how_to_start/#installing-richtext-via-npm-or-yarn) 并按照 README 文件中的步骤操作。试用许可证有效期为 30 天。 + +### 第 2 步：创建组件 + +创建一个 Vue 组件以将 RichText 添加到应用中。在 *src/components/* 目录下，创建一个名为 *Richtext.vue* 的新文件。 + +#### 导入源文件 + +打开 *Richtext.vue* 并导入 RichText 源文件。 + +对于从本地文件夹安装的 PRO 版本，使用： + +~~~html title="Richtext.vue" + +~~~ + +对于试用版本，使用： + +~~~html title="Richtext.vue" + +~~~ + +本教程使用 RichText 的试用版本。 + +#### 设置容器并初始化 RichText + +为 RichText 设置容器元素，并在 `mounted()` 中使用 `Richtext` 构造函数初始化组件。在 `unmounted()` 中调用 [`destructor()`](api/methods/destructor.md) 方法以移除 RichText： + +~~~html {} title="Richtext.vue" + + + +~~~ + +#### 添加样式 + +将 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 */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### 加载数据 + +为 RichText 提供数据。在 *src/* 目录中创建 *data.js* 文件： + +~~~jsx {} title="data.js" +export function getData() { + const value = ` +

RichText 2.0

+

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

+

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

Hello

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

Hello

", fromHTMLEncoder); +editor.getValue(toTextEncoder); +``` + +:::note +您仍然可以不传入编码器直接调用 `getValue()` 和 `setValue()`——默认情况下使用 HTML 格式 +::: + +### - [`on`](api/internal/on.md) / [`detach`](api/internal/detach.md) + +```jsx title="Before 2.0" +editor.events.on("Change", function(action, canUndo, canRedo){ + // your code here +}); + +editor.events.detach("Change"); +``` + +```jsx title="From 2.0" +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}, { tag: "track" }); + +editor.api.detach("track"); +``` + +### - `fire()` → 使用 [`exec()`](api/internal/exec.md) 和 [`intercept()`](api/internal/intercept.md) + +```jsx title="Before 2.0" +editor.events.fire("some-event", [data]); +``` + +```jsx title="From 2.0" +editor.api.exec("some-event", obj); + +// Preventing execution +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..aefd4ac --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/news/whats_new.md @@ -0,0 +1,192 @@ +--- +sidebar_label: 最新动态 +title: 最新动态 +description: 您可以在 DHTMLX JavaScript UI 库文档中了解 DHTMLX RichText 的最新功能及发布历史。浏览开发者指南和 API 参考，体验代码示例和在线演示，并下载 DHTMLX RichText 的 30 天免费评估版本。 +--- + +## 版本 2.0.5 + +发布于 2026 年 3 月 6 日 + +### 修复 + +- IME 输入未被正确处理 +- 基于组合输入法的输入（例如，桌面端的中文、日文、韩文）未被正确处理 +- 解析 HTML 时忽略了 `margin-left` 和 `line-height` 属性 +- 行内元素从块级父元素继承属性 +- 无法在两个编辑器实例之间复制文本 +- 两个（或多个）编辑器实例激活时选区处理不正确 +- 段落中仅有图片时光标定位不正确 +- 下标和上标元素无限嵌套 +- 粘贴图片时直接内联而非先上传 +- 在特定位置（首行或末行）无法删除空行内块 +- 输入时编辑器不会滚动至光标位置 +- Android 上的输入未被正确处理 +- HR 元素的选区处理不正确 +- 初始值为空时渲染不正确 +- 如果内容包含自闭合块，复制内容可能失败 +- Chrome：无法通过右键菜单插入表情符号 +- Firefox：全选（CTRL+A）未被正确处理 + +## 版本 2.0.4 + +发布于 2025 年 10 月 15 日 + +### 修复 + +- 段落的范围选区不正确 +- 链接弹出窗口在与链接图片相邻时不显示 +- 工具栏初始值与实际内容不匹配 + +## 版本 2.0.3 + +发布于 2025 年 8 月 27 日 + +### 修复 + +- 点击水平线导致脚本错误 +- 默认行高不正确 +- 内容样式包含重复的选择器 +- 解析 HTML 时纯文本块忽略样式更改 +- 解析器忽略 HTML 中转义的字体名称 +- 解析器忽略 HTML 中的 `margin-left` 和 `line-height` 属性 + +## 版本 2.0.2 + +发布于 2025 年 8 月 4 日 + +### 修复 + +- 更新了软件包内容 + +## 版本 2.0.1 + +发布于 2025 年 7 月 30 日 + +### 修复 + +- 更新 `defaultStyles` 属性的类型定义 + +## 版本 2.0 + +发布于 2025 年 7 月 30 日 + +:::note +v1.2 的 API 与 v2.0 不兼容。请参阅[**迁移指南**](news/migration.md)了解更多信息。 +::: + +### 新功能 + +- **新一代文本渲染** + 通过全新引擎体验更流畅、更快速、更精准的文本渲染 + +- **精细化工具栏配置** + 全面掌控工具栏： + - 定义[单个工具栏控件](guides/configuration.md#default-toolbar-controls)及其顺序 + - 添加[自定义控件](guides/configuration.md#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 + +#### 新属性 + +- [`fullscreenMode`](api/config/fullscreen-mode.md) +- [`imageUploadUrl`](api/config/image-upload-url.md) +- [`layoutMode`](api/config/layout-mode.md) +- [`locale`](api/config/locale.md) +- [`menubar`](api/config/menubar.md) +- [`toolbar`](api/config/toolbar.md) +- [`value`](api/config/value.md) + +#### 新方法 + +- [`setConfig()`](api/methods/set-config.md) — 动态更新配置 +- [`setLocale()`](api/methods/set-locale.md) — 即时切换语言环境 + +#### 新内部方法 + +- [`api.exec()`](api/internal/exec.md) +- [`api.intercept()`](api/internal/intercept.md) +- [`api.getReactiveState()`](api/internal/get-reactive-state.md) +- [`api.getState()`](api/internal/get-state.md) + +#### 新事件 + +完整的新事件列表请参见[此处](api/overview/events_overview.md) + +### 更新的 API + +#### 更新的属性 + +- [`defaultStyles`](api/config/default-styles.md) + +#### 更新的方法 + +- [`setValue()`](api/methods/set-value.md) +- [`getValue()`](api/methods/get-value.md) + +#### 更新的内部方法 + +- [`api.detach()`](api/internal/detach.md) +- [`api.on()`](api/internal/on.md) + +## 已移除的 API + +:::warning +请勿在项目中使用已移除的 API！
请参阅[迁移](news/migration.md)主题了解更多信息。 +::: + +### [已移除的属性](news/migration.md#properties-migration) + +- [`customStats`](news/migration.md#--customstats) +- [`mode`](news/migration.md#--mode--layoutmode) +- [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar) + +### [已移除的方法](news/migration.md#methods-migration) + +- `exitFullScreen()` +- `fullScreen()` +- `getEditorAPI()` +- `getStats()` +- `paint()` + +### 已移除的内部方法 + +- [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept) + +### 已移除的事件 + +- `Action` +- `Change` +- `selectionChange` +- `selectionRefresh` diff --git a/i18n/zh/docusaurus-theme-classic/footer.json b/i18n/zh/docusaurus-theme-classic/footer.json new file mode 100644 index 0000000..cb5c883 --- /dev/null +++ b/i18n/zh/docusaurus-theme-classic/footer.json @@ -0,0 +1,62 @@ +{ + "link.title.Development center": { + "message": "Development center", + "description": "The title of the footer links column with title=Development center in the footer" + }, + "link.title.Community": { + "message": "Community", + "description": "The title of the footer links column with title=Community in the footer" + }, + "link.title.Company": { + "message": "Company", + "description": "The title of the footer links column with title=Company in the footer" + }, + "link.item.label.Download RichText": { + "message": "Download RichText", + "description": "The label of footer link with label=Download RichText linking to https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml" + }, + "link.item.label.Examples": { + "message": "Examples", + "description": "The label of footer link with label=Examples linking to https://snippet.dhtmlx.com/t55alxiy?tag=richtext" + }, + "link.item.label.Blog": { + "message": "Blog", + "description": "The label of footer link with label=Blog linking to https://dhtmlx.com/blog/tag/richtext/" + }, + "link.item.label.Forum": { + "message": "Forum", + "description": "The label of footer link with label=Forum linking to https://forum.dhtmlx.com/c/richtext/" + }, + "link.item.label.GitHub": { + "message": "GitHub", + "description": "The label of footer link with label=GitHub linking to https://github.com/DHTMLX" + }, + "link.item.label.Youtube": { + "message": "Youtube", + "description": "The label of footer link with label=Youtube linking to https://www.youtube.com/user/dhtmlx" + }, + "link.item.label.Facebook": { + "message": "Facebook", + "description": "The label of footer link with label=Facebook linking to https://www.facebook.com/dhtmlx" + }, + "link.item.label.Twitter": { + "message": "Twitter", + "description": "The label of footer link with label=Twitter linking to https://twitter.com/dhtmlx" + }, + "link.item.label.Linkedin": { + "message": "Linkedin", + "description": "The label of footer link with label=Linkedin linking to https://www.linkedin.com/groups/3345009/" + }, + "link.item.label.About us": { + "message": "About us", + "description": "The label of footer link with label=About us linking to https://dhtmlx.com/docs/company.shtml" + }, + "link.item.label.Contact us": { + "message": "Contact us", + "description": "The label of footer link with label=Contact us linking to https://dhtmlx.com/docs/contact.shtml" + }, + "link.item.label.Licensing": { + "message": "Licensing", + "description": "The label of footer link with label=Licensing linking to https://dhtmlx.com/docs/products/dhtmlxRichText/#editions-licenses" + } +} diff --git a/i18n/zh/docusaurus-theme-classic/navbar.json b/i18n/zh/docusaurus-theme-classic/navbar.json new file mode 100644 index 0000000..2a451d8 --- /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": "Forum", + "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" + } +}