The JavaScript Document Editor component is used to create, edit, view, and print Word documents in web applications.
This sample demonstrate the following key features of PDF Viewer:
Create and edit: Opens and saves documents in native "Syncfusion Document Text (*.sfdt)" file format without any server-side dependencies. This helps build a purely client-side Word editor application.
Supported elements: Document elements like text, images, hyperlinks, tables, bookmarks, page numbers, tables of contents, headers, and footers.
Formatting: Text levels, paragraph levels, bullets and numbering, table levels, page settings, and styles.
Editing operations: Undo, redo, cut, copy, and paste.
Find and replace text within the document.
Interactions through touch, mouse, and keyboard.
More information about the document editor features can be found in this documentation section.
Source Code
You can download the source code for this project here.
Design-Time
Sample Implementation
DocumentEditor.cs
publicpartialclassDocumentEditor:TestBase{publicDocumentEditor() {InitializeComponent(); }privatevoidDocumentEditor_Load(object sender,EventArgs e) {var defaultFile ="Sample1.docx";var samplesPath =Application.MapPath("Data/DocumentEditor");using (var fs =newFileStream(Path.Combine(samplesPath, defaultFile),FileMode.Open)) {var sfdt =ProcessDocument(fs,"docx");this.documentEditor1.Call("openFile", sfdt); }var samples =Directory.GetFiles(samplesPath) .Select(x =>Path.GetFileName(x)).ToArray();this.comboBoxDataSource.DataSource= samples;this.comboBoxDataSource.SelectedItem= defaultFile; }privateasyncvoidbuttonSave_Click(object sender,EventArgs e) {var sfdt =awaitthis.documentEditor1.Instance.documentEditor.serializeAsync();using (var stream =WordDocument.Save(sfdt,FormatType.Docx)) {Application.Download(stream,"MyDocument.docx"); } }privatevoidbuttonUpdate_Click(object sender,EventArgs e) {var path =Application.MapPath($"Data/DocumentEditor/{this.comboBoxDataSource.SelectedItem}");using (var fs =newFileStream(path,FileMode.Open)) {var sfdt =ProcessDocument(fs,"docx");this.documentEditor1.Call("openFile", sfdt); } } /// <summary> /// Provide services to the client-side widget. /// </summary> /// <paramname="sender"></param> /// <paramname="e"></param>privatevoiddocumentEditor1_WebRequest(object sender,WebRequestEventArgs e) {switch (e.Request.QueryString["action"]) {case"Import":var files =e.Request.Files; // can only load one document at a time.if (files.Count>0) {var file =files[0];var index =file.FileName.LastIndexOf('.');var type =file.FileName.Substring(index).ToLower();e.Response.ContentType="text/plain";e.Response.Output.Write(ProcessDocument(file.InputStream, type)); }break;case"Export":var json =newStreamReader(e.Request.InputStream).ReadToEnd();Application.DownloadAndOpen("_blank",WordDocument.Save(json,FormatType.Docx),"Document.docx");break;default:break; } } /// <summary> /// Process widget events. /// </summary> /// <paramname="sender"></param> /// <paramname="e"></param>privatevoiddocumentEditor1_WidgetEvent(object sender,WidgetEventArgs e) {AlertBox.Show($"<b>{e.Type}</b><br/>{JSON.Stringify(e.Data)}",MessageBoxIcon.Information);Application.Play(MessageBoxIcon.Information); } /// <summary> /// Generates the SFDT string for the given document. /// </summary> /// <paramname="stream">The file stream.</param> /// <paramname="format">The file format.</param> /// <returns></returns>privatestringProcessDocument(Stream stream,string format) {stream.Position=0;var type = (FormatType)Enum.Parse(typeof(FormatType),format.Replace(".",""),true);var document =WordDocument.Load(stream, type);var sfdt =JsonConvert.SerializeObject(document);document.Dispose();return sfdt; }}