ejDocumentEditor

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>