155 lines
3.7 KiB
Vue
155 lines
3.7 KiB
Vue
<template>
|
|
<div id="editor-container">
|
|
<header-bar>
|
|
<action icon="close" :label="$t('buttons.close')" @action="close()" />
|
|
<title>{{ req.name }}</title>
|
|
</header-bar>
|
|
|
|
<breadcrumbs base="/files" noLink />
|
|
|
|
<div id="editor"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
#editor-container {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { mapState } from "vuex";
|
|
import url from "@/utils/url";
|
|
import { baseURL } from "@/utils/constants";
|
|
|
|
import HeaderBar from "@/components/header/HeaderBar";
|
|
import Action from "@/components/header/Action";
|
|
import Breadcrumbs from "@/components/Breadcrumbs";
|
|
|
|
export default {
|
|
name: "onlyofficeeditor",
|
|
components: {
|
|
HeaderBar,
|
|
Action,
|
|
Breadcrumbs,
|
|
},
|
|
data: function () {
|
|
return {};
|
|
},
|
|
computed: {
|
|
...mapState(["req", "user", "jwt"]),
|
|
breadcrumbs() {
|
|
let parts = this.$route.path.split("/");
|
|
|
|
if (parts[0] === "") {
|
|
parts.shift();
|
|
}
|
|
|
|
if (parts[parts.length - 1] === "") {
|
|
parts.pop();
|
|
}
|
|
|
|
let breadcrumbs = [];
|
|
|
|
for (let i = 0; i < parts.length; i++) {
|
|
breadcrumbs.push({ name: decodeURIComponent(parts[i]) });
|
|
}
|
|
|
|
breadcrumbs.shift();
|
|
|
|
if (breadcrumbs.length > 3) {
|
|
while (breadcrumbs.length !== 4) {
|
|
breadcrumbs.shift();
|
|
}
|
|
|
|
breadcrumbs[0].name = "...";
|
|
}
|
|
|
|
return breadcrumbs;
|
|
},
|
|
},
|
|
created() {
|
|
window.addEventListener("keydown", this.keyEvent);
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener("keydown", this.keyEvent);
|
|
this.editor.destroyEditor();
|
|
},
|
|
mounted: function () {
|
|
let onlyofficeScript = document.createElement("script");
|
|
onlyofficeScript.setAttribute(
|
|
"src",
|
|
`http://10.10.2.1:8765/web-apps/apps/api/documents/api.js`
|
|
);
|
|
document.head.appendChild(onlyofficeScript);
|
|
|
|
onlyofficeScript.onload = () => {
|
|
let fileUrl = `${window.location.protocol}//${window.location.host}${baseURL}/api/raw${url.encodePath(this.req.path)}?auth=${
|
|
this.jwt
|
|
}`;
|
|
|
|
let key = Date.parse(this.req.modified).toString() + this.req.path
|
|
key = key.replaceAll(/[-_.!~[\]*'()/,;:\-%+.]/g, "")
|
|
if(key.length > 127) {
|
|
key = key.substring(0, 127)
|
|
}
|
|
|
|
/*eslint-disable */
|
|
let config = {
|
|
document: {
|
|
fileType: this.req.extension.substring(1),
|
|
key: key,
|
|
title: this.req.name,
|
|
url: fileUrl,
|
|
permissions: {
|
|
edit: this.user.perm.modify,
|
|
download: this.user.perm.download,
|
|
print: this.user.perm.download
|
|
}
|
|
},
|
|
editorConfig: {
|
|
callbackUrl: `${window.location.protocol}//${window.location.host}${baseURL}/api/onlyoffice/callback?auth=${this.jwt}&save=${encodeURIComponent(this.req.path)}`,
|
|
user: {
|
|
id: this.user.id,
|
|
name: `User ${this.user.id}`
|
|
},
|
|
customization: {
|
|
autosave: true,
|
|
forcesave: true
|
|
},
|
|
lang: this.user.locale,
|
|
mode: this.user.perm.modify ? "edit" : "view"
|
|
}
|
|
}
|
|
this.editor = new DocsAPI.DocEditor("editor", config);
|
|
/*eslint-enable */
|
|
}
|
|
},
|
|
methods: {
|
|
back() {
|
|
let uri = url.removeLastDir(this.$route.path) + "/";
|
|
this.$router.push({ path: uri });
|
|
},
|
|
keyEvent(event) {
|
|
if (!event.ctrlKey && !event.metaKey) {
|
|
return;
|
|
}
|
|
|
|
if (String.fromCharCode(event.which).toLowerCase() !== "s") {
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
this.save();
|
|
},
|
|
close() {
|
|
this.$store.commit("updateRequest", {});
|
|
|
|
let uri = url.removeLastDir(this.$route.path) + "/";
|
|
this.$router.push({ path: uri });
|
|
},
|
|
},
|
|
};
|
|
</script>
|