Wisej.NET Examples
HomeSupportDocumentation
  • Introduction
  • Tutorials
    • StockViewer
      • Structure
      • User Interface
      • Animations
      • Localization
      • Code
  • Examples
    • AspNetAuthentication
    • BackgroundTasks
    • Buttons
    • ChartJS
    • CodeProject
    • CustomCellRenderer
    • CustomPainting
    • DataBinding
    • DataRepeaterDragDrop
    • DeepLinking
    • Download
    • EditorsChoice
    • FullCalendar
    • GoogleMaps
    • KeyboardHandling
    • LazyLoadingPanel
    • Localization
    • MDIExample
    • ModalWorkflow
    • NavigationBar
    • Pannellum
    • ProgressCircle
    • Responsive
    • RibbonBar
    • SimpleChat
    • SlideBar
    • SmoothieChart
    • TagInput
    • TourPanel
    • TreeGrid
    • UploadFiles
    • UserControl
    • UserDesktop
    • UserPaintCells
  • Premium
    • Syncfusion EJ2 DocumentEditor
    • Syncfusion EJ2 FileManager
    • Syncfusion EJ2 PdfViewer
    • KendoUI Captcha
    • KendoUI TaskBoard
Powered by GitBook
On this page
  • Source Code
  • Design-Time
  • Sample Implementation
  • Runtime

Was this helpful?

Export as PDF
  1. Premium

Syncfusion EJ2 DocumentEditor

The JavaScript Document Editor component is used to create, edit, view, and print Word documents in web applications.

PreviousUserPaintCellsNextSyncfusion EJ2 FileManager

Last updated 1 year ago

Was this helpful?

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

Source Code

You can download the source code for this project here.

Design-Time

Sample Implementation

DocumentEditor.cs
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;
	}
}

Runtime

documentation section.
Wisej-DemoBrowser/Wisej.DemoBrowser.Premium/Wisej.Web.Ext.Syncfusion2.Demo at main · iceteagroup/Wisej-DemoBrowserGitHub
Logo
EJ2 DocumentEditor at Design-Time
EJ2 DocumentEditor at Runtime