An MS Word-compatible Blazor DOCX document editor must be able to allow users to interactively load and modify DOCX files. Ideally, it also needs to present users with the familiar MS Word user interface. NOV Rich Text Editor for Blazor can easily accomplish those tasks as it provides viewing, editing, formatting, and a UI text processing experience that closely resembles MS Word inside the browser running as a Blazor / WebAssembly application.

MS Word's DOCX is a paginated document format, not simply styled HTML. It contains information about page settings, section breaks, headers, footers, fields, and other information that an ordinary browser editor does not implement. This is why a good DOCX editor must be able to not only read and write DOCX files but also be able to lay them out in web, paged and normal view modes, which is not typically supported by web editors that implement rich text editing by simply embedding a div with enabled content editing (contenteditable set to true). Other functionality which is not directly provided by the browser is support for history, serialization as well as RTF copy/paste. This functionality is essential and expected by users who are familiar with MS Word and similar word processing desktop software.

NOV Rich Text Editor for Blazor implements all this functionality and extends it further by adding programmatic, C#-based access to the rich text DOM (Document Object Model) that enables you to programmatically modify and verify the document content on the client side using familiar C# code.

To create an MS Word-like editor in a Blazor app, the first step you need to do is to install NOV in the Blazor application. This is fully described in the documentation of the control and is outside the scope of this paper. After you install NOV, you need to insert the following code into the .razor page where you want to embed the editor:

@using Nevron.Nov.UI
@using Nevron.Nov.Text;
@using Nevron.Nov.WebAssembly

<PageTitle>My NOV Application</PageTitle>

<NNovWidgetHost @ref="m_BlazorRichTextEditor" TWidget="NRichTextViewWithRibbon" Style="width:100vw; height:100vh;" />

@code
{
private NNovWidgetHost<NRichTextViewWithRibbon> m_BlazorRichTextEditor;

protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);

if (firstRender)
{
NRichTextViewWithRibbon richTextViewWithRibbon = m_BlazorRichTextEditor.Widget;

NParagraph paragraph = new NParagraph("Hello World from Nevron Rich Text Editor for Blazor");
paragraph.FontSize = 14;
richTextViewWithRibbon.View.Content.Sections[0].Blocks.Insert(0, paragraph);
}
}
}
								

That's it - now you have a fully featured, MS Word-like editor in Blazor that looks like this:

Another useful feature of the Nevron Rich Text Editor for Blazor is that it can be used both on the server and the client. This makes it very easy to implement scenarios where the server rich text editor component is automated to generate a document as a result of some business logic or SQL query. Then you can directly stream (using the SaveToStream feature of the view) the generated document in NTB (Nevron Text Binary) or NTX (Nevron Text XML) formats, which are the native file formats used by the control.

This ensures that the component state is preserved and transferred exactly as specified on the server and that no formatting or content is lost during document conversion. All the client code has to do is to load the serialized state from a stream. For example, this is what a simple server-side Blazor endpoint looks like:

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

// NOV must be initialized for your server environment before handling requests.

app.MapGet("/api/document", () =>
{
NRichTextView richTextView = new NRichTextView();

NParagraph paragraph = new NParagraph(
"Hello World from Nevron Rich Text Editor for Blazor");

paragraph.FontSize = 14;
richTextView.Content.Sections[0].Blocks.Insert(0, paragraph);

var stream = new MemoryStream();

try
{
richTextView.SaveToStream(stream);
stream.Position = 0;

return Results.Stream(
stream,
contentType: "application/octet-stream",
fileDownloadName: "document.bin");
}
catch
{
stream.Dispose();
throw;
}
});
								

Then on the client you can simply call the endpoint and get the serialized result:

using var response = await Http.GetAsync("/api/document", HttpCompletionOption.ResponseHeadersRead);

response.EnsureSuccessStatusCode();

using var responseStream = await response.Content.ReadAsStreamAsync();
using var documentStream = new MemoryStream();

await responseStream.CopyToAsync(documentStream);
documentStream.Position = 0;

m_BlazorRichTextEditor.Widget.View.LoadFromStream(documentStream);
								

Finally, it's worth noting that Nevron Rich Text Editor for Blazor is not just about MS Word-like text editing. The flexible architecture allows you to embed charts, barcodes, diagrams and other content in the generated documents, making implementing a client / server application with reporting capabilities in Blazor a breeze.

Founded in 1998, Nevron Software is a component vendor specializing in the development of premium presentation layer solutions for .NET-based technologies. Today, Nevron has established itself as a trusted partner worldwide for .NET LOB applications, SharePoint portals, and reporting solutions. Nevron technology is used by many Fortune 500 companies, large financial institutions, global IT consultancies, academic institutions, governments, and non-profits.
For more information, visit: www.nevron.com.