Online Edit
Quick Start
Run Spire.Cloud Online Editor in Your Web Application
Getting Started with Spire.Cloud Online Editor
Spire.Cloud Word Editor
How to Add a Watermark to Word
How to Insert and Customize Footnotes
How to Insert a WordArt
How to Insert a Picture in Word
How to Insert a Link in Word
How to Add Comments in Word
How to Add a Column to Word
Spire.Cloud Excel Editor
How to Create a Table in Excel
How to Insert a Chart in Excel
Web API
.NET
Spire.Cloud.Word
Replace Text in Word Using Spire.Cloud.Word
Add, Remove or Edit Paragraphs in Word Using Spire.Cloud.Word
Convert Word to PDF or XPS Using Spire.Cloud.Word
Encrypt Word Documents Using Spire.Cloud.Word
Add Text and Image Watermarks to Word using Spire.Cloud.Word
Remove Watermarks from Word using Spire.Cloud.Word
Set Background Color and Image for Word using Spire.Cloud
Spire.Cloud.Excel
Freeze or Unfreeze Excel Columns and Rows Using Spire.Cloud.Excel
Add or Delete Excel Comments Using Spire.Cloud.Excel
Convert Excel to PDF or XPS Using Spire.Cloud.Excel
Set or Remove Excel Document Properties Using Spire.Cloud.Excel
Encrypt or Decrypt Excel Documents Using Spire.Cloud.Excel
Merge and Unmerge Excel Cells using Spire.Cloud.Excel
Protect or Unprotect Excel Worksheet using Spire.Cloud.Excel
Replace Text in Excel in C# using Spire.Cloud.Excel
Spire.Cloud.PowerPoint
Add a Table to PowerPoint Using Spire.Cloud.PowerPoint
Add an Image to PowerPoint Using Spire.Cloud.PowerPoint
Set or Remove PowerPoint Document Properties Using Spire.Cloud.PowerPoint
Convert PowerPoint to PDF or Images Using Spire.Cloud.PowerPoint
Add Background Color or Image to Slides Using Spire.Cloud.PowerPoint
Add, Update and Remove Speaker Notes in PowerPoint using Spire.Cloud.PowerPoint
Replace Text in PowerPoint using Spire.Cloud.PowerPoint
Spire.Cloud.PDF
Merge or Split PDF Documents Using Spire.Cloud.PDF
Add and Delete PDF Document Properties using Spire.Cloud.PDF
Add or Extract Images in PDF Using Spire.Cloud.PDF
Install Spire.Cloud Web API via NuGet
How to Use Spire.Cloud Web API in .NET
Java
Spire.Cloud.Word
Create a Blank Word Document using Spire.Cloud.Word
Merge Word documents in Java using Spire.Cloud.Word
Encrypt Word Documents Using Spire.Cloud.Word
Add Table to Word Document using Spire.Cloud.Word
Remove Watermark in Word Document using Spire.Cloud.Word
Replace Text in a Word document Using Spire.Cloud.Word
Convert Word to HTML in Java using Spire.Cloud.Word
Add Digital Signature to Word using Spire.Cloud.Word
Add and Delete Shapes in Word Using Spire.Cloud.Word
Add and Delete Images in Word Using Spire.Cloud.Word
Add, Get and Delete Custom Document Properties in Word using Spire.Cloud.Word
Add/Replace/Delete Paragraphs in Word Document Using Spire.Cloud.Word
Spire.Cloud.Excel
Freeze or Unfreeze Excel Rows and Columns using Spire.Cloud.Excel
Merge Excel Cells and Set Cell Format using Spire.Cloud.Excel
Spire.Cloud.Excel Encrypt/Decrypt Excel Documents
Rename Excel Worksheet Using Spire.Cloud.Excel
Add or Delete Comments in Excel Worksheets
Set and Delete Excel Document Properties Using Spire.Cloud.Excel
Spire.Cloud.PowerPoint
Add Image to a PowerPoint Document using Spire.Cloud.PowerPoint
Create a table in PowerPoint using Spire.Cloud.PowerPoint
Convert PPT(X) to PDF using Spire.Cloud.PowerPoint
Convert PPT(X) to PNG using Spire.Cloud.PowerPoint
Set and Delete PowerPoint Document Properties Using Spire.Cloud.PowerPoint
Replace Text in PowerPoint in Java using Spire.Cloud.PowerPoint
Spire.Cloud.PDF
Add/ Delete PDF Page Using Spire.Cloud.PDF
Convert PDF to Image using Spire.Cloud.PDF
Draw Shapes in PDF Using Spire.Cloud.PDF
Convert PDF to Word Document Using Spire.Cloud.PDF
Add, Update and Delete PDF Document Properties using Spire.Cloud.PDF
Add an Image to PDF Document Using Spire.Cloud.PDF
Merge and Split PDF Documents Using Spire.Cloud.PDF
Add Lists to PDF using Spire.Cloud.PDF
Add, Update, Get and Delete Bookmarks in PDF
Install Spire.Cloud Web API from Maven Repository
How to Use Spire.Cloud Web API in Java
API Documentation
Spire.Cloud.Word API
Spire.Cloud.Excel API
Spire.Cloud.PowerPoint API
Spire.Cloud.PDF API

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.

Run Spire.Cloud Online Editor in Your Web Application

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".