New JavaScript Word Processor Component for Web

• Supported elements – The document editor supports commonly used document elements like:
  1. Text – Create or edit document with various language texts.
  2. Image – Browse for an image and insert it into the document editor as an inline picture. Supports all common raster image formats like PNG, BMP, JPEG, GIF, and more. The images can be resized interactively.
  3. Table – Create simple and complex nested tables. You can add or remove cells and rows. The rows and columns of a table can be resized interactively by the user as needed.
  4. Hyperlink – Create a link in the document for quick access to web pages, files, emails, and bookmarks.
  5. Bookmark – Insert a bookmark to identify a specific part of the document. The user can navigate to an existing bookmark in the document interactively through a built-in dialog.
  6. Page Number – Add page numbers to the document that update automatically when the document grows or shrinks.
  7. Table of Contents – Add a table of contents to the beginning of the document to give an overview of the document content to easily navigate to specific sections. A built-in dialog provides intuitive options to choose heading and custom styles, add page numbers, and provide hyperlinks for easy navigation. After modifying an existing document, the user can update the table of contents through a context menu option.
  8. Header and Footer – Display information on every page of a document in regions at the top and bottom of a page. You can specify different header and footer for the first page of a document as well as different headers and footers for odd and even pages.
• Styles and formatting
  1. Text Formatting – The user can format the appearance of the text with options like font, font size, font style (bold, italic, underline), color, highlighting, strikethrough, subscript, and superscript.
  2. Paragraph Formatting – The user can change the appearance of a paragraph with options like indent, alignment, and spacing.
  3. Bullets and Numbering – Organizes items or creates an outline of the document with bullets and numbering ranging from a single-level to multilevel lists.
  4. Table Formatting – Customize the appearance of the table with fill color, border, margins, vertical alignment, and merge cell options. The appearance of text and paragraphs within the table can also be modified.
  5. Styles – The user can create, edit, and apply character and paragraph styles to ensure consistency within a document.
• Page Settings – Customize the structure and layout of the document with several options like page size, page margins, orientation, header, and footer distance.
• Find and replace – The user can search for words and navigate to their occurrences by clicking on the test results, similar to the Microsoft Word user interface. Text found in this way can be easily replaced.
• Clipboard Operations – The user can cut, copy, and paste formatted content within the same document. The user can also paste plain text to and from other applications.
• Export – The user can export the document to DOCX and SFDT formats on the client side.
• Import – Convert DOCX, DOC, RTF, and TXT format documents to SFDT from the server side and load the converted SFDT format in the document editor control.
• Print – The user can print the entire document or a specific page.
• Undo and Redo – Supports multiple levels of undo and redo operations.
• Interactions – Provides intuitive and touch-friendly UI options like zooming, context menu, navigation pane, and dialogs.
• Restrict Editing – You can prevent undesired editing by displaying the document in read-only mode.

1. You can clone the Essential JS 2 quickstart project and install necessary packages by using the following commands.

2. Dependent packages must be mapped in the system.config.js configuration file.

3. Add an HTML div element to act as the DocumentEditor in index.html using the following code.

4. Essential JS 2 components support a set of built-in themes, and here we will use the material theme for the document editor. To add the material theme in your application, you need to import material.css in styles.css.

5. To get started, place the following code in the app.ts.

6. Run the following command to start the application.

npm start

Your browser window appears like this.

1. Open Visual Studio 2017 and choose New project -> .NET Core -> ASP.NET Core Web application.

2. Choose ASP.NET Core 2.0 and Web API template.

3. Add the “Syncfusion.EJ2.DocumentEditor” NuGet package as a reference to the .NET Standard project in your application.

4. Add a controller, “DocumentEditorController.cs,” and implement a web API using the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.DocumentEditor;
using Microsoft.AspNetCore.Http;
using System.IO;
using Microsoft.AspNetCore.Cors;

namespace WebApplication1.Controllers
{
    [Route("api/[controller]")]
    public class DocumentEditorController : Controller
    {
        [AcceptVerbs("Post")]
        [HttpPost]
        [EnableCors("AllowAllOrigins")]
        [Route("Import")]

        public string Import(IFormCollection data)
        {
            if (data.Files.Count == 0)
                return null;
            Stream stream = new MemoryStream();
            IFormFile file = data.Files[0];
            int index = file.FileName.LastIndexOf('.');
            string type = index > -1 && index < file.FileName.Length - 1 ?
                file.FileName.Substring(index) : ".docx";
            file.CopyTo(stream);
            stream.Position = 0;

            WordDocument document = WordDocument.Load(stream, GetFormatType(type.ToLower()));
            string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(document);
            document.Dispose();
            return sfdt;
        }

        internal static FormatType GetFormatType(string format)
        {
            if (string.IsNullOrEmpty(format))
                throw new NotSupportedException("EJ2 DocumentEditor does not support this file format.");
            switch (format.ToLower())
            {
                case ".dotx":
                case ".docx":
                case ".docm":
                case ".dotm":
                    return FormatType.Docx;
                case ".dot":
                case ".doc":
                    return FormatType.Doc;
                case ".rtf":
                    return FormatType.Rtf;
                case ".txt":
                    return FormatType.Txt;
                case ".xml":
                    return FormatType.WordML;
                default:
                    throw new NotSupportedException("EJ2 DocumentEditor does not support this file format.");
            }
        }

    }
}

dotnet restore
dotnet run

1. Add an HTML button and file picker in index.html using the following code.

2. Place the following code in app.ts to import a Word document upon clicking the Open button.