Run Spire.Cloud Online Editor in Your Web Application

This article demonstrates how to incorporate Spire.Cloud online editor (JavaScript) into HTML files, so you can run the editor directly in your web application.

Step 1: Create an account and log in to our website (www.cloudxdocs.com).

Step 2: Click "My Apps" in the menu to acquire an App ID and an App Key.

Step 3: Add the document editor JavaScript in your HTML document. Parameters like "url", "appid", "appkey", etc. must be assigned with correct and valid values.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Spire.Cloud.Editor</title>
    <script language="javascript" type="text/javascript" src="https://api.cloudxdocs.com/web/editors/api/documenteditor.js"></script>
    <style>
        html {
            height: 100%;
            width: 100%;
        }
        body {
            background: #fff;
            color: #333;
            font-family: Arial, Tahoma,sans-serif;
            font-size: 12px;
            font-weight: normal;
            height: 100%;
            margin: 0;
            overflow-y: hidden;
            padding: 0;
            text-decoration: none;
        }
        form {
            height: 100%;
        }
        div {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script type="text/javascript" language="JavaScript">
    var isPhone = window.navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i);
    if(isPhone){
        var editorType = 'mobile';
    }else{
        var editorType = 'desktop';
    }
    var appid = 'your app id',
        appkey = 'your app key',
        modenow = 'edit',
        convertor
        , innerAlert = function (message) {
            if (console && console.log)
                console.log(message);
        }, onReady = function () {
            innerAlert("Document editor ready");
        }, onDocumentStateChange = function (event) {
            var title = document.title.replace(/\*$/g, "");
            document.title = title + (event.data ? "*" : "");
        }, onError = function (event) {
            if (event)
                innerAlert(event.data);
        }, onOutdatedVersion = function (event) {
            location.reload(true);
        }, load = function() {
            if (appid == '' || appkey == '') {
                return false;
            }
            // console.log(DocumentUrl);
            convertor = new OfficeAPI.DocumentEditor('api-test',
                {
                    width: "100%",
                    height: "100%",
                    editorType: editorType,
                    isReadOnly: 'false',
                    documentType: '',
                    document: {
                        url: 'https://www.cloudxdocs.com/downloads/demo/sample.docx',
                        info: {
                            author: '',
                            created: new Date()
                        }
                    },
                    editorConfig: {
                        mode: modenow,
                        lang: 'en',
                        callbackUrl: undefined,
                        user: {
                            id: '',
                            name: '',
                            token: '',
                            appid: appid,
                            appkey: appkey
                        }
                    },
                    events: {
                        'onReady': onReady,
                        'onDocumentStateChange': onDocumentStateChange,
                        'onError': onError,
                        'onOutdatedVersion': onOutdatedVersion,
                        // 'onSave': callbackfn
                    }
                }
            );
        }
    if (window.addEventListener) {
        window.addEventListener("load", load);
    } else if (window.attachEvent) {
        window.attachEvent("load", load);
    } else {
        $(document).ready(load);
    }
</script>
<form id="form1" runat="server">
    <div id="api-test">
    </div>
</form>
</body>
</html>

HTML Sample: https://www.cloudxdocs.com/downloads/demo/demo.zip

Descriptions of key parameters

Parameter			Description	Optional value range
width			Editor width	Can be null, 100% by default.
height			Editor height	Can be null, 100% by default.
editorType			Editor type (desktop, mobile, or embedded)	Cannot be null, must be set to "desktop", "mobile", or "embedded".
isReadOnly			Read only	Can be null, if it is null, editorConfig.mode property must be set to "true" or "false".
documentType			Document type	Must be set to "document", "spreadsheet", or "presentation".
document			File	Cannot be null.
	Key/title/info /author/created		Keywords/Title/Information /Author/Created date	Can be null.
	url		URL	Cannot be null and access rights must be ensured.
	fileType		File format extension	Null is not recommended. If it is null, the file format extension will be read from URL, which is unable to ensure 100% correct.
editorConfig			Editor configuration	Cannot be null.
	mode		Editor mode (view, edit)	Can be null. If it is null, the default is edit mode.
	lang		Language	Can be null. If it is null, the default language is the same as browser.
	callbackUrl		Callback URL	Can be null. But if you need to use the save function, you must define callback URL.
	user		User	Cannot be null.
		Id/name	Your id and name	Can be null.
		Appid/appkey	App id and app key	Token and appid/appkey cannot be null at the same time.
	customization		Customize options	Can be null.
events			Events	"onReady", "onDocumentStateChange", "onRequestEditRights", "onError", "onOutdateVersion", "onSave".