ejDocumentEditor

11 Jul 20188 minutes to read

Document Editor JS is an editor component to view and print DOCX, DOC, RTF and Text documents.

Syntax

HTML

$(element).ejDocumentEditor(
            importExportSetting: {
                importUrl: "../api/DocumentEditor/ImportDocument",
            });

Example

HTML

<div id="container"></div>
    <script>
        $("#container").ejDocumentEditor({
            importExportSetting: {
                importUrl: "http://js.syncfusion.com/demos/ejservices/api/DocumentEditor/ImportDocument",
            }
        });
    </script>

Document Editor requires the following script files

• Module: jquery.js
• Module: ej.data.js
• Module: ej.core.js
• Module: ej.documenteditor.js
• Module: ej.scroller.js

Members

importExportSettings Object

Gets or sets an object that indicates initialization of importing and exporting documents in document editor.

importExportSettings.importUrl string

Gets or sets URL of Web API that should be used to parse the document while loading.

Example

HTML

<div id="container"></div>
    <script>
        $("#container").ejDocumentEditor({
            importExportSetting: {
                importUrl: "http://js.syncfusion.com/demos/ejservices/api/DocumentEditor/ImportDocument",
            }
        });
    </script>

NOTE

Create a controller class and write service for import document. Mention the controller name and action name in import url

Methods

load(path)

Loads the document from specified path using web API provided by importUrl.

Name	Type	Description
path	string	Specifies the file path.

Example

HTML

<script>
	var documentEditorObj = $("#container").data("ejDocumentEditor");
	documentEditorObj.load(event.target.files[0]);// specify the file path.
</script>

getCurrentPageNumber()

Gets the page number of current selection in the document.

NOTE

This method does not accept any arguments.

Returns:

number

Example

HTML

<script>
	var documentEditorObj = $("#container").data("ejDocumentEditor");
	alert("current Page number in a document is"+documentEditorObj.getCurrentPageNumber());
</script>

getPageCount()

Gets the total number of pages in the document.

NOTE

This method does not accept any arguments.

Returns:

number

Example

HTML

<script>
	var documentEditorObj = $("#container").data("ejDocumentEditor");
	alert("Total page count in document is"+ documentEditorObj.getPageCount());
</script>

getSelectedText()

Gets the text of current selection in the document.

NOTE

This method does not accept any arguments.

Returns:

string

Example

HTML

<script>
	var documentEditorObj = $("#container").data("ejDocumentEditor");
	alert("Selected Text: "+ documentEditorObj.getSelectedText());
</script>

getZoomFactor()

Gets the current zoom factor value of the document editor.

NOTE

This method does not accept any arguments.

Returns:

number

Example

HTML

<script>
	var documentEditorObj = $("#container").data("ejDocumentEditor");
	alert("zoom value of the container is"+documentEditorObj.getZoomFactor());
</script>

setZoomFactor(factor)

Scales the document editor with the specified zoom factor. The range of zoom factor should be 0.10 to 5.00 (10 - 500 %).

Name	Type	Description
factor	number	Specifies the factor for zooming.

Example

HTML

<script>
	var documentEditorObj = $("#container").data("ejDocumentEditor");
	var zoomVal = 120;// specify the zoom percentage value to scale the container in detail
	documentEditorObj.setZoomFactor(zoomVal/100);
</script>

print()

Prints the document content as page by page.

NOTE

This method does not accept any arguments.

Example

HTML

<script>
	var documentEditorObj = $("#container").data("ejDocumentEditor");
	documentEditorObj.print();
</script>

find(text)

Finds the first occurrence of specified text from current selection and highlights the result. If the document end is reached, find operation will occur from the document start position.

Name	Type	Description
text	string	Specifies the text to search in a document.

Example

HTML

<script>
	var documentEditorObj = $("#container").data("ejDocumentEditor");
	documentEditorObj.find("abc"); //specify the text to find in a document.
</script>

Events

onDocumentChange

Triggers when the document changes.

Name	Type	Description
Argument	Object	Event parameters from Document Editor. Name Type Description cancel boolean True, if the event should be canceled; otherwise, false. model object Returns the document editor model. type string Returns the name of the event.

Example

HTML

<div id="container"></div>
<span id="pageCountSpan"></span>
<script>
    $("#container").ejDocumentEditor({
        importExportSetting: {
            importUrl: "http://js.syncfusion.com/demos/ejservices/api/DocumentEditor/ImportDocument",
            },
            documentChange: "onDocumentChange",
        });
    function onDocumentChange(args) {
		var documentEditorObj = $("#container").data("ejDocumentEditor");
		$("#pageCountSpan").text(documentEditorObj.getPageCount());
	}
</script>

onSelectionChange

Triggers when the selection changes.

Name	Type	Description
Argument	Object	Event parameters from Document Editor. Name Type Description cancel boolean True, if the event should be canceled; otherwise, false. model object Returns the document editor model. type string Returns the name of the event.

Example

HTML

<div id="container"></div>
<span id="pageNumberSpan"></span>
<script>
    $("#container").ejDocumentEditor({
        importExportSetting: {
            importUrl: "http://js.syncfusion.com/demos/ejservices/api/DocumentEditor/ImportDocument",
        },
        selectionChange: "onSelectionChange",
    });
    function onSelectionChange(args) {
		var documentEditorObj = $("#container").data("ejDocumentEditor");
		$("#pageNumberSpan").text(documentEditorObj.getCurrentPageNumber());
    }
    </script>

onZoomFactorChange

Triggers when the zoom factor changes.

Name	Type	Description
Argument	Object	Event parameters from Document Editor. Name Type Description cancel boolean True, if the event should be canceled; otherwise, false. model object Returns the document editor model. type string Returns the name of the event.

Example

HTML

<div id="container"></div>
<span id="zoomFactorSpan"></span>
<script>
    $("#container").ejDocumentEditor({
        importExportSetting: {
            importUrl: "http://js.syncfusion.com/demos/ejservices/api/DocumentEditor/ImportDocument",
        },
        zoomFactorChange: "onZoomFactorChange",
    });
    function onZoomFactorChange(args) {
		var documentEditorObj = $("#container").data("ejDocumentEditor");
		$("#zoomFactorSpan").text(documentEditorObj.getZoomFactor()*100+"%")
    }
</script>

onRequestNavigate

Triggers when the hyperlink is clicked.

Name	Type	Description
Argument	Object	Event parameters from Document Editor. Name Type Description cancel boolean true, if the event should be canceled; otherwise, false. model object Returns the document editor model. hyperlink object Returns the link type and navigation link. type string Returns the name of the event.

Example

HTML

<div id="container"></div>
<script>
     $("#container").ejDocumentEditor({
        importExportSetting: {
        importUrl: "http://js.syncfusion.com/demos/ejservices/api/DocumentEditor/ImportDocument",
        },
        requestNavigate: "onRequestNavigate",
    });
    function onRequestNavigate(args) {
        if (args.hyperlink.linkType == "webpage" || args.hyperlink.linkType == "email" || args.hyperlink.linkType == "file")
            window.open(args.hyperlink.navigationLink);
    }
</script>