| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280 |
- <!DOCTYPE html>
- <html xmlns:th="http://www.thymeleaf.org">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui" />
- <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" th:href="@{/css/img/{icon}.ico(icon=${model.getDocumentType()})}" type="image/x-icon"/>
- <link rel="stylesheet" type="text/css" href="css/editor.css" />
-
- <script type="text/javascript" th:src="@{${docserviceApiUrl}}"></script>
-
- <script th:inline="javascript">
- var docEditor;
- var config;
-
- var innerAlert = function (message, inEditor) {
- if (console && console.log)
- console.log(message);
- if (inEditor && docEditor)
- docEditor.showMessage(message);
- };
-
- // the application is loaded into the browser
- var onAppReady = function () {
- innerAlert("Document editor ready");
- };
-
- // the document is modified
- var onDocumentStateChange = function (event) {
- var title = document.title.replace(/\*$/g, "");
- document.title = title + (event.data ? "*" : "");
- };
-
- // the user is trying to switch the document from the viewing into the editing mode
- var onRequestEditRights = function () {
- location.href = location.href.replace(RegExp("\&?action=view", "i"), "");
- };
-
- // an error or some other specific event occurs
- var onError = function (event) {
- if (event) innerAlert(event.data);
- };
-
- // the document is opened for editing with the old document.key value
- var onOutdatedVersion = function (event) {
- location.reload(true);
- };
-
- // replace the link to the document which contains a bookmark
- var replaceActionLink = function(href, linkParam) {
- var link;
- var actionIndex = href.indexOf("&actionLink=");
- if (actionIndex != -1) {
- var endIndex = href.indexOf("&", actionIndex + "&actionLink=".length);
- if (endIndex != -1) {
- link = href.substring(0, actionIndex) + href.substring(endIndex) + "&actionLink=" + encodeURIComponent(linkParam);
- } else {
- link = href.substring(0, actionIndex) + "&actionLink=" + encodeURIComponent(linkParam);
- }
- } else {
- link = href + "&actionLink=" + encodeURIComponent(linkParam);
- }
- return link;
- }
-
- // the user is trying to get link for opening the document which contains a bookmark, scrolling to the bookmark position
- var onMakeActionLink = function (event) {
- var actionData = event.data;
- var linkParam = JSON.stringify(actionData);
- docEditor.setActionLink(replaceActionLink(location.href, linkParam));
- };
-
- // the meta information of the document is changed via the meta command
- var onMetaChange = function (event) {
- if (event.data.favorite) {
- var favorite = !!event.data.favorite;
- var title = document.title.replace(/^\☆/g, "");
- document.title = (favorite ? "☆" : "") + title;
- docEditor.setFavorite(favorite);
- }
- innerAlert("onMetaChange: " + JSON.stringify(event.data));
- };
-
-
- var dataInsertImage = [[${dataInsertImage}]];
-
- // the user is trying to insert an image by clicking the Image from Storage button
- var onRequestInsertImage = function(event) {
- const temp = Object.assign({}, {"c": event.data.c}, dataInsertImage);
- docEditor.insertImage(temp);
- };
-
- // the user is trying to select document for comparing by clicking the Document from Storage button
- var onRequestCompareFile = function() {
- docEditor.setRevisedFile([[${dataCompareFile}]]);
- };
-
- // the user is trying to select recipients data by clicking the Mail merge button
- var onRequestMailMergeRecipients = function (event) {
- docEditor.setMailMergeRecipients([[${dataMailMergeRecipients}]]);
- };
-
- config = [[${model}]];
-
- if (config.editorConfig.user.name == "Anonymous") {
- config.editorConfig.user.name = "";
- }
-
- 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", "saveas");
- 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);
- }
- };
-
- var onRequestReferenceData = function(event) { // user refresh external data source
- 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));
- }
- };
-
- function onRequestRestore(event) {
- const query = new URLSearchParams(window.location.search)
- const config = [[${model}]]
- const payload = {
- fileName: query.get('fileName'),
- version: event.data.version,
- userId: config.editorConfig.user.id
- }
- const request = new XMLHttpRequest()
- request.open('PUT', 'restore')
- request.setRequestHeader('Content-Type', 'application/json')
- request.send(JSON.stringify(payload))
- request.onload = function () {
- if (request.status != 200) {
- response = JSON.parse(request.response)
- innerAlert(response.error)
- return
- }
- document.location.reload()
- }
- }
-
- config.width = "100%";
- config.height = "100%";
- config.events = {
- "onAppReady": onAppReady,
- "onDocumentStateChange": onDocumentStateChange,
- "onError": onError,
- "onOutdatedVersion": onOutdatedVersion,
- "onMakeActionLink": onMakeActionLink,
- "onMetaChange": onMetaChange,
- "onRequestInsertImage": onRequestInsertImage,
- "onRequestCompareFile": onRequestCompareFile,
- "onRequestMailMergeRecipients": onRequestMailMergeRecipients,
- "onRequestRestore": onRequestRestore
- };
-
- var histArray = [[${fileHistory}]];
- var hist = histArray[0];
- var historyData = histArray[1];
- var usersForMentions = [[${usersForMentions}]];
-
- if (config.editorConfig.user.id != 4) {
- if (hist && historyData) {
- // the user is trying to show the document version history
- config.events['onRequestHistory'] = function () {
- docEditor.refreshHistory(JSON.parse(hist)); // show the document version history
- };
- // the user is trying to click the specific document version in the document version history
- config.events['onRequestHistoryData'] = function (event) {
- var ver = event.data;
- var histData = historyData;
- docEditor.setHistoryData(JSON.parse(histData)[ver - 1]); // send the link to the document for viewing the version history
- };
- // the user is trying to go back to the document from viewing the document version history
- config.events['onRequestHistoryClose'] = function () {
- document.location.reload();
- };
- }
- // add mentions for not anonymous users
- config.events['onRequestUsers'] = function () {
- docEditor.setUsers({ // set a list of users to mention in the comments
- "users": usersForMentions
- });
- };
- // the user is mentioned in a comment
- config.events['onRequestSendNotify'] = function (event) {
- event.data.actionLink = replaceActionLink(location.href, JSON.stringify(event.data.actionLink));
- var data = JSON.stringify(event.data);
- innerAlert("onRequestSendNotify: " + data);
- };
- // prevent file renaming for anonymous users
- config.events['onRequestRename'] = onRequestRename;
- config.events['onRequestReferenceData'] = onRequestReferenceData;
- // prevent switch the document from the viewing into the editing mode for anonymous users
- config.events['onRequestEditRights'] = onRequestEditRights;
- }
-
- if (config.editorConfig.createUrl) {
- config.events.onRequestSaveAs = onRequestSaveAs;
- };
-
- var сonnectEditor = 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);
- };
-
- if (window.addEventListener) {
- window.addEventListener("load", сonnectEditor);
- } else if (window.attachEvent) {
- window.attachEvent("load", сonnectEditor);
- }
- </script>
-
- </head>
- <body>
- <div class="form">
- <div id="iframeEditor"></div>
- </div>
- </body>
- </html>
|