Files
document-server-integration/web/documentserver-example/nodejs/views/editor.ejs

340 lines
14 KiB
Plaintext

<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<!--
*
* (c) Copyright Ascensio System SIA 2023
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
-->
<title>ONLYOFFICE</title>
<link rel="icon"
href="images/<%- editor.documentType %>.ico"
type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="stylesheets/editor.css" />
</head>
<body>
<div class="form">
<div id="iframeEditor">
</div>
</div>
<script type="text/javascript" src="<%= apiUrl %>"></script>
<script type="text/javascript" language="javascript">
var docEditor;
var config;
let historyObject;
var innerAlert = function (message, inEditor) {
if (console && console.log)
console.log(message);
if (inEditor && docEditor)
docEditor.showMessage(message);
};
var onAppReady = function () { // the application is loaded into the browser
innerAlert("Document editor ready");
};
var onDocumentStateChange = function (event) { // the document is modified
var title = document.title.replace(/\*$/g, "");
document.title = title + (event.data ? "*" : "");
};
var onMetaChange = function (event) { // the meta information of the document is changed via the meta command
if (event.data.favorite) {
var favorite = !!event.data.favorite;
var title = document.title.replace(/^\☆/g, "");
document.title = (favorite ? "☆" : "") + title;
docEditor.setFavorite(favorite); // change the Favorite icon state
}
innerAlert("onMetaChange: " + JSON.stringify(event.data));
};
var onRequestEditRights = function () { // the user is trying to switch the document from the viewing into the editing mode
location.href = location.href.replace(RegExp("mode=view\&?", "i"), "");
};
var onRequestHistory = function (event) { // the user is trying to show the document version history
const fileName = "<%- file.name %>" || null;
const directUrl = "<%- file.directUrl %>" || null;
const data = {
fileName,
directUrl
};
let xhr = new XMLHttpRequest();
xhr.open("POST", "historyObj");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(data));
xhr.onload = function () {
historyObject = JSON.parse(xhr.responseText);
docEditor.refreshHistory( // show the document version history
{
currentVersion: historyObject.countVersion,
history: historyObject.history
});
}
};
var onRequestHistoryData = function (event) { // the user is trying to click the specific document version in the document version history
const version = event.data;
docEditor.setHistoryData(historyObject.historyData[version-1]); // send the link to the document for viewing the version history
};
var onRequestHistoryClose = function (event){ // the user is trying to go back to the document from viewing the document version history
document.location.reload();
};
var onRequestRestore = function (event) { // the user is trying to restore file version
const version = event.data.version;
const fileName = "<%- file.name %>" || null;
const directUrl = "<%- file.directUrl %>" || null;
const restoreData = {
version,
fileName,
};
let xhr = new XMLHttpRequest();
xhr.open("PUT", "restore");
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(restoreData));
xhr.onload = function () {
const response = JSON.parse(xhr.responseText);
if (response.success && !response.error) {
const dataForHistory = {
fileName,
directUrl
};
let xhr = new XMLHttpRequest();
xhr.open("POST", "historyObj");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(dataForHistory));
xhr.onload = function () {
const response = JSON.parse(xhr.responseText);
docEditor.refreshHistory( // show the document version history
{
currentVersion: response.countVersion,
history: response.history
});
}
} else {
innerAlert(response.error);
}
}
}
var onError = function (event) { // an error or some other specific event occurs
if (event)
innerAlert(event.data);
};
var onOutdatedVersion = function (event) { // the document is opened for editing with the old document.key value
location.reload(true);
};
// replace the link to the document which contains a bookmark
var replaceActionLink = function(href, linkParam) {
var link;
var actionIndex = href.indexOf("&action=");
if (actionIndex != -1) {
var endIndex = href.indexOf("&", actionIndex + "&action=".length);
if (endIndex != -1) {
link = href.substring(0, actionIndex) + href.substring(endIndex) + "&action=" + encodeURIComponent(linkParam);
} else {
link = href.substring(0, actionIndex) + "&action=" + encodeURIComponent(linkParam);
}
} else {
link = href + "&action=" + encodeURIComponent(linkParam);
}
return link;
}
var onMakeActionLink = function (event) { // the user is trying to get link for opening the document which contains a bookmark, scrolling to the bookmark position
var actionData = event.data;
var linkParam = JSON.stringify(actionData);
docEditor.setActionLink(replaceActionLink(location.href, linkParam)); // set the link to the document which contains a bookmark
};
var onRequestInsertImage = function(event) { // the user is trying to insert an image by clicking the Image from Storage button
docEditor.insertImage({ // insert an image into the file
"c": event.data.c,
<%- JSON.stringify(dataInsertImage).substring(1, JSON.stringify(dataInsertImage).length - 1)%>
})
};
var onRequestCompareFile = function() { // the user is trying to select document for comparing by clicking the Document from Storage button
docEditor.setRevisedFile(<%- JSON.stringify(dataCompareFile) %>); // select a document for comparing
};
var onRequestMailMergeRecipients = function (event) { // the user is trying to select recipients data by clicking the Mail merge button
docEditor.setMailMergeRecipients(<%- JSON.stringify(dataMailMergeRecipients) %>); // insert recipient data for mail merge into the file
};
var onRequestUsers = function (event) {
if (event && event.data){
var c = event.data.c;
}
switch (c) {
case "protect":
var users = <%- JSON.stringify(usersForProtect) %>;
break;
default:
users = <%- JSON.stringify(usersForMentions) %>;
}
docEditor.setUsers({
"c": c,
"users": users,
});
};
var onRequestSendNotify = function(event) { // the user is mentioned in a comment
event.data.actionLink = replaceActionLink(location.href, JSON.stringify(event.data.actionLink));
var data = JSON.stringify(event.data);
innerAlert("onRequestSendNotify: " + data);
};
var onRequestReferenceData = function(event) { // user refresh external data source
innerAlert("onRequestReferenceData");
innerAlert(event.data);
event.data.directUrl = !!config.document.directUrl;
let xhr = new XMLHttpRequest();
xhr.open("POST", "reference");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(event.data));
xhr.onload = function () {
innerAlert(xhr.responseText);
docEditor.setReferenceData(JSON.parse(xhr.responseText));
}
};
var onRequestSaveAs = function (event) { // the user is trying to save file by clicking Save Copy as... button
var title = event.data.title;
var url = event.data.url;
var data = {
title: title,
url: url
}
let xhr = new XMLHttpRequest();
xhr.open("POST", "create");
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(data));
xhr.onload = function () {
innerAlert(xhr.responseText);
innerAlert(JSON.parse(xhr.responseText).file, true);
}
}
var onRequestRename = function(event) { // the user is trying to rename file by clicking Rename... button
innerAlert("onRequestRename: " + JSON.stringify(event.data));
var newfilename = event.data;
var data = {
newfilename: newfilename,
dockey: config.document.key,
ext: config.document.fileType
};
let xhr = new XMLHttpRequest();
xhr.open("POST", "rename");
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(data));
xhr.onload = function () {
innerAlert(xhr.responseText);
}
};
config = {
<%- include("config") %>
};
config.events = {
"onAppReady": onAppReady,
"onDocumentStateChange": onDocumentStateChange,
"onError": onError,
"onOutdatedVersion": onOutdatedVersion,
"onMakeActionLink": onMakeActionLink,
"onMetaChange": onMetaChange,
"onRequestInsertImage": onRequestInsertImage,
"onRequestCompareFile": onRequestCompareFile,
"onRequestMailMergeRecipients": onRequestMailMergeRecipients,
};
if (<%- JSON.stringify(editor.userid) %> != null) {
config.events.onRequestEditRights = onRequestEditRights;
config.events.onRequestHistory = onRequestHistory;
config.events.onRequestHistoryData = onRequestHistoryData;
config.events.onRequestHistoryClose = onRequestHistoryClose;
config.events.onRequestRestore = onRequestRestore;
config.events.onRequestRename = onRequestRename;
config.events.onRequestUsers = onRequestUsers;
config.events.onRequestSendNotify = onRequestSendNotify;
config.events.onRequestReferenceData = onRequestReferenceData;
}
if (config.editorConfig.createUrl) {
config.events.onRequestSaveAs = onRequestSaveAs;
}
try {
var oformParam = new URL(window.location).searchParams.get("oform");
} catch (e) {}
if (oformParam == "false") {
config.document.options = config.document.options || {};
config.document.options["oform"] = false;
}
var connectEditor = function () {
if ((config.document.fileType === "docxf" || config.document.fileType === "oform")
&& DocsAPI.DocEditor.version().split(".")[0] < 7) {
innerAlert("Please update ONLYOFFICE Docs to version 7.0 to work on fillable forms online.");
return;
}
docEditor = new DocsAPI.DocEditor("iframeEditor", config);
fixSize();
};
// get the editor sizes
var fixSize = function () {
if (config.type !== "mobile") {
return;
}
var wrapEl = document.getElementsByClassName("form");
if (wrapEl.length) {
wrapEl[0].style.height = screen.availHeight + "px";
window.scrollTo(0, -1);
wrapEl[0].style.height = window.innerHeight + "px";
}
};
if (window.addEventListener) {
window.addEventListener("load", connectEditor);
window.addEventListener("resize", fixSize);
} else if (window.attachEvent) {
window.attachEvent("onload", connectEditor);
window.attachEvent("onresize", fixSize);
}
</script>
</body>
</html>