OnlyOffice在线文档

editor.html 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui" />
  6. <meta name="apple-mobile-web-app-capable" content="yes" />
  7. <meta name="mobile-web-app-capable" content="yes" />
  8. <!--
  9. *
  10. * (c) Copyright Ascensio System SIA 2023
  11. *
  12. * Licensed under the Apache License, Version 2.0 (the "License");
  13. * you may not use this file except in compliance with the License.
  14. * You may obtain a copy of the License at
  15. *
  16. * http://www.apache.org/licenses/LICENSE-2.0
  17. *
  18. * Unless required by applicable law or agreed to in writing, software
  19. * distributed under the License is distributed on an "AS IS" BASIS,
  20. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  21. * See the License for the specific language governing permissions and
  22. * limitations under the License.
  23. *
  24. -->
  25. <title>ONLYOFFICE</title>
  26. <link rel="icon" th:href="@{/css/img/{icon}.ico(icon=${model.getDocumentType()})}" type="image/x-icon"/>
  27. <link rel="stylesheet" type="text/css" href="css/editor.css" />
  28. <script type="text/javascript" th:src="@{${docserviceApiUrl}}"></script>
  29. <script th:inline="javascript">
  30. var docEditor;
  31. var config;
  32. var innerAlert = function (message, inEditor) {
  33. if (console && console.log)
  34. console.log(message);
  35. if (inEditor && docEditor)
  36. docEditor.showMessage(message);
  37. };
  38. // the application is loaded into the browser
  39. var onAppReady = function () {
  40. innerAlert("Document editor ready");
  41. };
  42. // the document is modified
  43. var onDocumentStateChange = function (event) {
  44. var title = document.title.replace(/\*$/g, "");
  45. document.title = title + (event.data ? "*" : "");
  46. };
  47. // the user is trying to switch the document from the viewing into the editing mode
  48. var onRequestEditRights = function () {
  49. location.href = location.href.replace(RegExp("\&?action=view", "i"), "");
  50. };
  51. // an error or some other specific event occurs
  52. var onError = function (event) {
  53. if (event) innerAlert(event.data);
  54. };
  55. // the document is opened for editing with the old document.key value
  56. var onOutdatedVersion = function (event) {
  57. location.reload(true);
  58. };
  59. // replace the link to the document which contains a bookmark
  60. var replaceActionLink = function(href, linkParam) {
  61. var link;
  62. var actionIndex = href.indexOf("&actionLink=");
  63. if (actionIndex != -1) {
  64. var endIndex = href.indexOf("&", actionIndex + "&actionLink=".length);
  65. if (endIndex != -1) {
  66. link = href.substring(0, actionIndex) + href.substring(endIndex) + "&actionLink=" + encodeURIComponent(linkParam);
  67. } else {
  68. link = href.substring(0, actionIndex) + "&actionLink=" + encodeURIComponent(linkParam);
  69. }
  70. } else {
  71. link = href + "&actionLink=" + encodeURIComponent(linkParam);
  72. }
  73. return link;
  74. }
  75. // the user is trying to get link for opening the document which contains a bookmark, scrolling to the bookmark position
  76. var onMakeActionLink = function (event) {
  77. var actionData = event.data;
  78. var linkParam = JSON.stringify(actionData);
  79. docEditor.setActionLink(replaceActionLink(location.href, linkParam));
  80. };
  81. // the meta information of the document is changed via the meta command
  82. var onMetaChange = function (event) {
  83. if (event.data.favorite) {
  84. var favorite = !!event.data.favorite;
  85. var title = document.title.replace(/^\☆/g, "");
  86. document.title = (favorite ? "☆" : "") + title;
  87. docEditor.setFavorite(favorite);
  88. }
  89. innerAlert("onMetaChange: " + JSON.stringify(event.data));
  90. };
  91. var dataInsertImage = [[${dataInsertImage}]];
  92. // the user is trying to insert an image by clicking the Image from Storage button
  93. var onRequestInsertImage = function(event) {
  94. const temp = Object.assign({}, {"c": event.data.c}, dataInsertImage);
  95. docEditor.insertImage(temp);
  96. };
  97. // the user is trying to select document for comparing by clicking the Document from Storage button
  98. var onRequestCompareFile = function() {
  99. docEditor.setRevisedFile([[${dataCompareFile}]]);
  100. };
  101. // the user is trying to select recipients data by clicking the Mail merge button
  102. var onRequestMailMergeRecipients = function (event) {
  103. docEditor.setMailMergeRecipients([[${dataMailMergeRecipients}]]);
  104. };
  105. config = [[${model}]];
  106. if (config.editorConfig.user.name == "Anonymous") {
  107. config.editorConfig.user.name = "";
  108. }
  109. var onRequestSaveAs = function (event) { // the user is trying to save file by clicking Save Copy as... button
  110. var title = event.data.title;
  111. var url = event.data.url;
  112. var data = {
  113. title: title,
  114. url: url
  115. };
  116. let xhr = new XMLHttpRequest();
  117. xhr.open("POST", "saveas");
  118. xhr.setRequestHeader('Content-Type', 'application/json');
  119. xhr.send(JSON.stringify(data));
  120. xhr.onload = function () {
  121. innerAlert(xhr.responseText);
  122. innerAlert(JSON.parse(xhr.responseText).file, true);
  123. }
  124. };
  125. var onRequestRename = function(event) { // the user is trying to rename file by clicking Rename... button
  126. innerAlert("onRequestRename: " + JSON.stringify(event.data));
  127. var newfilename = event.data;
  128. var data = {
  129. newfilename: newfilename,
  130. dockey: config.document.key,
  131. ext: config.document.fileType
  132. };
  133. let xhr = new XMLHttpRequest();
  134. xhr.open("POST", "rename");
  135. xhr.setRequestHeader('Content-Type', 'application/json');
  136. xhr.send(JSON.stringify(data));
  137. xhr.onload = function () {
  138. innerAlert(xhr.responseText);
  139. }
  140. };
  141. var onRequestReferenceData = function(event) { // user refresh external data source
  142. event.data.directUrl = !!config.document.directUrl;
  143. let xhr = new XMLHttpRequest();
  144. xhr.open("POST", "reference");
  145. xhr.setRequestHeader("Content-Type", "application/json");
  146. xhr.send(JSON.stringify(event.data));
  147. xhr.onload = function () {
  148. innerAlert(xhr.responseText);
  149. docEditor.setReferenceData(JSON.parse(xhr.responseText));
  150. }
  151. };
  152. function onRequestRestore(event) {
  153. const query = new URLSearchParams(window.location.search)
  154. const config = [[${model}]]
  155. const payload = {
  156. fileName: query.get('fileName'),
  157. version: event.data.version,
  158. userId: config.editorConfig.user.id
  159. }
  160. const request = new XMLHttpRequest()
  161. request.open('PUT', 'restore')
  162. request.setRequestHeader('Content-Type', 'application/json')
  163. request.send(JSON.stringify(payload))
  164. request.onload = function () {
  165. if (request.status != 200) {
  166. response = JSON.parse(request.response)
  167. innerAlert(response.error)
  168. return
  169. }
  170. document.location.reload()
  171. }
  172. }
  173. config.width = "100%";
  174. config.height = "100%";
  175. config.events = {
  176. "onAppReady": onAppReady,
  177. "onDocumentStateChange": onDocumentStateChange,
  178. "onError": onError,
  179. "onOutdatedVersion": onOutdatedVersion,
  180. "onMakeActionLink": onMakeActionLink,
  181. "onMetaChange": onMetaChange,
  182. "onRequestInsertImage": onRequestInsertImage,
  183. "onRequestCompareFile": onRequestCompareFile,
  184. "onRequestMailMergeRecipients": onRequestMailMergeRecipients,
  185. "onRequestRestore": onRequestRestore
  186. };
  187. var histArray = [[${fileHistory}]];
  188. var hist = histArray[0];
  189. var historyData = histArray[1];
  190. var usersForMentions = [[${usersForMentions}]];
  191. if (config.editorConfig.user.id != 4) {
  192. if (hist && historyData) {
  193. // the user is trying to show the document version history
  194. config.events['onRequestHistory'] = function () {
  195. docEditor.refreshHistory(JSON.parse(hist)); // show the document version history
  196. };
  197. // the user is trying to click the specific document version in the document version history
  198. config.events['onRequestHistoryData'] = function (event) {
  199. var ver = event.data;
  200. var histData = historyData;
  201. docEditor.setHistoryData(JSON.parse(histData)[ver - 1]); // send the link to the document for viewing the version history
  202. };
  203. // the user is trying to go back to the document from viewing the document version history
  204. config.events['onRequestHistoryClose'] = function () {
  205. document.location.reload();
  206. };
  207. }
  208. // add mentions for not anonymous users
  209. config.events['onRequestUsers'] = function () {
  210. docEditor.setUsers({ // set a list of users to mention in the comments
  211. "users": usersForMentions
  212. });
  213. };
  214. // the user is mentioned in a comment
  215. config.events['onRequestSendNotify'] = function (event) {
  216. event.data.actionLink = replaceActionLink(location.href, JSON.stringify(event.data.actionLink));
  217. var data = JSON.stringify(event.data);
  218. innerAlert("onRequestSendNotify: " + data);
  219. };
  220. // prevent file renaming for anonymous users
  221. config.events['onRequestRename'] = onRequestRename;
  222. config.events['onRequestReferenceData'] = onRequestReferenceData;
  223. // prevent switch the document from the viewing into the editing mode for anonymous users
  224. config.events['onRequestEditRights'] = onRequestEditRights;
  225. }
  226. if (config.editorConfig.createUrl) {
  227. config.events.onRequestSaveAs = onRequestSaveAs;
  228. };
  229. var сonnectEditor = function () {
  230. if ((config.document.fileType === "docxf" || config.document.fileType === "oform")
  231. && DocsAPI.DocEditor.version().split(".")[0] < 7) {
  232. innerAlert("Please update ONLYOFFICE Docs to version 7.0 to work on fillable forms online.");
  233. return;
  234. }
  235. docEditor = new DocsAPI.DocEditor("iframeEditor", config);
  236. };
  237. if (window.addEventListener) {
  238. window.addEventListener("load", сonnectEditor);
  239. } else if (window.attachEvent) {
  240. window.attachEvent("load", сonnectEditor);
  241. }
  242. </script>
  243. </head>
  244. <body>
  245. <div class="form">
  246. <div id="iframeEditor"></div>
  247. </div>
  248. </body>
  249. </html>