|
1 | | -# Create a Document Editor in a Blazor Server Application |
2 | | - |
3 | | -This is a quick-start project that helps you create the Blazor Document Editor provided by Syncfusion. This example explains how to create a Blazor application and add the Syncfusion Blazor Word Processor package. Then it will show you how to add the Syncfusion Blazor Document Editor component to the Blazor server application and demonstrate the working of prominent features like formatting, adding a table of contents, saving a document along with toolbar customization and open/save a document in Azure Cloud file storage. |
4 | | - |
5 | | -Watch a How-to Video: |
6 | | - |
7 | | -Getting Started: https://www.syncfusion.com/tutorial-videos/blazor/word-processor?title=create-a-document-editor-in-a-blazor-server-application |
8 | | - |
9 | | -Open and Save from Cloud: https://www.syncfusion.com/tutorial-videos/blazor/word-processor?title=open-and-save-a-document-from-the-cloud-using-document |
10 | | - |
11 | | -Documentation: https://blazor.syncfusion.com/documentation/document-editor/getting-started/server-side-application |
12 | | - |
13 | | -Online example: https://blazor.syncfusion.com/demos/document-editor/default-functionalities |
14 | | - |
15 | | -## Project prerequisites |
16 | | -Make sure you have the compatible versions of .NET Core on your machine before starting to work on this project. You also need the following: |
17 | | -* [Visual Studio 2019 (version 16.4+)]( https://visualstudio.microsoft.com/downloads) |
18 | | -* [.NET Core SDK 3.1.201+](https://dotnet.microsoft.com/download/dotnet-core/3.1) |
19 | | - |
20 | | -## How to run this application |
21 | | -To run this application, you need to first clone or download this ‘Create a Document Editor in a Blazor Server Application’ repository and then open it in Visual Studio 2019. Under Data folder, open the Connections file and change the ConnectionString property with your connection string for Azure. Now, build and run your project to view the output. |
22 | | - |
23 | | -## Further help |
24 | | - |
25 | | -To get more help, check out the [ASP.NET Core Blazor documentation](https://docs.microsoft.com/en-us/aspnet/core/blazor). |
| 1 | +# Create a Document Editor in a Blazor Server Application |
| 2 | + |
| 3 | +The [Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor/?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples) is a component with editing capabilities like Microsoft Word. Also known as the document editor, it is used to create, edit, view, and print Word documents. This quick-start Blazor server app project will help you to learn how to add Blazor Document Editor component to the Blazor server application and demonstrate the working of prominent features like formatting, adding a table of contents, saving a document along with toolbar customization and open/save a document in Azure Cloud file storage. |
| 4 | + |
| 5 | +## Project prerequisites |
| 6 | +Make sure you have the compatible versions of .NET Core on your machine before starting to work on this project. You also need the following: |
| 7 | +* [Visual Studio 2019 (version 16.4+)]( https://visualstudio.microsoft.com/downloads) |
| 8 | +* [.NET Core SDK 3.1.201+](https://dotnet.microsoft.com/download/dotnet-core/3.1) |
| 9 | + |
| 10 | +## How to run this application |
| 11 | +To run this application, you need to first clone or download this ‘Create a Document Editor in a Blazor Server Application’ repository and then open it in Visual Studio 2019. Under Data folder, open the Connections file and change the ConnectionString property with your connection string for Azure. Now, build and run your project to view the output. |
| 12 | + |
| 13 | +## Further help |
| 14 | + |
| 15 | +To get more help, check out the [ASP.NET Core Blazor documentation](https://docs.microsoft.com/en-us/aspnet/core/blazor). |
| 16 | + |
| 17 | +## Features and benefits |
| 18 | + |
| 19 | +### High performance |
| 20 | +The Blazor Word Processor is designed and optimized for high performance in every aspect. |
| 21 | + |
| 22 | +#### Fast editing |
| 23 | +All the word processing features are written in Blazor, which runs completely on the client side, allowing users to type and edit as fast as possible without experiencing any lag. |
| 24 | + |
| 25 | +#### Lightweight |
| 26 | +The Blazor Word Processor has a set of built-in feature modules to help you build a lightweight word processor in your application without losing loading speed. |
| 27 | + |
| 28 | +#### Virtualization |
| 29 | +Render pages on demand so that large documents are loaded instantly with minimal memory consumption. |
| 30 | + |
| 31 | +### Open, edit, and save |
| 32 | +The Blazor Word Processor introduces a new native file format called Syncfusion Document Text (*.sfdt). It helps maintain document importing and exporting purely inon the client -side. |
| 33 | + |
| 34 | +#### Microsoft Word-compatible |
| 35 | +Open Word documents (DOCX, WordML, DOC, RTF, TXT). |
| 36 | + |
| 37 | +#### Importing |
| 38 | +Import SFDT-format document content from a local file or string. |
| 39 | + |
| 40 | +#### Exporting |
| 41 | +Export document content to SFDT and DOCX formats as a blob or downloadable file. |
| 42 | + |
| 43 | +### Find and replace |
| 44 | +The Blazor Word Processor comes with a Microsoft Word-inspired navigation pane. It provides intuitive UI options to searching text, navigating between results, and replacing results with other text. |
| 45 | + |
| 46 | +### Printing |
| 47 | +The Blazor Word Processor allows users to print the entire document or a specific page directly from the browser. |
| 48 | + |
| 49 | +### User-friendly interactions |
| 50 | +Enjoy a smooth and user-friendly experience through mouse, touch, and keyboard interfaces. |
| 51 | + |
| 52 | +#### Selection |
| 53 | +Flexible selection options include using mouse, touch, or Microsoft Word-like keyboard shortcuts. |
| 54 | + |
| 55 | +#### Scrolling |
| 56 | +Rapidly scroll the document pages. |
| 57 | + |
| 58 | +#### Zooming |
| 59 | +Interactively zoom in on and zoom out of the page contents. Users can easily change the view to fit a page or a page's width. |
| 60 | + |
| 61 | +### Seamless editing |
| 62 | +The Blazor Word Processor provides a seamless editing experience, offering intuitive and touch-friendly UI options like context menus, dialogs, and a navigation pane. |
| 63 | + |
| 64 | +#### Clipboard |
| 65 | +[Cut, copy, and paste](https://blazor.syncfusion.com/documentation/document-editor/clipboard/?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples) formatted content within the same document. You can also paste plain text to and from other applications. |
| 66 | + |
| 67 | +#### Undo and redo |
| 68 | +Perform multiple levels of undo and redo operations. |
| 69 | + |
| 70 | +#### Dialog |
| 71 | +Insert document elements and apply advanced formatting options with ease. |
| 72 | + |
| 73 | +#### Context menu |
| 74 | +The context menu provides options to perform common editing actions. The list of actions is updated automatically based on the selection context. |
| 75 | + |
| 76 | +#### Image resizing |
| 77 | +Interactively resize an image using a mouse or touch gestures. |
| 78 | + |
| 79 | +#### Table resizing |
| 80 | +Adjust row height or column width interactively. |
| 81 | + |
| 82 | +### Document elements |
| 83 | +The Blazor Word Processor includes all the commonly used document elements: Text, Images, Tables, [Hyperlinks](https://blazor.syncfusion.com/demos/document-editor/hyperlinks-and-bookmarks?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), Bookmarks, [Tables of contents](https://blazor.syncfusion.com/demos/document-editor/table-of-contents?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), Page fields, Sections, [Headers and footers](https://blazor.syncfusion.com/demos/document-editor/headers-and-footers?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples). |
| 84 | + |
| 85 | +### Formatting |
| 86 | +The Blazor Word Processor includes all the commonly used document formatting options: [Text formatting](https://blazor.syncfusion.com/demos/document-editor/character-format?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), [Paragraph formatting](https://blazor.syncfusion.com/demos/document-editor/paragraph-format?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), [Bullets and numbering](https://blazor.syncfusion.com/demos/document-editor/bullets-and-numbering?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), [Styles](https://blazor.syncfusion.com/demos/document-editor/styles?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), [Table formatting](https://blazor.syncfusion.com/demos/document-editor/table-format?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), [Page settings](https://blazor.syncfusion.com/demos/document-editor/section-format?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples) |
| 87 | + |
| 88 | +### Localization |
| 89 | +All static text in the user interfaces of the Word Processor can be localized to any supported language. |
| 90 | + |
| 91 | +## Related links |
| 92 | +[Learn More about Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples) <br/><br/> |
| 93 | +[Download Free Trial](https://www.syncfusion.com/downloads?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples) <br/><br/> |
| 94 | +[Pricing](https://www.syncfusion.com/sales/products/blazor?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples) <br/><br/> |
| 95 | +[Documentation](https://blazor.syncfusion.com/documentation/document-editor/?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples) <br/><br/> |
| 96 | +[Online Examples](https://blazor.syncfusion.com/demos/document-editor/default-functionalities?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples) <br/><br/> |
| 97 | +[Watch a How-to Video - Getting Started](https://www.syncfusion.com/tutorial-videos/blazor/word-processor?title=create-a-document-editor-in-a-blazor-server-application) <br/><br/> |
| 98 | +[Watch a How-to Video - Open and Save from Cloud](https://www.syncfusion.com/tutorial-videos/blazor/word-processor?title=open-and-save-a-document-from-the-cloud-using-document) <br/><br/> |
| 99 | +[Community Forums](https://www.syncfusion.com/forums/blazor-components/word-processor?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples) <br/><br/> |
| 100 | +[Suggest a feature](https://www.syncfusion.com/feedback/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples) |
| 101 | + |
| 102 | +## About Syncfusion Blazor Components |
| 103 | +Syncfusion's [Blazor components](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples) library offers over 70 UI components to work with Blazor server-side and client-side (Blazor WebAssembly) projects seamlessly. In addition to Word Processor, we provide popular Blazor components such as [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), [Charts](https://www.syncfusion.com/blazor-components/blazor-charts?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), |
| 104 | +[Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), [Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), and [Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table/?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples). |
| 105 | + |
| 106 | +## About Syncfusion |
| 107 | +Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 23,000+ customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies. |
| 108 | + |
| 109 | +Today, we provide 1600+ controls and frameworks for web |
| 110 | +([Blazor](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), |
| 111 | +[ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), |
| 112 | +[ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), |
| 113 | +[ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), |
| 114 | +[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), |
| 115 | +[Angular](https://www.syncfusion.com/angular-ui-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), |
| 116 | +[React](https://www.syncfusion.com/react-ui-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), |
| 117 | +[Vue](https://www.syncfusion.com/vue-ui-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), |
| 118 | +and |
| 119 | +[Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples)), |
| 120 | +mobile |
| 121 | +([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), |
| 122 | +[Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), |
| 123 | +[UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), |
| 124 | +and |
| 125 | +[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples)), |
| 126 | +and desktop development ([Windows |
| 127 | +Forms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), |
| 128 | +[WPF](https://www.syncfusion.com/wpf-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), |
| 129 | +[WinUI(Preview)](https://www.syncfusion.com/winui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples), |
| 130 | +[Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples) |
| 131 | +and |
| 132 | +[UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples)). |
| 133 | +We provide ready-to-deploy enterprise software for dashboards, reports, |
| 134 | +data integration, and big data processing. Many customers have saved |
| 135 | +millions in licensing fees by deploying our software. |
| 136 | + |
| 137 | + |
| 138 | +<hr style="height:0.3px;border:none;color:lightgrey;background-color:lightgrey;" /> |
| 139 | + |
| 140 | +<p align="center"> |
| 141 | + <a href="mailto:sales@syncfusion.com?Subject=Syncfusion Blazor Word Processor - Github" target="_top">sales@syncfusion.com</a> | <a href="https://www.syncfusion.com?utm_source=github&utm_medium=listing&utm_campaign=blazor-word-processor-github-samples">www.syncfusion.com</a> | 1-888-9 DOTNET <br> |
| 142 | +</p> |
| 143 | + |
| 144 | + |
| 145 | + |
| 146 | + |
0 commit comments