Importing DOCX Files Inside the Editor

Environment

Product

Progress® Kendo UI for Angular Editor

Description

I want to import a DOCX file(Word document) inside the Kendo UI for Angular Editor. How to achieve this?

This Knowledge Base article also answers the following questions:

• How can I convert a Word document (DOCX) to HTML format compatible with the Kendo UI for Angular Editor?
• What third-party libraries can help with importing DOCX files into the Kendo UI for Angular Editor?
• How do I implement a file selection process to allow users to import Word documents into the Editor?

Solution

By default, the Kendo UI for Angular Editor does not support the import of Word documents. To import a DOCX file inside the Editor:

1. Use the Kendo UI for Angular FileSelect to allow the user to import the desired Word document.

   html

   <kendo-fileselect 
       #fileselect
       [restrictions]="{ allowedExtensions: ['.docx'] }"
       [multiple]="false"
       ...
   >
   </kendo-fileselect>

2. Handle the select event to access and process the file imported by the user.

   ts

   public onFileSelect(event: SelectEvent): void {    
       const files = event.files;
       if (files.length > 0 && files[0].rawFile) {
           const file = files[0].rawFile as File;
   
           const reader = new FileReader();
           reader.onload = (e: ProgressEvent<FileReader>) => {
               this.convertToHtml(arrayBuffer as ArrayBuffer);
           };
   
           ...
       }
   }

3. Use the mammoth.js library to convert the imported file to HTML and set the value of the Editor.

   ts

   private convertToHtml(arrayBuffer: ArrayBuffer): void {
       mammoth
           .convertToHtml({ arrayBuffer })
           .then((result) => {
               this.value = result.value;
           })
           .catch((err) => {
               console.error('Error converting file:', err);
           });
   }

The mammoth.js library is distributed under the BSD-2 license and you can find more information about it in the copyright-component.ts file. Kendo UI for Angular is not affiliated with mammoth.js. You can use any third-party library which supports such type of conversion.

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...