Spire.Cloud.Office is a JavaScript document editor which you can use to create, edit, convert, print, view and save MS Word and Excel documents in a browser on Windows, Linux and Mac. This article demonstrates how to incorporate Spire.Cloud.Office online editor (JavaScript) into a HTML document, so you can run the editor directly in your web application or cloud application.
Step 1. Install Spire.Cloud.Office
Before you can embed the document editor in your HTML file, you’ll need to install Spire.Cloud.Office on your system.
After installation, you can visit our sample file management system and editor on port 3000, and connect to our service via port 8000. In this tutorial, Spire.Cloud.Office is installed on our local server 192.168.0.111.
Step 2. Embed Editor in Your HTML Document
Below is a sample HTML in which our document editor is embedded. You can download it and modify some key parameters in it to run our editor in a HTML page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="icon" href="https://cdn.e-iceblue.com/favicon.ico" type="image/x-icon" /><title>
Spire.Office
</title>
<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>
<script language="javascript" type="text/javascript" src="http://192.168.4.77:8000/web/editors/spireapi/SpireCloudEditor.js"></script>
<script type="text/javascript" language="javascript">
var docEditor;
var fileName = "";
var lang = "zh";
var fileType = "";
var token = null;
var appid = null;
var appkey = null;
var innerAlert = function (message) {
if (console && console.log)
console.log(message);
};
var onStart = function () {
innerAlert("Document editor ready");
};
var onDocumentStateChange = function (event) {
var title = document.title.replace(/\*$/g, "");
document.title = title + (event.data ? "*" : "");
};
var onRequestEditRights = function () {
location.href = location.href.replace(RegExp("action=view\&?", "i"), "");
};
var onError = function (event) {
if (event)
innerAlert(event.data);
};
var onOutdatedVersion = function (event) {
location.reload(true);
};
function ajax(options) {
options = options || {};
var method = (options.type || "GET").toUpperCase(),
url = options.url,
queryString = null;
if (!url)
return;
if (options.data) {
queryString = [];
for (var attr in options.data) {
queryString.push(attr + "=" + options.data[attr]);
}
queryString = queryString.join("&");
}
if (method === "GET" && queryString) {
url += "?" + queryString;
queryString = "";
}
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
if (method === "POST")
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(queryString);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var data = xhr.responseText;
if (options.dataType === "json")
data = JSON.parse(data);
options.success && options.success(data);
} else {
options.error && options.error(xhr.status);
}
}
}
}
var callbackfn = function (result) {
if (result && result.data) {
var data = result.data,
fileName = data[0],
url = data[1];
if (fileName.indexOf('=') > -1)
fileName = fileName.split('=')[1];
var host1 = location.hostname;
var host ='http://192.168.4.77:8000';
ajax({
url: 'http://' + host + '/webeditor.ashx?type=save',
type: 'post',
data: { 'filename': fileName, 'fileuri': url },
dataType: 'json',
async: false,
success: function (json) {
if (json.code == 200 || json.code == '200') {
alert('Successfully saved');
} else {
this.error(json, 'Failed to save');
}
},
error: function (json, msg) {
alert(+msg);
}
});
}
};
var connectEditor = function () {
var type = 'desktop';
if (type == "desktop") {
var app = navigator.appVersion;
if (app.toLowerCase().indexOf('window') != -1) {
type = "desktop";
} else {
type = "mobile";
}
};
var urlString ="https://cloud.e-iceblue.cn/demo/demo.docx";
var arrfn = urlString.split(".");
var strp= arrfn[arrfn.length - 1];
var documentTypeValue=null;
switch(strp){
case "xls":
case "xlsx":
case "xlsm":
case "xlt":
case "xltx":
case "xltm":
case "ods":
case "fods":
case "ots":
case "csv":
documentTypeValue="spreadsheet";
break;
case "pps":
case "ppsx":
case "ppsm":
case "ppt":
case "pptx":
case "pptm":
case "pot":
case "potx":
case "potm":
case "odp":
case "fodp":
case "otp":
documentTypeValue="presentation";
break;
default:
documentTypeValue="document";
break;
}
docEditor = new SpireCloudEditor.OpenApi("iframeEditor",
{
fileAttrs: {
fileInfo: {
name: '',
ext: '',
primary: '',
creator: '',
createTime: new Date('20210505')
},
sourceUrl: urlString,
createUrl: '',
callbackUrl: 'http://192.168.4.77:3000/save?filename=demo.docx&useraddress=__ffff_192.168.3.121',////This item can be empty, but only if the 'onSave' callback function must be defined in events. If the callback function is undefined and this item is empty, Cloud Editor will not provide save function.
verification: null,//If the user file system requires validation of token-like data when downloading files, it can be implemented here.
canEdit: true,
canDownload: false,
canForcesave: false
},
user: {
primary: '',
name: '',
canSave: true,
customization: {
public: {
common: {
whiteLabel: false,
defaultZoom: 1,
openReviewChanges: false,
permGroups: ['everyone'],//Restrict Group Editing
viewVersion: false,
header: {
hideTitle: false,
defaultView: 'full'
}
},
word: null,
powerpoint: null,
excel: null
}
}
},
editorAttrs: { // Editor configuration
editorWidth: '100%',
editorHeight: '100%',
editorType: 'document', // Editor type (optional). The program will determine based on file type. Possible values: document, presentation, spreadsheet
platform: 'desktop', // Editor platform type. Options: desktop, mobile, embedded
viewLanguage: 'en', // UI display language. Options: en (English), zh (Chinese)
canChat: true, // Whether chat feature is enabled
canComment: true, // Whether commenting feature is enabled
canReview: true, // Whether review feature is enabled
embedded: {
saveUrl: '', // URL for saving embedded content
embedUrl: '', // URL for embedding content
shareUrl: '' // URL for sharing content
},
events: {
'onStart': onStart,
'onDocumentStateChange': onDocumentStateChange,
'onError': onError,
'onSave': ''
}
}
}
);
};
if (window.addEventListener) {
window.addEventListener("load", connectEditor);
} else if (window.attachEvent) {
window.attachEvent("load", connectEditor);
}
</script>
</head>
<body>
<form name="form1" method="post" action="./docEditor.aspx?fileID=demo+(2).docx&lang=zh" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTkyMjc5MTU4M2RkBQQQBsVcOHQbzTlwYapiES2Trc9Z/U4CC+r9rluZubc=" />
</div>
<div>
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="C2EAC0DE" />
</div>
<div id="iframeEditor">
</div>
</form>
</body>
</html>
Key Parameters
| Configuration Parameters | Example Value Explanation | Set Value | |||||
| fileAttrs | File configuration object | ||||||
| fileInfo | File information object | ||||||
| name | File name | Can be empty | |||||
| ext | Document name | docx, xlsx, pptx | |||||
| primary | Document unique identifier | Can be empty | |||||
| creator | Document creator | Can be empty | |||||
| createTime | Document creation time | Can be empty | |||||
| sourceUrl | Document URL | Cannot be empty, must have access permissions | |||||
| createUrl | Template document URL when creating a new document | Can be empty | |||||
| callbackUrl | Callback URL | Can be empty. If online editing save functionality is required, either callback URL or callback event must be defined | |||||
| verification | Verification information | Can be empty. When downloading files from user file system requires verification data like token, it can be written here | |||||
| templates | Document templates | Can be empty | |||||
| canEdit | Whether the document can be edited | Default is true. When set to false, saving is not allowed | |||||
| canDownload | Whether the document can be downloaded | Default is true. When set to false, downloading is not allowed | |||||
| user | User configuration object | ||||||
| primary | User ID | Can be empty | |||||
| name | Username | Can be empty | |||||
| canSave | Whether the user can save the document | Default is true. When set to false, saving is not allowed | |||||
| canSaveByShortcut | Whether the user can save the document via shortcut | Default is true. When set to false, saving via shortcut is not allowed | |||||
| customization | Custom parameters object | ||||||
| public | Public parameters | ||||||
| common | Common parameters object | ||||||
| whiteLabel | White label | Default is false. When set to true, the E-iceblue Logo icon will not be displayed | |||||
| defaultZoom | Zoom value | Can be empty. Set range is 0.5-5 | |||||
| OpenReviewChagnes | Whether to open revisions | Default is false. When set to true, revisions are opened | |||||
| openNavigation | Open navigation bar | Default is false. When set to true, the navigation bar is displayed | |||||
| openAllComments | Open comments list | Default is false. When set to true, the comments list is displayed | |||||
| CollaborationModeIsFast | Set editing mode | Whether collaborative editing mode is fast. When true, mode is fast; when false, mode is strict. When this parameter is not set, the last value from editor cache is used. If no cache, it's set to fast | |||||
| CollaborationModeOnlyFast | Disable strict mode | Whether mode is fast only. Default is false. When true, sets to fast mode and disables strict mode | |||||
| viewVersion | View mode | Default is false. When true, saving is not allowed | |||||
| canDownloadInView | Whether download is allowed in view mode | Default is false. When true, download is allowed in view mode | |||||
| canPrintInView | Whether printing is allowed in view mode | Default is false. When true, printing is allowed in view mode | |||||
| openReviewPanel | Open revisions list | Default is false. When true, shows revisions list | |||||
| hideRuler | Hide ruler | Default gets value from browser cache. When true, hides ruler; when false, shows ruler | |||||
| hideStatusBar | Hide status bar | Default is false. When true, hides status bar | |||||
| showBookmarks | Show bookmarks indicator | Default is true. When false, hides bookmarks indicator | |||||
| keepTextOnly | Paste text only by default | Default is false. When true, only pastes text | |||||
| permGroups | Current user's group membership (this is an array) | Default is all users, can input custom groups | |||||
| socket_url | Custom socket_url, mainly to solve port mismatch issues when using Nginx as reverse proxy after private deployment | Can be empty | |||||
| header | |||||||
| hideTitle | Hide title | Default is false. When true, hides title | |||||
| defToolbar | Toolbar view | Default is "full", can be set to "full" or "short" | |||||
| goback | Back navigation object | ||||||
| url | Back navigation URL | Can be empty | |||||
| btnPermissions | Button permission control | View button permission control table | |||||
| previewShowCursor | Show cursor in preview mode | Default is true. When false, hides cursor | |||||
| showCursor | Show cursor | Default is true. When false, hides cursor | |||||
| cusWaterMarkJs | Custom watermark JS | Should be a URL address | |||||
| canChangeProduct | Whether product can be switched | Default is false. When true, switching is allowed | |||||
| showTableline | Whether to show dotted lines for borderless tables | Default is true. When false, hides dotted lines | |||||
| document | Word customization | View corresponding customer's customization documentation | |||||
| excel | Excel customization | View corresponding customer's customization documentation | |||||
| powerpoint | PPT customization | View corresponding customer's customization documentation | |||||
| aiCommon | Public cloud id, key, and TokenUrl required for AI functionality | View corresponding AI configuration documentation | |||||
| aiAttars_WordAI | Appkey and productType required for Word's AI functionality | View corresponding AI configuration documentation | |||||
| aiAttars_ExcelAI | Appkey and productType required for Excel's AI functionality | View corresponding AI configuration documentation | |||||
| aiAttars_PowerPointAI | Appkey and productType required for PPT's AI functionality | View corresponding AI configuration documentation | |||||
| editorAttrs | Editor configuration object | ||||||
| editorMode | Edit mode Can be 'edit' (edit) or 'view' (view) |
Can be empty, defaults to 'edit' | |||||
| editorWidth | Width | Can be empty, default value 100% | |||||
| editorHeight | Height | Can be empty, default value 100% | |||||
| editorType | File editor type | Can be unconfigured, program gets from file type. Must be set to document or spreadsheet or presentation | |||||
| platform | Editor platform type 'desktop' (desktop display), 'mobile' (mobile display), 'embedded' (embedded display) |
Cannot be empty, must be set to one of desktop, mobile or embedded | |||||
| viewLanguage | Platform interface display language | Can be empty, "en" or "zh". If empty, matches browser default language | |||||
| canChat | Whether chat is enabled | Default is true. When false, chat is disabled | |||||
| canComment | Whether comments are enabled | Default is true. When false, comments are disabled | |||||
| canReview | Whether revisions are enabled | Default is true. When false, revisions are disabled | |||||
| canForcesave | Whether document can be force-saved | Default is true. When false, force-saving is not allowed | |||||
| unMarked | Enable unmarked mode (accept revisions) | Can be empty, default is false. When true, enables unmarked mode (accepts revisions) | |||||
| canSignature | Whether to enable signature/seal functionality | Can be empty, default is false. When true, enables signature/seal functionality | |||||
| canWordAI | Whether to enable Word's AI functionality | Can be empty, default is false. When true, enables Word's AI functionality | |||||
| canExcelAI | Whether to enable Excel's AI functionality | Can be empty, default is false. When true, enables Excel's AI functionality | |||||
| canPowerPointAI | Whether to enable PPT's AI functionality | Can be empty, default is false. When true, enables PPT's AI functionality | |||||
| events | Events | ||||||
| onStart | Triggered when editor initialization completes and starts loading/parsing document | ||||||
| onDocumentContentReady | Triggered when document loading completes | ||||||
| onSave | Triggered when saving | ||||||
| onDocumentStateChange | Triggered when document state changes (document has saved and unsaved states) | ||||||
| onError | Triggered when error occurs | ||||||
| onErrorCallback | Callback when clicking error popup | Normally, clicking error popup navigates to page specified by fileAttrs.customization.public.common.goback.url. If user customizes this function, calls the function instead and URL becomes invalid | |||||
