{documenteditor = scope; }} enableSelection={true} enableSfdtExport={true} requestNavigate={requestNavigate} enableEditor={true} isReadOnly={false} />
);
}
diff --git a/ej2-react/code-snippet/document-editor/print-cs2/app/index.jsx b/ej2-react/code-snippet/document-editor/print-cs2/app/index.jsx
index 03a5277da..0a9973767 100644
--- a/ej2-react/code-snippet/document-editor/print-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/document-editor/print-cs2/app/index.jsx
@@ -5,7 +5,7 @@ import { DocumentEditorComponent, Print, Editor, Selection, EditorHistory, Sfdt
} from '@syncfusion/ej2-react-documenteditor';
DocumentEditorComponent.Inject(Print, Editor, Selection, SfdtExport, EditorHistory);
-let documenteditor: DocumentEditorComponent;
+let documenteditor;
function App() {
return (
diff --git a/ej2-react/code-snippet/document-editor/ruler-cs1/app/index.jsx b/ej2-react/code-snippet/document-editor/ruler-cs1/app/index.jsx
index 5599a7ee8..3bb5426c8 100644
--- a/ej2-react/code-snippet/document-editor/ruler-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/document-editor/ruler-cs1/app/index.jsx
@@ -1,16 +1,15 @@
{% raw %}
import * as ReactDOM from 'react-dom';
import * as React from 'react';
-import { DocumentEditorComponent, Editor } from '@syncfusion/ej2-react-documenteditor';
-DocumentEditorComponent.Inject(Editor);
+import { DocumentEditorComponent, Editor, Selection } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorComponent.Inject(Editor, Selection);
function App() {
let container;
React.useEffect(() => {
componentDidMount()
}, []);
function created() {
- container.documentEditorSettings.showRuler = true;
- container.enableAllModules();
+ container.documentEditorSettings.showRuler = true;
}
function componentDidMount() {
setTimeout(() => {
@@ -25,7 +24,7 @@ function App() {
{
container = scope;
created();
- }}
+ }} enableEditor={true} enableSelection={true}
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
/>
diff --git a/ej2-react/code-snippet/document-editor/ruler-cs1/app/index.tsx b/ej2-react/code-snippet/document-editor/ruler-cs1/app/index.tsx
index d84db872c..6bd6bd729 100644
--- a/ej2-react/code-snippet/document-editor/ruler-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/document-editor/ruler-cs1/app/index.tsx
@@ -3,8 +3,8 @@
import * as ReactDOM from 'react-dom';
import * as React from 'react';
-import { DocumentEditorComponent, Editor } from '@syncfusion/ej2-react-documenteditor';
-DocumentEditorComponent.Inject(Editor);
+import { DocumentEditorComponent, Editor, Selection } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorComponent.Inject(Editor, Selection);
function App() {
@@ -14,8 +14,7 @@ function App() {
}, []);
function created() {
- container.documentEditorSettings.showRuler = true;
- container.enableAllModules();
+ container.documentEditorSettings.showRuler = true;
}
function componentDidMount() {
@@ -33,7 +32,7 @@ function App() {
{
container = scope;
created();
- }}
+ }} enableEditor={true} enableSelection={true}
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
/>
diff --git a/ej2-react/code-snippet/document-editor/scrolling-zooming-cs1/app/index.jsx b/ej2-react/code-snippet/document-editor/scrolling-zooming-cs1/app/index.jsx
index 35ab33379..1e19116c8 100644
--- a/ej2-react/code-snippet/document-editor/scrolling-zooming-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/document-editor/scrolling-zooming-cs1/app/index.jsx
@@ -1,7 +1,8 @@
{% raw %}
import * as ReactDOM from 'react-dom';
import * as React from 'react';
-import { DocumentEditorComponent } from '@syncfusion/ej2-react-documenteditor';
+import { DocumentEditorComponent, Selection, Editor } from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorComponent.Inject(Selection, Editor);
function App() {
let documenteditor;
React.useEffect(() => {
@@ -69,7 +70,7 @@ function App() {
documenteditor.scrollToPage(2);
});
}
- return ( { documenteditor = scope; }} isReadOnly={false}/>);
+ return ( { documenteditor = scope; }} isReadOnly={false} enableEditor={true} />);
}
export default App;
ReactDOM.render( { documenteditor = scope; }} isReadOnly={false} />
+ { documenteditor = scope; }} isReadOnly={false} enableEditor={true} />
);
}
export default App;
diff --git a/ej2-react/code-snippet/document-editor/scrolling-zooming-cs3/app/index.jsx b/ej2-react/code-snippet/document-editor/scrolling-zooming-cs3/app/index.jsx
index c9d95784c..7ebbd5f7e 100644
--- a/ej2-react/code-snippet/document-editor/scrolling-zooming-cs3/app/index.jsx
+++ b/ej2-react/code-snippet/document-editor/scrolling-zooming-cs3/app/index.jsx
@@ -32,15 +32,18 @@ import {
} from '@syncfusion/ej2-react-documenteditor';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
+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);
+
function App() {
- let documenteditor: DocumentEditorComponent;
- let pageCount: any;
- let editablePageNumber: any;
- let editorPageCount: any;
- let pageNumberLabel: any;
+ const documentEditorRef = React.useRef(null);
+ const pageCountRef = React.useRef(null);
+ const editablePageNumberRef = React.useRef(null);
+ const pageNumberLabelRef = React.useRef(null);
+ const zoomRef = React.useRef(null);
let startPage = 1;
- let zoom: any;
- let items: ItemModel[] = [
+ let editorPageCount;
+
+ const items = [
{ text: '200%' },
{ text: '175%' },
{ text: '150%' },
@@ -55,37 +58,25 @@ function App() {
];
React.useEffect(() => {
- let instance: any = this;
+ const documenteditor = documentEditorRef.current;
- instance.pageCount = document.getElementById('documenteditor_pagecount');
- instance.editablePageNumber = document.getElementById('editablePageNumber');
- instance.pageNumberLabel = document.getElementById('documenteditor_page_no');
-
- updatePageCount();
- updatePageNumber();
+ if (documenteditor) {
+ documenteditor.viewChange = (e) => updatePageNumberOnViewChange(e);
+ documenteditor.contentChange = () => updatePageCount();
- documenteditor.viewChange = function (e) {
- updatePageNumberOnViewChange(e);
- };
+ if (editablePageNumberRef.current) {
+ editablePageNumberRef.current.onclick = () => updateDocumentEditorPageNumber();
+ editablePageNumberRef.current.onkeydown = (e) => onKeyDown(e);
+ editablePageNumberRef.current.onblur = () => onBlur();
+ }
- documenteditor.contentChange = function () {
updatePageCount();
- };
-
- instance.editablePageNumber.onclick = function () {
- updateDocumentEditorPageNumber();
- };
-
- instance.editablePageNumber.onkeydown = function (e) {
- onKeyDown(e);
- };
-
- instance.editablePageNumber.onblur = function () {
- onBlur();
- };
+ updatePageNumber();
+ }
}, []);
- function updatePageNumberOnViewChange(args: any) {
+ function updatePageNumberOnViewChange(args) {
+ const documenteditor = documentEditorRef.current;
if (
documenteditor.selection &&
documenteditor.selection.startPage >= args.startPage &&
@@ -99,6 +90,7 @@ function App() {
}
function onBlur() {
+ const editablePageNumber = editablePageNumberRef.current;
if (
editablePageNumber.textContent === '' ||
parseInt(editablePageNumber.textContent, 0) > editorPageCount
@@ -108,17 +100,19 @@ function App() {
editablePageNumber.contentEditable = 'false';
}
- function onKeyDown(e: any) {
+ function onKeyDown(e) {
+ const documenteditor = documentEditorRef.current;
+ const editablePageNumber = editablePageNumberRef.current;
if (e.which === 13) {
e.preventDefault();
- var pageNumber = parseInt(editablePageNumber.textContent, 0);
+ const pageNumber = parseInt(editablePageNumber.textContent, 0);
if (pageNumber > editorPageCount) {
updatePageNumber();
} else {
if (documenteditor.selection) {
- documenteditor.selection.goToPage(parseInt(editablePageNumber.textContent, 0));
+ documenteditor.selection.goToPage(pageNumber);
} else {
- documenteditor.scrollToPage(parseInt(editablePageNumber.textContent, 0));
+ documenteditor.scrollToPage(pageNumber);
}
}
editablePageNumber.contentEditable = 'false';
@@ -131,12 +125,13 @@ function App() {
}
}
- function onZoom(args: any) {
+ function onZoom(args) {
setZoomValue(args.item.text);
updateZoomContent();
}
- function setZoomValue(text: string) {
+ function setZoomValue(text) {
+ const documenteditor = documentEditorRef.current;
if (text.match('Fit one page')) {
documenteditor.fitPage('FitOnePage');
} else if (text.match('Fit page width')) {
@@ -147,23 +142,32 @@ function App() {
}
function updateZoomContent() {
- zoom.content = Math.round(documenteditor.zoomFactor * 100) + '%';
+ if (zoomRef.current) {
+ zoomRef.current.content = Math.round(documentEditorRef.current.zoomFactor * 100) + '%';
+ }
}
function updatePageNumber() {
- pageNumberLabel.textContent = startPage.toString();
+ if (pageNumberLabelRef.current) {
+ pageNumberLabelRef.current.textContent = startPage.toString();
+ }
}
function updatePageCount() {
+ const documenteditor = documentEditorRef.current;
editorPageCount = documenteditor.pageCount;
- pageCount.textContent = editorPageCount.toString();
+ if (pageCountRef.current) {
+ pageCountRef.current.textContent = editorPageCount.toString();
+ }
}
function updateDocumentEditorPageNumber() {
- let editPageNumber = document.getElementById('editablePageNumber');
- editPageNumber.contentEditable = 'true';
- editPageNumber.focus();
- window.getSelection().selectAllChildren(editPageNumber);
+ const editPageNumber = editablePageNumberRef.current;
+ if (editPageNumber) {
+ editPageNumber.contentEditable = 'true';
+ editPageNumber.focus();
+ window.getSelection().selectAllChildren(editPageNumber);
+ }
}
return (
@@ -171,9 +175,7 @@ function App() {
{
- documenteditor = scope;
- }}
+ ref={documentEditorRef}
isReadOnly={false}
enablePrint={true}
enableSelection={true}
@@ -201,15 +203,13 @@ function App() {
/>
Page
-
-
+
+
of
-
+
{
- zoom = scope;
- }}
+ ref={zoomRef}
items={items}
cssClass="e-de-statusbar-zoom"
select={onZoom}
diff --git a/ej2-react/code-snippet/document-editor/scrolling-zooming-cs3/app/index.tsx b/ej2-react/code-snippet/document-editor/scrolling-zooming-cs3/app/index.tsx
index c9d95784c..5fc04c197 100644
--- a/ej2-react/code-snippet/document-editor/scrolling-zooming-cs3/app/index.tsx
+++ b/ej2-react/code-snippet/document-editor/scrolling-zooming-cs3/app/index.tsx
@@ -32,15 +32,45 @@ import {
} from '@syncfusion/ej2-react-documenteditor';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
+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
+);
+
function App() {
- let documenteditor: DocumentEditorComponent;
- let pageCount: any;
- let editablePageNumber: any;
- let editorPageCount: any;
- let pageNumberLabel: any;
+ const documentEditorRef: DocumentEditorComponent = React.useRef(null);
+ const pageCountRef:any = React.useRef(null);
+ const editablePageNumberRef: any = React.useRef(null);
+ const pageNumberLabelRef: any = React.useRef(null);
+ const zoomRef: any = React.useRef(null);
let startPage = 1;
- let zoom: any;
- let items: ItemModel[] = [
+ let editorPageCount: any;
+
+ const items: ItemModel[] = [
{ text: '200%' },
{ text: '175%' },
{ text: '150%' },
@@ -55,39 +85,27 @@ function App() {
];
React.useEffect(() => {
- let instance: any = this;
+ const documenteditor = documentEditorRef.current;
- instance.pageCount = document.getElementById('documenteditor_pagecount');
- instance.editablePageNumber = document.getElementById('editablePageNumber');
- instance.pageNumberLabel = document.getElementById('documenteditor_page_no');
+ if (documenteditor) {
+ documenteditor.viewChange = (e) => updatePageNumberOnViewChange(e);
+ documenteditor.contentChange = () => updatePageCount();
- updatePageCount();
- updatePageNumber();
-
- documenteditor.viewChange = function (e) {
- updatePageNumberOnViewChange(e);
- };
+ if (editablePageNumberRef.current) {
+ editablePageNumberRef.current.onclick = () => updateDocumentEditorPageNumber();
+ editablePageNumberRef.current.onkeydown = (e) => onKeyDown(e);
+ editablePageNumberRef.current.onblur = () => onBlur();
+ }
- documenteditor.contentChange = function () {
updatePageCount();
- };
-
- instance.editablePageNumber.onclick = function () {
- updateDocumentEditorPageNumber();
- };
-
- instance.editablePageNumber.onkeydown = function (e) {
- onKeyDown(e);
- };
-
- instance.editablePageNumber.onblur = function () {
- onBlur();
- };
+ updatePageNumber();
+ }
}, []);
function updatePageNumberOnViewChange(args: any) {
+ const documenteditor = documentEditorRef.current;
if (
- documenteditor.selection &&
+ documenteditor?.selection &&
documenteditor.selection.startPage >= args.startPage &&
documenteditor.selection.startPage <= args.endPage
) {
@@ -99,30 +117,33 @@ function App() {
}
function onBlur() {
+ const editablePageNumber = editablePageNumberRef.current;
if (
- editablePageNumber.textContent === '' ||
+ editablePageNumber?.textContent === '' ||
parseInt(editablePageNumber.textContent, 0) > editorPageCount
) {
updatePageNumber();
}
- editablePageNumber.contentEditable = 'false';
+ if (editablePageNumber) editablePageNumber.contentEditable = 'false';
}
function onKeyDown(e: any) {
+ const documenteditor = documentEditorRef.current;
+ const editablePageNumber = editablePageNumberRef.current;
if (e.which === 13) {
e.preventDefault();
- var pageNumber = parseInt(editablePageNumber.textContent, 0);
+ const pageNumber = parseInt(editablePageNumber?.textContent || '0', 0);
if (pageNumber > editorPageCount) {
updatePageNumber();
} else {
- if (documenteditor.selection) {
- documenteditor.selection.goToPage(parseInt(editablePageNumber.textContent, 0));
+ if (documenteditor?.selection) {
+ documenteditor.selection.goToPage(pageNumber);
} else {
- documenteditor.scrollToPage(parseInt(editablePageNumber.textContent, 0));
+ documenteditor?.scrollToPage(pageNumber);
}
}
- editablePageNumber.contentEditable = 'false';
- if (editablePageNumber.textContent === '') {
+ if (editablePageNumber) editablePageNumber.contentEditable = 'false';
+ if (editablePageNumber?.textContent === '') {
updatePageNumber();
}
}
@@ -137,33 +158,43 @@ function App() {
}
function setZoomValue(text: string) {
+ const documenteditor = documentEditorRef.current;
if (text.match('Fit one page')) {
- documenteditor.fitPage('FitOnePage');
+ documenteditor?.fitPage('FitOnePage');
} else if (text.match('Fit page width')) {
- documenteditor.fitPage('FitPageWidth');
+ documenteditor?.fitPage('FitPageWidth');
} else {
documenteditor.zoomFactor = parseInt(text, 0) / 100;
}
}
function updateZoomContent() {
- zoom.content = Math.round(documenteditor.zoomFactor * 100) + '%';
+ if (zoomRef.current) {
+ zoomRef.current.content = Math.round(documentEditorRef.current?.zoomFactor * 100) + '%';
+ }
}
function updatePageNumber() {
- pageNumberLabel.textContent = startPage.toString();
+ if (pageNumberLabelRef.current) {
+ pageNumberLabelRef.current.textContent = startPage.toString();
+ }
}
function updatePageCount() {
- editorPageCount = documenteditor.pageCount;
- pageCount.textContent = editorPageCount.toString();
+ const documenteditor = documentEditorRef.current;
+ editorPageCount = documenteditor?.pageCount || 0;
+ if (pageCountRef.current) {
+ pageCountRef.current.textContent = editorPageCount.toString();
+ }
}
function updateDocumentEditorPageNumber() {
- let editPageNumber = document.getElementById('editablePageNumber');
- editPageNumber.contentEditable = 'true';
- editPageNumber.focus();
- window.getSelection().selectAllChildren(editPageNumber);
+ const editPageNumber = editablePageNumberRef.current;
+ if (editPageNumber) {
+ editPageNumber.contentEditable = 'true';
+ editPageNumber.focus();
+ window.getSelection()?.selectAllChildren(editPageNumber);
+ }
}
return (
@@ -171,9 +202,7 @@ function App() {
{
- documenteditor = scope;
- }}
+ ref={documentEditorRef}
isReadOnly={false}
enablePrint={true}
enableSelection={true}
@@ -201,15 +230,13 @@ function App() {
/>
Page
-
-
+
+
of
-
+
{
- zoom = scope;
- }}
+ ref={zoomRef}
items={items}
cssClass="e-de-statusbar-zoom"
select={onZoom}
@@ -225,4 +252,5 @@ export default App;
ReactDOM.render(