Add RichEdit to a Blazor WebAssembly Application
- 3 minutes to read
This topic describes how to add the client-side RichEdit control to a Blazor WebAssembly application.
Prerequisites
- Make sure you have Node.js and npm installed on your machine.
Requirements
- To use the RichEdit control in a Blazor application, you need to have a Universal, DXperience, or ASP.NET subscription.
- Versions of the devexpress npm packages should be identical (their major and minor versions should be the same).
How to Create an Application with RichEdit
Create a Blazor WebAssembly Application
In the command prompt, create a Blazor WebAssembly application and navigate to the created folder as follows.
dotnet new blazorwasm -o RichEditClientBlazor --hosted
cd RichEditClientBlazor/Client
Install a RichEdit Package
The devexpress-richedit npm package references devextreme as peerDependencies. The peerDependencies packages should be installed manually. This allows developers to control a version of the peerDependencies packages and guarantees that the package is installed once.
Install a RichEdit package with required peerDependencies:
- If the package.json file does not exist, create an npm configuration file as follows:
npm init -y Install a RichEdit package with required peerDependencies:
npm i devextreme devexpress-richedit --save
You can find all the libraries in the node_modules folder after the installation is completed.
Create a RichEdit Bundle
Create a RichEdit Bundle.
cd node_modules/devexpress-richedit
npm i --save-dev
npm run build-custom
cd ../..
Copy RichEdit Scripts
- Copy the bundled script node_modules/devexpress-richedit/dist/custom/dx.richedit.min.js to the wwwroot/js folder.
- Copy the bundled css resources node_modules/devexpress-richedit/dist/custom/dx.richedit.css and icons from the node_modules/devexpress-richedit/dist/custom/icons folder to the wwwroot/css folder.
Register the Scripts on a Page
Add scripts into the <head> tag of the wwwroot/index.html page.
<link href="css/dx.richedit.css" rel="stylesheet" />
<script src="js/dx.richedit.min.js"></script>
Create a JavaScript Function that Initializes a RichEdit
Create the wwwroot/js/richedit-creator.js file with the following content.
function createRichEdit(exportUrl, documentAsBase64) {
const options = DevExpress.RichEdit.createOptions();
options.confirmOnLosingChanges.enabled = false;
options.exportUrl = exportUrl;
options.width = '1400px';
options.height = '900px';
var richElement = document.getElementById("rich-container");
const richEdit = DevExpress.RichEdit.create(richElement, options);
if (documentAsBase64)
richEdit.openDocument(documentAsBase64, "DocumentName", DevExpress.RichEdit.DocumentFormat.Rtf);
}
Add scripts into the <head> tag of the wwwroot/index.html page.
<script src="js/richedit-creator.js"></script>
How to set RichEdit options | Client-side API code samples
Create a RichEdit Object
Add the following code to the Pages/Index.razor page.
@page "/"
@inject IJSRuntime JSRuntime;
...
<div id='rich-container' style="width: 100%; height: 900px"></div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender) {
if (firstRender) {
var documentAsBase64 = "e1xydGYxXGRlZmYwe1xmb250dGJse1xmMCBDYWxpYnJpO319e1xjb2xvcnRibCA7XHJlZDB"
+ "cZ3JlZW4wXGJsdWUyNTUgO1xyZWQyNTVcZ3JlZW4yNTVcYmx1ZTI1NSA7fXtcKlxkZWZjaHAgXGZzMjJ9e1xzdHl"
+ "sZXNoZWV0IHtccWxcZnMyMiBOb3JtYWw7fXtcKlxjczFcZnMyMiBEZWZhdWx0IFBhcmFncmFwaCBGb250O317XCp"
+ "cY3MyXGZzMjJcY2YxIEh5cGVybGluazt9e1wqXHRzM1x0c3Jvd2RcZnMyMlxxbFx0c3ZlcnRhbHRcdHNjZWxsY2J"
+ "wYXQyXHRzY2VsbHBjdDBcY2x0eGxydGIgTm9ybWFsIFRhYmxlO319e1wqXGxpc3RvdmVycmlkZXRhYmxlfXtcaW5"
+ "mb31cbm91aWNvbXBhdFxzcGx5dHduaW5lXGh0bWF1dHNwXGV4cHNocnRuXHNwbHRwZ3BhclxkZWZ0YWI3MjBcc2V"
+ "jdGRcbWFyZ2xzeG4xNDQwXG1hcmdyc3huMTQ0MFxtYXJndHN4bjE0NDBcbWFyZ2JzeG4xNDQwXGhlYWRlcnk3MjB"
+ "cZm9vdGVyeTcyMFxwZ3dzeG4xMjI0MFxwZ2hzeG4xNTg0MFxjb2xzMVxjb2xzeDcyMFxwYXJkXHBsYWluXHFse1x"
+ "mczIyXGNmMFxjczEgRG9jdW1lbnQgdGV4dH1cZnMyMlxjZjBccGFyfQ==";
await JSRuntime.InvokeVoidAsync("createRichEdit", "api/RichEdit/SaveDocument", documentAsBase64);
}
}
}
Save a Document
Create the Controllers/RichEditController.cs controller with the following content.
using Microsoft.AspNetCore.Mvc;
namespace BlazorServerRichEdit.Controllers {
[Route("api/[controller]")]
[ApiController]
public class RichEditController : ControllerBase {
[HttpPost]
[Route("SaveDocument")]
public IActionResult SaveDocument([FromForm]string base64, [FromForm]string fileName, [FromForm]int format, [FromForm]string reason) {
byte[] fileContents = System.Convert.FromBase64String(base64);
return Ok();
}
}
}