In Document Editor, the documents are stored in its own format called Syncfusion Document Text (SFDT).
The following example shows how to open SFDT data in Document Editor.
var documenteditor = new ej.documenteditor.DocumentEditor({ });
documenteditor.appendTo('#DocumentEditor');
var sfdt ={
"sections": [
{
"blocks": [
{
"inlines": [
{
"characterFormat": {
"bold": true,
"italic": true
},
"text": "Hello World"
}
]
}
],
"headersFooters": {
}
}
]
};
documenteditor.open(JSON.stringify(sfdt));<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div style="width:100%;height: 100%">
<!--Element which will render as DocumentEditor -->
<div id="DocumentEditor"></div>
</div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>The following example shows how to import document from local machine.
var documenteditor = new ej.documenteditor.DocumentEditor({ });
documenteditor.appendTo('#DocumentEditor');
document.getElementById('file_upload').setAttribute('accept', '.sfdt');
document.getElementById("import").addEventListener("click", function () {
document.getElementById('file_upload').click();
});
document.getElementById('file_upload').addEventListener("change", function (e) {
if (e.target.files[0]) {
var file = e.target.files[0];
if (file.name.substr(file.name.lastIndexOf('.')) === '.sfdt') {
var fileReader = new FileReader();
fileReader.onload = function (e) {
var contents = e.target.result;
documenteditor.open(contents);
};
fileReader.readAsText(file);
documenteditor.documentName = file.name.substr(0, file.name.lastIndexOf('.'));
}
}
});<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/ej2-documenteditor/styles/fabric.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<input type="file" id="file_upload" style="position:fixed; left:-100em">
<div id="container">
<div>
<button id="import">Import</button>
</div>
<!--Element which will render as DocumentEditor -->
<div id="DocumentEditor"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>You can convert word documents into SFDT format using the .NET Standard library Syncfusion.EJ2.WordEditor.AspNet.Core by the web API service implementation. This library helps you to convert word documents (.dotx,.docx,.docm,.dot,.doc), rich text format documents (.rtf), and text documents (.txt) into SFDT format.
Note: The Syncfusion Document editor component makes sensible decision when layout the text, and other supported elements while paginating the document content for displaying page by page. But however, there may not be guaranteed pagination with all the documents compared to the pagination of Microsoft Word.
Please refer the following example for converting word documents into SFDT.
import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
let documenteditor: DocumentEditor = new DocumentEditor();
documenteditor.appendTo('#DocumentEditor');
document.getElementById('file_upload').setAttribute('accept', '.dotx,.docx,.docm,.dot,.doc,.rtf,.txt,.xml,.sfdt');
document.getElementById("import").addEventListener("click", (): void => {
document.getElementById('file_upload').click();
});
document.getElementById('file_upload').addEventListener("change", (e: any): void => {
if (e.target.files[0]) {
let file = e.target.files[0];
if (file.name.substr(file.name.lastIndexOf('.')) !== '.sfdt') {
loadFile(file);
}
}
});
function loadFile(file: File): void {
let ajax: XMLHttpRequest = new XMLHttpRequest();
ajax.open('POST', 'https://localhost:4000/api/documenteditor/Import', true);
ajax.onreadystatechange = () => {
if (ajax.readyState === 4) {
if (ajax.status === 200 || ajax.status === 304) {
// open SFDT text in document editor
documenteditor.open(ajax.responseText);
}
}
}
let formData: FormData = new FormData();
formData.append('files', file);
ajax.send(formData);
}Here’s how to handle the server-side action for converting word document in to SFDT.
[AcceptVerbs("Post")]
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 sdft;
}
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.");
}
}