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-plugin-content-docs/current/.sync b/i18n/ko/docusaurus-plugin-content-docs/current/.sync new file mode 100644 index 0000000..c85ca3b --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/.sync @@ -0,0 +1 @@ +56e22a8e0f5fe2ac284a517ef51ec186ef9aa68c diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/default-styles.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/default-styles.md new file mode 100644 index 0000000..df4b02c --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/default-styles.md @@ -0,0 +1,144 @@ +--- +sidebar_label: defaultStyles +title: defaultStyles 설정 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 defaultStyles 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시험해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# defaultStyles + +### 설명 + +@short: 선택 사항. 특정 블록 유형에 대한 기본 스타일 값을 지정합니다 + +### 사용법 + +~~~jsx {} +defaultStyles?: { + "*"?: { // 모든 블록에 영향을 미치며, 모든 블록에 공통 속성을 설정할 수 있습니다 + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + p?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + blockquote?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h1?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h2?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h3?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h4?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h5?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + }, + h6?: { + "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana" + "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px" + color?: string; + background?: string; + } +}; +~~~ + +:::important[중요] +`defaultStyles` 속성은 영향을 받는 블록에 실제 CSS를 설정하지 않습니다. CSS 스타일은 별도로 적용해야 합니다: + +```jsx title="index.js" +new richtext.Richtext("#root", { + defaultStyles: { + h2: { + "font-family": "Roboto", + "font-size": "28px", + color: "purple", + background: "#FFC0CB" + } + } +}); +``` + +```css title="index.css" + +``` + +이 예제에서는 모든 `h2` 블록에 `"Roboto"` font-family와 28px의 font-size가 적용되며, 전경색과 배경색도 함께 변경됩니다. 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/ko/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md new file mode 100644 index 0000000..eaa1202 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/fullscreen-mode.md @@ -0,0 +1,39 @@ +--- +sidebar_label: fullscreenMode +title: fullscreenMode 설정 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 fullscreenMode 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시험해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# fullscreenMode + +### 설명 + +@short: 선택 사항. RichText의 전체 화면 모드를 활성화합니다 + +### 사용법 + +~~~jsx {} +fullscreenMode?: boolean; +~~~ + +### 기본 설정 + +~~~jsx +fullscreenMode: false; +~~~ + +### 예제 + +~~~jsx {3} +// RichText 초기화 +new richtext.Richtext("#root", { + fullscreenMode: true + // 기타 설정 속성 +}); +~~~ + +**변경 이력:** 이 속성은 v2.0에서 추가되었습니다 + +**관련 문서:** [설정](guides/configuration.md) + +**관련 샘플:** [RichText. 전체 툴바](https://snippet.dhtmlx.com/ziynafp7?tag=richtext) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md new file mode 100644 index 0000000..746eca0 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/image-upload-url.md @@ -0,0 +1,33 @@ +--- +sidebar_label: imageUploadUrl +title: imageUploadUrl 설정 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 imageUploadUrl 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시험해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# imageUploadUrl + +### 설명 + +@short: 선택 사항. 이미지 업로드에 사용될 URL을 지정합니다 + +### 사용법 + +~~~jsx {} +imageUploadUrl?: string; +~~~ + +### 예제 + +~~~jsx {3} +// RichText 초기화 +new richtext.Richtext("#root", { + imageUploadUrl: "some URL" + // 기타 설정 속성 +}); +~~~ + +**변경 이력:** 이 속성은 v2.0에서 추가되었습니다 + +**관련 문서:** [설정](guides/configuration.md) + +**관련 샘플:** [RichText. 초기화](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/layout-mode.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/layout-mode.md new file mode 100644 index 0000000..b1aced4 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/layout-mode.md @@ -0,0 +1,41 @@ +--- +sidebar_label: layoutMode +title: layoutMode 설정 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 layoutMode 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시험해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# layoutMode + +### 설명 + +@short: 선택 사항. 메인 에디터 영역의 레이아웃 모드를 지정합니다 + +### 사용법 + +~~~jsx {} +layoutMode: "classic" | "document"; +~~~ + +`"classic"` 모드는 전체 편집 영역을 채웁니다. `"document"` 모드는 편집 영역을 문서 페이지 형태로 표시합니다. + +### 기본 설정 + +~~~jsx +layoutMode: "classic"; +~~~ + +### 예제 + +~~~jsx {3} +// RichText 초기화 +new richtext.Richtext("#root", { + layoutMode: "document" // 기본적으로 "document" 모드로 RichText를 초기화합니다 + // 기타 설정 속성 +}); +~~~ + +**변경 이력:** 이 속성은 제거된 `mode` 속성 대신 v2.0에서 추가되었습니다 + +**관련 문서:** [설정](guides/configuration.md) + +**관련 샘플:** [RichText. 초기화](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/locale.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/locale.md new file mode 100644 index 0000000..0dad551 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/locale.md @@ -0,0 +1,47 @@ +--- +sidebar_label: locale +title: locale 설정 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 locale 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시험해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# locale + +### 설명 + +@short: 선택 사항. RichText의 현지화 레이블을 포함하는 객체입니다 + +:::info[정보] +**locale** 객체는 RichText의 모든 레이블과 그에 해당하는 번역을 포함해야 합니다. +::: + +### 사용법 + +~~~jsx {} +locale?: object; +~~~ + +### 기본 설정 + +기본적으로 RichText는 **영어** 로캘을 사용합니다. 커스텀 로캘로 설정할 수도 있습니다. + +:::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/ko/docusaurus-plugin-content-docs/current/api/config/menubar.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/menubar.md new file mode 100644 index 0000000..3ee1a10 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/menubar.md @@ -0,0 +1,33 @@ +--- +sidebar_label: menubar +title: menubar 설정 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 menubar 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시험해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# menubar + +### 설명 + +@short: 선택 사항. RichText의 상단 메뉴바를 활성화합니다 + +### 사용법 + +~~~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/ko/docusaurus-plugin-content-docs/current/api/config/toolbar.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/toolbar.md new file mode 100644 index 0000000..ab9b4cb --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/toolbar.md @@ -0,0 +1,219 @@ +--- +sidebar_label: toolbar +title: toolbar 설정 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 toolbar 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시험해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# toolbar + +### 설명 + +@short: 선택 사항. 툴바를 활성화하고 사용자가 툴바에 표시되는 버튼을 지정/설정할 수 있도록 합니다 + +### 사용법 + +~~~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)(classic/document) 간에 전환합니다 | +| `shortcuts` | 사용 가능한 키보드 단축키 목록을 표시합니다. | +| `separator` | 툴바 그룹 사이에 시각적 구분자를 추가합니다. | + +다음과 같이 이러한 문자열을 사용하여 툴바 버튼을 설정할 수 있습니다: + +~~~jsx {2-7} +new richtext.Richtext("#root", { + toolbar: [ + "bold", + "italic", + "separator", + // 기타 버튼 + ], + // 기타 설정 속성 +}); +~~~ + +#### 툴바의 커스텀 버튼 + +다음 파라미터를 가진 객체로 커스텀 버튼을 지정할 수 있습니다: + +- `type` - (필수) 커스텀 컨트롤 유형을 지정합니다. 사용 가능한 유형은 다음과 같습니다: `"button"`, `"richselect"`, `"colorpicker"` +- `id` - (선택) 커스텀 컨트롤 ID (기존 컨트롤 ID와 중복될 수 없음) +- `label` - (선택) 버튼 레이블 (아이콘과 결합됨) +- `tooltip` - (선택) 마우스를 올렸을 때 표시되는 툴팁 (지정하지 않으면 "label" 값을 사용) +- `css` - (선택) 컨트롤에 할당되는 CSS 클래스 이름 (기본 지원 클래스: wx-primary, wx-secondary) +- `handler` - (선택) 버튼을 클릭했을 때 실행되는 콜백 함수 + +~~~jsx {6-32} +new richtext.Richtext("#root", { + toolbar: [ + // 버튼 (문자열은 버튼만 나타냄) + "bold", + "italic", + // 사전 정의된 버튼 (사용자가 다른 옵션(레이블, 툴팁, 옵션 등)을 정의할 수 없으므로, ({ type: "button", id: string })만 사용) + { + type: "button", + id: "fullscreen", + }, + // 사용자는 사전 정의된 컨트롤을 사용하려면 올바른 유형을 지정해야 합니다 (예: richselect/colorpicker) + // 일치하지 않는 유형은 무시됩니다 (툴바에 추가되지 않음) + { + type: "richselect", // type: "button" - 잘못됨, 무시됨 + id: "mode", + }, + // 커스텀 버튼 (지원되는 옵션은 아래에 있음) + // 사용자는 커스텀 버튼만 정의할 수 있습니다 (현재 richselect/colorpicker 지원 없음) + { + type: "button", + id: "some", + label: "Some", + handler: () => {/* 커스텀 로직 */} + }, + { + type: "button", + id: "other", + icon: "wxo-help", + label: "Other", + tooltip: "Some tooltip", + handler: () => {/* 커스텀 로직 */} + } + ], + // 기타 설정 속성 +}); +~~~ + +#### 툴바 숨기기 + +툴바를 숨겨야 하는 경우, 다음과 같이 `toolbar` 속성을 `false`로 설정합니다: + +~~~jsx {2} +new richtext.Richtext("#root", { + toolbar: false + // 기타 설정 속성 +}); +~~~ + +### 기본 설정 + +~~~jsx +const defaultToolbarButtons = { + "undo", + "redo", + "separator", + "style", + "separator", + "font-family", + "font-size", + "separator", + "bold", + "italic", + "underline", + "strike", + "separator", + "text-color", + "background-color", + "separator", + "align", + "line-height", + "outdent", + "indent", + "separator", + "bulleted-list", + "numbered-list", + "quote", + "separator", + "link", + "image", + "separator", + "clear", + "separator", + "fullscreen", + "mode" +}; +~~~ + +:::tip[팁] +기본 툴바 컨트롤은 RichText 위젯에서 내보내며 `richtext.defaultToolbarButtons`를 통해 접근할 수 있습니다. + +```jsx{4} +// RichText 초기화 +new richtext.Richtext("#root", { + toolbar: [ + ...richtext.defaultToolbarButtons, + { + type: "button", + id: "btn1", // 버튼 id (커스텀 로직을 적용하려면 기존 버튼 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. 커스텀 컨트롤과 간소화된 툴바](https://snippet.dhtmlx.com/wda202ih?tag=richtext) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/config/value.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/value.md new file mode 100644 index 0000000..40f8bac --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/config/value.md @@ -0,0 +1,36 @@ +--- +sidebar_label: value +title: value 설정 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 value 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시험해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# value + +### 설명 + +@short: 선택 사항. RichText 에디터 영역 내에 표시되는 초기 값(콘텐츠)을 지정합니다 + +:::tip[팁] +커스텀 형식으로 값(콘텐츠)을 설정하려면, 내장된 [`setValue()`](api/methods/set-value.md) 메서드를 사용하세요. +::: + +### 사용법 + +~~~jsx {} +value?: string; +~~~ + +### 예제 + +~~~jsx {2} +new richtext.Richtext("#root", { + value: "

some value

" // 기본 값(HTML 형식)을 설정합니다 + // 기타 설정 속성 +}); +~~~ + +**변경 이력:** 이 속성은 v2.0에서 추가되었습니다 + +**관련 문서:** [설정](guides/configuration.md) + +**관련 샘플:** [RichText. 초기화](https://snippet.dhtmlx.com/t55alxiy?tag=richtext) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/align.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/align.md new file mode 100644 index 0000000..7b9dcac --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/align.md @@ -0,0 +1,48 @@ +--- +sidebar_label: align +title: align 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 align 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# align + +### 설명 + +@short: 메뉴바/툴바 또는 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/ko/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md new file mode 100644 index 0000000..0a16b61 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/clear-text-format.md @@ -0,0 +1,38 @@ +--- +sidebar_label: clear-text-format +title: clear-text-format 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 clear-text-format 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# clear-text-format + +### 설명 + +@short: 메뉴바/툴바 또는 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/ko/docusaurus-plugin-content-docs/current/api/events/copy.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/copy.md new file mode 100644 index 0000000..e4c105d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/copy.md @@ -0,0 +1,36 @@ +--- +sidebar_label: copy +title: copy 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 copy 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# copy + +### 설명 + +@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/ko/docusaurus-plugin-content-docs/current/api/events/create-new.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/create-new.md new file mode 100644 index 0000000..85d9d19 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/create-new.md @@ -0,0 +1,44 @@ +--- +sidebar_label: create-new +title: create-new 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 create-new 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# create-new + +### 설명 + +@short: 메뉴바의 "New" 옵션을 누르거나 Event Bus 메서드를 통해 호출될 때 발생합니다 + +### 사용법 + +~~~jsx {} +"create-new": ({ reset?: boolean }) => boolean | void; +~~~ + +### 파라미터 + +**create-new** 이벤트의 콜백은 다음 파라미터를 포함하는 객체를 받을 수 있습니다: + +- `reset` - 새 파일을 생성할 때 히스토리를 초기화합니다 + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 + +~~~jsx {5-10} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 설정 속성 +}); +// "create-new" 이벤트 구독 +editor.api.on("create-new", ({ reset }) => { + console.log(`Document has been cleared. History has ${reset ? "" : "not"} been reset.`); +}); +// 새 파일을 생성하고 히스토리 초기화 +editor.api.exec("create-new", { reset: true }); +~~~ + +**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/cut.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/cut.md new file mode 100644 index 0000000..c67e7a2 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/cut.md @@ -0,0 +1,36 @@ +--- +sidebar_label: cut +title: cut 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 cut 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# cut + +### 설명 + +@short: 선택한 텍스트를 잘라낼 때 발생합니다 + +### 사용법 + +~~~jsx {} +"cut": () => boolean | void; +~~~ + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 설정 속성 +}); +// "cut" 이벤트 구독 +editor.api.on("cut", () => { + console.log("Selected text was cut"); +}); +~~~ + +**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/delete-link.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/delete-link.md new file mode 100644 index 0000000..1fe1122 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/delete-link.md @@ -0,0 +1,36 @@ +--- +sidebar_label: delete-link +title: delete-link 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 delete-link 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# delete-link + +### 설명 + +@short: 링크를 삭제할 때 발생합니다 + +### 사용법 + +~~~jsx {} +"delete-link": () => boolean | void; +~~~ + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](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/ko/docusaurus-plugin-content-docs/current/api/events/export.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/export.md new file mode 100644 index 0000000..aa55e47 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/export.md @@ -0,0 +1,59 @@ +--- +sidebar_label: export +title: export 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 export 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# export + +### 설명 + +@short: 메뉴바의 "Export" 옵션을 누르거나 Event Bus 메서드를 통해 호출된 후에 발생합니다 + +### 사용법 + +~~~jsx {} +"export": ({ options: IExportOptions; result?: any }) => boolean | void; + +interface IExportOptions { + format?: "docx" | "pdf"; + url?: string; + download?: boolean; + fileName?: string; +} +~~~ + +### 파라미터 + +**export** 이벤트의 콜백은 다음 파라미터를 포함하는 객체를 받을 수 있습니다: + +- `format` - 파일 형식 +- `url` - 파일 내보내기를 위한 기본 URL +- `download` - 서버로부터 응답을 받은 후 파일을 다운로드할지 여부를 사용자가 지정할 수 있도록 합니다. 이 속성이 "false"로 설정되면 파일이 다운로드되지 않고, 대신 사용자가 이벤트 객체에서 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/ko/docusaurus-plugin-content-docs/current/api/events/import.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/import.md new file mode 100644 index 0000000..9ddde28 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/import.md @@ -0,0 +1,47 @@ +--- +sidebar_label: import +title: import 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 import 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# import + +### 설명 + +@short: 메뉴바의 "Import" 옵션을 누르거나 Event Bus 메서드를 통해 호출된 후에 발생합니다 + +### 사용법 + +~~~jsx {} +"import": ({ html?: string }) => boolean | void; +~~~ + +### 파라미터 + +**import** 이벤트의 콜백은 다음 파라미터를 포함하는 객체를 받을 수 있습니다: + +- `html` - html 형식의 텍스트 값 + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 + +~~~jsx {5-13} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 설정 속성 +}); +// "import" 이벤트 구독 +editor.api.on("import", (obj) => { + console.log(obj.html); + console.log("The new value was imported"); +}); +// 새 값 가져오기 +editor.api.exec("import", { + html: "

some value

" // 단순히 setValue를 호출합니다 +}); +~~~ + +**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/indent.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/indent.md new file mode 100644 index 0000000..9ab10dc --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/indent.md @@ -0,0 +1,43 @@ +--- +sidebar_label: indent +title: indent 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 indent 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# indent + +### 설명 + +@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/ko/docusaurus-plugin-content-docs/current/api/events/insert-image.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-image.md new file mode 100644 index 0000000..737d739 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-image.md @@ -0,0 +1,50 @@ +--- +sidebar_label: insert-image +title: insert-image 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 insert-image 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# insert-image + +### 설명 + +@short: 이미지를 삽입할 때 발생합니다 + +### 사용법 + +~~~jsx {} +"insert-image": (IImageContext) => boolean | void; + +interface IImageContext { + id: TID; + value: string; + width: number; + height: number; + // 업로더 ctx의 추가 속성, 실제 동작에는 필요하지 않음 + 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/ko/docusaurus-plugin-content-docs/current/api/events/insert-line.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-line.md new file mode 100644 index 0000000..a96f1f7 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-line.md @@ -0,0 +1,36 @@ +--- +sidebar_label: insert-line +title: insert-line 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 insert-line 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# insert-line + +### 설명 + +@short: 수평선을 삽입할 때 발생합니다 + +### 사용법 + +~~~jsx {} +"insert-line": () => boolean | void; +~~~ + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 설정 속성 +}); +// "insert-line" 이벤트 구독 +editor.api.on("insert-line", () => { + console.log("The horizontal line was inserted"); +}); +~~~ + +**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-link.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-link.md new file mode 100644 index 0000000..2104bee --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-link.md @@ -0,0 +1,43 @@ +--- +sidebar_label: insert-link +title: insert-link 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 insert-link 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# insert-link + +### 설명 + +@short: 링크를 삽입할 때 발생합니다 + +### 사용법 + +~~~jsx {} +"insert-link": ({ url: string }) => boolean | void; +~~~ + +### 파라미터 + +**update-link** 이벤트의 콜백은 다음 파라미터를 포함하는 객체를 받을 수 있습니다: + +- `url` - 삽입할 url + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](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/ko/docusaurus-plugin-content-docs/current/api/events/insert-list.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-list.md new file mode 100644 index 0000000..8033785 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/insert-list.md @@ -0,0 +1,47 @@ +--- +sidebar_label: insert-list +title: insert-list 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 insert-list 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# insert-list + +### 설명 + +@short: 목록을 삽입할 때 발생합니다 + +### 사용법 + +~~~jsx {} +"insert-list": ({ type: TListType }) => boolean | void; + +type TListType = "bulleted" | "numbered"; +~~~ + +### 파라미터 + +**insert-list** 이벤트의 콜백은 다음 파라미터를 포함하는 객체를 받을 수 있습니다: + +- `type` - 삽입된 목록의 유형. 다음 값을 지정할 수 있습니다: + - `"bulleted"` - 글머리 기호 목록 + - `"numbered"` - 번호 매기기 목록 + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](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/ko/docusaurus-plugin-content-docs/current/api/events/outdent.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/outdent.md new file mode 100644 index 0000000..05bf340 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/outdent.md @@ -0,0 +1,43 @@ +--- +sidebar_label: outdent +title: outdent 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 outdent 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# outdent + +### 설명 + +@short: 블록 들여쓰기가 감소할 때 발생합니다 + +### 사용법 + +~~~jsx {} +"outdent": ({ step: number }) => boolean | void; +~~~ + +### 파라미터 + +**outdent** 이벤트의 콜백은 다음 파라미터를 포함하는 객체를 받을 수 있습니다: + +- `step` - 들여쓰기가 감소한 단계 + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](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/ko/docusaurus-plugin-content-docs/current/api/events/paste.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/paste.md new file mode 100644 index 0000000..ab182dc --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/paste.md @@ -0,0 +1,36 @@ +--- +sidebar_label: paste +title: paste 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 paste 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# paste + +### 설명 + +@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/ko/docusaurus-plugin-content-docs/current/api/events/print.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/print.md new file mode 100644 index 0000000..8be1fe7 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/print.md @@ -0,0 +1,36 @@ +--- +sidebar_label: print +title: print 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 print 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 사용해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# print + +### 설명 + +@short: 문서를 인쇄할 때 발생합니다 + +### 사용법 + +~~~jsx {} +"print": () => boolean | void; +~~~ + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](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/ko/docusaurus-plugin-content-docs/current/api/events/redo.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/redo.md new file mode 100644 index 0000000..b8d081d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/redo.md @@ -0,0 +1,36 @@ +--- +sidebar_label: redo +title: redo 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 redo 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# redo + +### 설명 + +@short: 메뉴바/툴바의 "Redo" 버튼을 누르거나 Event Bus 메서드를 통해 호출될 때 실행됨 + +### 사용법 + +~~~jsx {} +"redo": () => boolean | void; +~~~ + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "redo" 이벤트 구독 +editor.api.on("redo", () => { + console.log("Redo operation was performed"); +}); +~~~ + +**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/resize-image.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/resize-image.md new file mode 100644 index 0000000..3dbd778 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/resize-image.md @@ -0,0 +1,45 @@ +--- +sidebar_label: resize-image +title: resize-image 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 resize-image 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# resize-image + +### 설명 + +@short: 이미지 크기를 조정할 때 실행됨 + +### 사용법 + +~~~jsx {} +"resize-image": ({ id: number, width: number, height: number }) => boolean | void; +~~~ + +### 파라미터 + +**resize-image** 이벤트의 콜백은 다음 파라미터를 포함하는 객체를 인자로 받을 수 있습니다: + +- `id` - 이미지 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/ko/docusaurus-plugin-content-docs/current/api/events/set-font-family.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-font-family.md new file mode 100644 index 0000000..bd35092 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-font-family.md @@ -0,0 +1,47 @@ +--- +sidebar_label: set-font-family +title: set-font-family 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 set-font-family 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# set-font-family + +### 설명 + +@short: 폰트 패밀리를 설정할 때 실행됨 + +### 사용법 + +~~~jsx {} +"set-font-family": ({ fontFamily: string }) => boolean | void; +~~~ + +### 파라미터 + +**set-font-family** 이벤트의 콜백은 다음 파라미터를 포함하는 객체를 인자로 받을 수 있습니다: + +- `fontFamily` - 적용할 폰트 패밀리. 사용 가능한 폰트는 다음과 같습니다: `"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"` + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](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/ko/docusaurus-plugin-content-docs/current/api/events/set-font-size.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-font-size.md new file mode 100644 index 0000000..547d5db --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-font-size.md @@ -0,0 +1,47 @@ +--- +sidebar_label: set-font-size +title: set-font-size 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 set-font-size 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# set-font-size + +### 설명 + +@short: 폰트 크기를 설정할 때 실행됨 + +### 사용법 + +~~~jsx {} +"set-font-size": ({ fontSize: string }) => boolean | void; +~~~ + +### 파라미터 + +**set-font-size** 이벤트의 콜백은 다음 파라미터를 포함하는 객체를 인자로 받을 수 있습니다: + +- `fontSize` - 적용할 폰트 크기 + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](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/ko/docusaurus-plugin-content-docs/current/api/events/set-line-height.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-line-height.md new file mode 100644 index 0000000..661c54d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-line-height.md @@ -0,0 +1,47 @@ +--- +sidebar_label: set-line-height +title: set-line-height 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 set-line-height 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# set-line-height + +### 설명 + +@short: 줄 높이를 설정할 때 실행됨 + +### 사용법 + +~~~jsx {} +"set-line-height": ({ lineHeight: string }) => boolean | void; +~~~ + +### 파라미터 + +**set-line-height** 이벤트의 콜백은 다음 파라미터를 포함하는 객체를 인자로 받을 수 있습니다: + +- `lineHeight` - 줄 높이 + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](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/ko/docusaurus-plugin-content-docs/current/api/events/set-text-color.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-color.md new file mode 100644 index 0000000..232cbea --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-color.md @@ -0,0 +1,54 @@ +--- +sidebar_label: set-text-color +title: set-text-color 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 set-text-color 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# set-text-color + +### 설명 + +@short: 텍스트 색상 및/또는 배경 텍스트 색상을 설정할 때 실행됨 + +### 사용법 + +~~~jsx {} +"set-text-color": (ITextColor) => boolean | void; + +interface ITextColor { + color?: string; + background?: string; +} +~~~ + +### 파라미터 + +**set-text-color** 이벤트의 콜백은 다음 파라미터를 포함하는 객체를 인자로 받을 수 있습니다: + +- `color` - 텍스트 색상 +- `background` - 텍스트 배경 색상 + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](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/ko/docusaurus-plugin-content-docs/current/api/events/set-text-format.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-format.md new file mode 100644 index 0000000..9fd8578 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-format.md @@ -0,0 +1,58 @@ +--- +sidebar_label: set-text-format +title: set-text-format 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 set-text-format 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# set-text-format + +### 설명 + +@short: 텍스트 포맷을 설정할 때 실행됨 + +### 사용법 + +~~~jsx {} +"set-text-format": (ITextFormat) => boolean | void; + +interface ITextFormat { + bold?: boolean; + italic?: boolean; + strike?: boolean; + underline?: boolean; +} +~~~ + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](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/ko/docusaurus-plugin-content-docs/current/api/events/set-text-style.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-style.md new file mode 100644 index 0000000..1f76135 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/set-text-style.md @@ -0,0 +1,49 @@ +--- +sidebar_label: set-text-style +title: set-text-style 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 set-text-style 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# set-text-style + +### 설명 + +@short: 텍스트 스타일을 설정할 때 실행됨 + +### 사용법 + +~~~jsx {} +"set-text-style": ({ tag: TBlockType }) => boolean | void; + +type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; +~~~ + +### 파라미터 + +**set-text-style** 이벤트의 콜백은 다음 파라미터를 포함하는 객체를 인자로 받을 수 있습니다: + +- `tag` - 텍스트 스타일 + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](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/ko/docusaurus-plugin-content-docs/current/api/events/show-popup.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/show-popup.md new file mode 100644 index 0000000..44490f1 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/show-popup.md @@ -0,0 +1,53 @@ +--- +sidebar_label: show-popup +title: show-popup 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 show-popup 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# show-popup + +### 설명 + +@short: 팝업이 표시되거나 숨겨질 때 실행됨 + +### 사용법 + +~~~jsx {} +"show-popup": (IPopupConfig) => boolean | void; + +interface IPopupConfig { + type: "link" | null; + image?: boolean; +} +~~~ + +### 파라미터 + +**show-popup** 이벤트의 콜백은 다음 파라미터를 포함하는 객체를 인자로 받을 수 있습니다: + +- `type` - 팝업의 유형 +- `image` - 추가 컨텍스트에 대한 접근을 제공함 (현재 커서가 이미지를 가리키고 있는지 여부) + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](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/ko/docusaurus-plugin-content-docs/current/api/events/subscript.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/subscript.md new file mode 100644 index 0000000..b254ad3 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/subscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: subscript +title: subscript 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 subscript 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# subscript + +### 설명 + +@short: 메뉴바/툴바의 "Subscript" 버튼을 누르거나 Event Bus 메서드를 통해 호출될 때 실행됨 + +### 사용법 + +~~~jsx {} +"subscript": () => boolean | void; +~~~ + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 + +~~~jsx {5-10} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "subscript" 이벤트 구독 +editor.api.on("subscript", () => { + console.log("Subscript was applied"); +}); +// "subscript" 이벤트 트리거 +editor.api.exec("subscript", {}); +~~~ + +**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/superscript.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/superscript.md new file mode 100644 index 0000000..749c20f --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/superscript.md @@ -0,0 +1,38 @@ +--- +sidebar_label: superscript +title: superscript 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 superscript 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# superscript + +### 설명 + +@short: 메뉴바/툴바의 "Superscript" 버튼을 누르거나 Event Bus 메서드를 통해 호출될 때 실행됨 + +### 사용법 + +~~~jsx {} +"superscript": () => boolean | void; +~~~ + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "superscript" 이벤트 구독 +editor.api.on("superscript", () => { + console.log("Superscript was applied"); +}); +// "superscript" 이벤트 트리거 +editor.api.exec("superscript", {}); +~~~ + +**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md new file mode 100644 index 0000000..51a0e32 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-fullscreen-mode.md @@ -0,0 +1,45 @@ +--- +sidebar_label: toggle-fullscreen-mode +title: toggle-fullscreen-mode 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 toggle-fullscreen-mode 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# toggle-fullscreen-mode + +### 설명 + +@short: 전체 화면 모드를 전환할 때 실행됨 + +### 사용법 + +~~~jsx {} +"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void; +~~~ + +### 파라미터 + +**toggle-fullscreen-mode** 이벤트의 콜백은 다음 파라미터를 포함하는 객체를 인자로 받을 수 있습니다: + +- `mode` - 전체 화면 모드를 활성화함 + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 + +~~~jsx {5-9} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "toggle-fullscreen-mode" 이벤트 구독 +editor.api.on("toggle-fullscreen-mode", (obj) => { + console.log(obj); + console.log("The full screen mode was changed"); +}); +// 전체 화면 모드 활성화 +editor.api.exec("toggle-fullscreen-mode", { mode: true }); +~~~ + +**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md new file mode 100644 index 0000000..37a79b3 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-layout-mode.md @@ -0,0 +1,45 @@ +--- +sidebar_label: toggle-layout-mode +title: toggle-layout-mode 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 toggle-layout-mode 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# toggle-layout-mode + +### 설명 + +@short: 레이아웃 모드를 전환할 때 실행됨 + +### 사용법 + +~~~jsx {} +"toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void; +~~~ + +### 파라미터 + +**toggle-layout-mode** 이벤트의 콜백은 다음 파라미터를 포함하는 객체를 인자로 받을 수 있습니다: + +- `mode` - 레이아웃 모드. 사용 가능한 모드는 다음과 같습니다: `"classic" | "document"` + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](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/ko/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md new file mode 100644 index 0000000..03c4f2c --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/toggle-shortcut-info.md @@ -0,0 +1,45 @@ +--- +sidebar_label: toggle-shortcut-info +title: toggle-shortcut-info 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 toggle-shortcut-info 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# toggle-shortcut-info + +### 설명 + +@short: 단축키 정보를 전환할 때 실행됨 + +### 사용법 + +~~~jsx {} +"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void; +~~~ + +### 파라미터 + +**toggle-shortcut-info** 이벤트의 콜백은 다음 파라미터를 포함하는 객체를 인자로 받을 수 있습니다: + +- `mode` - 단축키 정보를 활성화함; `true`이면 단축키 정보 팝업을 표시하고, `false`이면 단축키 정보 팝업을 숨김 + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](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/ko/docusaurus-plugin-content-docs/current/api/events/undo.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/undo.md new file mode 100644 index 0000000..0f16fa1 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/undo.md @@ -0,0 +1,36 @@ +--- +sidebar_label: undo +title: undo 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 undo 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# undo + +### 설명 + +@short: 메뉴바/툴바의 "Undo" 버튼을 누르거나 Event Bus 메서드를 통해 호출될 때 실행됨 + +### 사용법 + +~~~jsx {} +"undo": () => boolean | void; +~~~ + +:::info +내부 이벤트를 처리하려면 [**Event Bus 메서드**](api/overview/event_bus_methods_overview.md)를 사용할 수 있습니다 +::: + +### 예제 + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "undo" 이벤트 구독 +editor.api.on("undo", () => { + console.log("Undo operation was performed"); +}); +~~~ + +**변경 이력:** 이 이벤트는 v2.0에서 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/events/update-link.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/update-link.md new file mode 100644 index 0000000..99a56c9 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/events/update-link.md @@ -0,0 +1,44 @@ +--- +sidebar_label: update-link +title: update-link 이벤트 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 update-link 이벤트에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# update-link + +### 설명 + +@short: 링크를 업데이트할 때 실행됨 + +### 사용법 + +~~~jsx {} +"update-link": ({ id: number, url: string }) => boolean | void; +~~~ + +### 파라미터 + +**update-link** 이벤트의 콜백은 다음 파라미터를 포함하는 객체를 인자로 받을 수 있습니다: + +- `id` - 링크 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/ko/docusaurus-plugin-content-docs/current/api/internal/detach.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/detach.md new file mode 100644 index 0000000..16af9e3 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/detach.md @@ -0,0 +1,44 @@ +--- +sidebar_label: api.detach() +title: on 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 on 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# api.detach() + +### 설명 + +@short: 이벤트 핸들러를 제거/분리할 수 있도록 합니다 + +### 사용법 + +~~~jsx {} +api.detach( tag: string ): void; +~~~ + +### 매개변수 + +- `tag` - (필수) 액션 태그의 이름 + +### 이벤트 + +:::info +RichText 내부 이벤트의 전체 목록은 [**여기**](api/overview/events_overview.md)에서 확인할 수 있습니다 +::: + +### 예제 + +~~~jsx {6-8,10} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); + +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}, { tag: "track" }); + +editor.api.detach("track"); +~~~ + +**변경 이력:** 이 메서드는 v2.0에서 업데이트되었습니다. `name` 및 `context` 매개변수가 제거되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/exec.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/exec.md new file mode 100644 index 0000000..71811a0 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/exec.md @@ -0,0 +1,46 @@ +--- +sidebar_label: api.exec() +title: exec 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 exec 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# api.exec() + +### 설명 + +@short: 내부 이벤트를 트리거할 수 있도록 합니다 + +### 사용법 + +~~~jsx {} +api.exec( + event: string, + config: object +): void; +~~~ + +### 매개변수 + +- `event` - (필수) 발생시킬 이벤트 +- `config` - (필수) 매개변수를 포함한 config 객체 (발생시킬 이벤트 참조) + +### 이벤트 + +:::info +RichText 내부 이벤트의 전체 목록은 [**여기**](api/overview/events_overview.md)에서 확인할 수 있습니다 +::: + +### 예제 + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// 텍스트 글꼴 크기 설정 +editor.api.exec("set-font-size", { + fontSize: "16px" +}); +~~~ + +**변경 이력:** 이 메서드는 v2.0에서 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md new file mode 100644 index 0000000..ea9316f --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/get-reactive-state.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.getReactiveState() +title: getReactiveState 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 getReactiveState 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# api.getReactiveState() + +### 설명 + +@short: RichText의 리액티브 속성을 포함하는 객체를 반환합니다 + +### 사용법 + +~~~jsx {} +api.getReactiveState(): object; +~~~ + +### 반환값 + +이 메서드는 다음 매개변수를 포함하는 객체를 반환합니다: + +~~~jsx {} +{ + cursorState: { subscribe: any }, + defaultStyles {...}, + document {...}, + fullscreen {...}, + history {...}, + layoutMode {...}, + popup {...}, + selection {...} +} +~~~ + +### 예제 + +~~~jsx {5-7} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// RichText의 리액티브 상태 가져오기 +const reactive_state = editor.api.getReactiveState(); +console.log(reactive_state) +~~~ + +**변경 이력:** 이 메서드는 v2.0에서 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/get-state.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/get-state.md new file mode 100644 index 0000000..871372a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/get-state.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.getState() +title: getState 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 getState 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# api.getState() + +### 설명 + +@short: RichText의 StateStore 속성을 포함하는 객체를 반환합니다 + +### 사용법 + +~~~jsx {} +api.getState(): object; +~~~ + +### 반환값 + +이 메서드는 다음 매개변수를 포함하는 객체를 반환합니다: + +~~~jsx {} +{ + cursorState: {}, + defaultStyles: {}, + document: {}, + fullscreen: boolean, + history: [] + layoutMode: string, + popup: any, + selection: {} +} +~~~ + +### 예제 + +~~~jsx {5-7} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// RichText의 상태 가져오기 +const state = editor.api.getState(); +console.log(state); +~~~ + +**변경 이력:** 이 메서드는 v2.0에서 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/intercept.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/intercept.md new file mode 100644 index 0000000..2fefc21 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/intercept.md @@ -0,0 +1,48 @@ +--- +sidebar_label: api.intercept() +title: intercept 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 intercept 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# api.intercept() + +### 설명 + +@short: 내부 이벤트를 가로채고 차단할 수 있도록 합니다 + +### 사용법 + +~~~jsx {} +api.intercept( + event: string, + callback: function +): void; +~~~ + +### 매개변수 + +- `event` - (필수) 발생시킬 이벤트 +- `callback` - (필수) 실행할 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/ko/docusaurus-plugin-content-docs/current/api/internal/on.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/on.md new file mode 100644 index 0000000..ef432ae --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/on.md @@ -0,0 +1,46 @@ +--- +sidebar_label: api.on() +title: on 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 on 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# api.on() + +### 설명 + +@short: 내부 이벤트에 핸들러를 연결할 수 있도록 합니다 + +### 사용법 + +~~~jsx {} +api.on( + event: string, + handler: function +): void; +~~~ + +### 매개변수 + +- `event` - (필수) 발생시킬 이벤트 +- `handler` - (필수) 연결할 핸들러 (핸들러의 인자는 발생시킬 이벤트에 따라 달라집니다) + +### 이벤트 + +:::info +RichText 내부 이벤트의 전체 목록은 [**여기**](api/overview/events_overview.md)에서 확인할 수 있습니다 +::: + +### 예제 + +~~~jsx {5-8} +// RichText 초기화 +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); +// "set-font-size" 이벤트 구독 +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}); +~~~ + +**변경 이력:** 이 메서드는 v2.0에서 업데이트되었습니다. `context` 매개변수가 제거되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/set-next.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/set-next.md new file mode 100644 index 0000000..658761a --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/internal/set-next.md @@ -0,0 +1,40 @@ +--- +sidebar_label: api.setNext() +title: setNext 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 setNext 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# api.setNext() + +### 설명 + +@short: Event Bus 순서에 특정 액션을 추가할 수 있도록 합니다 + +### 사용법 + +~~~jsx {} +api.setNext(next: any): void; +~~~ + +### 매개변수 + +- `next` - (필수) **Event Bus** 순서에 포함시킬 액션 + +### 예제 + +~~~jsx {10-11} +const server = "https://some-backend-url"; +// someServerService라는 커스텀 서버 서비스 클래스가 있다고 가정합니다 +const someServerService = new ServerDataService(server); + +fetch(server + "/data").then((res) => res.json()).then((data) => { + const editor = new richtext.Richtext("#root", { + value: data + }); + + // someServerService를 위젯의 Event Bus 순서에 통합 + editor.api.setNext(someServerService); +}); +~~~ + +**변경 이력:** 이 메서드는 v2.0에서 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/destructor.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/destructor.md new file mode 100644 index 0000000..62827a1 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/destructor.md @@ -0,0 +1,28 @@ +--- +sidebar_label: destructor() +title: destructor 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 destructor 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# destructor() + +### 설명 + +@short: RichText의 모든 HTML 요소를 제거하고 관련된 모든 이벤트를 분리합니다 + +### 사용법 + +~~~jsx {} +destructor(): void; +~~~ + +### 예제 + +~~~jsx {5-6} +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); + +// RichText 제거 +editor.destructor(); +~~~ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/get-value.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/get-value.md new file mode 100644 index 0000000..7f21f2f --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/get-value.md @@ -0,0 +1,43 @@ +--- +sidebar_label: getValue() +title: getValue 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 getValue 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# getValue() + +### 설명 + +@short: RichText 값을 반환합니다 + +### 사용법 + +~~~jsx {} +getValue(encoder?: any): string; +~~~ + +### 매개변수 + +- `encoder` - (선택) RichText의 콘텐츠를 커스텀 형식으로 인코딩하는 데 사용되는 파서. 다음 형식을 사용할 수 있습니다: `html` (기본값) 및 `text` + +다음과 같은 방법으로 필요한 encoder를 가져올 수 있습니다: + +```jsx +const toTextEncoder = richtext.text.toText; // text encoder +const toHTMLEncoder = richtext.html.toHTML; // html encoder +``` + +### 예제 + +~~~jsx {6-8} +const editor = new richtext.Richtext("#root", { + value: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." // 기본값 설정 (HTML 형식) + // 기타 구성 속성 +}); + +const toTextEncoder = richtext.text.toText; +const editor_value = editor.getValue(toTextEncoder); +console.log(editor_value); +~~~ + +**변경 이력:** 이 메서드는 v2.0에서 업데이트되었습니다. `mode` 매개변수가 제거되었습니다. `encoder` 매개변수가 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-config.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-config.md new file mode 100644 index 0000000..45b8c62 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-config.md @@ -0,0 +1,40 @@ +--- +sidebar_label: setConfig() +title: setConfig 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 setConfig 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# setConfig() + +### 설명 + +@short: 새로운 구성 매개변수를 RichText에 적용합니다 + +### 사용법 + +~~~jsx {} +setConfig(config: { [key:any]: any }): void; +~~~ + +### 매개변수 + +- `config` - (필수) RichText 구성 매개변수 객체. 속성의 전체 목록은 [여기](api/overview/properties_overview.md)에서 확인할 수 있습니다 + +:::note +`setConfig()` 메서드는 `setConfig()` 메서드 호출에 명시적으로 지정되지 않은 이전에 설정된 모든 매개변수를 유지합니다. +::: + +### 예제 + +~~~jsx {6-8} +const editor = new richtext.Richtext("#root", { + value: "

Some text

", + // 기타 구성 속성 +}); + +editor.setConfig({ + layoutMode: "document" +}); +~~~ + +**변경 이력:** 이 메서드는 v2.0에서 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-locale.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-locale.md new file mode 100644 index 0000000..9c8a3c3 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-locale.md @@ -0,0 +1,41 @@ +--- +sidebar_label: setLocale() +title: setLocale 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 setLocale 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# setLocale() + +### 설명 + +@short: 새로운 locale을 RichText에 적용합니다 + +### 사용법 + +~~~jsx {} +setLocale(null | locale?: object): void; +~~~ + +### 매개변수 + +- `null` - (선택) 기본 locale로 재설정합니다 (*영어*) +- `locale` - (선택) 적용할 새 locale의 데이터 객체 + +:::info +`setLocale()` 메서드를 사용하여 새로운 locale을 RichText에 적용할 수 있습니다. RichText를 기본 locale로 재설정하려면 인자 없이 (또는 *null* 값으로) `setLocale()` 메서드를 호출하세요. +::: + +### 예제 + +~~~jsx {5-6} +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); + +// "de" locale을 RichText에 적용 +editor.setLocale(de); +~~~ + +**변경 이력:** 이 메서드는 v2.0에서 추가되었습니다 + +**관련 문서:** [현지화](guides/localization.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-value.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-value.md new file mode 100644 index 0000000..1f1b9d3 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/methods/set-value.md @@ -0,0 +1,44 @@ +--- +sidebar_label: setValue() +title: setValue 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 setValue 메서드에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 직접 실행해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드할 수 있습니다. +--- + +# setValue() + +### 설명 + +@short: 새로운 값을 RichText에 적용합니다 + +### 사용법 + +~~~jsx {} +setValue: (value: string, encoder?: any): void; +~~~ + +### 매개변수 + +- `value` - (필수) RichText에 삽입할 값 +- `encoder` - (선택) RichText의 콘텐츠를 커스텀 형식으로 인코딩하는 데 사용되는 커스텀 파서. 다음 형식을 사용할 수 있습니다: `html` (기본값) 및 `text` + +다음과 같은 방법으로 필요한 encoder를 가져올 수 있습니다: + +```jsx +const fromTextEncoder = richtext.text.fromText; // text encoder +const fromHTMLEncoder = richtext.html.fromHTML; // html encoder +``` + +### 예제 + +~~~jsx {7-8} +const editor = new richtext.Richtext("#root", { + // 구성 속성 +}); + +const editor_value = "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." + +const fromTextEncoder = richtext.text.fromText; +editor.setValue(editor_value, fromTextEncoder); +~~~ + +**변경 이력:** 이 메서드는 v2.0에서 업데이트되었습니다. `mode` 매개변수가 제거되었습니다. `encoder` 매개변수가 추가되었습니다 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md new file mode 100644 index 0000000..48e233f --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/event_bus_methods_overview.md @@ -0,0 +1,18 @@ +--- +sidebar_label: Event Bus 메서드 +title: Event Bus 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText의 내부 Event Bus 메서드 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# Event Bus 메서드 + +이 페이지는 DHTMLX RichText 에디터에서 사용되는 내부 Event Bus와 관련된 메서드 목록을 제공합니다. +이 메서드들은 고급 통합 및 내부 이벤트 시스템 기반의 사용자 정의 동작을 위해 설계되었습니다. + +| 이름 | 설명 | +| ------------------------------------------------- | -------------------------------------------- | +| [](api/internal/detach.md) | @getshort(api/internal/detach.md) | +| [](api/internal/exec.md) | @getshort(api/internal/exec.md) | +| [](api/internal/intercept.md) | @getshort(api/internal/intercept.md) | +| [](api/internal/on.md) | @getshort(api/internal/on.md) | +| [](api/internal/set-next.md) | @getshort(api/internal/set-next.md) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/events_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/events_overview.md new file mode 100644 index 0000000..9f3fd5d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/events_overview.md @@ -0,0 +1,45 @@ +--- +sidebar_label: 이벤트 개요 +title: 이벤트 개요 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 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/ko/docusaurus-plugin-content-docs/current/api/overview/main_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/main_overview.md new file mode 100644 index 0000000..1770096 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/main_overview.md @@ -0,0 +1,97 @@ +--- +sidebar_label: API 개요 +title: API 개요 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText의 API 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# API 개요 + +## RichText 생성자 + +~~~js +new richtext.RichText("#root", { + // 구성 매개변수 +}); +~~~ + +**매개변수**: + +- HTML 컨테이너 (예: CSS 선택자 또는 DOM 요소) +- 구성 객체 ([속성 참조](api/overview/properties_overview.md)) + +## RichText 메서드 + +| 이름 | 설명 | +| ----------------------------------------------|-------------------------------------------| +| [](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) | + +## State 메서드 + +| 이름 | 설명 | +| ----------------------------------------------|-------------------------------------------| +| [](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/ko/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md new file mode 100644 index 0000000..8e8859c --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/methods_overview.md @@ -0,0 +1,18 @@ +--- +sidebar_label: 메서드 개요 +title: 메서드 개요 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 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/ko/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md new file mode 100644 index 0000000..0f26eb0 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/properties_overview.md @@ -0,0 +1,21 @@ +--- +sidebar_label: 속성 개요 +title: 속성 개요 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText의 속성 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# 속성 개요 + +이 페이지는 DHTMLX RichText 에디터를 초기화할 때 사용할 수 있는 모든 구성 속성을 나열합니다. +이 속성들을 통해 레이아웃, 툴바, 값, 현지화 및 에디터의 기타 측면을 제어할 수 있습니다. + +| 이름 | 설명 | +| --------------------------------------------------------|----------------------------------------------| +| [](api/config/default-styles.md) | @getshort(api/config/default-styles.md) | +| [](api/config/fullscreen-mode.md) | @getshort(api/config/fullscreen-mode.md) | +| [](api/config/image-upload-url.md) | @getshort(api/config/image-upload-url.md) | +| [](api/config/layout-mode.md) | @getshort(api/config/layout-mode.md) | +| [](api/config/locale.md) | @getshort(api/config/locale.md) | +| [](api/config/menubar.md) | @getshort(api/config/menubar.md) | +| [](api/config/toolbar.md) | @getshort(api/config/toolbar.md) | +| [](api/config/value.md) | @getshort(api/config/value.md) | diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md new file mode 100644 index 0000000..270795d --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/api/overview/state_methods_overview.md @@ -0,0 +1,15 @@ +--- +sidebar_label: State 메서드 +title: State 메서드 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 JavaScript RichText의 내부 State 메서드 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# State 메서드 + +이 페이지는 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/ko/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png new file mode 100644 index 0000000..baeb296 Binary files /dev/null and b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/classic_mode.png differ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png new file mode 100644 index 0000000..bf4312c Binary files /dev/null and b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/document_mode.png differ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/editor.png b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/editor.png new file mode 100644 index 0000000..f9213b2 Binary files /dev/null and b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/editor.png differ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png new file mode 100644 index 0000000..f9213b2 Binary files /dev/null and b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/html_format.png differ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png new file mode 100644 index 0000000..e6d70b9 Binary files /dev/null and b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/menubar.png differ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png new file mode 100644 index 0000000..8b207e6 Binary files /dev/null and b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/shortcut_reference.png differ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png new file mode 100644 index 0000000..c62be84 Binary files /dev/null and b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/text_format.png differ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png new file mode 100644 index 0000000..07410f7 Binary files /dev/null and b/i18n/ko/docusaurus-plugin-content-docs/current/assets/richtext/toolbar.png differ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/assets/trial_richtext.png b/i18n/ko/docusaurus-plugin-content-docs/current/assets/trial_richtext.png new file mode 100644 index 0000000..cdee98c Binary files /dev/null and b/i18n/ko/docusaurus-plugin-content-docs/current/assets/trial_richtext.png differ diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/configuration.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/configuration.md new file mode 100644 index 0000000..a4c00cd --- /dev/null +++ b/i18n/ko/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. 사용자 정의 컨트롤과 단순화된 툴바](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` — 선택. 클릭 시 실행되는 콜백 + +아래 예제는 내장 버튼, `richselect` 유형의 사전 정의된 컨트롤 및 두 개의 사용자 정의 버튼을 결합합니다: + +~~~jsx {6-32} +new richtext.Richtext("#root", { + toolbar: [ + // 문자열 항목은 내장 버튼을 나타냅니다 + "bold", + "italic", + // 사전 정의된 버튼은 { type: "button", id: string } 만 허용합니다 + { + type: "button", + id: "fullscreen", + }, + // 사전 정의된 richselect/colorpicker 컨트롤의 경우 일치하는 type 을 설정합니다 + // 일치하지 않는 type 의 항목은 무시됩니다 + { + type: "richselect", // type: "button" 은 여기서 무시됩니다 + id: "mode", + }, + // 사용자 정의 버튼 (richselect/colorpicker 는 사용자 정의 컨트롤에서 지원되지 않습니다) + { + type: "button", + id: "some", + label: "Some", + handler: () => {/* 사용자 정의 로직 */} + }, + { + type: "button", + id: "other", + icon: "wxo-help", + label: "Other", + tooltip: "Some tooltip", + handler: () => {/* 사용자 정의 로직 */} + } + ], + // 기타 설정 속성 +}); +~~~ + +**관련 샘플:** [RichText. 사용자 정의 컨트롤과 단순화된 툴바](https://snippet.dhtmlx.com/wda202ih?tag=richtext) + +### 툴바 숨기기 + +툴바를 숨기려면 [`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 + // 기타 설정 속성 +}); +~~~ + +## 초기 콘텐츠 설정 + +초기화 시 에디터에 초기 HTML 콘텐츠를 전달하려면 [`value`](api/config/value.md) 속성을 사용합니다: + +~~~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` 블록은 28px 의 `"Roboto"` 글꼴을 사용하며 텍스트는 보라색, 배경은 분홍색입니다. 일치하는 CSS 규칙은 렌더링된 `h2` 요소에 동일한 값을 적용합니다. + +**관련 샘플:** [RichText. 타이포그래피의 기본값 변경(글꼴, 글꼴 크기 등)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/initialization.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/initialization.md new file mode 100644 index 0000000..32f62b4 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/initialization.md @@ -0,0 +1,78 @@ +--- +sidebar_label: 초기화 +title: 초기화 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 초기화에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# 초기화 + +이 가이드에서는 페이지에 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" + + +~~~ + +## 컨테이너 만들기 + +*"root"* 와 같은 ID를 가진 RichText용 컨테이너를 추가합니다: + +~~~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 인스턴스 제거 + +RichText HTML을 제거하고 관련된 모든 이벤트를 분리하려면 [`destructor()`](api/methods/destructor.md) 메서드를 호출합니다: + +~~~jsx +const editor = new richtext.Richtext("#root", { + // 설정 속성 +}); + +editor.destructor(); +~~~ + +## 예제 + +아래 예제는 메뉴바를 활성화한 상태로 RichText를 초기화합니다: + + diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md new file mode 100644 index 0000000..05b5dae --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_angular.md @@ -0,0 +1,300 @@ +--- +sidebar_label: Angular 통합 +title: Angular 통합 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 Angular와의 통합에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# Angular 통합 + +:::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/Prerendering)을 비활성화하세요. +::: + +이 명령은 필요한 모든 도구를 설치합니다. 추가 명령은 필요하지 않습니다. + +### 종속성 설치 + +새 앱 디렉토리로 전환합니다: + +~~~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단계. 컴포넌트 생성 + +애플리케이션에 RichText를 추가하기 위한 Angular 컴포넌트를 생성합니다. *src/app/* 디렉토리에 *richtext* 폴더를 생성하고 *richtext.component.ts* 라는 새 파일을 추가합니다. + +#### 소스 파일 가져오기 + +*richtext.component.ts* 를 열고 RichText 소스 파일을 가져옵니다. + +로컬 폴더에서 설치한 PRO 버전의 경우 다음을 사용합니다: + +~~~jsx +import { Richtext } from 'dhx-richtext-package'; +~~~ + +평가판 버전의 경우 다음을 사용합니다: + +~~~jsx +import { Richtext } from '@dhx/trial-richtext'; +~~~ + +이 튜토리얼에서는 RichText의 평가판 버전을 사용합니다. + +#### 컨테이너 설정 및 RichText 초기화 + +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 및 컨테이너용 스타일이 포함된 *richtext.component.css* 파일을 생성합니다: + +~~~css title="richtext.component.css" +/* RichText 스타일 가져오기 */ +@import "@dhx/trial-richtext/dist/richtext.css"; + +/* 기본 페이지 스타일 */ +html, +body{ + height: 100%; + padding: 0; + margin: 0; +} + +/* RichText 컨테이너 */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* RichText 위젯 */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### 데이터 로드 + +RichText에 데이터를 제공합니다. *src/app/richtext/* 디렉토리에 *data.ts* 파일을 생성합니다: + +~~~jsx {} title="data.ts" +export function getData() { + const value = ` +

RichText 2.0

+

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

+

`; + return { value }; +} +~~~ + +*richtext.component.ts* 를 엽니다. 데이터를 가져오고 `ngOnInit()` 내에서 `value` 속성을 RichText 설정에 전달합니다: + +~~~jsx {} title="richtext.component.ts" +import { Richtext } from '@dhx/trial-richtext'; +import { getData } from "./data"; // 데이터 가져오기 +import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation } from '@angular/core'; + +@Component({ + encapsulation: ViewEncapsulation.None, + selector: "richtext", + styleUrls: ["./richtext.component.css"], + template: `
+
+
` +}) + +export class RichTextComponent implements OnInit, OnDestroy { + @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef; + + private _editor!: Richtext; + + ngOnInit() { + const { value } = getData(); // data 모듈에서 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(); // data 모듈에서 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/ko/docusaurus-plugin-content-docs/current/guides/integration_with_react.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_react.md new file mode 100644 index 0000000..493868f --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_react.md @@ -0,0 +1,253 @@ +--- +sidebar_label: React 통합 +title: React 통합 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 React와의 통합에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# React 통합 + +:::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단계. 컴포넌트 생성 + +애플리케이션에 RichText를 추가하기 위한 React 컴포넌트를 생성합니다. *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` 생성자로 컴포넌트를 초기화합니다. RichText를 제거하기 위해 정리 함수에서 [`destructor()`](api/methods/destructor.md) 메서드를 호출합니다: + +~~~jsx {} title="Richtext.jsx" +import { useEffect, useRef } from "react"; +import { Richtext } from '@dhx/trial-richtext'; +import '@dhx/trial-richtext/dist/richtext.css'; // RichText 스타일 포함 + +export default function RichTextComponent(props) { + let richtext_container = useRef(); // RichText 용 컨테이너 + + useEffect(() => { + // RichText 컴포넌트 초기화 + const editor = new Richtext(richtext_container.current, {}); + + return () => { + editor.destructor(); // RichText 제거 + }; + }, []); + + return
+
+
+} +~~~ + +#### 스타일 추가 + +프로젝트의 메인 CSS 파일에 RichText 및 컨테이너용 스타일을 추가합니다: + +~~~css title="index.css" +/* 기본 페이지 스타일 */ +html, +body, +#root { + height: 100%; + padding: 0; + margin: 0; +} + +/* RichText 컨테이너 */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* RichText 위젯 */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### 데이터 로드 + +RichText에 데이터를 제공합니다. *src/* 디렉토리에 *data.js* 파일을 생성합니다: + +~~~jsx {} title="data.js" +export function getData() { + const value = ` +

RichText 2.0

+

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

+

`; + return { value }; +} +~~~ + +*App.js* 를 열고 데이터를 가져옵니다. 값을 prop으로 `` 컴포넌트에 전달합니다: + +~~~jsx {2,5-6} title="App.js" +import RichText from "./Richtext"; +import { getData } from "./data"; + +function App() { + const { value } = getData(); + return ; +} + +export default App; +~~~ + +*Richtext.jsx* 를 열고 `props.value` 를 RichText 설정에 전달합니다: + +~~~jsx {} title="Richtext.jsx" +import { useEffect, useRef } from "react"; +import { Richtext } from "@dhx/trial-richtext"; +import "@dhx/trial-richtext/dist/richtext.css"; + +export default function RichTextComponent(props) { + let richtext_container = useRef(); + + useEffect(() => { + const editor = new Richtext(richtext_container.current, { + value: props.value, // 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/ko/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md new file mode 100644 index 0000000..bba0cdf --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_svelte.md @@ -0,0 +1,267 @@ +--- +sidebar_label: Svelte 통합 +title: Svelte 통합 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 Svelte와의 통합에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# Svelte 통합 + +:::tip +기본적인 [Svelte](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단계. 컴포넌트 생성 + +애플리케이션에 RichText를 추가하기 위한 Svelte 컴포넌트를 생성합니다. *src/* 디렉토리에 *Richtext.svelte* 라는 새 파일을 생성합니다. + +#### 소스 파일 가져오기 + +*Richtext.svelte* 를 열고 RichText 소스 파일을 가져옵니다. + +로컬 폴더에서 설치한 PRO 버전의 경우 다음을 사용합니다: + +~~~html title="Richtext.svelte" + +~~~ + +평가판 버전의 경우 다음을 사용합니다: + +~~~html title="Richtext.svelte" + +~~~ + +이 튜토리얼에서는 RichText의 평가판 버전을 사용합니다. + +#### 컨테이너 설정 및 RichText 초기화 + +RichText에 대한 컨테이너 요소를 설정하고 `onMount()` 내에서 컴포넌트를 초기화합니다. RichText를 제거하려면 `onDestroy()` 내에서 [`destructor()`](api/methods/destructor.md) 메서드를 호출합니다: + +~~~html {} title="Richtext.svelte" + + +
+
+
+~~~ + +#### 스타일 추가 + +프로젝트의 메인 CSS 파일(예: *src/app.css*)에 RichText 및 컨테이너용 스타일을 추가합니다: + +~~~css title="app.css" +/* 기본 페이지 스타일 */ +html, +body { + height: 100%; + padding: 0; + margin: 0; +} + +/* RichText 컨테이너 */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* RichText 위젯 */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### 데이터 로드 + +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/ko/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md new file mode 100644 index 0000000..ed04545 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/integration_with_vue.md @@ -0,0 +1,277 @@ +--- +sidebar_label: Vue 통합 +title: Vue 통합 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 Vue와의 통합에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# Vue 통합 + +:::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단계. 컴포넌트 생성 + +애플리케이션에 RichText를 추가하기 위한 Vue 컴포넌트를 생성합니다. *src/components/* 디렉토리에 *Richtext.vue* 라는 새 파일을 생성합니다. + +#### 소스 파일 가져오기 + +*Richtext.vue* 를 열고 RichText 소스 파일을 가져옵니다. + +로컬 폴더에서 설치한 PRO 버전의 경우 다음을 사용합니다: + +~~~html title="Richtext.vue" + +~~~ + +평가판 버전의 경우 다음을 사용합니다: + +~~~html title="Richtext.vue" + +~~~ + +이 튜토리얼에서는 RichText의 평가판 버전을 사용합니다. + +#### 컨테이너 설정 및 RichText 초기화 + +RichText에 대한 컨테이너 요소를 설정하고 `mounted()` 내에서 `Richtext` 생성자로 컴포넌트를 초기화합니다. RichText를 제거하려면 `unmounted()` 내에서 [`destructor()`](api/methods/destructor.md) 메서드를 호출합니다: + +~~~html {} title="Richtext.vue" + + + +~~~ + +#### 스타일 추가 + +프로젝트의 메인 CSS 파일에 RichText 및 컨테이너용 스타일을 추가합니다: + +~~~css title="main.css" +/* 기본 페이지 스타일 */ +html, +body, +#app { /* #app 루트 컨테이너 사용 */ + height: 100%; + padding: 0; + margin: 0; +} + +/* RichText 컨테이너 */ +.component_container { + height: 100%; + margin: 0 auto; +} + +/* RichText 위젯 */ +.widget { + height: calc(100% - 56px); +} +~~~ + +#### 데이터 로드 + +RichText에 데이터를 제공합니다. *src/* 디렉토리에 *data.js* 파일을 생성합니다: + +~~~jsx {} title="data.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/ko/docusaurus-plugin-content-docs/current/guides/localization.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/localization.md new file mode 100644 index 0000000..fefdc1f --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/localization.md @@ -0,0 +1,495 @@ +--- +sidebar_label: 로컬라이제이션 +title: 로컬라이제이션 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 로컬라이제이션에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# 로컬라이제이션 + +RichText는 모든 인터페이스 라벨의 로컬라이제이션을 지원합니다. 새로운 로케일을 생성하거나 내장 로케일을 수정하고 에디터 설정을 통해 결과를 적용합니다. + +## 기본 로케일 + +기본적으로 RichText는 영어 로케일을 적용합니다: + +~~~jsx +const en = { + richtext: { + // 버튼/액션 + Undo: "Undo", + Redo: "Redo", + Style: "Style", + "Font family": "Font family", + "Font size": "Font size", + Bold: "Bold", + Italic: "Italic", + Underline: "Underline", + Strikethrough: "Strikethrough", + Subscript: "Subscript", + Superscript: "Superscript", + "Text color": "Text color", + "Background color": "Background color", + "Left align": "Left align", + "Center align": "Center align", + "Right align": "Right align", + Justify: "Justify", + "Line height": "Line height", + Outdent: "Outdent", + Indent: "Indent", + "Insert link": "Insert link", + "Insert image": "Insert image", + "Insert horizontal line": "Insert horizontal line", + "Clear formatting": "Clear formatting", + Print: "Print", + "Fullscreen mode": "Fullscreen mode", + "Layout mode": "Layout mode", + "Classic mode": "Classic mode", + "Document mode": "Document mode", + + // menubar 전용 옵션 + File: "File", + Import: "Import", + Export: "Export", + Edit: "Edit", + Cut: "Cut", + Copy: "Copy", + Paste: "Paste", + View: "View", + Insert: "Insert", + Format: "Format", + Help: "Help", + New: "New", + Link: "Link", + Image: "Image", + "Horizontal line": "Horizontal line", + Text: "Text", + "Heading 1": "Heading 1", + "Heading 2": "Heading 2", + "Heading 3": "Heading 3", + "Heading 4": "Heading 4", + "Heading 5": "Heading 5", + "Heading 6": "Heading 6", + Align: "Align", + Left: "Left", + Center: "Center", + Right: "Right", + Justified: "Justified", + "Keyboard shortcuts": "Keyboard shortcuts", + + // 클립보드 + "Operation failed. Please check your browser's clipboard permissions.": + "Operation failed. Please check your browser's clipboard permissions.", + + // 블록 스타일 드롭다운 + Heading: "Heading", + Quote: "Quote", + Paragraph: "Paragraph", + "Text style": "Text style", + Lists: "Lists", + + normal: "normal", + default: "default", + + // 목록 + "Bulleted list": "Bulleted list", + "Numbered list": "Numbered list", + + // 링크 + "Enter text to display": "Enter text to display", + "Paste link": "Paste link", + "Link copied to clipboard": "Link copied to clipboard", + + // 단축키 그룹 + "Text formatting": "Text formatting", + Editing: "Editing", + "Special actions": "Special actions", + + // 색상 + Black: "Black", + Gray: "Gray", + White: "White", + Red: "Red", + Orange: "Orange", + Yellow: "Yellow", + Lime: "Lime", + Green: "Green", + Teal: "Teal", + Cyan: "Cyan", + Blue: "Blue", + Indigo: "Indigo", + Magenta: "Magenta", + + // 음영 + "Light gray": "Light gray", + "Medium gray": "Medium gray", + "Dark gray": "Dark gray", + "Light red": "Light red", + "Medium red": "Medium red", + "Dark red": "Dark red", + "Light orange": "Light orange", + "Medium orange": "Medium orange", + "Dark orange": "Dark orange", + "Light yellow": "Light yellow", + "Medium yellow": "Medium yellow", + "Dark yellow": "Dark yellow", + "Light lime": "Light lime", + "Medium lime": "Medium lime", + "Dark lime": "Dark lime", + "Light green": "Light green", + "Medium green": "Medium green", + "Dark green": "Dark green", + "Light teal": "Light teal", + "Medium teal": "Medium teal", + "Dark teal": "Dark teal", + "Light cyan": "Light cyan", + "Medium cyan": "Medium cyan", + "Dark cyan": "Dark cyan", + "Light blue": "Light blue", + "Medium blue": "Medium blue", + "Dark blue": "Dark blue", + "Light indigo": "Light indigo", + "Medium indigo": "Medium indigo", + "Dark indigo": "Dark indigo", + "Light magenta": "Light magenta", + "Medium magenta": "Medium magenta", + "Dark magenta": "Dark magenta" + } +}; +~~~ + +:::info +RichText는 내장 독일어(`de`) 및 중국어(`cn`) 로케일도 함께 제공합니다. 모든 내장 로케일은 `richtext.locales` 네임스페이스를 통해 접근할 수 있습니다: `richtext.locales.en`, `richtext.locales.de`, `richtext.locales.cn`. +::: + +
+de 로케일 + +~~~jsx +const de = { + richtext: { + // 버튼/액션 + Undo: "Rückgängig", + Redo: "Wiederholen", + Style: "Stil", + "Font family": "Schriftart", + "Font size": "Schriftgröße", + Bold: "Fett", + Italic: "Kursiv", + Underline: "Unterstrichen", + Strikethrough: "Durchgestrichen", + Subscript: "Tiefgestellt", + Superscript: "Hochgestellt", + "Text color": "Textfarbe", + "Background color": "Hintergrundfarbe", + "Left align": "Linksbündig", + "Center align": "Zentriert", + "Right align": "Rechtsbündig", + Justify: "Blocksatz", + "Line height": "Zeilenhöhe", + Outdent: "Einzug verringern", + Indent: "Einzug erhöhen", + "Insert link": "Link einfügen", + "Insert image": "Bild einfügen", + "Insert horizontal line": "Horizontale Linie einfügen", + "Clear formatting": "Formatierung löschen", + Print: "Drucken", + "Fullscreen mode": "Vollbildmodus", + "Layout mode": "Layout-Modus", + "Classic mode": "Klassischer Modus", + "Document mode": "Dokumentenmodus", + + // menubar 전용 옵션 + File: "Datei", + Import: "Importieren", + Export: "Exportieren", + Edit: "Bearbeiten", + Cut: "Ausschneiden", + Copy: "Kopieren", + Paste: "Einfügen", + View: "Ansicht", + Insert: "Einfügen", + Format: "Format", + Help: "Hilfe", + New: "Neu", + Link: "Link", + Image: "Bild", + "Horizontal line": "Horizontale Linie", + Text: "Text", + "Heading 1": "Überschrift 1", + "Heading 2": "Überschrift 2", + "Heading 3": "Überschrift 3", + "Heading 4": "Überschrift 4", + "Heading 5": "Überschrift 5", + "Heading 6": "Überschrift 6", + Align: "Ausrichten", + Left: "Links", + Center: "Zentriert", + Right: "Rechts", + Justified: "Blocksatz", + "Keyboard shortcuts": "Tastenkürzel", + + // 클립보드 + "Operation failed. Please check your browser's clipboard permissions.": + "Operation fehlgeschlagen. Bitte überprüfen Sie die Berechtigungen für die Zwischenablage Ihres Browsers.", + + // 블록 스타일 드롭다운 + Heading: "Überschrift", + Quote: "Zitat", + Paragraph: "Absatz", + "Text style": "Textstil", + Lists: "Listen", + + normal: "normal", + default: "standard", + + // 목록 + "Bulleted list": "Liste mit Aufzählungszeichen", + "Numbered list": "Nummerierte Liste", + + // 링크 + "Enter text to display": "Text zum Anzeigen eingeben", + "Paste link": "Link einfügen", + "Link copied to clipboard": "Link in die Zwischenablage kopiert", + + // 단축키 그룹 + "Text formatting": "Textformatierung", + Editing: "Bearbeitung", + "Special actions": "Spezielle Aktionen", + + // 색상 + Black: "Schwarz", + Gray: "Grau", + White: "Weiß", + Red: "Rot", + Orange: "Orange", + Yellow: "Gelb", + Lime: "Limette", + Green: "Grün", + Teal: "Türkis", + Cyan: "Cyan", + Blue: "Blau", + Indigo: "Indigo", + Magenta: "Magenta", + + // 음영 + "Light gray": "Hellgrau", + "Medium gray": "Mittelgrau", + "Dark gray": "Dunkelgrau", + "Light red": "Hellrot", + "Medium red": "Mittelrot", + "Dark red": "Dunkelrot", + "Light orange": "Hellorange", + "Medium orange": "Mittelorange", + "Dark orange": "Dunkelorange", + "Light yellow": "Hellgelb", + "Medium yellow": "Mittleres Gelb", + "Dark yellow": "Dunkelgelb", + "Light lime": "Hellgrün", + "Medium lime": "Mittleres Grün", + "Dark lime": "Dunkelgrün", + "Light green": "Hellgrün", + "Medium green": "Mittleres Grün", + "Dark green": "Dunkelgrün", + "Light teal": "Hellblau", + "Medium teal": "Mittelblau", + "Dark teal": "Dunkelblau", + "Light cyan": "Hellcyan", + "Medium cyan": "Mittleres Cyan", + "Dark cyan": "Dunkelcyan", + "Light blue": "Hellblau", + "Medium blue": "Mittelblau", + "Dark blue": "Dunkelblau", + "Light indigo": "Hellindigo", + "Medium indigo": "Mittelindigo", + "Dark indigo": "Dunkelindigo", + "Light magenta": "Hellmagenta", + "Medium magenta": "Mittleres Magenta", + "Dark magenta": "Dunkelmagenta" + } +}; +~~~ +
+ +
+cn 로케일 + +~~~jsx +const cn = { + richtext: { + // 버튼/액션 + Undo: "撤销", + Redo: "重做", + Style: "样式", + "Font family": "字体", + "Font size": "字体大小", + Bold: "粗体", + Italic: "斜体", + Underline: "下划线", + Strikethrough: "删除线", + Subscript: "下标", + Superscript: "上标", + "Text color": "文本颜色", + "Background color": "背景颜色", + "Left align": "左对齐", + "Center align": "居中对齐", + "Right align": "右对齐", + Justify: "两端对齐", + "Line height": "行高", + Outdent: "减少缩进", + Indent: "增加缩进", + "Insert link": "插入链接", + "Insert image": "插入图片", + "Insert horizontal line": "插入水平线", + "Clear formatting": "清除格式", + Print: "打印", + "Fullscreen mode": "全屏模式", + "Layout mode": "布局模式", + "Classic mode": "经典模式", + "Document mode": "文档模式", + + // menubar 전용 옵션 + File: "文件", + Import: "导入", + Export: "导出", + Edit: "编辑", + Cut: "剪切", + Copy: "复制", + Paste: "粘贴", + View: "视图", + Insert: "插入", + Format: "格式", + Help: "帮助", + New: "新建", + Link: "链接", + Image: "图片", + "Horizontal line": "水平线", + Text: "文本", + "Heading 1": "标题 1", + "Heading 2": "标题 2", + "Heading 3": "标题 3", + "Heading 4": "标题 4", + "Heading 5": "标题 5", + "Heading 6": "标题 6", + Align: "对齐", + Left: "左", + Center: "居中", + Right: "右", + Justified: "两端对齐", + "Keyboard shortcuts": "键盘快捷键", + + // 클립보드 + "Operation failed. Please check your browser's clipboard permissions.": + "操作失败。请检查浏览器的剪贴板权限。", + + // 블록 스타일 드롭다운 + Heading: "标题", + Quote: "引用", + Paragraph: "段落", + "Text style": "文本样式", + Lists: "列表", + + normal: "普通的", + default: "默认", + + // 목록 + "Bulleted list": "项目符号列表", + "Numbered list": "编号列表", + + // 링크 + "Enter text to display": "输入要显示的文本", + "Paste link": "粘贴链接", + "Link copied to clipboard": "链接已复制到剪贴板", + + // 단축키 그룹 + "Text formatting": "文本格式化", + Editing: "编辑", + "Special actions": "特殊操作", + + // 색상 + Black: "黑色", + Gray: "灰色", + White: "白色", + Red: "红色", + Orange: "橙色", + Yellow: "黄色", + Lime: "酸橙色", + Green: "绿色", + Teal: "水鸭色", + Cyan: "青色", + Blue: "蓝色", + Indigo: "靛蓝色", + Magenta: "洋红色", + + // 음영 + "Light gray": "浅灰色", + "Medium gray": "中灰色", + "Dark gray": "深灰色", + "Light red": "浅红色", + "Medium red": "中红色", + "Dark red": "深红色", + "Light orange": "浅橙色", + "Medium orange": "中橙色", + "Dark orange": "深橙色", + "Light yellow": "浅黄色", + "Medium yellow": "中黄色", + "Dark yellow": "深黄色", + "Light lime": "浅酸橙色", + "Medium lime": "中酸橙色", + "Dark lime": "深酸橙色", + "Light green": "浅绿色", + "Medium green": "中绿色", + "Dark green": "深绿色", + "Light teal": "浅水鸭色", + "Medium teal": "中水鸭色", + "Dark teal": "深水鸭色", + "Light cyan": "浅青色", + "Medium cyan": "中青色", + "Dark cyan": "深青色", + "Light blue": "浅蓝色", + "Medium blue": "中蓝色", + "Dark blue": "深蓝色", + "Light indigo": "浅靛蓝色", + "Medium indigo": "中靛蓝色", + "Dark indigo": "深靛蓝色", + "Light magenta": "浅洋红色", + "Medium magenta": "中洋红色", + "Dark magenta": "深洋红色" + } +}; +~~~ +
+ +## 사용자 정의 로케일 적용 + +모든 인터페이스 라벨에 대한 번역이 포함된 로케일 객체를 생성하거나 내장 로케일을 수정합니다. 아래와 같이 초기화 시 로케일을 적용하거나 런타임에 전환합니다. + +### 초기화 시 로케일 적용 + +생성자 설정에서 [`locale`](api/config/locale.md) 속성에 로케일을 전달합니다: + +~~~jsx +const editor = new richtext.Richtext("#root", { + locale: richtext.locales.de + // 기타 설정 속성 +}); +~~~ + +### 런타임에 로케일 전환 + +초기화 후 로케일을 변경하려면 [`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/ko/docusaurus-plugin-content-docs/current/guides/stylization.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/stylization.md new file mode 100644 index 0000000..10e722e --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/stylization.md @@ -0,0 +1,93 @@ +--- +title: 스타일링 +sidebar_label: 스타일링 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 스타일링에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# 스타일링 + +에디터 컨테이너 및 하위 요소의 CSS 변수를 재정의하여 DHTMLX RichText의 외관을 사용자 정의합니다. + +이 가이드에서는 **다크 테마**를 적용하고 CSS 클래스 선택자로 메뉴바, 툴바, 팝업 및 콘텐츠 영역을 대상으로 지정하는 방법을 보여줍니다. + +## 기본 구조와 클래스 이름 + +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` 및 기타 블록 태그에 대한 글꼴 패밀리, 글꼴 크기, 색상, 배경)에는 일치하는 CSS 규칙과 함께 [`defaultStyles`](api/config/default-styles.md) 설정 속성을 사용하세요. 전체 패턴은 [설정 가이드](guides/configuration.md#configure-default-styles)를 참조하세요. +::: + +## 라이브 데모 + +아래 예제는 RichText에 사용자 정의 스타일을 적용합니다: + + + +**관련 문서:** [설정](guides/configuration.md) diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/typescript_support.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/typescript_support.md new file mode 100644 index 0000000..d8258dd --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/typescript_support.md @@ -0,0 +1,38 @@ +--- +sidebar_label: TypeScript 지원 +title: TypeScript 지원 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 TypeScript 사용에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 무료 30일 평가판을 다운로드하세요. +--- + +# TypeScript 지원 + +v2.0부터 DHTMLX RichText는 추가 설정 없이 사용할 수 있는 내장 TypeScript 정의를 제공합니다. + +:::note +Snippet 도구에서 에디터를 사용해 보세요. +::: + +## TypeScript의 장점 + +DHTMLX RichText와 함께 TypeScript를 사용하면 다음과 같은 이점이 있습니다: + +- 타입 안전성 — 컴파일러가 빌드 시간에 설정 속성 및 메서드 인수의 잘못된 사용을 잡아냅니다 +- 자동 완성 — 입력하는 동안 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/ko/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/ko/docusaurus-plugin-content-docs/current/how_to_start.md new file mode 100644 index 0000000..6525d4c --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/how_to_start.md @@ -0,0 +1,109 @@ +--- +sidebar_label: 시작 방법 +title: 시작 방법 +description: DHTMLX JavaScript RichText 라이브러리 문서에서 DHTMLX RichText 작업을 시작하는 방법을 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# 시작 방법 + +이 명확하고 포괄적인 튜토리얼은 페이지에 완전히 작동하는 RichText를 배치하기 위해 거쳐야 하는 단계들을 안내합니다. + +
+![DHTMLX RichText Classic 모드](./assets/richtext/classic_mode.png) +
+ +## 1단계. 소스 파일 포함 + +먼저 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을 통한 PRO RichText 설치 + +:::info +DHTMLX 비공개 **npm**에는 [클라이언트 영역](https://dhtmlx.com/clients/)에서 **npm**용 로그인 및 비밀번호를 생성하여 직접 접근할 수 있습니다. 자세한 설치 가이드도 그곳에서 확인할 수 있습니다. 비공개 **npm** 접근은 독점 RichText 라이선스가 활성화되어 있는 동안에만 가능합니다. +::: + +## 2단계. RichText 생성 + +이제 페이지에 RichText를 추가할 준비가 되었습니다. 먼저 RichText를 위한 `
` 컨테이너를 생성해 봅시다. 다음 단계를 따르세요: + +- *index.html* 파일에 DIV 컨테이너를 지정합니다 +- `richtext.Richtext` 생성자를 사용하여 RichText를 초기화합니다 + +매개변수로 생성자는 RichText가 배치될 HTML 컨테이너의 유효한 CSS 선택자와 해당 구성 객체를 받습니다. + +~~~html {9,12-14} title="index.html" + + + + How to Start with RichText + + + + +
+ + + + +~~~ + +## 3단계. RichText 구성 + +다음으로 초기화 시 RichText 컴포넌트에 적용할 구성 속성을 지정할 수 있습니다. + +RichText 작업을 시작하려면 먼저 [`value`](api/config/value.md) 속성을 통해 에디터에 초기 데이터를 제공해야 합니다. 이 외에도 [**menubar**](api/config/menubar.md)를 활성화하고, [**toolbar**](api/config/toolbar.md)를 사용자 정의하며, [**전체 화면**](api/config/fullscreen-mode.md) 및 [**레이아웃**](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/ko/docusaurus-plugin-content-docs/current/index.md b/i18n/ko/docusaurus-plugin-content-docs/current/index.md new file mode 100644 index 0000000..ff6658e --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/index.md @@ -0,0 +1,126 @@ +--- +sidebar_label: RichText 개요 +title: RichText 개요 +slug: / +description: DHTMLX JavaScript RichText 라이브러리 문서에서 DHTMLX JavaScript RichText 라이브러리의 개요를 확인할 수 있습니다. 개발자 가이드와 API 레퍼런스를 탐색하고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichText의 30일 무료 평가판을 다운로드하세요. +--- + +# RichText 개요 + +**DHTMLX RichText**는 JavaScript로 구축된 유연하고 가벼운 WYSIWYG 에디터입니다. 최신 웹 애플리케이션에서 원활한 편집 경험을 제공하도록 설계된 RichText는 깔끔한 UI, 풍부한 서식 기능 및 콘텐츠 렌더링에 대한 완벽한 제어 기능을 제공합니다. CMS, 내부 관리 도구 또는 임베디드 문서 편집기를 구축하는 경우에도 RichText는 손쉽게 통합하고 요구사항에 맞게 사용자 정의할 수 있습니다. + +**DHTMLX RichText** 컴포넌트에는 다음과 같은 기능이 포함되어 있습니다: + +- 두 가지 [**레이아웃 모드**](api/config/layout-mode.md) + +- 일반 텍스트 및 HTML로의 콘텐츠 직렬화 + +- 내장 및 사용자 정의 버튼이 있는 구성 가능한 [**toolbar**](api/config/toolbar.md) + +- 표시 또는 숨김이 가능한 정적 [**menubar**](api/config/menubar.md) + +- 이미지 업로드, 풍부한 서식, 사용자 정의 스타일링 및 전체 화면 모드 + +- [이벤트 처리](api/overview/event_bus_methods_overview.md), [콘텐츠 조작](api/overview/methods_overview.md) 및 [반응형 상태 관리](api/overview/state_methods_overview.md)를 위한 [전체 API 접근](api/overview/main_overview.md) + +RichText는 프레임워크에 구애받지 않으며 [React](guides/integration_with_react.md), [Angular](guides/integration_with_angular.md), [Vue](guides/integration_with_vue.md) 및 [Svelte](guides/integration_with_svelte.md) 프레임워크와 쉽게 통합되어 다양한 프런트엔드 생태계에 적합합니다. + +이 문서는 설치, 구성, 사용 및 사용자 정의에 대한 자세한 안내를 제공합니다. 일반적인 시나리오에 대한 예제, [전체 API 레퍼런스](api/overview/main_overview.md) 및 애플리케이션에 RichText를 임베드하기 위한 모범 사례를 확인할 수 있습니다. + +## RichText 구조 + +### Menubar + +RichText menubar는 새 문서 작성, 인쇄, 콘텐츠 가져오기/내보내기 등의 편집 작업에 대한 접근을 제공합니다. 기본적으로 숨겨져 있습니다. + +표시 여부를 전환하려면 [`menubar`](api/config/menubar.md) 속성을 사용하세요. menubar는 활성화하거나 비활성화할 수 있지만, 현재로서는 내용을 구성할 수 없습니다. + +
+![Menubar](./assets/richtext/menubar.png) +
+ +### Toolbar + +RichText toolbar는 텍스트 서식 지정 및 구조적 편집 기능에 빠르게 접근할 수 있도록 제공합니다. 기본적으로 [toolbar](api/config/toolbar.md#default-config)는 활성화되어 있으며 굵게, 기울임꼴, 글꼴 설정, 목록 서식 등 일반적으로 사용되는 컨트롤의 사전 정의된 세트를 표시합니다. + +[`toolbar`](api/config/toolbar.md) 속성을 통해 toolbar의 내용과 레이아웃을 완전히 사용자 정의할 수 있습니다. toolbar를 활성화 또는 비활성화하거나, 기본 컨트롤을 재배열하거나, 사전 정의된 버튼 식별자와 사용자 정의 버튼 객체의 배열을 사용하여 완전히 사용자 정의된 toolbar를 정의할 수 있습니다. + +
+![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는 "classic" 및 "document" 모드에서 콘텐츠 작업이 가능합니다. 텍스트를 편집하는 동안 편안하게 작업할 수 있도록 가장 적합한 모드를 선택할 수 있습니다. 모드를 프로그래밍 방식으로 전환하려면 [`layoutMode`](api/config/layout-mode.md) 속성을 사용하세요. + +- **"classic"** + +
+![Classic 모드](./assets/richtext/classic_mode.png) +
+ +- **"document"** + +
+![Document 모드](./assets/richtext/document_mode.png) +
+ +## 지원되는 형식 + +RichText 에디터는 **HTML** 및 일반 텍스트 형식의 콘텐츠 [파싱](api/methods/set-value.md) 및 [직렬화](api/methods/get-value.md)를 지원합니다. + +#### HTML 형식 + +
+![HTML 형식](./assets/richtext/html_format.png) +
+ +#### 텍스트 형식 + +
+![텍스트 형식](./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** 옵션을 선택하세요: + +
+![키보드 단축키](./assets/richtext/shortcut_reference.png) +
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/news/migration.md b/i18n/ko/docusaurus-plugin-content-docs/current/news/migration.md new file mode 100644 index 0000000..4b0c97e --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/news/migration.md @@ -0,0 +1,167 @@ +--- +sidebar_label: 최신 버전으로 마이그레이션 +title: 최신 버전으로 마이그레이션 +description: DHTMLX JavaScript RichTExt 라이브러리 문서에서 최신 버전으로의 마이그레이션에 대해 알아볼 수 있습니다. 개발자 가이드와 API 레퍼런스를 살펴보고, 코드 예제와 라이브 데모를 시도해 보며, DHTMLX RichTExt의 무료 30일 평가판을 다운로드하세요. +--- + +# 최신 버전으로 마이그레이션 + +## 1.2 -> 2.0 + +### 속성 마이그레이션 + +| 기존 속성 | 대체 속성 | 비고 | +| --------------- | ------------------------- | ----------------------------------------- | +| `customStats` | *(제거됨)* | 새 버전 2.0에서 사용할 수 없음 | +| `toolbarBlocks` | `toolbar` | 이제 세부적인 툴바 구조를 지원합니다 | +| `defaultStyles` | `defaultStyles` (업데이트됨) | 구조는 이제 블록별이며 CSS 기반입니다 | +| `mode` | `layoutMode` | 보다 엄격한 enum 기반 설정으로 대체됨 | + +### - `customStats` + +`customStats` 속성이 제거되었습니다. RichText의 현재 버전은 더 이상 사용자 정의 통계(예: 문자 수, 단어 수, 문장 수) 표시를 지원하지 않습니다. + +여전히 텍스트 지표를 계산해야 하는 경우 에디터 콘텐츠에 접근하여 수동으로 처리함으로써 외부에서 수행할 수 있습니다: + +```jsx +const content = editor.getValue(); +const wordCount = content.split(/\s+/).length; +``` + +### - `toolbarBlocks` → [`toolbar`](api/config/toolbar.md) + +**2.0** 이전에는 사용자가 컨트롤이 있는 블록만 지정할 수 있었습니다 +```jsx{2} title="2.0 이전" +new dhx.RichText("#root", { + toolbarBlocks: ["undo", "style", "decoration", "colors", "align", "link"] +}); +``` + +**2.0** 부터 사용자는 개별 컨트롤을 지정할 수 있습니다 +```jsx{2-4} title="2.0 부터" +new richtext.Richtext("#root", { + toolbar: [ + "undo", "style", "bold", "italic", "underline", "text-color", + "align", "link" + ] +}); +``` + +### - [`defaultStyles`](api/config/default-styles.md) + +**2.0** 이전에는 사용자가 툴바 선택 컨트롤에 대한 기본값을 정의할 수 있었습니다 +```jsx title="2.0 이전" +defaultStyles: { + "font-family": "Tahoma", + "font-size": "14px" +} +``` + +**2.0** 부터 사용자는 특정 블록 유형에 대한 기본 스타일 값을 지정합니다 +```jsx title="2.0 부터" +defaultStyles: { + "*": { + "font-family": "Tahoma", + "font-size": "14px" + }, + h1: { + "font-size": "32px", + "color": "#333" + } +} +``` + +:::note +모든 블록에 대한 기본 설정을 정의하려면 `*` 를 사용하고, 특정 요소(p, h1, blockquote 등)를 재정의하세요. +::: + +### - `mode` → [`layoutMode`](api/config/layout-mode.md) + +```jsx{2} title="2.0 이전" +new dhx.RichText("#root", { + mode: "document" +}); +``` + +```jsx{2} title="2.0 부터" +new Richtext("#root", { + layoutMode: "document" // 또는 "classic" +}); +``` + +새로운 [`layoutMode`](api/config/layout-mode.md) 는 엄격하게 `"classic"` 과 `"document"` 값만 지원합니다. + +### 메서드 마이그레이션 + +| 기존 메서드 | 새 대체 메서드 | 비고 | +| ----------------------- | ------------------------------------ | ----------------------------------------------------- | +| `getValue(mode)` | `getValue(encoder)` | 인코더가 문자열 모드를 대체합니다; 인코더용 별도 import 필요 | +| `setValue(value, mode)` | `setValue(value, encoder)` | 인코더가 문자열 모드를 대체합니다; 인코더용 별도 import 필요 | +| `getStats()` | *제거됨* | 대체 없음; 수동 로직 필요 | +| `getEditorAPI()` | *제거됨* | 내부용; 공개 API 사용 | +| `fire()` | *제거됨* | `exec()` 및 `intercept()` 로 대체됨 | +| `on()`, `detach()` | ✅ 유지됨 (`api.on`, `api.detach`) | 이제 `richtext.api` 를 통해 접근 | +| `fullScreen()` | *제거됨* | `fullscreenMode` 설정 속성 사용 | +| `exitFullScreen()` | *제거됨* | `fullscreenMode` 설정 속성 사용 | +| `paint()` | *제거됨* | 더 이상 필요하지 않음 | +| `destructor()` | ✅ 여전히 사용 가능 | 변경 없음 | +| `setConfig()` | ✅ 신규 | 라이브 설정 업데이트 지원 | +| `setLocale()` | ✅ 신규 | 동적 로케일 전환 허용 | +| `getReactiveState()` | ✅ 신규 | 반응형 상태 추적 지원 | +| `getState()` | ✅ 신규 | 현재 정적 설정 상태 제공 | +| `intercept()` | ✅ 신규 | 내부 액션 가로채기 | +| `exec()` | ✅ 신규 | 내부 액션 실행 | + +### - [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md) + +```jsx title="2.0 이전" +... +editor.setValue("

Hello

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

Hello

", fromHTMLEncoder); +editor.getValue(toTextEncoder); +``` + +:::note +인코더 없이 `getValue()` 와 `setValue()` 를 호출할 수 있습니다 — 기본적으로 HTML이 사용됩니다 +::: + +### - [`on`](api/internal/on.md) / [`detach`](api/internal/detach.md) + +```jsx title="2.0 이전" +editor.events.on("Change", function(action, canUndo, canRedo){ + // 코드 작성 +}); + +editor.events.detach("Change"); +``` + +```jsx title="2.0 부터" +editor.api.on("set-font-size", (obj) => { + console.log(obj.fontSize); +}, { tag: "track" }); + +editor.api.detach("track"); +``` + +### - `fire()` → [`exec()`](api/internal/exec.md) 및 [`intercept()`](api/internal/intercept.md) 사용 + +```jsx title="2.0 이전" +editor.events.fire("some-event", [data]); +``` + +```jsx title="2.0 부터" +editor.api.exec("some-event", obj); + +// 실행 방지 +editor.api.intercept("some-event", (obj) => false); +``` diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/news/whats_new.md b/i18n/ko/docusaurus-plugin-content-docs/current/news/whats_new.md new file mode 100644 index 0000000..e26086f --- /dev/null +++ b/i18n/ko/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) + +- **새로운 서식 도구** + - 텍스트 정렬: **justify** + - [수평선](api/events/insert-line.md) 삽입 + - [Indent](api/events/indent.md) / [Outdent](api/events/outdent.md) + - [줄 높이](api/events/set-line-height.md) 설정 + - [아래 첨자](api/events/subscript.md) / [위 첨자](api/events/superscript.md) 적용 + +- **목록 관리** + 콘텐츠에서 [목록을 손쉽게 삽입하고 관리](api/events/insert-list.md)합니다 + +- **가져오기/내보내기 & 인쇄** + - [DOCX 가져오기](api/events/import.md) 파일 + - 콘텐츠를 DOCX 또는 PDF로 [내보내기](api/events/export.md) + - 에디터에서 직접 문서 [인쇄](api/events/print.md) + +- **키보드 단축키** + 일반 서식 및 편집 단축키에 대한 지원 확대 + +### 새로운 API + +#### 새로운 속성 + +- [`fullscreenMode`](api/config/fullscreen-mode.md) +- [`imageUploadUrl`](api/config/image-upload-url.md) +- [`layoutMode`](api/config/layout-mode.md) +- [`locale`](api/config/locale.md) +- [`menubar`](api/config/menubar.md) +- [`toolbar`](api/config/toolbar.md) +- [`value`](api/config/value.md) + +#### 새로운 메서드 + +- [`setConfig()`](api/methods/set-config.md) — 동적으로 설정 업데이트 +- [`setLocale()`](api/methods/set-locale.md) — 즉시 로케일 변경 + +#### 새로운 내부 메서드 + +- [`api.exec()`](api/internal/exec.md) +- [`api.intercept()`](api/internal/intercept.md) +- [`api.getReactiveState()`](api/internal/get-reactive-state.md) +- [`api.getState()`](api/internal/get-state.md) + +#### 새로운 이벤트 + +새 이벤트의 전체 목록은 [여기](api/overview/events_overview.md)에서 확인할 수 있습니다 + +### 업데이트된 API + +#### 업데이트된 속성 + +- [`defaultStyles`](api/config/default-styles.md) + +#### 업데이트된 메서드 + +- [`setValue()`](api/methods/set-value.md) +- [`getValue()`](api/methods/get-value.md) + +#### 업데이트된 내부 메서드 + +- [`api.detach()`](api/internal/detach.md) +- [`api.on()`](api/internal/on.md) + +## 제거된 API + +:::warning +프로젝트에서 제거된 API를 사용하지 마세요!
자세한 내용은 [마이그레이션](news/migration.md) 항목을 참조하세요. +::: + +### [제거된 속성](news/migration.md#properties-migration) + +- [`customStats`](news/migration.md#--customstats) +- [`mode`](news/migration.md#--mode--layoutmode) +- [`toolbarBlocks`](news/migration.md#--toolbarblocks--toolbar) + +### [제거된 메서드](news/migration.md#methods-migration) + +- `exitFullScreen()` +- `fullScreen()` +- `getEditorAPI()` +- `getStats()` +- `paint()` + +### 제거된 내부 메서드 + +- [`events.fire()`](news/migration.md#--fire--use-exec-and-intercept) + +### 제거된 이벤트 + +- `Action` +- `Change` +- `selectionChange` +- `selectionRefresh` diff --git a/i18n/ko/docusaurus-theme-classic/footer.json b/i18n/ko/docusaurus-theme-classic/footer.json new file mode 100644 index 0000000..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" + } +}