# Syncfusion EJ2 DocumentEditor

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.](https://ej2.syncfusion.com/documentation/document-editor/getting-started/)

## Source Code

You can download the source code for this project here.

{% embed url="<https://github.com/iceteagroup/Wisej-DemoBrowser/tree/main/Wisej.DemoBrowser.Premium/Wisej.Web.Ext.Syncfusion2.Demo>" %}

## **Design-Time**

![EJ2 DocumentEditor at Design-Time](https://3428888576-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MGjMcybiMqaTqM3Y4vZ%2Fuploads%2FuvcPHLqWOoKeEYgntDEH%2Fimage.png?alt=media\&token=fe6e6902-0070-45ef-b0e8-886ed87f1624)

### Sample Implementation

{% code title="DocumentEditor.cs" %}

```csharp
public partial class DocumentEditor : TestBase
{
	public DocumentEditor()
	{
		InitializeComponent();
	}

	private void DocumentEditor_Load(object sender, EventArgs e)
	{
		var defaultFile = "Sample1.docx";
		var samplesPath = Application.MapPath("Data/DocumentEditor");
		using (var fs = new FileStream(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;
	}

	private async void buttonSave_Click(object sender, EventArgs e)
	{
		var sfdt = await this.documentEditor1.Instance.documentEditor.serializeAsync();
		using (var stream = WordDocument.Save(sfdt, FormatType.Docx))
		{
			Application.Download(stream, "MyDocument.docx");
		}
	}

	private void buttonUpdate_Click(object sender, EventArgs e)
	{
		var path = Application.MapPath($"Data/DocumentEditor/{this.comboBoxDataSource.SelectedItem}");
		using (var fs = new FileStream(path, FileMode.Open))
		{
			var sfdt = ProcessDocument(fs, "docx");
			this.documentEditor1.Call("openFile", sfdt);
		}
	}

	/// <summary>
	/// Provide services to the client-side widget.
	/// </summary>
	/// <param name="sender"></param>
	/// <param name="e"></param>
	private void documentEditor1_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 = new StreamReader(e.Request.InputStream).ReadToEnd();
				Application.DownloadAndOpen("_blank", WordDocument.Save(json, FormatType.Docx), "Document.docx");
				break;

			default:
				break;
		}
	}

	/// <summary>
	/// Process widget events.
	/// </summary>
	/// <param name="sender"></param>
	/// <param name="e"></param>
	private void documentEditor1_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>
	/// <param name="stream">The file stream.</param>
	/// <param name="format">The file format.</param>
	/// <returns></returns>
	private string ProcessDocument(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;
	}
}
```

{% endcode %}

## Runtime

![EJ2 DocumentEditor at Runtime](https://3428888576-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MGjMcybiMqaTqM3Y4vZ%2Fuploads%2F0VXl2BbzaYwaK1hlH8tE%2Fimage.png?alt=media\&token=60f4458b-9736-436c-a819-ec228664795b)