I am using the syncfusion library to create a doc editor using Reactjs as a frontend framework. I have encountered an error while going through the documentation of the library
Documentation: https://ej2.syncfusion.com/react/documentation/document-editor/scrolling-zooming/#zoom-option-using-ui
I created a react application using creat-react-app
I copy pasted the code from the above documentation link into my index.js file
There are no compile time errors but upon opening the website I get "Uncaught TypeError: Cannot read properties of undefined (reading 'Inject')" error displayed in the console of the browser
My code:
import * as ReactDOM from "react-dom";
import * as React from "react";
import {
DocumentEditorComponent,
Print,
SfdtExport,
WordExport,
TextExport,
Selection,
Search,
Editor,
ImageResizer,
EditorHistory,
ContextMenu,
OptionsPane,
HyperlinkDialog,
TableDialog,
BookmarkDialog,
TableOfContentsDialog,
PageSetupDialog,
StyleDialog,
ListDialog,
ParagraphDialog,
BulletsAndNumberingDialog,
FontDialog,
TablePropertiesDialog,
BordersAndShadingDialog,
TableOptionsDialog,
CellOptionsDialog,
StylesDialog,
} from "@syncfusion/ej2-react-documenteditor";
import { DropDownButtonComponent } from "@syncfusion/ej2-react-splitbuttons";
//Inject require module.
DocumentEditorComponent.Inject(
Print,
SfdtExport,
WordExport,
TextExport,
Selection,
Search,
Editor,
ImageResizer,
EditorHistory,
ContextMenu,
OptionsPane,
HyperlinkDialog,
TableDialog,
BookmarkDialog,
TableOfContentsDialog,
PageSetupDialog,
StyleDialog,
ListDialog,
ParagraphDialog,
BulletsAndNumberingDialog,
FontDialog,
TablePropertiesDialog,
BordersAndShadingDialog,
TableOptionsDialog,
CellOptionsDialog,
StylesDialog
);
export class Default extends React.Component {
constructor() {
super(...arguments);
this.startPage = 1;
this.items = [
{
text: "200%",
},
{
text: "175%",
},
{
text: "150%",
},
{
text: "125%",
},
{
text: "100%",
},
{
text: "75%",
},
{
text: "50%",
},
{
text: "25%",
},
{
separator: true,
},
{
text: "Fit one page",
},
{
text: "Fit page width",
},
];
}
componentDidMount() {
let instance = this;
instance.pageCount = document.getElementById("documenteditor_pagecount");
instance.editablePageNumber = document.getElementById("editablePageNumber");
instance.pageNumberLabel = document.getElementById(
"documenteditor_page_no"
);
instance.updatePageCount();
instance.updatePageNumber();
instance.documenteditor.viewChange = function (e) {
instance.updatePageNumberOnViewChange(e);
};
instance.documenteditor.contentChange = function () {
instance.updatePageCount();
};
instance.editablePageNumber.onclick = function () {
instance.updateDocumentEditorPageNumber();
};
instance.editablePageNumber.onkeydown = function (e) {
instance.onKeyDown(e);
};
instance.editablePageNumber.onblur = function () {
instance.onBlur();
};
}
updatePageNumberOnViewChange(args) {
if (
this.documenteditor.selection &&
this.documenteditor.selection.startPage >= args.startPage &&
this.documenteditor.selection.startPage <= args.endPage
) {
this.startPage = this.documenteditor.selection.startPage;
} else {
this.startPage = args.startPage;
}
this.updatePageNumber();
}
onBlur() {
if (
this.editablePageNumber.textContent === "" ||
parseInt(this.editablePageNumber.textContent, 0) > this.editorPageCount
) {
this.updatePageNumber();
}
this.editablePageNumber.contentEditable = "false";
}
onKeyDown(e) {
if (e.which === 13) {
e.preventDefault();
var pageNumber = parseInt(this.editablePageNumber.textContent, 0);
if (pageNumber > this.editorPageCount) {
this.updatePageNumber();
} else {
if (this.documenteditor.selection) {
this.documenteditor.selection.goToPage(
parseInt(this.editablePageNumber.textContent, 0)
);
} else {
this.documenteditor.scrollToPage(
parseInt(this.editablePageNumber.textContent, 0)
);
}
}
this.editablePageNumber.contentEditable = "false";
if (this.editablePageNumber.textContent === "") {
this.updatePageNumber();
}
}
if (e.which > 64) {
e.preventDefault();
}
}
onZoom(args) {
this.setZoomValue(args.item.text);
this.updateZoomContent();
}
setZoomValue(text) {
if (text.match("Fit one page")) {
this.documenteditor.fitPage("FitOnePage");
} else if (text.match("Fit page width")) {
this.documenteditor.fitPage("FitPageWidth");
} else {
this.documenteditor.zoomFactor = parseInt(text, 0) / 100;
}
}
updateZoomContent() {
this.zoom.content = Math.round(this.documenteditor.zoomFactor * 100) + "%";
}
updatePageNumber() {
this.pageNumberLabel.textContent = this.startPage.toString();
}
updatePageCount() {
this.editorPageCount = this.documenteditor.pageCount;
this.pageCount.textContent = this.editorPageCount.toString();
}
updateDocumentEditorPageNumber() {
let editPageNumber = document.getElementById("editablePageNumber");
editPageNumber.contentEditable = "true";
editPageNumber.focus();
window.getSelection().selectAllChildren(editPageNumber);
}
render() {
return (
<div>
<DocumentEditorComponent
id="container"
height={"330px"}
ref={(scope) => {
this.documenteditor = scope;
}}
isReadOnly={false}
enablePrint={true}
enableSelection={true}
enableEditor={true}
enableEditorHistory={true}
enableContextMenu={true}
enableSearch={true}
enableOptionsPane={true}
enableBookmarkDialog={true}
enableBordersAndShadingDialog={true}
enableFontDialog={true}
enableTableDialog={true}
enableParagraphDialog={true}
enableHyperlinkDialog={true}
enableImageResizer={true}
enableListDialog={true}
enablePageSetupDialog={true}
enableSfdtExport={true}
enableStyleDialog={true}
enableTableOfContentsDialog={true}
enableTableOptionsDialog={true}
enableTablePropertiesDialog={true}
enableTextExport={true}
enableWordExport={true}
/>
<div id="page-fit-type-div">
<label id="page"> Page </label>
<div id="editablePageNumber">
<label id="documenteditor_page_no" />
</div>
<label id="of">of</label>
<label id="documenteditor_pagecount" />
<DropDownButtonComponent
ref={(scope) => {
this.zoom = scope;
}}
items={this.items}
cssClass="e-de-statusbar-zoom"
select={this.onZoom.bind(this)}
>
{" "}
100%{" "}
</DropDownButtonComponent>
</div>
</div>
);
}
}
ReactDOM.render(<Default />, document.getElementById("root"));
How can I solve this?
Is there a better way to create a doc editor using react?
