commit | author | age
|
9bcb19
|
1 |
/* eslint-disable no-undef */ |
I |
2 |
<!--onlyoffice 编辑器--> |
|
3 |
<template> |
|
4 |
<div id="editorDiv"></div> |
|
5 |
</template> |
|
6 |
|
|
7 |
<script> |
|
8 |
import { handleDocType } from '@/utils/onlyofficeUtil' |
|
9 |
|
|
10 |
export default { |
|
11 |
name: 'Editor', |
|
12 |
props: { |
|
13 |
option: { |
|
14 |
type: Object, |
|
15 |
default: () => { |
|
16 |
return {} |
|
17 |
} |
|
18 |
} |
|
19 |
}, |
|
20 |
data() { |
|
21 |
return { |
|
22 |
doctype: '' |
|
23 |
} |
|
24 |
}, |
|
25 |
mounted() { |
|
26 |
if (this.option.url) { |
|
27 |
this.setEditor(this.option) |
|
28 |
} |
|
29 |
}, |
|
30 |
methods: { |
|
31 |
setEditor(option) { |
|
32 |
this.doctype = handleDocType(option.fileType) |
|
33 |
const config = { |
|
34 |
document: { |
|
35 |
fileType: option.fileType, |
|
36 |
key: option.key, |
|
37 |
title: option.title, |
|
38 |
permissions: { |
|
39 |
comment: true, |
|
40 |
download: true, |
|
41 |
modifyContentControl: true, |
|
42 |
modifyFilter: true, |
|
43 |
print: false, |
|
44 |
edit: option.isEdit, |
|
45 |
fillForms: true |
|
46 |
// review: false |
|
47 |
}, |
|
48 |
url: option.url |
|
49 |
|
|
50 |
}, |
|
51 |
type: option.type, |
|
52 |
documentType: this.doctype, |
|
53 |
editorConfig: { |
|
54 |
callbackUrl: option.callbackUrl, |
|
55 |
lang: 'zh', |
|
56 |
customization: { |
|
57 |
commentAuthorOnly: false, |
|
58 |
comments: true, |
|
59 |
compactHeader: false, |
|
60 |
compactToolbar: true, |
|
61 |
feedback: false, |
|
62 |
plugins: true |
|
63 |
}, |
|
64 |
user: { |
|
65 |
id: option.user.id, |
|
66 |
name: option.user.name |
|
67 |
} |
|
68 |
// mode: option.mode |
|
69 |
}, |
|
70 |
width: '100%', |
|
71 |
height: '100%', |
|
72 |
position: 'absolute', |
|
73 |
token: option.token |
|
74 |
} |
|
75 |
// eslint-disable-next-line no-unused-vars |
|
76 |
let docEditor = null |
|
77 |
// eslint-disable-next-line no-undef |
|
78 |
docEditor = new DocsAPI.DocEditor('editorDiv', config) |
|
79 |
} |
|
80 |
}, |
|
81 |
watch: { |
|
82 |
option: { |
|
83 |
handler: function (n, o) { |
|
84 |
this.setEditor(n) |
|
85 |
this.doctype = handleDocType(n.fileType) |
|
86 |
}, |
|
87 |
deep: true |
|
88 |
} |
|
89 |
} |
|
90 |
} |
|
91 |
</script> |
|
92 |
|
|
93 |
<style scoped> |
|
94 |
|
|
95 |
</style> |