From 9796424799ca2008c3cdb90beac1472e5a19b160 Mon Sep 17 00:00:00 2001 From: Bhuvaneshwari-SF4208 Date: Thu, 16 Oct 2025 10:08:06 +0530 Subject: [PATCH] 983303: Updated the public sample of RichTextEditor --- .../Components/App.razor | 25 ++ .../Components/Layout/MainLayout.razor | 23 ++ .../Components/Layout/MainLayout.razor.css | 96 +++++++ .../Components/Layout/NavMenu.razor | 33 +++ .../Components/Layout/NavMenu.razor.css | 105 +++++++ .../Components/Pages/Counter.razor | 18 ++ .../Components/Pages/Error.razor | 36 +++ .../Components/Pages/Home.razor | 7 + .../CustomKeyConfiguration.razor | 28 ++ .../Accessibility/ShowCharCount.razor | 19 ++ .../EditorModes/HTMLEditor.razor | 19 ++ .../EditorModes/MarkdownEditor.razor | 20 ++ .../Pages/RichTextEditor/EnableRTLMode.razor | 6 + .../EnterandShiftEnterKey/Enterkey.razor | 23 ++ .../EnterandShiftEnterKey/ShiftEnter.razor | 30 ++ .../Pages/RichTextEditor/Events.razor | 266 ++++++++++++++++++ .../FormValidation/CustomPlacement.razor | 31 ++ .../FormValidation/EditFormValidation.razor | 31 ++ .../FormValidation/ValidationAttributes.razor | 28 ++ .../HowTo/RichTextEditorInsideDialog.razor | 34 +++ .../RichTextEditor/HowTo/UpdateValue.razor | 87 ++++++ .../IFrameEditor/CssandScript.razor | 22 ++ .../IFrameEditor/IFrameAttributes.razor | 17 ++ .../RichTextEditor/IFrameEditor/Iframe.razor | 10 + .../ImportExport/ExportPDFOrWord.razor | 116 ++++++++ .../ImportExport/ImportFromWord.razor | 118 ++++++++ .../Pages/RichTextEditor/InlineEditor.razor | 13 + .../KeyboardShortcuts/CustomKeyConfig.razor | 27 ++ .../CharacterCountAndLimit.razor | 14 + .../Miscellaneous/CodeView.razor | 14 + .../Miscellaneous/NumberAndBulletLists.razor | 22 ++ .../Miscellaneous/PlaceholderText.razor | 13 + .../PasteCleanUp/AccessingPastedContent.razor | 16 ++ .../PasteCleanUp/AllowedStyleProperties.razor | 19 ++ .../PasteCleanUp/DeniedAttributes.razor | 18 ++ .../PasteCleanUp/DeniedTags.razor | 18 ++ .../PasteCleanUp/KeepFormat.razor | 14 + .../PasteCleanUp/PasteAsPlainText.razor | 11 + .../PasteCleanUp/PromptDialogOptions.razor | 14 + .../EnableResize.razor | 9 + .../RestrictResize.razor | 18 ++ .../SmartEditing/MentionIntegration.razor | 122 ++++++++ .../AddingCustomSlashMenuItems.razor | 91 ++++++ .../Customizingpopupwidthandheight.razor | 20 ++ .../SlashCommands/EnablingSlashMenu.razor | 20 ++ .../CustomizeToolbarAppearance.razor | 41 +++ .../CustomizingEditorContent.razor | 30 ++ .../HighlightSpecificLines.razor | 25 ++ .../RefreshingEditorUI.razor | 34 +++ .../StylingAndAppearance/SetPlaceholder.razor | 15 + .../StylingAndAppearance/SourceCodeView.razor | 17 ++ .../Toolbar/ExpandToolbar.razor | 39 +++ .../Toolbar/FloatingToolbar.razor | 9 + .../Toolbar/MultiRowToolbar.razor | 39 +++ .../RichTextEditor/Toolbar/PopupToolbar.razor | 9 + .../QuickToolbar/AudioQuickToolbar.razor | 26 ++ .../QuickToolbar/ImageQuickToolbar.razor | 30 ++ .../QuickToolbar/LinkQuickToolbar.razor | 22 ++ .../QuickToolbar/TableQuickToolbar.razor | 35 +++ .../QuickToolbar/TextQuickToolbar.razor | 32 +++ .../QuickToolbar/VideoQuickToolbar.razor | 29 ++ .../Toolbar/ScrollableToolbar.razor | 41 +++ .../Toolbar/ToolbarPosition.razor | 18 ++ .../RichTextEditor/Tools/BuiltInTool.razor | 38 +++ .../RichTextEditor/Tools/CodeBlock.razor | 58 ++++ .../RichTextEditor/Tools/CustomToolbar.razor | 39 +++ .../RichTextEditor/Tools/DialogSettings.razor | 9 + .../CustomizeFormatPainter.razor | 44 +++ .../FormatPainter/FormatPainterTool.razor | 43 +++ .../Tools/InsertAudio/AudioTool.razor | 15 + .../Tools/InsertAudio/DisplayPosition.razor | 33 +++ .../Tools/InsertAudio/FileSize.razor | 32 +++ .../InsertImage/DeletingImagesKeyboard.razor | 42 +++ .../Tools/InsertImage/DisplayPosition.razor | 13 + .../Tools/InsertImage/FileSize.razor | 32 +++ .../Tools/InsertImage/InsertImageTool.razor | 15 + .../Tools/InsertVideo/DisplayPosition.razor | 33 +++ .../Tools/InsertVideo/FileSize.razor | 32 +++ .../Tools/InsertVideo/VideoTool.razor | 16 ++ .../LinkManipulation/EditOrRemoveLink.razor | 28 ++ .../Tools/LinkManipulation/InsertLink.razor | 27 ++ .../Tools/StylingTools/CustomizingLists.razor | 23 ++ .../FontAndBackgroundColors.razor | 33 +++ .../FontFamily/BuiltInFontFamily.razor | 18 ++ .../FontFamily/CustomFontFamily.razor | 27 ++ .../FontFamily/GoogleFontSupport.razor | 26 ++ .../FontSize/BuiltInFontSize.razor | 18 ++ .../FontSize/CustomFontSize.razor | 26 ++ .../StylingTools/Formats/BuiltInFormats.razor | 18 ++ .../StylingTools/Formats/CustomFormats.razor | 26 ++ .../StylingTools/FormattingCodeBlocks.razor | 24 ++ .../Tools/StylingTools/ShowRecentColor.razor | 20 ++ .../TableManipulation/CustomStyles.razor | 22 ++ .../Tools/TableManipulation/InsertTable.razor | 17 ++ .../TableManipulation/TableFormatting.razor | 47 ++++ .../ClearUndoRedoStack.razor | 28 ++ .../UndoandRedoManager/DisableUndoRedo.razor | 15 + .../RemoveUndoRedoToolbar.razor | 47 ++++ .../UndoandRedoManager/UndoRedoSteps.razor | 13 + .../UndoRedoWithCustomToolbar.razor | 35 +++ .../ValueBinding/AutoSave.razor | 23 ++ .../ValueBinding/GetEditorContent.razor | 21 ++ .../ValueBinding/Valuebinding.razor | 15 + .../AvoidUnnecessaryRenders.razor | 22 ++ .../AvoidUnnecessaryRendersEvents.razor | 22 ++ .../RichTextEditor/XhtmlValidation.razor | 13 + .../Components/Pages/Weather.razor | 63 +++++ .../Components/Routes.razor | 6 + .../Components/_Imports.razor | 11 + .../Data/HomeController.cs | 74 +++++ .../RichTextEditorUGSample/Program.cs | 28 ++ .../Properties/launchSettings.json | 38 +++ .../RichTextEditorUGSample.csproj | 37 +++ .../RichTextEditorUGSample.csproj.user | 9 + .../appsettings.Development.json | 8 + .../RichTextEditorUGSample/appsettings.json | 9 + .../RichTextEditorUGSample/wwwroot/app.css | 51 ++++ .../wwwroot/bootstrap/bootstrap.min.css | 7 + .../wwwroot/bootstrap/bootstrap.min.css.map | 1 + .../wwwroot/favicon.png | Bin 0 -> 1148 bytes .../wwwroot/jsinterop.js | 8 + .../RichTextEditorUGSample/wwwroot/script.js | 1 + .../RichTextEditorUGSample/wwwroot/styles.css | 1 + .../Layout/MainLayout.razor | 23 ++ .../Layout/MainLayout.razor.css | 96 +++++++ .../Layout/NavMenu.razor | 30 ++ .../Layout/NavMenu.razor.css | 105 +++++++ .../Pages/Counter.razor | 18 ++ .../Pages/Home.razor | 7 + .../CustomKeyConfiguration.razor | 29 ++ .../Accessibility/ShowCharCount.razor | 20 ++ .../EditorModes/HTMLEditor.razor | 20 ++ .../EditorModes/MarkdownEditor.razor | 21 ++ .../Pages/RichTextEditor/EnableRTLMode.razor | 7 + .../EnterandShiftEnterKey/Enterkey.razor | 24 ++ .../EnterandShiftEnterKey/ShiftEnter.razor | 31 ++ .../FormValidation/CustomPlacement.razor | 32 +++ .../FormValidation/EditFormValidation.razor | 32 +++ .../FormValidation/ValidationAttributes.razor | 29 ++ .../HowTo/RichTextEditorInsideDialog.razor | 35 +++ .../RichTextEditor/HowTo/UpdateValue.razor | 88 ++++++ .../IFrameEditor/CssandScript.razor | 23 ++ .../IFrameEditor/IFrameAttributes.razor | 18 ++ .../RichTextEditor/IFrameEditor/Iframe.razor | 11 + .../ImportExport/ExportPDFOrWord.razor | 117 ++++++++ .../ImportExport/ImportFromWord.razor | 119 ++++++++ .../Pages/RichTextEditor/InlineEditor.razor | 14 + .../KeyboardShortcuts/CustomKeyConfig.razor | 28 ++ .../CharacterCountAndLimit.razor | 15 + .../Miscellaneous/CodeView.razor | 15 + .../Miscellaneous/NumberAndBulletLists.razor | 23 ++ .../Miscellaneous/PlaceholderText.razor | 14 + .../PasteCleanUp/AccessingPastedContent.razor | 17 ++ .../PasteCleanUp/AllowedStyleProperties.razor | 20 ++ .../PasteCleanUp/DeniedAttributes.razor | 19 ++ .../PasteCleanUp/DeniedTags.razor | 19 ++ .../PasteCleanUp/KeepFormat.razor | 15 + .../PasteCleanUp/PasteAsPlainText.razor | 12 + .../PasteCleanUp/PromptDialogOptions.razor | 15 + .../EnableResize.razor | 10 + .../RestrictResize.razor | 19 ++ .../SmartEditing/MentionIntegration.razor | 123 ++++++++ .../AddingCustomSlashMenuItems.razor | 92 ++++++ .../Customizingpopupwidthandheight.razor | 21 ++ .../SlashCommands/EnablingSlashMenu.razor | 21 ++ .../CustomizeToolbarAppearance.razor | 42 +++ .../CustomizingEditorContent.razor | 31 ++ .../HighlightSpecificLines.razor | 26 ++ .../RefreshingEditorUI.razor | 35 +++ .../StylingAndAppearance/SetPlaceholder.razor | 16 ++ .../StylingAndAppearance/SourceCodeView.razor | 18 ++ .../Toolbar/ExpandToolbar.razor | 40 +++ .../Toolbar/FloatingToolbar.razor | 10 + .../Toolbar/MultiRowToolbar.razor | 40 +++ .../RichTextEditor/Toolbar/PopupToolbar.razor | 10 + .../QuickToolbar/AudioQuickToolbar.razor | 27 ++ .../QuickToolbar/ImageQuickToolbar.razor | 31 ++ .../QuickToolbar/LinkQuickToolbar.razor | 23 ++ .../QuickToolbar/TableQuickToolbar.razor | 36 +++ .../QuickToolbar/TextQuickToolbar.razor | 33 +++ .../QuickToolbar/VideoQuickToolbar.razor | 30 ++ .../Toolbar/ScrollableToolbar.razor | 40 +++ .../Toolbar/ToolbarPosition.razor | 19 ++ .../RichTextEditor/Tools/BuiltInTool.razor | 39 +++ .../RichTextEditor/Tools/CodeBlock.razor | 59 ++++ .../RichTextEditor/Tools/CustomToolbar.razor | 40 +++ .../RichTextEditor/Tools/DialogSettings.razor | 10 + .../CustomizeFormatPainter.razor | 45 +++ .../FormatPainter/FormatPainterTool.razor | 44 +++ .../Tools/InsertAudio/AudioTool.razor | 16 ++ .../Tools/InsertAudio/DisplayPosition.razor | 34 +++ .../Tools/InsertAudio/FileSize.razor | 33 +++ .../InsertImage/DeletingImagesKeyboard.razor | 43 +++ .../Tools/InsertImage/DisplayPosition.razor | 14 + .../Tools/InsertImage/FileSize.razor | 33 +++ .../Tools/InsertImage/InsertImageTool.razor | 16 ++ .../Tools/InsertVideo/DisplayPosition.razor | 34 +++ .../Tools/InsertVideo/FileSize.razor | 33 +++ .../Tools/InsertVideo/VideoTool.razor | 17 ++ .../LinkManipulation/EditOrRemoveLink.razor | 29 ++ .../Tools/LinkManipulation/InsertLink.razor | 28 ++ .../Tools/StylingTools/CustomizingLists.razor | 24 ++ .../FontAndBackgroundColors.razor | 34 +++ .../FontFamily/BuiltInFontFamily.razor | 19 ++ .../FontFamily/CustomFontFamily.razor | 28 ++ .../FontFamily/GoogleFontSupport.razor | 27 ++ .../FontSize/BuiltInFontSize.razor | 19 ++ .../FontSize/CustomFontSize.razor | 27 ++ .../StylingTools/Formats/BuiltInFormats.razor | 19 ++ .../StylingTools/Formats/CustomFormats.razor | 27 ++ .../StylingTools/FormattingCodeBlocks.razor | 25 ++ .../Tools/StylingTools/ShowRecentColor.razor | 21 ++ .../TableManipulation/CustomStyles.razor | 23 ++ .../Tools/TableManipulation/InsertTable.razor | 18 ++ .../TableManipulation/TableFormatting.razor | 48 ++++ .../ClearUndoRedoStack.razor | 29 ++ .../UndoandRedoManager/DisableUndoRedo.razor | 16 ++ .../RemoveUndoRedoToolbar.razor | 47 ++++ .../UndoandRedoManager/UndoRedoSteps.razor | 14 + .../UndoRedoWithCustomToolbar.razor | 35 +++ .../ValueBinding/AutoSave.razor | 24 ++ .../ValueBinding/GetEditorContent.razor | 22 ++ .../ValueBinding/Valuebinding.razor | 16 ++ .../AvoidUnnecessaryRenders.razor | 23 ++ .../AvoidUnnecessaryRendersEvents.razor | 23 ++ .../RichTextEditor/XhtmlValidation.razor | 14 + .../Pages/Weather.razor | 63 +++++ .../RichTextEditorUGSample.Client/Program.cs | 5 + .../RichTextEditorUGSample.Client.csproj | 17 ++ .../Routes.razor | 6 + .../_Imports.razor | 11 + .../wwwroot/appsettings.Development.json | 8 + .../wwwroot/appsettings.json | 8 + .../Components/App.razor | 22 ++ .../Components/Pages/Error.razor | 36 +++ .../Components/_Imports.razor | 11 + .../RichTextEditorUGSample/Program.cs | 33 +++ .../Properties/launchSettings.json | 41 +++ .../RichTextEditorUGSample.csproj | 14 + .../RichTextEditorUGSample.csproj.user | 9 + .../appsettings.Development.json | 8 + .../RichTextEditorUGSample/appsettings.json | 9 + .../RichTextEditorUGSample/wwwroot/app.css | 51 ++++ .../wwwroot/bootstrap/bootstrap.min.css | 7 + .../wwwroot/bootstrap/bootstrap.min.css.map | 1 + .../wwwroot/favicon.png | Bin 0 -> 1148 bytes 246 files changed, 7235 insertions(+) create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/App.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Layout/MainLayout.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Layout/MainLayout.razor.css create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Layout/NavMenu.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Layout/NavMenu.razor.css create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/Counter.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/Error.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/Home.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Accessibility/CustomKeyConfiguration.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Accessibility/ShowCharCount.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EditorModes/HTMLEditor.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EditorModes/MarkdownEditor.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EnableRTLMode.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EnterandShiftEnterKey/Enterkey.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EnterandShiftEnterKey/ShiftEnter.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Events.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/FormValidation/CustomPlacement.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/FormValidation/EditFormValidation.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/FormValidation/ValidationAttributes.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/HowTo/RichTextEditorInsideDialog.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/HowTo/UpdateValue.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/IFrameEditor/CssandScript.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/IFrameEditor/IFrameAttributes.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/IFrameEditor/Iframe.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ImportExport/ExportPDFOrWord.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ImportExport/ImportFromWord.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/InlineEditor.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/KeyboardShortcuts/CustomKeyConfig.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Miscellaneous/CharacterCountAndLimit.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Miscellaneous/CodeView.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Miscellaneous/NumberAndBulletLists.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Miscellaneous/PlaceholderText.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/AccessingPastedContent.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/AllowedStyleProperties.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/DeniedAttributes.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/DeniedTags.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/KeepFormat.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/PasteAsPlainText.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/PromptDialogOptions.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ResizableRichTextEditor/EnableResize.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ResizableRichTextEditor/RestrictResize.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/SmartEditing/MentionIntegration.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/SmartEditing/SlashCommands/AddingCustomSlashMenuItems.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/SmartEditing/SlashCommands/Customizingpopupwidthandheight.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/SmartEditing/SlashCommands/EnablingSlashMenu.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/CustomizeToolbarAppearance.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/CustomizingEditorContent.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/HighlightSpecificLines.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/RefreshingEditorUI.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/SetPlaceholder.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/SourceCodeView.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/ExpandToolbar.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/FloatingToolbar.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/MultiRowToolbar.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/PopupToolbar.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/AudioQuickToolbar.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/ImageQuickToolbar.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/LinkQuickToolbar.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/TableQuickToolbar.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/TextQuickToolbar.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/VideoQuickToolbar.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/ScrollableToolbar.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/ToolbarPosition.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/BuiltInTool.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/CodeBlock.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/CustomToolbar.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/DialogSettings.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/FormatPainter/CustomizeFormatPainter.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/FormatPainter/FormatPainterTool.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertAudio/AudioTool.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertAudio/DisplayPosition.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertAudio/FileSize.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertImage/DeletingImagesKeyboard.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertImage/DisplayPosition.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertImage/FileSize.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertImage/InsertImageTool.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertVideo/DisplayPosition.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertVideo/FileSize.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertVideo/VideoTool.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/LinkManipulation/EditOrRemoveLink.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/LinkManipulation/InsertLink.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/CustomizingLists.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontAndBackgroundColors.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontFamily/BuiltInFontFamily.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontFamily/CustomFontFamily.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontFamily/GoogleFontSupport.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontSize/BuiltInFontSize.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontSize/CustomFontSize.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/Formats/BuiltInFormats.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/Formats/CustomFormats.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FormattingCodeBlocks.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/ShowRecentColor.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/TableManipulation/CustomStyles.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/TableManipulation/InsertTable.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/TableManipulation/TableFormatting.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/ClearUndoRedoStack.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/DisableUndoRedo.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/RemoveUndoRedoToolbar.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/UndoRedoSteps.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/UndoRedoWithCustomToolbar.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ValueBinding/AutoSave.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ValueBinding/GetEditorContent.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ValueBinding/Valuebinding.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/WebAssemblyPerformance/AvoidUnnecessaryRenders.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/WebAssemblyPerformance/AvoidUnnecessaryRendersEvents.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/XhtmlValidation.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/Weather.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Routes.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/_Imports.razor create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Data/HomeController.cs create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Program.cs create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/Properties/launchSettings.json create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/RichTextEditorUGSample.csproj create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/RichTextEditorUGSample.csproj.user create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/appsettings.Development.json create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/appsettings.json create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/wwwroot/app.css create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/wwwroot/bootstrap/bootstrap.min.css create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/wwwroot/bootstrap/bootstrap.min.css.map create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/wwwroot/favicon.png create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/wwwroot/jsinterop.js create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/wwwroot/script.js create mode 100644 RichTextEditor/WebApp-Server/RichTextEditorUGSample/wwwroot/styles.css create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Layout/MainLayout.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Layout/MainLayout.razor.css create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Layout/NavMenu.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Layout/NavMenu.razor.css create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/Counter.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/Home.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Accessibility/CustomKeyConfiguration.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Accessibility/ShowCharCount.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/EditorModes/HTMLEditor.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/EditorModes/MarkdownEditor.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/EnableRTLMode.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/EnterandShiftEnterKey/Enterkey.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/EnterandShiftEnterKey/ShiftEnter.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/FormValidation/CustomPlacement.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/FormValidation/EditFormValidation.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/FormValidation/ValidationAttributes.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/HowTo/RichTextEditorInsideDialog.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/HowTo/UpdateValue.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/IFrameEditor/CssandScript.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/IFrameEditor/IFrameAttributes.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/IFrameEditor/Iframe.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/ImportExport/ExportPDFOrWord.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/ImportExport/ImportFromWord.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/InlineEditor.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/KeyboardShortcuts/CustomKeyConfig.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Miscellaneous/CharacterCountAndLimit.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Miscellaneous/CodeView.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Miscellaneous/NumberAndBulletLists.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Miscellaneous/PlaceholderText.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/PasteCleanUp/AccessingPastedContent.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/PasteCleanUp/AllowedStyleProperties.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/PasteCleanUp/DeniedAttributes.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/PasteCleanUp/DeniedTags.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/PasteCleanUp/KeepFormat.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/PasteCleanUp/PasteAsPlainText.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/PasteCleanUp/PromptDialogOptions.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/ResizableRichTextEditor/EnableResize.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/ResizableRichTextEditor/RestrictResize.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/SmartEditing/MentionIntegration.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/SmartEditing/SlashCommands/AddingCustomSlashMenuItems.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/SmartEditing/SlashCommands/Customizingpopupwidthandheight.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/SmartEditing/SlashCommands/EnablingSlashMenu.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/StylingAndAppearance/CustomizeToolbarAppearance.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/StylingAndAppearance/CustomizingEditorContent.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/StylingAndAppearance/HighlightSpecificLines.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/StylingAndAppearance/RefreshingEditorUI.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/StylingAndAppearance/SetPlaceholder.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/StylingAndAppearance/SourceCodeView.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Toolbar/ExpandToolbar.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Toolbar/FloatingToolbar.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Toolbar/MultiRowToolbar.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Toolbar/PopupToolbar.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Toolbar/QuickToolbar/AudioQuickToolbar.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Toolbar/QuickToolbar/ImageQuickToolbar.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Toolbar/QuickToolbar/LinkQuickToolbar.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Toolbar/QuickToolbar/TableQuickToolbar.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Toolbar/QuickToolbar/TextQuickToolbar.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Toolbar/QuickToolbar/VideoQuickToolbar.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Toolbar/ScrollableToolbar.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Toolbar/ToolbarPosition.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/BuiltInTool.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/CodeBlock.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/CustomToolbar.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/DialogSettings.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/FormatPainter/CustomizeFormatPainter.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/FormatPainter/FormatPainterTool.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/InsertAudio/AudioTool.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/InsertAudio/DisplayPosition.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/InsertAudio/FileSize.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/InsertImage/DeletingImagesKeyboard.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/InsertImage/DisplayPosition.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/InsertImage/FileSize.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/InsertImage/InsertImageTool.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/InsertVideo/DisplayPosition.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/InsertVideo/FileSize.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/InsertVideo/VideoTool.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/LinkManipulation/EditOrRemoveLink.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/LinkManipulation/InsertLink.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/StylingTools/CustomizingLists.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/StylingTools/FontAndBackgroundColors.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/StylingTools/FontFamily/BuiltInFontFamily.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/StylingTools/FontFamily/CustomFontFamily.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/StylingTools/FontFamily/GoogleFontSupport.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/StylingTools/FontSize/BuiltInFontSize.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/StylingTools/FontSize/CustomFontSize.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/StylingTools/Formats/BuiltInFormats.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/StylingTools/Formats/CustomFormats.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/StylingTools/FormattingCodeBlocks.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/StylingTools/ShowRecentColor.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/TableManipulation/CustomStyles.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/TableManipulation/InsertTable.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/Tools/TableManipulation/TableFormatting.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/UndoandRedoManager/ClearUndoRedoStack.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/UndoandRedoManager/DisableUndoRedo.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/UndoandRedoManager/RemoveUndoRedoToolbar.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/UndoandRedoManager/UndoRedoSteps.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/UndoandRedoManager/UndoRedoWithCustomToolbar.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/ValueBinding/AutoSave.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/ValueBinding/GetEditorContent.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/ValueBinding/Valuebinding.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/WebAssemblyPerformance/AvoidUnnecessaryRenders.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/WebAssemblyPerformance/AvoidUnnecessaryRendersEvents.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/RichTextEditor/XhtmlValidation.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Pages/Weather.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Program.cs create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/RichTextEditorUGSample.Client.csproj create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/Routes.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/_Imports.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/wwwroot/appsettings.Development.json create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample.Client/wwwroot/appsettings.json create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample/Components/App.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample/Components/Pages/Error.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample/Components/_Imports.razor create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample/Program.cs create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample/Properties/launchSettings.json create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample/RichTextEditorUGSample.csproj create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample/RichTextEditorUGSample.csproj.user create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample/appsettings.Development.json create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample/appsettings.json create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample/wwwroot/app.css create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample/wwwroot/bootstrap/bootstrap.min.css create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample/wwwroot/bootstrap/bootstrap.min.css.map create mode 100644 RichTextEditor/WebApp-WASM/RichTextEditorUGSample/RichTextEditorUGSample/wwwroot/favicon.png diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/App.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/App.razor new file mode 100644 index 0000000..8c916f8 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/App.razor @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Layout/MainLayout.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Layout/MainLayout.razor new file mode 100644 index 0000000..5a24bb1 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Layout/MainLayout.razor @@ -0,0 +1,23 @@ +@inherits LayoutComponentBase + +
+
+ +
+ +
+
+ About +
+ +
+ @Body +
+
+
+ +
+ An unhandled error has occurred. + Reload + 🗙 +
diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Layout/MainLayout.razor.css b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Layout/MainLayout.razor.css new file mode 100644 index 0000000..038baf1 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Layout/MainLayout.razor.css @@ -0,0 +1,96 @@ +.page { + position: relative; + display: flex; + flex-direction: column; +} + +main { + flex: 1; +} + +.sidebar { + background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); +} + +.top-row { + background-color: #f7f7f7; + border-bottom: 1px solid #d6d5d5; + justify-content: flex-end; + height: 3.5rem; + display: flex; + align-items: center; +} + + .top-row ::deep a, .top-row ::deep .btn-link { + white-space: nowrap; + margin-left: 1.5rem; + text-decoration: none; + } + + .top-row ::deep a:hover, .top-row ::deep .btn-link:hover { + text-decoration: underline; + } + + .top-row ::deep a:first-child { + overflow: hidden; + text-overflow: ellipsis; + } + +@media (max-width: 640.98px) { + .top-row { + justify-content: space-between; + } + + .top-row ::deep a, .top-row ::deep .btn-link { + margin-left: 0; + } +} + +@media (min-width: 641px) { + .page { + flex-direction: row; + } + + .sidebar { + width: 250px; + height: 100vh; + position: sticky; + top: 0; + } + + .top-row { + position: sticky; + top: 0; + z-index: 1; + } + + .top-row.auth ::deep a:first-child { + flex: 1; + text-align: right; + width: 0; + } + + .top-row, article { + padding-left: 2rem !important; + padding-right: 1.5rem !important; + } +} + +#blazor-error-ui { + background: lightyellow; + bottom: 0; + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); + display: none; + left: 0; + padding: 0.6rem 1.25rem 0.7rem 1.25rem; + position: fixed; + width: 100%; + z-index: 1000; +} + + #blazor-error-ui .dismiss { + cursor: pointer; + position: absolute; + right: 0.75rem; + top: 0.5rem; + } diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Layout/NavMenu.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Layout/NavMenu.razor new file mode 100644 index 0000000..933bde7 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Layout/NavMenu.razor @@ -0,0 +1,33 @@ +
+
+ RichTextEditorUGSample +
+
+ + + +
+ +
+ diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Layout/NavMenu.razor.css b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Layout/NavMenu.razor.css new file mode 100644 index 0000000..4e15395 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Layout/NavMenu.razor.css @@ -0,0 +1,105 @@ +.navbar-toggler { + appearance: none; + cursor: pointer; + width: 3.5rem; + height: 2.5rem; + color: white; + position: absolute; + top: 0.5rem; + right: 1rem; + border: 1px solid rgba(255, 255, 255, 0.1); + background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1); +} + +.navbar-toggler:checked { + background-color: rgba(255, 255, 255, 0.5); +} + +.top-row { + height: 3.5rem; + background-color: rgba(0,0,0,0.4); +} + +.navbar-brand { + font-size: 1.1rem; +} + +.bi { + display: inline-block; + position: relative; + width: 1.25rem; + height: 1.25rem; + margin-right: 0.75rem; + top: -1px; + background-size: cover; +} + +.bi-house-door-fill-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); +} + +.bi-plus-square-fill-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E"); +} + +.bi-list-nested-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); +} + +.nav-item { + font-size: 0.9rem; + padding-bottom: 0.5rem; +} + + .nav-item:first-of-type { + padding-top: 1rem; + } + + .nav-item:last-of-type { + padding-bottom: 1rem; + } + + .nav-item ::deep .nav-link { + color: #d7d7d7; + background: none; + border: none; + border-radius: 4px; + height: 3rem; + display: flex; + align-items: center; + line-height: 3rem; + width: 100%; + } + +.nav-item ::deep a.active { + background-color: rgba(255,255,255,0.37); + color: white; +} + +.nav-item ::deep .nav-link:hover { + background-color: rgba(255,255,255,0.1); + color: white; +} + +.nav-scrollable { + display: none; +} + +.navbar-toggler:checked ~ .nav-scrollable { + display: block; +} + +@media (min-width: 641px) { + .navbar-toggler { + display: none; + } + + .nav-scrollable { + /* Never collapse the sidebar for wide screens */ + display: block; + + /* Allow sidebar to scroll for tall menus */ + height: calc(100vh - 3.5rem); + overflow-y: auto; + } +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/Counter.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/Counter.razor new file mode 100644 index 0000000..ef23cb3 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/Counter.razor @@ -0,0 +1,18 @@ +@page "/counter" + +Counter + +

Counter

+ +

Current count: @currentCount

+ + + +@code { + private int currentCount = 0; + + private void IncrementCount() + { + currentCount++; + } +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/Error.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/Error.razor new file mode 100644 index 0000000..576cc2d --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/Error.razor @@ -0,0 +1,36 @@ +@page "/Error" +@using System.Diagnostics + +Error + +

Error.

+

An error occurred while processing your request.

+ +@if (ShowRequestId) +{ +

+ Request ID: @RequestId +

+} + +

Development Mode

+

+ Swapping to Development environment will display more detailed information about the error that occurred. +

+

+ The Development environment shouldn't be enabled for deployed applications. + It can result in displaying sensitive information from exceptions to end users. + For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development + and restarting the app. +

+ +@code{ + [CascadingParameter] + private HttpContext? HttpContext { get; set; } + + private string? RequestId { get; set; } + private bool ShowRequestId => !string.IsNullOrEmpty(RequestId); + + protected override void OnInitialized() => + RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/Home.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/Home.razor new file mode 100644 index 0000000..9001e0b --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/Home.razor @@ -0,0 +1,7 @@ +@page "/" + +Home + +

Hello, world!

+ +Welcome to your new app. diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Accessibility/CustomKeyConfiguration.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Accessibility/CustomKeyConfiguration.razor new file mode 100644 index 0000000..80acb90 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Accessibility/CustomKeyConfiguration.razor @@ -0,0 +1,28 @@ +
Custom Key Configuration
+ +@page "/RichTextEditor/Accessibility/CustomKeyConfiguration" + +@using Syncfusion.Blazor.RichTextEditor + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+

Key features:

+
    +

  • Provides IFRAME and DIV modes

    • +

  • Capable of handling markdown editing.

    • +

  • Contains a modular library to load the necessary functionality on demand.

    • +

  • Provides a fully customizable toolbar.

    • +

  • Provides HTML view to edit the source directly for developers.

    • +

  • Supports third - party library integration.

    • +

  • Allows preview of modified content before saving it.

    • +
+ + +@code { + private ShortcutKeys KeyConfig = new ShortcutKeys() + { + Bold = "ctrl+1", + Italic = "ctrl+2" + }; +} + diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Accessibility/ShowCharCount.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Accessibility/ShowCharCount.razor new file mode 100644 index 0000000..d457447 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Accessibility/ShowCharCount.razor @@ -0,0 +1,19 @@ +
Show Char Count
+ +@page "/RichTextEditor/Accessibility/ShowCharCount" + +@using Syncfusion.Blazor.RichTextEditor + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+

Key features:

+
    +

  • Provides IFRAME and DIV modes

    • +

  • Capable of handling markdown editing.

    • +

  • Contains a modular library to load the necessary functionality on demand.

    • +

  • Provides a fully customizable toolbar.

    • +

  • Provides HTML view to edit the source directly for developers.

    • +

  • Supports third - party library integration.

    • +

  • Allows preview of modified content before saving it.

    • +
+ \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EditorModes/HTMLEditor.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EditorModes/HTMLEditor.razor new file mode 100644 index 0000000..b8d6ee1 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EditorModes/HTMLEditor.razor @@ -0,0 +1,19 @@ +
HTML Editor
+ +@page "/RichTextEditor/EditorModes/HTMLEditor" + +@using Syncfusion.Blazor.RichTextEditor + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+

Key features:

+
    +

  • Provides IFRAME and DIV modes

    • +

  • Capable of handling markdown editing.

    • +

  • Contains a modular library to load the necessary functionality on demand.

    • +

  • Provides a fully customizable toolbar.

    • +

  • Provides HTML view to edit the source directly for developers.

    • +

  • Supports third - party library integration.

    • +
+ + diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EditorModes/MarkdownEditor.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EditorModes/MarkdownEditor.razor new file mode 100644 index 0000000..0bbaca7 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EditorModes/MarkdownEditor.razor @@ -0,0 +1,20 @@ +
Markdown Editor
+ +@page "/RichTextEditor/EditorModes/MarkdownEditor" + +@using Syncfusion.Blazor.RichTextEditor + + + ***Overview***The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more. + ***Key features*** + *Mode*: Provides IFRAME and DIV mode. + *Module*: Modular library to load the necessary functionality on demand. + *Toolbar*: Provide a fully customizable toolbar. + *Editing*: HTML view to edit the source directly for developers. + *Third-party Integration*: Supports to integrate third-party library. + *Preview*: Preview the modified content before saving it. + *Tools*: Handling images, hyperlinks, video, uploads and more. + *Undo and Redo*: Undo/redo manager. + *Lists*:Creates bulleted and numbered list + + diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EnableRTLMode.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EnableRTLMode.razor new file mode 100644 index 0000000..e681256 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EnableRTLMode.razor @@ -0,0 +1,6 @@ +
Enable RTL Mode
+@page "/RichTextEditor/EnableRTLMode" + +@using Syncfusion.Blazor.RichTextEditor + + diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EnterandShiftEnterKey/Enterkey.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EnterandShiftEnterKey/Enterkey.razor new file mode 100644 index 0000000..9ae85c6 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EnterandShiftEnterKey/Enterkey.razor @@ -0,0 +1,23 @@ +
Enter key customization
+ +@page "/RichTextEditor/EnterandShiftEnterKey/Enterkey" + +@using Syncfusion.Blazor.RichTextEditor + +
Enter key as DIV tag

+ + +
In Rich text Editor, the Enter key and Shift + Enter key actions can be customized using the EnterKey and ShiftEnterKey properties.
+ + +
Enter key as P tag

+ + +
In Rich text Editor, the Enter key and Shift + Enter key actions can be customized using the EnterKey and ShiftEnterKey properties.
+ + +
Enter key as BR tag

+ + +
In Rich text Editor, the Enter key and Shift + Enter key actions can be customized using the EnterKey and ShiftEnterKey properties.
+ \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EnterandShiftEnterKey/ShiftEnter.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EnterandShiftEnterKey/ShiftEnter.razor new file mode 100644 index 0000000..d9ae257 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/EnterandShiftEnterKey/ShiftEnter.razor @@ -0,0 +1,30 @@ +
ShiftEnter
+@page "/RichTextEditor/EnterandShiftEnterKey/ShiftEnter" + +
Shift+Enter key customization
+ +@using Syncfusion.Blazor.RichTextEditor + +
+
Shift+Enter key as DIV tag
+
+ +
In Rich text Editor, the Enter key and Shift + Enter key actions can be customized using the EnterKey and ShiftEnterKey properties.
+ + +
+
Shift+Enter key as P tag
+
+ + +
In Rich text Editor, the Enter key and Shift + Enter key actions can be customized using the EnterKey and ShiftEnterKey properties.
+ + +
+
Shift+Enter key as BR tag
+
+ + +
In Rich text Editor, the Enter key and Shift + Enter key actions can be customized using the EnterKey and ShiftEnterKey properties.
+ + diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Events.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Events.razor new file mode 100644 index 0000000..46afc7e --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Events.razor @@ -0,0 +1,266 @@ +

Events

+@page "/RichTextEditor/Events" +@using Syncfusion.Blazor.RichTextEditor +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Inputs + + +
OnActionBegin event triggers before command execution using the toolbar items.
+ + + + + +
OnActionComplete event triggers after command execution using the toolbar items.
+ + + + + +
OnDialogOpen event triggers when the dialog is being opened.
+ + + + + +
DialogOpened event triggers when a dialog is opened.
+ + + + + +
OnDialogClose event triggers when the dialog is being closed.
+ + + + +
DialogClosed event triggers after the dialog has been closed.
+ + + + + +
OnQuickToolbarOpen event triggers when the quick toolbar is being opened.
+ + + + + +
OnQuickToolbarClose event triggers when the quick toolbar is being closed.
+ + + + + +
QuickToolbarClosed event triggers after the quick toolbar has been closed.
+ + + + + +
OnImageSelected event triggers when the image is selected or dragged into the insert image dialog.
+ + + + + +
BeforeUploadImage event triggers before the image upload process.
+ + + + + +
OnImageUploadSuccess event triggers when the image is successfully uploaded to the server side.
+ + + + + + +
OnImageUploadFailed event triggers when there is an error in the image upload.
+ + + + +
OnImageRemoving event triggers when the selected image is cleared from the insert image dialog.
+ + + + + +
ImageDelete event triggers when the selected image is cleared from the Rich Text Editor Content.
+ + + + + +
Created event triggers when the Rich Text Editor is rendered.
+ + + + + + +
Destroyed event triggers when the Rich Text Editor is destroyed.
+ + + + + +
Blur event triggers when the Rich Text Editor is focused out.
+ + + + + +
OnToolbarClick event triggers when Rich Text Editor Toolbar items is clicked.
+ + + + + +
Focus event triggers when Rich Text Editor is focused in.
+ + + + + +
ValueChange event triggers only when Rich Text Editor is blurred and changes are done to the content.
+ + + + + +
SelectionChanged event triggers whenever the selection range is modified within the Rich Text Editor, such as when selecting text with the mouse or using Shift+Arrow keys.
+ +@* + + *@ + +
OnResizeStart event triggers only when resizing the image is started.
+ + + + + +
OnResizeStop event triggers only when resizing the image is stopped.
+ + + + + +
AfterPasteCleanup event triggers after cleaning up the copied content.

+ + + + + +@code{ + public void OnActionBeginHandler(ActionBeginEventArgs args) + { + // Here you can customize your code + } + public void OnActionCompleteHandler(Syncfusion.Blazor.RichTextEditor.ActionCompleteEventArgs args) + { + // Here you can customize your code + } + public void OnDialogOpenHandler(BeforeOpenEventArgs args) + { + // Here you can customize your code + } + public void DialogOpenedHandler(DialogOpenEventArgs args) + { + // Here you can customize your code + } + public void OnDialogCloseHandler(BeforeCloseEventArgs args) + { + // Here you can customize your code + } + public void DialogClosedHandler(DialogCloseEventArgs args) + { + // Here you can customize your code + } + public void OnQuickToolbarOpenHandler(BeforeQuickToolbarOpenArgs args) + { + // Here you can customize your code + } + public void QuickToolbarOpenedHandler(QuickToolbarEventArgs args) + { + // Here you can customize your code + } + public void QuickToolbarClosedHandler(QuickToolbarEventArgs args) + { + // Here you can customize your code + } + public void OnImageSelectedHandler(SelectedEventArgs args) + { + // Here you can customize your code + } + public void BeforeUploadImageHandler(ImageUploadingEventArgs args) + { + // Here you can customize your code + } + public void OnImageUploadSuccessHandler(ImageSuccessEventArgs args) + { + // Here you can customize your code + } + public void OnImageUploadFailedHandler(ImageFailedEventArgs args) + { + // Here you can customize your code + } + public void OnImageRemovingHandler(RemovingEventArgs args) + { + // Here you can customize your code + } + public void OnImageDeleteHandler(AfterImageDeleteEventArgs args) + { + // Here you can customize your code + } + public void CreatedHandler(Object args) + { + // Here you can customize your code + } + public void DestroyedHandler(DestroyedEventArgs args) + { + // Here you can customize your code + } + public void BlurHandler(Syncfusion.Blazor.RichTextEditor.BlurEventArgs args) + { + // Here you can customize your code + } + public void OnToolbarClickHandler(ToolbarClickEventArgs args) + { + // Here you can customize your code + } + public void FocusHandler(Syncfusion.Blazor.RichTextEditor.FocusEventArgs args) + { + // Here you can customize your code + } + public void ValueChangeHandler(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args) + { + if (args is null) + { + throw new ArgumentNullException(nameof(args)); + } + // Here you can customize your code + } + // public void SelectionChangedHandler(Syncfusion.Blazor.RichTextEditor.SelectionChangedEventArgs args) + // { + // if (args is null) + // { + // throw new ArgumentNullException(nameof(args)); + // } + // } + public void OnResizeStartHandler(ResizeArgs args) + { + // Here you can customize your code + } + public void OnResizeStopHandler(ResizeArgs args) + { + // Here you can customize your code + } + public void AfterPasteCleanupHandler(PasteCleanupArgs args) + { + // Here you can customize your code + } +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/FormValidation/CustomPlacement.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/FormValidation/CustomPlacement.razor new file mode 100644 index 0000000..ef5c44c --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/FormValidation/CustomPlacement.razor @@ -0,0 +1,31 @@ +
Custom placement of validation message
+ +@page "/RichTextEditor/FormValidation/CustomPlacement" + +@using Syncfusion.Blazor.RichTextEditor +@using System.ComponentModel.DataAnnotations; + + +

+ +

+ +

+ + + +

+ + + +@code{ + public class Form + { + [Required(ErrorMessage = "RTE: value is required")] + [MinLength(15, ErrorMessage = "RTE: Need atleast 15 character length")] + [MaxLength(100, ErrorMessage = "RTE: Maximum 200 characters only")] + public string Description { get; set; } = "
Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.
"; + } + + private Form MyForm = new Form(); +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/FormValidation/EditFormValidation.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/FormValidation/EditFormValidation.razor new file mode 100644 index 0000000..0621a87 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/FormValidation/EditFormValidation.razor @@ -0,0 +1,31 @@ +
Edit Form Validation
+@page "/RichTextEditor/FormValidation/EditFormValidation" + +@using Syncfusion.Blazor.RichTextEditor +@using System.ComponentModel.DataAnnotations; + +
+
+
+ + + + +
+ + +
+ +
+
+
+ +@code{ + private class FormModel + { + [Required] + [MinLength(20, ErrorMessage = "Please enter at least 20 characters.")] + public string Description { get; set; } + } + private FormModel Model = new FormModel(); +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/FormValidation/ValidationAttributes.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/FormValidation/ValidationAttributes.razor new file mode 100644 index 0000000..d192c51 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/FormValidation/ValidationAttributes.razor @@ -0,0 +1,28 @@ +
Validation Attributes
+ +@page "/RichTextEditor/FormValidation/ValidationAttributes" + +@using Syncfusion.Blazor.RichTextEditor +@using System.ComponentModel.DataAnnotations; + + + +

+ + + + +

+ + + +@code{ + public class Form + { + [Required] + [MinLength(20, ErrorMessage = "Please enter at least 20 characters.")] + public string Description { get; set; } = "
Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.
"; + } + + private Form MyForm = new Form(); +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/HowTo/RichTextEditorInsideDialog.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/HowTo/RichTextEditorInsideDialog.razor new file mode 100644 index 0000000..dd533e3 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/HowTo/RichTextEditorInsideDialog.razor @@ -0,0 +1,34 @@ +
RichTextEditor inside the Dialog Component
+ +@page "/RichTextEditor/HowTo/RichTextEditorInsideDialog" + +@using Syncfusion.Blazor.RichTextEditor +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + +Open Dialog + + + +
+
Dialog Header
+
+ + + + + + + +@code { + SfDialog DialogObj; + SfRichTextEditor RteObj; + private void OpenDialog() + { + this.DialogObj.ShowAsync(); + } + private void DialogOpen() + { + this.RteObj.RefreshUI(); + } +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/HowTo/UpdateValue.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/HowTo/UpdateValue.razor new file mode 100644 index 0000000..4a18bcd --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/HowTo/UpdateValue.razor @@ -0,0 +1,87 @@ +
Capture ctrl+s to update the value
+ +@page "/RichTextEditor/HowTo/UpdateValue" + +@using Syncfusion.Blazor.RichTextEditor +@inject IJSRuntime JSRuntime + + +
+ + + +
+ + +@code { + SfRichTextEditor editor; + + private string contentEditableId = "richTextEditor_rte-editable"; + + public String editorValue { get; set; } = "

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

Key features:

  • Provides IFRAME and DIV modes

  • Capable of handling markdown editing.

  • Contains a modular library to load the necessary functionality on demand.

  • Provides a fully customizable toolbar.

  • Provides HTML view to edit the source directly for developers.

  • Supports third-party library integration.

  • Allows preview of modified content before saving it.

"; + + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Undo }, + new ToolbarItemModel() { Command = ToolbarCommand.Redo }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, + new ToolbarItemModel() { Command = ToolbarCommand.SuperScript }, + new ToolbarItemModel() { Command = ToolbarCommand.SubScript }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.FontName }, + new ToolbarItemModel() { Command = ToolbarCommand.FontSize }, + new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, + new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.LowerCase }, + new ToolbarItemModel() { Command = ToolbarCommand.UpperCase }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, + new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Outdent }, + new ToolbarItemModel() { Command = ToolbarCommand.Indent }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, + new ToolbarItemModel() { Command = ToolbarCommand.Image }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat }, + new ToolbarItemModel() { Command = ToolbarCommand.Print }, + new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }, + new ToolbarItemModel() { Command = ToolbarCommand.FullScreen }, + }; + + public async Task onKeyDown(KeyboardEventArgs arg) + { + if (arg.Key == "s" && arg.CtrlKey == true) + { + this.editorValue = await this.editor.GetXhtmlAsync(); + } + } + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await JSRuntime.InvokeVoidAsync("preventSaveAction", contentEditableId); + } + } +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/IFrameEditor/CssandScript.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/IFrameEditor/CssandScript.razor new file mode 100644 index 0000000..30bc52a --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/IFrameEditor/CssandScript.razor @@ -0,0 +1,22 @@ +@page "/RichTextEditor/IFrameEditor/CssandScript" + +
Adding external CSS/Script file
+ +@using Syncfusion.Blazor.RichTextEditor + + + +

Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.

+

Get started Quick Toolbar to click on the image

+

It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.

+ Logo + + +@code { + + private ResourcesModel Resources { get; set; } = new ResourcesModel() + { + Styles = new string[] { "/styles.css" }, + Scripts = new string[] { "/script.js" } + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/IFrameEditor/IFrameAttributes.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/IFrameEditor/IFrameAttributes.razor new file mode 100644 index 0000000..ea60644 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/IFrameEditor/IFrameAttributes.razor @@ -0,0 +1,17 @@ +@page "/RichTextEditor/IFrameEditor/IFrameAttributes" + +
IFrame Attributes
+ +@using Syncfusion.Blazor.RichTextEditor + + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+ + +@code { + + private Dictionary IframeAttributes = new Dictionary() { + { "style", "background: lightgray;" } + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/IFrameEditor/Iframe.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/IFrameEditor/Iframe.razor new file mode 100644 index 0000000..3a6ac4a --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/IFrameEditor/Iframe.razor @@ -0,0 +1,10 @@ +@page "/RichTextEditor/IFrameEditor/Iframe" + +
Iframe Editable in Blazor Rich Text Editor
+ +@using Syncfusion.Blazor.RichTextEditor + + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+ diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ImportExport/ExportPDFOrWord.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ImportExport/ExportPDFOrWord.razor new file mode 100644 index 0000000..5ac2c66 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ImportExport/ExportPDFOrWord.razor @@ -0,0 +1,116 @@ +
Export to PDF / Microsoft Word
+ +@page "/RichTextEditor/ImportExport/ExportPDFOrWord" + +@using Syncfusion.Blazor.RichTextEditor +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.DropDowns +@inject IJSRuntime JS +
+
+
+ +

Invitation to Microsoft Webinar Meet-Up

+ Dear Guest, +

+ We're thrilled to extend a special invitation to you for an exclusive Microsoft webinar meet-up, where we'll explore the latest innovations and insights driving the future of technology. As a valued member of our community, we believe this event will offer invaluable knowledge and networking opportunities. +

Event Details:

+ + + + + + + + + + + + + +
Time:10:00 AM - 12:00 PM
Duration:2 hours
Platform:Microsoft Teams


Agenda:

    +
  • Introduction to Cutting-Edge Microsoft Technologies
    • +
  • Deep Dive into AI in Business: Leveraging Microsoft Azure Solutions
    • +
  • Live Q&A Session with Industry Experts
    • +
  • Networking Opportunities with Peers and Professionals
    • +

Why Attend?

    +
  • Gain insights into the latest trends and advancements in technology.
    • +
  • Interact with industry experts and expand your professional network.
    • +
  • Get your questions answered in real-time during the live Q&A session.
    • +
  • Access exclusive resources and offers available only to webinar attendees.
    • +

+ Feel free to invite your colleagues and peers who might benefit from this enriching experience. Simply forward this email to them or share the event details. +

+ We're looking forward to your participation and to exploring the exciting world of Microsoft technology together. Should you have any questions or require further information, please don't hesitate to contact us at webinar@company.com.

+

Warm regards,

John Doe
Event Coordinator
ABC Company

+ + + + + + +
+
+
+@code { + SfRichTextEditor EditorRef; + private string SaveURL = "https://blazor.syncfusion.com/services/production/api/RichTextEditor/SaveFile"; + private string Path = "https://blazor.syncfusion.com/services/production/RichTextEditor/"; + private string PlaceHolderText = "Type something or use @ to tag a user..."; + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Undo }, + new ToolbarItemModel() { Command = ToolbarCommand.Redo }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.ExportWord }, + new ToolbarItemModel() { Command = ToolbarCommand.ExportPdf }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, + new ToolbarItemModel() { Command = ToolbarCommand.SuperScript }, + new ToolbarItemModel() { Command = ToolbarCommand.SubScript }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.FontName }, + new ToolbarItemModel() { Command = ToolbarCommand.FontSize }, + new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, + new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.LowerCase }, + new ToolbarItemModel() { Command = ToolbarCommand.UpperCase }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, + new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, + new ToolbarItemModel() { Command = ToolbarCommand.Blockquote }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.NumberFormatList }, + new ToolbarItemModel() { Command = ToolbarCommand.BulletFormatList }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Outdent }, + new ToolbarItemModel() { Command = ToolbarCommand.Indent }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, + new ToolbarItemModel() { Command = ToolbarCommand.Image }, + new ToolbarItemModel() { Command = ToolbarCommand.Video }, + new ToolbarItemModel() { Command = ToolbarCommand.Audio }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat }, + new ToolbarItemModel() { Command = ToolbarCommand.Print }, + new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }, + new ToolbarItemModel() { Command = ToolbarCommand.FullScreen }, + }; + private List TableQuickToolbarItems = new List() + { + new TableToolbarItemModel() { Command = TableToolbarCommand.TableHeader }, + new TableToolbarItemModel() { Command = TableToolbarCommand.TableRows }, + new TableToolbarItemModel() { Command = TableToolbarCommand.TableColumns }, + new TableToolbarItemModel() { Command = TableToolbarCommand.TableCell }, + new TableToolbarItemModel() { Command = TableToolbarCommand.HorizontalSeparator }, + new TableToolbarItemModel() { Command = TableToolbarCommand.BackgroundColor }, + new TableToolbarItemModel() { Command = TableToolbarCommand.TableRemove }, + new TableToolbarItemModel() { Command = TableToolbarCommand.TableCellVerticalAlign }, + new TableToolbarItemModel() { Command = TableToolbarCommand.Styles } + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ImportExport/ImportFromWord.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ImportExport/ImportFromWord.razor new file mode 100644 index 0000000..349ba4f --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ImportExport/ImportFromWord.razor @@ -0,0 +1,118 @@ +
Import from Microsoft Word
+ +@page "/RichTextEditor/ImportExport/ImportFromWord" +@using Syncfusion.Blazor.RichTextEditor +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.DropDowns +@inject IJSRuntime JS +
+
+
+ +

Invitation to Microsoft Webinar Meet-Up

+ Dear Guest, +

+ We're thrilled to extend a special invitation to you for an exclusive Microsoft webinar meet-up, where we'll explore the latest innovations and insights driving the future of technology. As a valued member of our community, we believe this event will offer invaluable knowledge and networking opportunities. +

Event Details:

+ + + + + + + + + + + + + + + +
Time:10:00 AM - 12:00 PM
Duration:2 hours
Platform:Microsoft Teams


Agenda:

+
    +
  • Introduction to Cutting-Edge Microsoft Technologies
    • +
  • Deep Dive into AI in Business: Leveraging Microsoft Azure Solutions
    • +
  • Live Q&A Session with Industry Experts
    • +
  • Networking Opportunities with Peers and Professionals
    • +

Why Attend?

+
    +
  • Gain insights into the latest trends and advancements in technology.
    • +
  • Interact with industry experts and expand your professional network.
    • +
  • Get your questions answered in real-time during the live Q&A session.
    • +
  • Access exclusive resources and offers available only to webinar attendees.
    • +

+ Feel free to invite your colleagues and peers who might benefit from this enriching experience. Simply forward this email to them or share the event details. +

+ We're looking forward to your participation and to exploring the exciting world of Microsoft technology together. Should you have any questions or require further information, please don't hesitate to contact us at webinar@company.com. +

+
+

Warm regards,

John Doe
Event Coordinator
ABC Company

+ + + + + +
+
+
+@code { + SfRichTextEditor EditorRef; + private string SaveURL = "https://blazor.syncfusion.com/services/production/api/RichTextEditor/SaveFile"; + private string Path = "https://blazor.syncfusion.com/services/production/RichTextEditor/"; + private string PlaceHolderText = "Type something or use @ to tag a user..."; + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Undo }, + new ToolbarItemModel() { Command = ToolbarCommand.Redo }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.ImportWord }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, + new ToolbarItemModel() { Command = ToolbarCommand.SuperScript }, + new ToolbarItemModel() { Command = ToolbarCommand.SubScript }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.FontName }, + new ToolbarItemModel() { Command = ToolbarCommand.FontSize }, + new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, + new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.LowerCase }, + new ToolbarItemModel() { Command = ToolbarCommand.UpperCase }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, + new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.NumberFormatList }, + new ToolbarItemModel() { Command = ToolbarCommand.BulletFormatList }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Outdent }, + new ToolbarItemModel() { Command = ToolbarCommand.Indent }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, + new ToolbarItemModel() { Command = ToolbarCommand.Image }, + new ToolbarItemModel() { Command = ToolbarCommand.Video }, + new ToolbarItemModel() { Command = ToolbarCommand.Audio }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat }, + new ToolbarItemModel() { Command = ToolbarCommand.Print }, + new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }, + new ToolbarItemModel() { Command = ToolbarCommand.FullScreen }, + }; + private List TableQuickToolbarItems = new List() + { + new TableToolbarItemModel() { Command = TableToolbarCommand.TableHeader }, + new TableToolbarItemModel() { Command = TableToolbarCommand.TableRows }, + new TableToolbarItemModel() { Command = TableToolbarCommand.TableColumns }, + new TableToolbarItemModel() { Command = TableToolbarCommand.TableCell }, + new TableToolbarItemModel() { Command = TableToolbarCommand.HorizontalSeparator }, + new TableToolbarItemModel() { Command = TableToolbarCommand.BackgroundColor }, + new TableToolbarItemModel() { Command = TableToolbarCommand.TableRemove }, + new TableToolbarItemModel() { Command = TableToolbarCommand.TableCellVerticalAlign }, + new TableToolbarItemModel() { Command = TableToolbarCommand.Styles } + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/InlineEditor.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/InlineEditor.razor new file mode 100644 index 0000000..3368204 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/InlineEditor.razor @@ -0,0 +1,13 @@ +@page "/RichTextEditor/InlineEditor" + +
Inline Editor in Blazor Rich Text Editor
+ +@using Syncfusion.Blazor.RichTextEditor + + + +

+ The sample is configured with inline mode of editor. Initially, the editor is rendered without a + toolbar. The toolbar becomes visible only when the content is selected. +

+ diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/KeyboardShortcuts/CustomKeyConfig.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/KeyboardShortcuts/CustomKeyConfig.razor new file mode 100644 index 0000000..8bd1310 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/KeyboardShortcuts/CustomKeyConfig.razor @@ -0,0 +1,27 @@ +
Custom Key Config
+ +@page "/RichTextEditor/KeyboardShortcuts/CustomKeyConfig" + +@using Syncfusion.Blazor.RichTextEditor + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+

Key features:

+
    +

  • Provides IFRAME and DIV modes

    • +

  • Capable of handling markdown editing.

    • +

  • Contains a modular library to load the necessary functionality on demand.

    • +

  • Provides a fully customizable toolbar.

    • +

  • Provides HTML view to edit the source directly for developers.

    • +

  • Supports third - party library integration.

    • +

  • Allows preview of modified content before saving it.

    • +
+ + +@code { + private ShortcutKeys KeyConfig = new ShortcutKeys() + { + Bold = "ctrl+1", + Italic = "ctrl+2" + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Miscellaneous/CharacterCountAndLimit.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Miscellaneous/CharacterCountAndLimit.razor new file mode 100644 index 0000000..aeca34c --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Miscellaneous/CharacterCountAndLimit.razor @@ -0,0 +1,14 @@ +
Character count and limit enforcement
+ +@page "/RichTextEditor/Miscellaneous/CharacterCountAndLimit" + +@using Syncfusion.Blazor.RichTextEditor + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+

Key features:

+
    +

  • Provides IFRAME and DIV modes

    • +

  • Capable of handling markdown editing.

    • +
+ diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Miscellaneous/CodeView.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Miscellaneous/CodeView.razor new file mode 100644 index 0000000..31b2404 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Miscellaneous/CodeView.razor @@ -0,0 +1,14 @@ +
Code View
+ +@page "/RichTextEditor/Miscellaneous/CodeView" + +@using Syncfusion.Blazor.RichTextEditor + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+

Key features:

+
    +

  • Provides IFRAME and DIV modes

    • +

  • Capable of handling markdown editing.

    • +
+ diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Miscellaneous/NumberAndBulletLists.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Miscellaneous/NumberAndBulletLists.razor new file mode 100644 index 0000000..3460806 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Miscellaneous/NumberAndBulletLists.razor @@ -0,0 +1,22 @@ +
Number and Bullet Format Lists
+ +@page "/RichTextEditor/Miscellaneous/NumberAndBulletLists" +@using Syncfusion.Blazor.RichTextEditor + + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+

Key features:

+
    +

  • Provides IFRAME and DIV modes

    • +

  • Capable of handling markdown editing.

    • +
+ + +@code { + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.NumberFormatList }, + new ToolbarItemModel() { Command = ToolbarCommand.BulletFormatList }, + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Miscellaneous/PlaceholderText.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Miscellaneous/PlaceholderText.razor new file mode 100644 index 0000000..7db84e4 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Miscellaneous/PlaceholderText.razor @@ -0,0 +1,13 @@ +
Placeholder Text Customization
+ +@page "/RichTextEditor/Miscellaneous/PlaceholderText" + +@using Syncfusion.Blazor.RichTextEditor + + + + diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/AccessingPastedContent.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/AccessingPastedContent.razor new file mode 100644 index 0000000..0474dc6 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/AccessingPastedContent.razor @@ -0,0 +1,16 @@ +@page "/RichTextEditor/PasteCleanUp/AccessingPastedContent" + +
Accessing pasted content programmatically
+ +@using Syncfusion.Blazor.RichTextEditor + + + + + +@code { + public void AfterPasteCleanupHandler(PasteCleanupArgs args) + { + // Here you can get the pasted Html string using args.Value + } +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/AllowedStyleProperties.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/AllowedStyleProperties.razor new file mode 100644 index 0000000..1feb910 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/AllowedStyleProperties.razor @@ -0,0 +1,19 @@ +@page "/RichTextEditor/PasteCleanUp/AllowedStyleProperties" + +
Allowed Style Properties
+ +@using Syncfusion.Blazor.RichTextEditor + + + +

Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.

+

Paste Cleanup properties:

+
    +

  • allowedStyleProperties - specifies the allowed style properties when pasting in Rich Text Editor.

    • +
+ + +@code { + private string[] AllowedStyles = new string[] { "color", "margin", "font-size" }; +} + diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/DeniedAttributes.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/DeniedAttributes.razor new file mode 100644 index 0000000..c717019 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/DeniedAttributes.razor @@ -0,0 +1,18 @@ +@page "/RichTextEditor/PasteCleanUp/DeniedAttributes" + +
Denied Attributes
+ +@using Syncfusion.Blazor.RichTextEditor + + + +

Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.

+

Paste Cleanup properties:

+
    +

  • deniedAttributes - specifies the attributes to restrict when pasting in Rich Text Editor.

    • +
+ + +@code { + private string[] DeniedAttribute = new string[] { "class", "title", "id" }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/DeniedTags.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/DeniedTags.razor new file mode 100644 index 0000000..0c34951 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/DeniedTags.razor @@ -0,0 +1,18 @@ +@page "/RichTextEditor/PasteCleanUp/DeniedTags" + +
Denied Tags
+ +@using Syncfusion.Blazor.RichTextEditor + + + +

Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.

+

Paste Cleanup properties:

+
    +

  • deniedTags - specifies the tags to restrict when pasting in Rich Text Editor.

    • +
+ + +@code { + private string[] DeniedTag = new string[] { "a", "a[!href]" }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/KeepFormat.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/KeepFormat.razor new file mode 100644 index 0000000..6b6781b --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/KeepFormat.razor @@ -0,0 +1,14 @@ +@page "/RichTextEditor/PasteCleanUp/KeepFormat" + +
Keep format
+ +@using Syncfusion.Blazor.RichTextEditor + + + +

Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.

+

Paste Cleanup properties:

+
    +

  • keepFormat- specifies whether to keep or remove the format when pasting in Rich Text Editor.

    • +
+ \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/PasteAsPlainText.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/PasteAsPlainText.razor new file mode 100644 index 0000000..f6d5178 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/PasteAsPlainText.razor @@ -0,0 +1,11 @@ +@page "/RichTextEditor/PasteCleanUp/PasteAsPlainText" + +
Paste as plain text
+ +@using Syncfusion.Blazor.RichTextEditor + + + +

Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.

+ + diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/PromptDialogOptions.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/PromptDialogOptions.razor new file mode 100644 index 0000000..f7f63d3 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/PasteCleanUp/PromptDialogOptions.razor @@ -0,0 +1,14 @@ +@page "/RichTextEditor/PasteCleanUp/PromptDialogOptions" + +
Prompt dialog options
+ +@using Syncfusion.Blazor.RichTextEditor + + + +

Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.

+

Paste Cleanup properties:

+
    +

  • prompt - specifies whether to enable the prompt when pasting in Rich Text Editor.

    • +
+ diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ResizableRichTextEditor/EnableResize.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ResizableRichTextEditor/EnableResize.razor new file mode 100644 index 0000000..3f7d835 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ResizableRichTextEditor/EnableResize.razor @@ -0,0 +1,9 @@ +
Resizable Rich Text Editor
+ +@page "/RichTextEditor/ResizableRichTextEditor/EnableResize" + +@using Syncfusion.Blazor.RichTextEditor + + +

The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+ diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ResizableRichTextEditor/RestrictResize.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ResizableRichTextEditor/RestrictResize.razor new file mode 100644 index 0000000..eb859ac --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ResizableRichTextEditor/RestrictResize.razor @@ -0,0 +1,18 @@ +
Restrict resize
+ +@page "/RichTextEditor/ResizableRichTextEditor/RestrictResize" + +@using Syncfusion.Blazor.RichTextEditor + + +

The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+ + + diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/SmartEditing/MentionIntegration.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/SmartEditing/MentionIntegration.razor new file mode 100644 index 0000000..d419579 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/SmartEditing/MentionIntegration.razor @@ -0,0 +1,122 @@ +@page "/RichTextEditor/SmartEditing/MentionIntegration" + +
Mention Integration in Blazor Rich Text Editor
+ +@using Syncfusion.Blazor.DropDowns +@using Syncfusion.Blazor.RichTextEditor + + + +

+ Hello + @@Maria +

+

Welcome to the mention integration with rich text editor demo. Type @@ character and tag user from the suggestion list.

+ + +
+ + + + + + + +
+
+ employee + +
+ 		@((context as PersonData).Name)
+ + + @@@((context as PersonData).Name) + + + + + +
+ +@code { + public class PersonData + { + public string Name { get; set; } + public string EmailId { get; set; } + public string EmployeeImage { get; set; } + public string Status { get; set; } + } + List EmailData = new List { + new PersonData() { Name="Selma Rose", Status = "active", EmployeeImage="2.png", EmailId="selma@gmail.com" }, + new PersonData() { Name="Russo Kay", Status = "away", EmployeeImage="8.png", EmailId="russo@gmail.com" }, + new PersonData() { Name="Camden Kate", Status = "busy", EmployeeImage="9.png", EmailId="camden@gmail.com" }, + new PersonData() { Name="Garth", Status = "active", EmployeeImage="7.png", EmailId="garth@gmail.com" }, + new PersonData() { Name="Ursula Ann", Status = "busy", EmployeeImage="3.png", EmailId="ursula@gmail.com" }, + new PersonData() { Name="Margaret", Status = "active", EmployeeImage="10.png", EmailId="margaret@gmail.com" }, + new PersonData() { Name="Laura Grace", Status = "away", EmployeeImage="1.png", EmailId="laura@gmail.com" }, + new PersonData() { Name="Robert", Status = "busy", EmployeeImage="dp.png", EmailId="robert@gmail.com" }, + new PersonData() { Name="Albert", Status = "away", EmployeeImage="8.png", EmailId="albert@gmail.com" }, + new PersonData() { Name="Michale", Status = "active", EmployeeImage="4.png", EmailId="michale@gmail.com" }, + new PersonData() { Name="Andrew James", Status = "active", EmployeeImage="db.png", EmailId="james@gmail.com" }, + new PersonData() { Name="William", Status = "active", EmployeeImage="10.png", EmailId="william@gmail.com" } + }; +} + diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/SmartEditing/SlashCommands/AddingCustomSlashMenuItems.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/SmartEditing/SlashCommands/AddingCustomSlashMenuItems.razor new file mode 100644 index 0000000..d09f52c --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/SmartEditing/SlashCommands/AddingCustomSlashMenuItems.razor @@ -0,0 +1,91 @@ +
Adding custom slash menu items
+ +@page "/RichTextEditor/SmartEditing/SlashCommands/AddingCustomSlashMenuItems" + +@using Syncfusion.Blazor.RichTextEditor + +
+ + + + + +
+@code +{ + private SfRichTextEditor richTextEditorObj; + private string editorPlaceholder = "Type \"/\" and choose format"; + private string meetingNotes = @"

Meeting Notes

Attendees
Date & Time
Agenda
Discussed Items
Action Items
"; + private string signature = "


Warm regards,

John Doe
Event Coordinator
ABC Company

"; + private List tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, + new ToolbarItemModel() { Command = ToolbarCommand.SuperScript }, + new ToolbarItemModel() { Command = ToolbarCommand.SubScript }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.FontName }, + new ToolbarItemModel() { Command = ToolbarCommand.FontSize }, + new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, + new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.LowerCase }, + new ToolbarItemModel() { Command = ToolbarCommand.UpperCase }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, + new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, + new ToolbarItemModel() { Command = ToolbarCommand.Blockquote }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.NumberFormatList }, + new ToolbarItemModel() { Command = ToolbarCommand.BulletFormatList }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Outdent }, + new ToolbarItemModel() { Command = ToolbarCommand.Indent }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, + new ToolbarItemModel() { Command = ToolbarCommand.Image }, + new ToolbarItemModel() { Command = ToolbarCommand.Video }, + new ToolbarItemModel() { Command = ToolbarCommand.Audio }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, + new ToolbarItemModel() { Command = ToolbarCommand.CodeBlock }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat }, + new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Undo }, + new ToolbarItemModel() { Command = ToolbarCommand.Redo } + }; + private List slashmenuItems = new List() + { + new SlashMenuItemModel() {Command = SlashMenuCommand.Paragraph}, + new SlashMenuItemModel() {Command = SlashMenuCommand.Heading1}, + new SlashMenuItemModel() {Command = SlashMenuCommand.Heading2}, + new SlashMenuItemModel() {Command = SlashMenuCommand.Heading3}, + new SlashMenuItemModel() {Command = SlashMenuCommand.Heading4}, + new SlashMenuItemModel() {Command = SlashMenuCommand.OrderedList}, + new SlashMenuItemModel() {Command = SlashMenuCommand.UnorderedList}, + new SlashMenuItemModel() {Command = SlashMenuCommand.Blockquote}, + new SlashMenuItemModel() {Command = SlashMenuCommand.CodeBlock}, + new SlashMenuItemModel() {Command = SlashMenuCommand.Image}, + new SlashMenuItemModel() {Command = SlashMenuCommand.Audio}, + new SlashMenuItemModel() {Command = SlashMenuCommand.Video}, + new SlashMenuItemModel() {Command = SlashMenuCommand.Link}, + new SlashMenuItemModel() {Command = SlashMenuCommand.Table}, + new SlashMenuItemModel() { Text="Meeting Notes", GroupBy = "Custom" , IconCss = "e-icons e-description", Description= "Insert a meeting note template." }, + new SlashMenuItemModel() { Text="Signature", GroupBy= "Custom" , IconCss = "e-icons e-signature", Description= "Insert a signature template." } + }; + public async Task OnSlashMenuItemSelect(SlashMenuSelectEventArgs args) + { + if (args.ItemData.Text == "Meeting Notes") + { + await richTextEditorObj.ExecuteCommandAsync(CommandName.InsertHTML, meetingNotes); + } + else if (args.ItemData.Text == "Signature") + { + await richTextEditorObj.ExecuteCommandAsync(CommandName.InsertHTML, signature); + } + } +} + diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/SmartEditing/SlashCommands/Customizingpopupwidthandheight.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/SmartEditing/SlashCommands/Customizingpopupwidthandheight.razor new file mode 100644 index 0000000..e65a979 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/SmartEditing/SlashCommands/Customizingpopupwidthandheight.razor @@ -0,0 +1,20 @@ +
Customizing the popup width and height
+ +@page "/RichTextEditor/SmartEditing/SlashCommands/Customizingpopupwidthandheight" + +@using Syncfusion.Blazor.RichTextEditor + + + + + +@code { + private string editorPlaceholder = "Type \"/\" and choose format"; + private List slashmenuItems = new List() + { + new SlashMenuItemModel() {Command = SlashMenuCommand.Paragraph}, + new SlashMenuItemModel() {Command = SlashMenuCommand.Heading1}, + new SlashMenuItemModel() {Command = SlashMenuCommand.Heading2}, + new SlashMenuItemModel() {Command = SlashMenuCommand.Heading3}, + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/SmartEditing/SlashCommands/EnablingSlashMenu.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/SmartEditing/SlashCommands/EnablingSlashMenu.razor new file mode 100644 index 0000000..e479dfa --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/SmartEditing/SlashCommands/EnablingSlashMenu.razor @@ -0,0 +1,20 @@ +
Enabling the slash menu and Configure the slash menu items
+ +@page "/RichTextEditor/SmartEditing/SlashCommands/EnablingSlashMenu" + +@using Syncfusion.Blazor.RichTextEditor + + + + + +@code { + private string editorPlaceholder = "Type \"/\" and choose format"; + private List slashmenuItems = new List() + { + new SlashMenuItemModel() {Command = SlashMenuCommand.Paragraph}, + new SlashMenuItemModel() {Command = SlashMenuCommand.Heading1}, + new SlashMenuItemModel() {Command = SlashMenuCommand.Heading2}, + new SlashMenuItemModel() {Command = SlashMenuCommand.Heading3}, + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/CustomizeToolbarAppearance.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/CustomizeToolbarAppearance.razor new file mode 100644 index 0000000..e5a4152 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/CustomizeToolbarAppearance.razor @@ -0,0 +1,41 @@ +
Customize Toolbar Appearance
+ +@page "/RichTextEditor/StylingAndAppearance/CustomizeToolbarAppearance" + +@using Syncfusion.Blazor.RichTextEditor + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Format your content using standard toolbar commands.

+

Key features:

+
    +

  • Provides IFRAME and DIV modes

    • +

  • Capable of handling markdown editing.

    • +
+ + + diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/CustomizingEditorContent.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/CustomizingEditorContent.razor new file mode 100644 index 0000000..a184181 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/CustomizingEditorContent.razor @@ -0,0 +1,30 @@ +
Customizing Editor Content
+ +@page "/RichTextEditor/StylingAndAppearance/CustomizingEditorContent" + +@using Syncfusion.Blazor.RichTextEditor + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Format your content using standard toolbar commands.

+

Key features:

+
    +

  • Provides IFRAME and DIV modes

    • +

  • Capable of handling markdown editing.

    • +
+ + + diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/HighlightSpecificLines.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/HighlightSpecificLines.razor new file mode 100644 index 0000000..6f198c9 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/HighlightSpecificLines.razor @@ -0,0 +1,25 @@ +
Highlight the Specific Lines
+ +@page "/RichTextEditor/StylingAndAppearance/HighlightSpecificLines" + +@using Syncfusion.Blazor.RichTextEditor +@using Syncfusion.Blazor.Buttons + +Apply + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.

+ + +@code { + + SfRichTextEditor RteObj; + + [Inject] + IJSRuntime JsRuntime { get; set; } + + private async Task SetBackround() + { + await JsRuntime.InvokeAsync("RichTextEditor.setBackground"); + await this.RteObj.ExecuteCommandAsync(CommandName.BackgroundColor, "yellow"); + } +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/RefreshingEditorUI.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/RefreshingEditorUI.razor new file mode 100644 index 0000000..5a575c5 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/RefreshingEditorUI.razor @@ -0,0 +1,34 @@ +
Refreshing the editor UI
+ +@page "/RichTextEditor/StylingAndAppearance/RefreshingEditorUI" + +@using Syncfusion.Blazor.RichTextEditor +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + +Open Dialog + + + +
+
Dialog Header
+
+ + + + + + + +@code { + SfDialog DialogObj; + SfRichTextEditor RteObj; + private void OpenDialog() + { + this.DialogObj.ShowAsync(); + } + private void DialogOpen() + { + this.RteObj.RefreshUIAsync(); + } +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/SetPlaceholder.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/SetPlaceholder.razor new file mode 100644 index 0000000..75ea9d1 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/SetPlaceholder.razor @@ -0,0 +1,15 @@ +
Set placeholder
+ +@page "/RichTextEditor/StylingAndAppearance/SetPlaceholder" + +@using Syncfusion.Blazor.RichTextEditor + + + + + + diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/SourceCodeView.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/SourceCodeView.razor new file mode 100644 index 0000000..a94f240 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/StylingAndAppearance/SourceCodeView.razor @@ -0,0 +1,17 @@ +
Source Code View
+ +@page "/RichTextEditor/StylingAndAppearance/SourceCodeView" + +@using Syncfusion.Blazor.RichTextEditor + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Format your content using standard toolbar commands.

+

Key features:

+
    +

  • Provides IFRAME and DIV modes

    • +

  • Capable of handling markdown editing.

    • +
+ + + + diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/ExpandToolbar.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/ExpandToolbar.razor new file mode 100644 index 0000000..b21b259 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/ExpandToolbar.razor @@ -0,0 +1,39 @@ +
Expand Toolbar
+ +@page "/RichTextEditor/Toolbar/ExpandToolbar" + +@using Syncfusion.Blazor.RichTextEditor + + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+ + +@code{ + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, + new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, + new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Outdent }, + new ToolbarItemModel() { Command = ToolbarCommand.Indent }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, + new ToolbarItemModel() { Command = ToolbarCommand.Image }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Undo }, + new ToolbarItemModel() { Command = ToolbarCommand.Redo } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/FloatingToolbar.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/FloatingToolbar.razor new file mode 100644 index 0000000..fe2b57a --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/FloatingToolbar.razor @@ -0,0 +1,9 @@ +
Floating Toolbar
+@page "/RichTextEditor/Toolbar/FloatingToolbar" + +@using Syncfusion.Blazor.RichTextEditor + + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+ \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/MultiRowToolbar.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/MultiRowToolbar.razor new file mode 100644 index 0000000..6a5154c --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/MultiRowToolbar.razor @@ -0,0 +1,39 @@ +
Multi-row Toolbar
+ +@page "/RichTextEditor/Toolbar/MultiRowToolbar" + +@using Syncfusion.Blazor.RichTextEditor + + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+ + +@code { + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, + new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, + new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Outdent }, + new ToolbarItemModel() { Command = ToolbarCommand.Indent }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, + new ToolbarItemModel() { Command = ToolbarCommand.Image }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Undo }, + new ToolbarItemModel() { Command = ToolbarCommand.Redo } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/PopupToolbar.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/PopupToolbar.razor new file mode 100644 index 0000000..8d6c4bf --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/PopupToolbar.razor @@ -0,0 +1,9 @@ +
Popup Toolbar
+@page "/RichTextEditor/Toolbar/PopupToolbar" + +@using Syncfusion.Blazor.RichTextEditor + + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+ \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/AudioQuickToolbar.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/AudioQuickToolbar.razor new file mode 100644 index 0000000..74169e5 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/AudioQuickToolbar.razor @@ -0,0 +1,26 @@ +
Audio Quick Toolbar
+ +@page "/RichTextEditor/Toolbar/QuickToolbar/AudioQuickToolbar" + +@using Syncfusion.Blazor.RichTextEditor; + + + + +

Get started with Quick Toolbar to click on an audio

+

Using the quick toolbar, users can replace, display, and delete the selected audio.

+ + + +@code { + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Audio }, + }; + private List AudioQuickToolbarItems = new List() + { + new AudioToolbarItemModel() { Command = AudioToolbarCommand.AudioRemove }, + new AudioToolbarItemModel() { Command = AudioToolbarCommand.AudioReplace}, + new AudioToolbarItemModel() { Command = AudioToolbarCommand.AudioLayoutOption } + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/ImageQuickToolbar.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/ImageQuickToolbar.razor new file mode 100644 index 0000000..af134f3 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/ImageQuickToolbar.razor @@ -0,0 +1,30 @@ +
Image Quick Toolbar
+ +@page "/RichTextEditor/Toolbar/QuickToolbar/ImageQuickToolbar" + +@using Syncfusion.Blazor.RichTextEditor + + + +

Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.

+

Get started Quick Toolbar to click on the image

+

It is possible to add custom style on the selected image inside the Rich Text Editor through quick toolbar.

+ Logo + + +@code { + private List Image = new List() + { + new ImageToolbarItemModel() { Command = ImageToolbarCommand.Replace }, + new ImageToolbarItemModel() { Command = ImageToolbarCommand.Align }, + new ImageToolbarItemModel() { Command = ImageToolbarCommand.Caption }, + new ImageToolbarItemModel() { Command = ImageToolbarCommand.Remove }, + new ImageToolbarItemModel() { Command = ImageToolbarCommand.OpenImageLink }, + new ImageToolbarItemModel() { Command = ImageToolbarCommand.Separator }, + new ImageToolbarItemModel() { Command = ImageToolbarCommand.EditImageLink }, + new ImageToolbarItemModel() { Command = ImageToolbarCommand.RemoveImageLink }, + new ImageToolbarItemModel() { Command = ImageToolbarCommand.Display }, + new ImageToolbarItemModel() { Command = ImageToolbarCommand.AltText }, + new ImageToolbarItemModel() { Command = ImageToolbarCommand.Dimension } + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/LinkQuickToolbar.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/LinkQuickToolbar.razor new file mode 100644 index 0000000..c00a671 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/LinkQuickToolbar.razor @@ -0,0 +1,22 @@ +
Link Quick Toolbar
+ +@page "/RichTextEditor/Toolbar/QuickToolbar/LinkQuickToolbar" + +@using Syncfusion.Blazor.RichTextEditor + + + +

Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.

+

Get started Quick Toolbar to click on the link

+

It is possible to add custom style on the selected link inside the Rich Text Editor through quick toolbar.

+ Logo + + +@code { + private List Link = new List() + { + new LinkToolbarItemModel() { Command = LinkToolbarCommand.Open }, + new LinkToolbarItemModel() { Command = LinkToolbarCommand.Edit }, + new LinkToolbarItemModel() { Command = LinkToolbarCommand.UnLink } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/TableQuickToolbar.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/TableQuickToolbar.razor new file mode 100644 index 0000000..22d405d --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/TableQuickToolbar.razor @@ -0,0 +1,35 @@ +
TableQuickToolbar
+ +@page "/RichTextEditor/Toolbar/QuickToolbar/TableQuickToolbar" + +@using Syncfusion.Blazor.RichTextEditor + + + + +

Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.

+

Get started Quick Toolbar to click on the Table

+

It is possible to add custom style on the selected table inside the Rich Text Editor through quick toolbar.

+ + + +@code { + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, + }; + private List TableQuickToolbarItems = new List() + { + new TableToolbarItemModel() { Command = TableToolbarCommand.TableHeader }, + new TableToolbarItemModel() { Command = TableToolbarCommand.TableRemove }, + new TableToolbarItemModel() { Command = TableToolbarCommand.Separator }, + new TableToolbarItemModel() { Command = TableToolbarCommand.TableRows }, + new TableToolbarItemModel() { Command = TableToolbarCommand.TableColumns }, + new TableToolbarItemModel() { Command = TableToolbarCommand.TableCell }, + new TableToolbarItemModel() { Command = TableToolbarCommand.Separator }, + new TableToolbarItemModel() { Command = TableToolbarCommand.Styles }, + new TableToolbarItemModel() { Command = TableToolbarCommand.BackgroundColor }, + new TableToolbarItemModel() { Command = TableToolbarCommand.Alignments }, + new TableToolbarItemModel() { Command = TableToolbarCommand.TableCellVerticalAlign } + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/TextQuickToolbar.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/TextQuickToolbar.razor new file mode 100644 index 0000000..9a6e75d --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/TextQuickToolbar.razor @@ -0,0 +1,32 @@ +
Text Quick Toolbar
+ +@page "/RichTextEditor/Toolbar/QuickToolbar/TextQuickToolbar" + +@using Syncfusion.Blazor.RichTextEditor; + + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+ + +@code { + private List TextQuickToolbarItems = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, + new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, + new ToolbarItemModel() { Command = ToolbarCommand.Image }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, + new ToolbarItemModel() { Command = ToolbarCommand.Blockquote }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.Indent }, + new ToolbarItemModel() { Command = ToolbarCommand.Outdent }, + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/VideoQuickToolbar.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/VideoQuickToolbar.razor new file mode 100644 index 0000000..d4ad5ad --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/QuickToolbar/VideoQuickToolbar.razor @@ -0,0 +1,29 @@ +
Video Quick Toolbar
+ +@page "/RichTextEditor/Toolbar/QuickToolbar/VideoQuickToolbar" + +@using Syncfusion.Blazor.RichTextEditor; + + + + +

Get started with Quick Toolbar to click on a video

+

Using the quick toolbar, users can replace, align, display, dimension, and delete the selected video.

+ + + +@code { + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Video }, + }; + private List VideoQuickToolbarItems = new List() + { + new VideoToolbarItemModel() { Command = VideoToolbarCommand.VideoReplace }, + new VideoToolbarItemModel() { Command = VideoToolbarCommand.VideoRemove}, + new VideoToolbarItemModel() { Command = VideoToolbarCommand.VideoLayoutOption }, + new VideoToolbarItemModel() { Command = VideoToolbarCommand.Separator }, + new VideoToolbarItemModel() { Command = VideoToolbarCommand.VideoAlign}, + new VideoToolbarItemModel() { Command = VideoToolbarCommand.VideoDimension} + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/ScrollableToolbar.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/ScrollableToolbar.razor new file mode 100644 index 0000000..3cae91b --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/ScrollableToolbar.razor @@ -0,0 +1,41 @@ +
Scrollable Toolbar
+ +@page "/RichTextEditor/Toolbar/ScrollableToolbar" + +@rendermode InteractiveServer + +@using Syncfusion.Blazor.RichTextEditor + + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+ + +@code { + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, + new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, + new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Outdent }, + new ToolbarItemModel() { Command = ToolbarCommand.Indent }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, + new ToolbarItemModel() { Command = ToolbarCommand.Image }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Undo }, + new ToolbarItemModel() { Command = ToolbarCommand.Redo } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/ToolbarPosition.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/ToolbarPosition.razor new file mode 100644 index 0000000..a75b073 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Toolbar/ToolbarPosition.razor @@ -0,0 +1,18 @@ +
Toolbar Position
+@page "/RichTextEditor/Toolbar/ToolbarPosition" + +@using Syncfusion.Blazor.RichTextEditor + +
Toolbar Position in Bottom
+ + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+ + +
Toolbar Position in Top
+ + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+ diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/BuiltInTool.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/BuiltInTool.razor new file mode 100644 index 0000000..2af0f41 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/BuiltInTool.razor @@ -0,0 +1,38 @@ +
Built-in Tools
+ +@page "/RichTextEditor/Tools/BuiltInTool" + +@using Syncfusion.Blazor.RichTextEditor + +
To Initialize the built-in tools
+ + + + + +
How to remove built-in tool from toolbar
+ + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+ + +@code { + private List Tool = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + }; + + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.FontName }, + new ToolbarItemModel() { Command = ToolbarCommand.FontSize }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, + new ToolbarItemModel() { Command = ToolbarCommand.Image }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, + new ToolbarItemModel() { Command = ToolbarCommand.Undo }, + new ToolbarItemModel() { Command = ToolbarCommand.Redo } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/CodeBlock.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/CodeBlock.razor new file mode 100644 index 0000000..f40e0bc --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/CodeBlock.razor @@ -0,0 +1,58 @@ +
Code Block in Blazor Rich Text Editor Component
+ +@page "/RichTextEditor/Tools/CodeBlock" + +@using Syncfusion.Blazor.RichTextEditor + + + + + + +@code { + + private List languages = new List + { + new CodeBlockLanguageModel { Label = "HTML", Language = "html" }, + new CodeBlockLanguageModel { Label = "JavaScript", Language = "javascript" }, + new CodeBlockLanguageModel { Label = "CSS", Language = "css" }, + new CodeBlockLanguageModel { Label = "Plain Text", Language = "plaintext" } + }; + + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Undo }, + new ToolbarItemModel() { Command = ToolbarCommand.Redo }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.CodeBlock }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, + new ToolbarItemModel() { Command = ToolbarCommand.InlineCode }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, + new ToolbarItemModel() { Command = ToolbarCommand.Image }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, + new ToolbarItemModel() { Command = ToolbarCommand.Blockquote }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.BulletFormatList }, + new ToolbarItemModel() { Command = ToolbarCommand.NumberFormatList }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, + new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Outdent }, + new ToolbarItemModel() { Command = ToolbarCommand.Indent }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, + new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, + new ToolbarItemModel() { Command = ToolbarCommand.FontName }, + new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.LowerCase }, + new ToolbarItemModel() { Command = ToolbarCommand.UpperCase }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }, + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/CustomToolbar.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/CustomToolbar.razor new file mode 100644 index 0000000..422e9bb --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/CustomToolbar.razor @@ -0,0 +1,39 @@ +
How to Add a Custom Toolbar Tool in Blazor Rich Text Editor
+ +@page "/RichTextEditor/Tools/CustomToolbar" + +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.RichTextEditor + + + + + + + + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using the standard toolbar commands.

+ + +@code { + SfRichTextEditor RteObj; + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Name = "Symbol", TooltipText = "Insert Symbol" }, + new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }, + new ToolbarItemModel() { Command = ToolbarCommand.FullScreen } + }; + private async Task ClickHandler() + { + ExecuteCommandOption executeCommandOption = new ExecuteCommandOption(); + executeCommandOption.Undo = true; + await RteObj.ExecuteCommandAsync(CommandName.InsertText, "₹", executeCommandOption); + } +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/DialogSettings.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/DialogSettings.razor new file mode 100644 index 0000000..de8de98 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/DialogSettings.razor @@ -0,0 +1,9 @@ +
Configuring Dialog Settings
+ +@page "/RichTextEditor/Tools/DialogSettings" + +@using Syncfusion.Blazor.RichTextEditor + + + + \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/FormatPainter/CustomizeFormatPainter.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/FormatPainter/CustomizeFormatPainter.razor new file mode 100644 index 0000000..d63496a --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/FormatPainter/CustomizeFormatPainter.razor @@ -0,0 +1,44 @@ +
How to customize format painter copy and paste behavior
+ +@page "/RichTextEditor/Tools/FormatPainter/CustomizeFormatPainter" + +@using Syncfusion.Blazor.RichTextEditor + + + + + + +@code { + + private string EditorContent = @"

Format Painter in Rich Text Editor

The Format Painter allows you to quickly copy and apply text formatting within the editor, saving time and ensuring consistency.

How to Use Format Painter?
+
    +
  • Select the text with the formatting you want to copy.
    • +
  • Click the Format Painter button (paintbrush icon) in the toolbar.
    • +
  • The cursor changes to a paintbrush icon.
    • +
  • Click and drag over the text where you want to apply the copied format.
    • +
  • Release the mouse button, and the formatting will be applied.
    • +
+
Why Use Format Painter?
+
    +
  • Saves time when formatting large documents.
    • +
  • Ensures consistency in text styles.
    • +
  • Easy to use for writers, editors, and content creators.
    • +
"; + + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.FormatPainter }, + new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat }, + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, + new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, + new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.Undo }, + new ToolbarItemModel() { Command = ToolbarCommand.Redo }, + new ToolbarItemModel() { Command = ToolbarCommand.SourceCode } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/FormatPainter/FormatPainterTool.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/FormatPainter/FormatPainterTool.razor new file mode 100644 index 0000000..67e0ef6 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/FormatPainter/FormatPainterTool.razor @@ -0,0 +1,43 @@ +
How to Add Format Painter Tool to the Toolbar
+ +@page "/RichTextEditor/Tools/FormatPainter/FormatPainterTool" + +@using Syncfusion.Blazor.RichTextEditor + + + + + +@code { + + private string EditorContent = @"

Format Painter in Rich Text Editor

The Format Painter allows you to quickly copy and apply text formatting within the editor, saving time and ensuring consistency.

How to Use Format Painter?
+
    +
  • Select the text with the formatting you want to copy.
    • +
  • Click the Format Painter button (paintbrush icon) in the toolbar.
    • +
  • The cursor changes to a paintbrush icon.
    • +
  • Click and drag over the text where you want to apply the copied format.
    • +
  • Release the mouse button, and the formatting will be applied.
    • +
+
Why Use Format Painter?
+
    +
  • Saves time when formatting large documents.
    • +
  • Ensures consistency in text styles.
    • +
  • Easy to use for writers, editors, and content creators.
    • +
"; + + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.FormatPainter }, + new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat }, + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, + new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, + new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.Undo }, + new ToolbarItemModel() { Command = ToolbarCommand.Redo }, + new ToolbarItemModel() { Command = ToolbarCommand.SourceCode } + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertAudio/AudioTool.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertAudio/AudioTool.razor new file mode 100644 index 0000000..8e9dd86 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertAudio/AudioTool.razor @@ -0,0 +1,15 @@ +
Configure Audio tool in the toolbar
+ +@page "/RichTextEditor/Tools/InsertAudio/AudioTool" + +@using Syncfusion.Blazor.RichTextEditor; + + + + +@code { + private List Items = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Audio } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertAudio/DisplayPosition.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertAudio/DisplayPosition.razor new file mode 100644 index 0000000..045548e --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertAudio/DisplayPosition.razor @@ -0,0 +1,33 @@ +
Display Position
+ +@page "/RichTextEditor/Tools/InsertAudio/DisplayPosition" + +@using Syncfusion.Blazor.RichTextEditor; + + + + +

+ The Rich Text Editor control is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. + Users can format their content using standard toolbar commands. +

+

Key features:

+
    +

  • Provides < IFRAME > and < DIV > modes

    • +

  • Capable of handling markdown editing.

    • +

  • Contains a modular library to load the necessary functionality on demand.

    • +

  • Provides a fully customizable toolbar.

    • +

  • Provides HTML view to edit the source directly for developers.

    • +

  • Supports third - party library integration.

    • +

  • Allows preview of modified content before saving it.

    • +

  • Handles images, hyperlinks, video, hyperlinks, uploads, etc.

    • +

  • Contains undo / redo manager.

    • +

  • Creates bulleted and numbered lists.

    • +
+ +@code { + private List Items = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Audio } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertAudio/FileSize.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertAudio/FileSize.razor new file mode 100644 index 0000000..66d3629 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertAudio/FileSize.razor @@ -0,0 +1,32 @@ +
Maximum file size restriction
+ +@page "/RichTextEditor/Tools/InsertAudio/FileSize" + +@using Syncfusion.Blazor.RichTextEditor; + + + + +@code { + private List Items = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Audio }, + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, + new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, + new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, + new ToolbarItemModel() { Command = ToolbarCommand.Image }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Undo }, + new ToolbarItemModel() { Command = ToolbarCommand.Redo } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertImage/DeletingImagesKeyboard.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertImage/DeletingImagesKeyboard.razor new file mode 100644 index 0000000..c8c5ffd --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertImage/DeletingImagesKeyboard.razor @@ -0,0 +1,42 @@ +
Deleting images from server using keyboard and quick toolbar actions
+ +@page "/RichTextEditor/Tools/InsertImage/DeletingImagesKeyboard" + +@using Syncfusion.Blazor.RichTextEditor +@inject HttpClient Http + + + + + +@code { + private string SaveURL = "[SERVICE_HOSTED_PATH]/api/RichTextEditor/SaveFile"; + private string Path = "[SERVICE_HOSTED_PATH]/RichTextEditor/"; + private string RemoveURL = "[SERVICE_HOSTED_PATH]/api/RichTextEditor/DeleteFile"; + + public async Task OnImageDeleteHandler(AfterImageDeleteEventArgs args) + { + var imageSrc = args.Src; + var fileName = imageSrc.Split('/').Last(); + var content = new MultipartFormDataContent(); + var dummyFile = new ByteArrayContent(new byte[0]); + content.Add(dummyFile, "UploadFiles", fileName); + try + { + var response = await Http.PostAsync(RemoveURL, content); + if (response.IsSuccessStatusCode) + { + Console.WriteLine($"Image deleted successfully: {fileName}"); + } + else + { + Console.WriteLine($"Image deletion failed: {response.StatusCode}"); + } + } + catch (Exception ex) + { + Console.WriteLine($"Error deleting image: {ex.Message}"); + } + } + +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertImage/DisplayPosition.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertImage/DisplayPosition.razor new file mode 100644 index 0000000..2e0e4be --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertImage/DisplayPosition.razor @@ -0,0 +1,13 @@ +
Display Position
+ +@page "/RichTextEditor/Tools/InsertImage/DisplayPosition" + +@using Syncfusion.Blazor.RichTextEditor + + + +

The Rich Text Editor allows you to insert images from the online source as well as the local computer where you want to insert the image in your content.

+

Get started with Quick Toolbar to click on the image

+

It is possible to add a custom style on the selected image inside the Rich Text Editor through the quick toolbar.

+ Logo + \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertImage/FileSize.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertImage/FileSize.razor new file mode 100644 index 0000000..ff5c86a --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertImage/FileSize.razor @@ -0,0 +1,32 @@ +
Maximum file size restriction
+ +@page "/RichTextEditor/Tools/InsertImage/FileSize" + +@using Syncfusion.Blazor.RichTextEditor + + + + + +@code { + private List Items = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Image }, + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, + new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, + new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Undo }, + new ToolbarItemModel() { Command = ToolbarCommand.Redo } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertImage/InsertImageTool.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertImage/InsertImageTool.razor new file mode 100644 index 0000000..6aa06ec --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertImage/InsertImageTool.razor @@ -0,0 +1,15 @@ +
Configure Audio tool in the toolbar
+ +@page "/RichTextEditor/Tools/InsertImage/InsertImageTool" + +@using Syncfusion.Blazor.RichTextEditor; + + + + +@code { + private List Items = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Image } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertVideo/DisplayPosition.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertVideo/DisplayPosition.razor new file mode 100644 index 0000000..d2d2a44 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertVideo/DisplayPosition.razor @@ -0,0 +1,33 @@ +
Display Position
+ +@page "/RichTextEditor/Tools/InsertVideo/DisplayPosition" + +@using Syncfusion.Blazor.RichTextEditor; + + + + +

+ The Rich Text Editor control is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. + Users can format their content using standard toolbar commands. +

+

Key features:

+
    +

  • Provides < IFRAME > and < DIV > modes

    • +

  • Capable of handling markdown editing.

    • +

  • Contains a modular library to load the necessary functionality on demand.

    • +

  • Provides a fully customizable toolbar.

    • +

  • Provides HTML view to edit the source directly for developers.

    • +

  • Supports third - party library integration.

    • +

  • Allows preview of modified content before saving it.

    • +

  • Handles images, hyperlinks, video, hyperlinks, uploads, etc.

    • +

  • Contains undo / redo manager.

    • +

  • Creates bulleted and numbered lists.

    • +
+ +@code { + private List Items = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Video } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertVideo/FileSize.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertVideo/FileSize.razor new file mode 100644 index 0000000..feee067 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertVideo/FileSize.razor @@ -0,0 +1,32 @@ +
Maximum file size restriction
+ +@page "/RichTextEditor/Tools/InsertVideo/FileSize" + +@using Syncfusion.Blazor.RichTextEditor; + + + + +@code { + private List Items = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Video }, + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, + new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, + new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, + new ToolbarItemModel() { Command = ToolbarCommand.Image }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Undo }, + new ToolbarItemModel() { Command = ToolbarCommand.Redo } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertVideo/VideoTool.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertVideo/VideoTool.razor new file mode 100644 index 0000000..63190f5 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/InsertVideo/VideoTool.razor @@ -0,0 +1,16 @@ +
Configure video tool in the toolbar
+ +@page "/RichTextEditor/Tools/InsertVideo/VideoTool" + +@using Syncfusion.Blazor.RichTextEditor; + + + + + +@code { + private List Items = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Video } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/LinkManipulation/EditOrRemoveLink.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/LinkManipulation/EditOrRemoveLink.razor new file mode 100644 index 0000000..bde3f57 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/LinkManipulation/EditOrRemoveLink.razor @@ -0,0 +1,28 @@ +
How to edit or remove a hyperlink
+ +@page "/RichTextEditor/Tools/LinkManipulation/EditOrRemoveLink" + +@using Syncfusion.Blazor.RichTextEditor + + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.

+

Key features:

+
    +

  • Provides IFRAME and DIV modes

    • +

  • Capable of handling markdown editing.

    • +

  • Contains a modular library to load the necessary functionality on demand.

    • +

  • Provides a fully customizable toolbar.

    • +

  • Provides HTML view to edit the source directly for developers.

    • +

  • Supports third - party library integration.

    • +
+ + +@code { + private List Link = new List() + { + new LinkToolbarItemModel() { Command = LinkToolbarCommand.Open }, + new LinkToolbarItemModel() { Command = LinkToolbarCommand.Edit }, + new LinkToolbarItemModel() { Command = LinkToolbarCommand.UnLink } + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/LinkManipulation/InsertLink.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/LinkManipulation/InsertLink.razor new file mode 100644 index 0000000..b393b38 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/LinkManipulation/InsertLink.razor @@ -0,0 +1,27 @@ +
Insert Link
+ +@page "/RichTextEditor/Tools/LinkManipulation/InsertLink" + +@using Syncfusion.Blazor.RichTextEditor + + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.

+

Key features:

+
    +

  • Provides IFRAME and DIV modes

    • +

  • Capable of handling markdown editing.

    • +

  • Contains a modular library to load the necessary functionality on demand.

    • +

  • Provides a fully customizable toolbar.

    • +

  • Provides HTML view to edit the source directly for developers.

    • +

  • Supports third - party library integration.

    • +
+ + +@code { + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, + new ToolbarItemModel() { Command = ToolbarCommand.RemoveLink } + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/CustomizingLists.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/CustomizingLists.razor new file mode 100644 index 0000000..ef66354 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/CustomizingLists.razor @@ -0,0 +1,23 @@ +
Customizing Numbered And Bulleted Lists
+ +@page "/RichTextEditor/Tools/StylingTools/CustomizingLists" + +@using Syncfusion.Blazor.RichTextEditor + + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.

+

Key features:

+
    +

  • Provides IFRAME and DIV modes

    • +

  • Capable of handling markdown editing.

    • +
+ + +@code { + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.NumberFormatList }, + new ToolbarItemModel() { Command = ToolbarCommand.BulletFormatList }, + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontAndBackgroundColors.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontAndBackgroundColors.razor new file mode 100644 index 0000000..be41970 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontAndBackgroundColors.razor @@ -0,0 +1,33 @@ +
Show Recent Color
+ +@page "/RichTextEditor/Tools/StylingTools/ShowRecentColor" + +@using Syncfusion.Blazor.RichTextEditor + + + + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.

+ + +@code { + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, + new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, + new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, + new ToolbarItemModel() { Command = ToolbarCommand.Blockquote }, + new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, + new ToolbarItemModel() { Command = ToolbarCommand.Image }, + new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }, + new ToolbarItemModel() { Command = ToolbarCommand.Undo }, + new ToolbarItemModel() { Command = ToolbarCommand.Redo } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontFamily/BuiltInFontFamily.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontFamily/BuiltInFontFamily.razor new file mode 100644 index 0000000..45cea37 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontFamily/BuiltInFontFamily.razor @@ -0,0 +1,18 @@ +
Built-in font family
+ +@page "/RichTextEditor/Tools/StylingTools/FontFamily/BuiltInFontFamily" + +@using Syncfusion.Blazor.RichTextEditor + + + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+ +@code { + + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.FontName } + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontFamily/CustomFontFamily.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontFamily/CustomFontFamily.razor new file mode 100644 index 0000000..a3bc0a7 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontFamily/CustomFontFamily.razor @@ -0,0 +1,27 @@ +
Custom Font Family
+ +@page "/RichTextEditor/Tools/StylingTools/FontFamily/CustomFontFamily" + +@using Syncfusion.Blazor.RichTextEditor + + + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.

+ + +@code { + private List FontFamilyItems = new List() + { + new DropDownItemModel() { CssClass = "e-segoe-ui", Command = "Font", SubCommand = "FontName", Text = "Segoe UI", Value = "Arial,Helvetica,sans-serif" }, + new DropDownItemModel() { CssClass = "e-arial", Command = "Font", SubCommand = "FontName", Text = "Arial", Value = "Roboto" }, + new DropDownItemModel() { CssClass = "e-georgia", Command = "Font", SubCommand = "FontName", Text = "Georgia", Value = "Georgia,serif" }, + new DropDownItemModel() { CssClass = "e-impact", Command = "Font", SubCommand = "FontName", Text = "Impact", Value = "Impact,Charcoal,sans-serif" }, + new DropDownItemModel() { CssClass = "e-tahoma", Command = "Font", SubCommand = "FontName", Text = "Tahoma", Value = "Tahoma,Geneva,sans-serif" } + }; + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.FontName }, + new ToolbarItemModel() { Command = ToolbarCommand.FontSize }, + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontFamily/GoogleFontSupport.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontFamily/GoogleFontSupport.razor new file mode 100644 index 0000000..5b6598f --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontFamily/GoogleFontSupport.razor @@ -0,0 +1,26 @@ +
Google Font Support
+ +@page "/RichTextEditor/Tools/StylingTools/FontFamily/GoogleFontSupport" + +@using Syncfusion.Blazor.RichTextEditor + + + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.

+ + +@code { + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.FontName } + }; + private List FontFamilyItems = new List() + { + new DropDownItemModel() { Text = "Segoe UI", Value = "Arial,Helvetica,sans-serif" }, + new DropDownItemModel() { Text = "Arial", Value = "Roboto" }, + new DropDownItemModel() { Text = "Georgia", Value = "Georgia,serif" }, + new DropDownItemModel() { Text = "Impact", Value = "Impact,Charcoal,sans-serif" }, + new DropDownItemModel() { Text = "Tahoma", Value = "Tahoma,Geneva,sans-serif" } + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontSize/BuiltInFontSize.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontSize/BuiltInFontSize.razor new file mode 100644 index 0000000..814b788 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontSize/BuiltInFontSize.razor @@ -0,0 +1,18 @@ +
Built-in font size
+ +@page "/RichTextEditor/Tools/StylingTools/FontSize/BuiltInFontSize" + +@using Syncfusion.Blazor.RichTextEditor + + + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.

+ +@code { + + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.FontSize } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontSize/CustomFontSize.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontSize/CustomFontSize.razor new file mode 100644 index 0000000..9f20474 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FontSize/CustomFontSize.razor @@ -0,0 +1,26 @@ +
Custom Font Size
+ +@page "/RichTextEditor/Tools/StylingTools/FontSize/CustomFontSize" + +@using Syncfusion.Blazor.RichTextEditor + + + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.

+ + +@code { + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.FontSize }, + }; + private List FontSizeItems = new List() + { + new DropDownItemModel() { Text = "8 pt", Value = "8pt" }, + new DropDownItemModel() { Text = "10 pt", Value = "10pt" }, + new DropDownItemModel() { Text = "12 pt", Value = "12pt" }, + new DropDownItemModel() { Text = "14 pt", Value = "14pt" }, + new DropDownItemModel() { Text = "42 pt", Value = "42pt" } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/Formats/BuiltInFormats.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/Formats/BuiltInFormats.razor new file mode 100644 index 0000000..11ed782 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/Formats/BuiltInFormats.razor @@ -0,0 +1,18 @@ +
Built-in font size
+ +@page "/RichTextEditor/Tools/StylingTools/Formats/BuiltInFormats" + +@using Syncfusion.Blazor.RichTextEditor + + + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.

+ +@code { + + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.FontSize } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/Formats/CustomFormats.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/Formats/CustomFormats.razor new file mode 100644 index 0000000..041d698 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/Formats/CustomFormats.razor @@ -0,0 +1,26 @@ +
Custom Font Size
+ +@page "/RichTextEditor/Tools/StylingTools/Formats/CustomFormats" + +@using Syncfusion.Blazor.RichTextEditor + + + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.

+ + +@code { + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.FontSize }, + }; + private List FontSizeItems = new List() + { + new DropDownItemModel() { Text = "8 pt", Value = "8pt" }, + new DropDownItemModel() { Text = "10 pt", Value = "10pt" }, + new DropDownItemModel() { Text = "12 pt", Value = "12pt" }, + new DropDownItemModel() { Text = "14 pt", Value = "14pt" }, + new DropDownItemModel() { Text = "42 pt", Value = "42pt" } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FormattingCodeBlocks.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FormattingCodeBlocks.razor new file mode 100644 index 0000000..0f5c0f3 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/FormattingCodeBlocks.razor @@ -0,0 +1,24 @@ +
Formatting Code Blocks
+ +@page "/RichTextEditor/Tools/StylingTools/FormattingCodeBlocks" + +@using Syncfusion.Blazor.RichTextEditor + + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.

+ + + + +@code { + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.InsertCode } + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/ShowRecentColor.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/ShowRecentColor.razor new file mode 100644 index 0000000..d234043 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/StylingTools/ShowRecentColor.razor @@ -0,0 +1,20 @@ +
Applying font and background colors
+ +@page "/RichTextEditor/Tools/StylingTools/FontAndBackgroundColors" + +@using Syncfusion.Blazor.RichTextEditor + + + + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.

+ + +@code { + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, + new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, + }; +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/TableManipulation/CustomStyles.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/TableManipulation/CustomStyles.razor new file mode 100644 index 0000000..af5ff8b --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/TableManipulation/CustomStyles.razor @@ -0,0 +1,22 @@ +
Custom Styles
+ +@page "/RichTextEditor/Tools/TableManipulation/CustomStyles" + +@using Syncfusion.Blazor.RichTextEditor + + + + + + +@code { + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable } + }; + + private List StyleItems = new List() + { + new DropDownItemModel() { Text = "Alternate Rows" } + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/TableManipulation/InsertTable.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/TableManipulation/InsertTable.razor new file mode 100644 index 0000000..6de0e72 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/TableManipulation/InsertTable.razor @@ -0,0 +1,17 @@ +
Insert Table
+ +@page "/RichTextEditor/Tools/TableManipulation/InsertTable" + +@using Syncfusion.Blazor.RichTextEditor + + + +

The Rich Text Editor component is the WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update content. Users can format their content using standard toolbar commands.

+ + +@code { + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable } + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/TableManipulation/TableFormatting.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/TableManipulation/TableFormatting.razor new file mode 100644 index 0000000..68ba84c --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/Tools/TableManipulation/TableFormatting.razor @@ -0,0 +1,47 @@ +
Insert Table
+ +@page "/RichTextEditor/Tools/TableManipulation/TableFormatting" + +@using Syncfusion.Blazor.RichTextEditor + + + +

Discover the Table's Powerful Features

A table can be created in the editor using either a keyboard shortcut or the toolbar. With the quick toolbar, you can perform table cell insert, delete, split, and merge operations. You can style the table cells using background colours and borders.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name
Age
Gender
Occupation
Selma Rose30FemaleEngineer
Robert
28MaleGraphic Designer
William
35MaleTeacher
+ + +@code { + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable } + }; +} diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/ClearUndoRedoStack.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/ClearUndoRedoStack.razor new file mode 100644 index 0000000..a53f9e3 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/ClearUndoRedoStack.razor @@ -0,0 +1,28 @@ +
Clear undo/redo stack
+ +@page "/RichTextEditor/UndoandRedoManager/ClearUndoRedoStack" + +@using Syncfusion.Blazor.RichTextEditor + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+

Key features:

+
    +

  • Provides IFRAME and DIV modes

    • +

  • Capable of handling markdown editing.

    • +
+ +
+Clear Undo/Redo Stack + +@code { + private SfRichTextEditor rteInstance; + + private async Task ClearUndoRedoStacks() + { + if (rteInstance != null) + { + await rteInstance.ClearUndoRedoAsync(); + } + } +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/DisableUndoRedo.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/DisableUndoRedo.razor new file mode 100644 index 0000000..0de3b14 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/DisableUndoRedo.razor @@ -0,0 +1,15 @@ +
Disable undo redo
+ +@page "/RichTextEditor/UndoandRedoManager/DisableUndoRedo" + +@using Syncfusion.Blazor.RichTextEditor + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+

Key features:

+
    +

  • Provides IFRAME and DIV modes

    • +

  • Capable of handling markdown editing.

    • +
+ + diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/RemoveUndoRedoToolbar.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/RemoveUndoRedoToolbar.razor new file mode 100644 index 0000000..295f4b8 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/RemoveUndoRedoToolbar.razor @@ -0,0 +1,47 @@ +
Remove undo redo toolbar item
+ +@page "/RichTextEditor/UndoandRedoManager/RemoveUndoRedoToolbar" + + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+ + +@code { + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, + new ToolbarItemModel() { Command = ToolbarCommand.FontName }, + new ToolbarItemModel() { Command = ToolbarCommand.FontSize }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, + new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, + new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.LowerCase }, + new ToolbarItemModel() { Command = ToolbarCommand.UpperCase }, + new ToolbarItemModel() { Command = ToolbarCommand.SuperScript }, + new ToolbarItemModel() { Command = ToolbarCommand.SubScript }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.OrderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList }, + new ToolbarItemModel() { Command = ToolbarCommand.Outdent }, + new ToolbarItemModel() { Command = ToolbarCommand.Indent }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, + new ToolbarItemModel() { Command = ToolbarCommand.Image }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat }, + new ToolbarItemModel() { Command = ToolbarCommand.Print }, + new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }, + new ToolbarItemModel() { Command = ToolbarCommand.FullScreen }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + }; +} + diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/UndoRedoSteps.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/UndoRedoSteps.razor new file mode 100644 index 0000000..4462293 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/UndoRedoSteps.razor @@ -0,0 +1,13 @@ +
Undo Redo using the UndoRedoSteps property
+@page "/RichTextEditor/UndoandRedoManager/UndoRedoSteps" + +@using Syncfusion.Blazor.RichTextEditor + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+

Key features:

+
    +

  • Provides IFRAME and DIV modes

    • +

  • Capable of handling markdown editing.

    • +
+ diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/UndoRedoWithCustomToolbar.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/UndoRedoWithCustomToolbar.razor new file mode 100644 index 0000000..5060481 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/UndoandRedoManager/UndoRedoWithCustomToolbar.razor @@ -0,0 +1,35 @@ +
Undo redo manager with custom toolbar
+ +@page "/RichTextEditor/UndoandRedoManager/UndoRedoWithCustomToolbar" + + + + + + + + + +

The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.

+ + +@code { + SfRichTextEditor rteObj; + private List Tools = new List() + { + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.StrikeThrough }, + new ToolbarItemModel() { Name = "Insert HTML", TooltipText = "Insert HTML" }, + }; + public async Task onClick() + { + ExecuteCommandOption executeCommandOption = new ExecuteCommandOption(); + executeCommandOption.Undo = true; + string value = "Inserted a text"; + await this.rteObj.ExecuteCommandAsync(CommandName.InsertHTML, value, executeCommandOption); + } +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ValueBinding/AutoSave.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ValueBinding/AutoSave.razor new file mode 100644 index 0000000..2ce8cf2 --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ValueBinding/AutoSave.razor @@ -0,0 +1,23 @@ +
ValueBinding based on the SaveInterval and AutoSaveOnIdle properties
+ +@page "/RichTextEditor/ValueBinding/AutoSave" + +@using Syncfusion.Blazor.RichTextEditor + + +

Type or edit the content to be saved automatically in the editor

+ + + +@code { + private string Value { get; set; } = "

Start to type a content to save

"; + private int saveInterval { get; set; } = 5000; + private void UpdateStatus(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args) + { + // Place the codes here, which save the Rich Text Editor value into database. + if(args.Value != null){ + this.Value = args.Value; + } + + } +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ValueBinding/GetEditorContent.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ValueBinding/GetEditorContent.razor new file mode 100644 index 0000000..57ec7be --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ValueBinding/GetEditorContent.razor @@ -0,0 +1,21 @@ +@page "/RichTextEditor/ValueBinding/GetEditorContent" + +
Get Editor Content
+ +@using Syncfusion.Blazor.RichTextEditor + + + + + + +@code { + SfRichTextEditor RteObj; + + private string Value { get; set; } = "

Syncfusion RichTextEditor

"; + public void ValueChangeHandler(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args) + { + //here you can can get the editor value using args.value + this.Value = args.Value; + } +} \ No newline at end of file diff --git a/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ValueBinding/Valuebinding.razor b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ValueBinding/Valuebinding.razor new file mode 100644 index 0000000..15ce9cd --- /dev/null +++ b/RichTextEditor/WebApp-Server/RichTextEditorUGSample/Components/Pages/RichTextEditor/ValueBinding/Valuebinding.razor @@ -0,0 +1,15 @@ +@page "/RichTextEditor/ValueBinding/Valuebinding" + +
Value Binding
+ +@using Syncfusion.Blazor.RichTextEditor + + + +
+ +