TL;DR: Blazor Rich Text Editor simplifies document management with seamless import and export features. You can import Word documents directly and export content to Word and PDF formats, maintaining formatting and styles for professional results.
The Blazor Rich Text Editor provides robust functionalities to streamline text editing and document management tasks. With features like Import Word and Export to Word and PDF, you can effortlessly manage documents and ensure seamless file transitions across platforms. These capabilities make it easier to transfer content while maintaining the formatting, enhancing productivity and efficiency.
In this blog, we’ll explore how to:
To start using the Syncfusion Blazor Rich Text Editor in your app, follow the official documentation for the initial setup.
The Import Word feature allows users to import Word documents directly into the Rich Text Editor, preserving the original document’s formatting, styles, and content. Whether you’re working on complex reports, articles, or any other document type, this feature simplifies bringing existing content into the Blazor environment.
To integrate the Import Word option into the editor’s toolbar, use the RichTextEditorToolbarSettings.Items property. Additionally, you must configure the ServiceUrl property in the RichTextEditorImportWord. This API endpoint facilitates the file upload process and manages the server-side conversion of the document.
Refer to the following API endpoint code.
public IActionResult ImportFromWord(IList<IFormFile> UploadFiles)
{
string HtmlString = string.Empty;
if (UploadFiles != null)
{
foreach (var file in UploadFiles)
{
string filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
filename = _webHostEnvironment.WebRootPath + $@"\{filename}";
using (FileStream fs = System.IO.File.Create(filename))
{
file.CopyTo(fs);
fs.Flush();
}
using (var mStream = new MemoryStream())
{
new WordDocument(file.OpenReadStream(), FormatType.Rtf).Save(mStream, FormatType.Html);
mStream.Position = 0;
HtmlString = new StreamReader(mStream).ReadToEnd();
};
HtmlString = ExtractBodyContent(HtmlString);
HtmlString = SanitizeHtml(HtmlString);
System.IO.File.Delete(filename);
}
return Ok(HtmlString);
}
else
{
Response.Clear();
// Return an appropriate status code or message.
return BadRequest("No files were uploaded.");
}
}
private string ExtractBodyContent(string html)
{
if (html.Contains("<html") && html.Contains("<body"))
{
return html.Remove(0, html.IndexOf("<body>") + 6).Replace("</body></html>", "");
}
return html;
}
private string SanitizeHtml(string html)
{
// Remove or replace non-ASCII or control characters.
// For example, you can use regular expressions to replace them with spaces.
// Regex pattern to match non-ASCII or control characters: [^\x20-\x7E]
return Regex.Replace(html, @"[^\x20-\x7E]", " ");
} Refer to the following code example to import a Word document in Blazor Rich Text Editor.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor EnableXhtml="true" Placeholder="@PlaceHolderText">
<RichTextEditorToolbarSettings Items="@Tools"></RichTextEditorToolbarSettings>
<RichTextEditorImportWord ServiceUrl="https://blazor.syncfusion.com/services/production/api/RichTextEditor/ImportFromWord"></RichTextEditorImportWord>
<RichTextEditorImageSettings SaveUrl="@SaveURL" Path="@Path"></RichTextEditorImageSettings>
</SfRichTextEditor>
@code {
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 = "Import the word document...";
private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
{
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.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.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.CreateTable },
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat },
new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
};
} Refer to the following image.
Note: For more details, refer to the example of import from Word in Blazor Rich Text Editor.
With the Export to Word and PDF feature, you can now easily export your content from the Blazor Rich Text Editor to both Word and PDF formats. This dual export capability is perfect for users who need to share their content in different formats. The export process maintains the integrity of your document’s formatting and styles, ensuring your content looks professional and polished in both Word and PDF formats.
To add ExportWord and ExportPDF tools to the Rich Text Editor toolbar, you can use the RichTextEditorToolbarSettings.Items property. To enable these functionalities, the ServiceUrl must be correctly configured with the RichTextEditorExportWord and RichTextEditorExportPdf. These API endpoints handle the export process and manage the server-side generation of Word and PDF files, respectively.
Additionally, the FileName and Stylesheet properties within the RichTextEditorExportWord and RichTextEditorExportPdf allow for the customization of file names and stylesheets for the exported documents.
Refer to the following API endpoint code example.
public class ExportParam
{
public string html { get; set; }
}
[AcceptVerbs("Post")]
[EnableCors("AllowAllOrigins")]
[Route("ExportToPdf")]
public ActionResult ExportToPdf([FromBody] ExportParam args)
{
string htmlString = args.html;
if (htmlString == null && htmlString == "")
{
return null;
}
using (WordDocument wordDocument = new WordDocument())
{
//This method adds a section and a paragraph to the document.
wordDocument.EnsureMinimal();
wordDocument.HTMLImportSettings.ImageNodeVisited += OpenImage;
//Append the HTML string to the paragraph.
wordDocument.LastParagraph.AppendHTML(htmlString);
DocIORenderer render = new DocIORenderer();
//Converts Word document into PDF document.
PdfDocument pdfDocument = render.ConvertToPDF(wordDocument);
wordDocument.HTMLImportSettings.ImageNodeVisited -= OpenImage;
MemoryStream stream = new MemoryStream();
pdfDocument.Save(stream);
return File(stream.ToArray(), System.Net.Mime.MediaTypeNames.Application.Pdf, "Sample.pdf");
}
}
[AcceptVerbs("Post")]
[EnableCors("AllowAllOrigins")]
[Route("ExportToDocx")]
public FileStreamResult ExportToDocx([FromBody] ExportParam args)
{
string htmlString = args.html;
if (htmlString == null && htmlString == "")
{
return null;
}
using (WordDocument document = new WordDocument())
{
document.EnsureMinimal();
//Hooks the ImageNodeVisited event to open the image from a specific location.
document.HTMLImportSettings.ImageNodeVisited += OpenImage;
//Validates the Html string.
bool isValidHtml = document.LastSection.Body.IsValidXHTML(htmlString, XHTMLValidationType.None);
//When the Html string passes validation, it is inserted into the document.
if (isValidHtml)
{
//Appends the Html string to the first paragraph in the document.
document.Sections[0].Body.Paragraphs[0].AppendHTML(htmlString);
}
//Unhooks the ImageNodeVisited event after loading HTML.
document.HTMLImportSettings.ImageNodeVisited -= OpenImage;
//Creates file stream.
MemoryStream stream = new MemoryStream();
document.Save(stream, FormatType.Docx);
stream.Position = 0;
//Download the Word document in the browser.
return File(stream, "application/msword", "Result.docx");
}
} Refer to the following code example to export Blazor Rich Text Editor content to Word and PDF formats.
@using Syncfusion.Blazor.RichTextEditor
<div class="control-section">
<div class="control-wrapper">
<SfRichTextEditor @ref="EditorRef" ID="RT_Editor" EnableXhtml="true" Placeholder="@PlaceHolderText">
<RichTextEditorToolbarSettings Items="@Tools"></RichTextEditorToolbarSettings>
<RichTextEditorExportPdf ServiceUrl="https://blazor.syncfusion.com/services/production/api/RichTextEditor/ExportToPdf" FileName="RichTextEditor.pdf"></RichTextEditorExportPdf>
<RichTextEditorExportWord ServiceUrl="https://blazor.syncfusion.com/services/production/api/RichTextEditor/ExportToDocx" FileName="RichTextEditor.docx"></RichTextEditorExportWord>
<RichTextEditorImageSettings SaveUrl="@SaveURL" Path="@Path"></RichTextEditorImageSettings>
</SfRichTextEditor>
</div>
</div>
@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 = "Export the editor content into word/pdf…";
private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
{
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.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.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.CreateTable },
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
new ToolbarItemModel() { Command = ToolbarCommand.ClearFormat },
new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }
};
} Refer to the following image.
Note: For more details, refer to the example of export to Word / PDF in Blazor Rich Text Editor.
Thank you for reading! In this blog, we discussed how the Blazor Rich Text Editor enhances your workflow and document management with its import Word and export to Word and PDF features, introduced in the 2024 Volume 3 release. To explore more exciting updates, check out our Release Notes and What’s New pages. Give these features a try, and feel free to share your feedback in the comments section!
If you’re an existing Syncfusion user, you can download the latest version of Essential Studio from the License and Downloads page. For new users, we offer a 30-day free trial so you can explore these powerful features yourself.
If you need any help, don’t hesitate to reach out through our support forum, support portal, or feedback portal. We’re always here to assist you!