做网站平台接单,wordpress 我爱水煮鱼,wordpress 1 s,旅行社网站开发缘起于进行了一次在线 Office 解决方案的调研#xff0c;对比了 Office365、可道云、WPS Office、PageOffice 等厂商#xff0c;最终敲定了使用 Onlyoffice#xff0c;故整理了一份 Onlyoffice 从零开始系列教程#xff0c;这是第一篇。
一、Onlyoffice 是什么#xff1f…缘起于进行了一次在线 Office 解决方案的调研对比了 Office365、可道云、WPS Office、PageOffice 等厂商最终敲定了使用 Onlyoffice故整理了一份 Onlyoffice 从零开始系列教程这是第一篇。
一、Onlyoffice 是什么
Onlyoffice 是一个多端协同的 Office 办公套件相当于微软的 Office365 全家桶。
二、Onlyoffice 平台功能
功能强大到什么程度呢我列了一下 Onlyoffice 对我们需求的支持程度
需求支持程度终端支持全端支持包含桌面端、PC 网页端、移动端等客户端操作系统Windows、Mac、Linux服务端操作系统Linux、Ubuntu、CentOS、Debian、Alibaba Cloud Image 等 Docker 镜像包基础功能具备 Word 基础的字体设置、字体大小、加粗、对齐、颜色、背景颜色等功能同时还有等同于 Office 的各个高级功能插件支持支持自定义插件官方提供了完整的插件开发文档二次开发官方开放了 1000 API支持根据业务二次开发、功能定制甚至扩展或增强基础功能深度定制支持使用体验安装成本低编辑体验与本地 Word 高度一致开发者社区官方维护了一个开发者社区内容丰富也比较活跃安全与稳定性文档加密保存、传输支持标准的 JWT 加密多种场景测试未出现崩溃、卡死等情况协同支持多人协同编辑、历史记录查看文档回滚等功能分布式部署支持 三、服务宗旨
社区版免费企业版收费10w 起步。 四、适用场景
预算、私有云、需要二次开发、需要文档协同等。 正文 本文使用docker进行安装故
五、安装docker
a、windows安装Windows10 Docker 安装教程-CSDN博客
b、mac安装【云原生丶Docker】MacOS系统安装Docker【保姆级教程】_mac安装docker-CSDN博客 六、通过docker安装Onlyoffice 1、使用JWT验证 sudo docker run -i -t -d -p 8701:80 onlyoffice/documentserver 2、不使用JWT验证 sudo docker run -i -t -d -p 8701:80 --restartalways -e JWT_ENABLEDfalse onlyoffice/documentserver 从7.2版本起默认使用了JWT功能安装Onlyoffice时可以通过不同的命令参数启动服务默认不使用JWT验证如果是第 1 次执行这个命令会先去下载 Onlyoffice比较慢约等待 3~10 分钟网络畅通一点的会快一些。如果是已经安装过则直接进行启动。待其安装完成 七、启动服务
1、等上述安装完成后执行命令 查看 Onlyoffice 容器 ID
docker ps
2、执行以下命令进入容器这里将获取到的 ID 替换为上个步骤你得到的自己的ID
docker exec -it ID /bin/bash 3、接着执行下面的这两个命令
# 启动所有的内置服务supervisorctl restart all # 退出容器exit
命令输出如下 4、最后访问 http://IP:8701/welcome 页面这里要注意IP 不能是 localhost 和 127.0.0.1一定要用你自己本地真实 IP 来访问看到下面的这个效果说明 Onlyoffice 启动成功。
此页面提供了在线文档新增、编辑等功能你可以点击生成一个文档后续开发测试功能时会用到。 八、在 Vue 中接入 Onlyoffice
1、子组件准备在你的项目的合适目录下新建如下两个文件将下方的代码复制粘贴进去到你对应的文件中。 index.vue页面代码
templatediv :classs.viewdiv :idid/div/div
/templatescriptimport loadScript from ./loadScript.js;export default {name: DocumentEditor,props: {id: {type: String,default: ,},documentServerUrl: {type: String,default: ,},config: {type: Object,default: () { },},document_fileType: {type: String,default: ,},document_title: {type: String,default: ,},documentType: {type: String,default: ,},editorConfig_lang: {type: String,default: ,},height: {type: String,default: ,},type: {type: String,default: ,},width: {type: String,default: ,},events_onAppReady: {type: Function,default: () { },},events_onDocumentStateChange: {type: Function,default: () { },},events_onMetaChange: {type: Function,default: () { },},events_onDocumentReady: {type: Function,default: () { },},events_onInfo: {type: Function,default: () { },},events_onWarning: {type: Function,default: () { },},events_onError: {type: Function,default: () { },},events_onRequestSharingSettings: {type: Function,default: () { },},events_onRequestRename: {type: Function,default: () { },},events_onMakeActionLink: {type: Function,default: () { },},events_onRequestInsertImage: {type: Function,default: () { },},events_onRequestSaveAs: {type: Function,default: () { },},events_onRequestMailMergeRecipients: {type: Function,default: () { },},events_onRequestCompareFile: {type: Function,default: () { },},events_onRequestEditRights: {type: Function,default: () { },},events_onRequestHistory: {type: Function,default: () { },},events_onRequestHistoryClose: {type: Function,default: () { },},events_onRequestHistoryData: {type: Function,default: () { },},events_onRequestRestore: {type: Function,default: () { },},},data() {return {};},watch: {config: {handler() {this.onChangeProps();},deep: true,},document_fileType() {this.onChangeProps();},document_title() {this.onChangeProps();},documentType() {this.onChangeProps();},editorConfig_lang() {this.onChangeProps();},height() {this.onChangeProps();},type() {this.onChangeProps();},width() {this.onChangeProps();},},mounted() {let url this.documentServerUrl;if (!url.endsWith(/)) {url /;}const docApiUrl ${url}web-apps/apps/api/documents/api.js;loadScript(docApiUrl, onlyoffice-api-script).then(() this.onLoad()).catch((err) console.error(err));},beforeDestroy() {const id this.id || ;if (window?.DocEditor?.instances[id]) {window.DocEditor.instances[id].destroyEditor();window.DocEditor.instances[id] undefined;}},methods: {onLoad() {try {const id this.id || ;if (!window.DocsAPI) throw new Error(DocsAPI is not defined);if (window?.DocEditor?.instances[id]) {console.log(Skip loading. Instance already exists, id);return;}if (!window?.DocEditor?.instances) {window.DocEditor { instances: {} };}const initConfig {document: {fileType: this.document_fileType,title: this.document_title,},documentType: this.documentType,editorConfig: {lang: this.editorConfig_lang,},events: {onAppReady: this.onAppReady,onDocumentStateChange: this.events_onDocumentStateChange,onMetaChange: this.events_onMetaChange,onDocumentReady: this.events_onDocumentReady,onInfo: this.events_onInfo,onWarning: this.events_onWarning,onError: this.events_onError,onRequestSharingSettings: this.events_onRequestSharingSettings,onRequestRename: this.events_onRequestRename,onMakeActionLink: this.events_onMakeActionLink,onRequestInsertImage: this.events_onRequestInsertImage,onRequestSaveAs: this.events_onRequestSaveAs,onRequestMailMergeRecipients: this.events_onRequestMailMergeRecipients,onRequestCompareFile: this.events_onRequestCompareFile,onRequestEditRights: this.events_onRequestEditRights,onRequestHistory: this.events_onRequestHistory,onRequestHistoryClose: this.events_onRequestHistoryClose,onRequestHistoryData: this.events_onRequestHistoryData,onRequestRestore: this.events_onRequestRestore,},height: this.height,type: this.type,width: this.width,...(this.config || {}),};const editor window.DocsAPI.DocEditor(id, initConfig);window.DocEditor.instances[id] editor;} catch (err) {console.error(err);this.events_onError(err);}},onAppReady() {const id this.id || ;this.events_onAppReady(window.DocEditor.instances[id]);},onChangeProps() {const id this.id || ;if (window?.DocEditor?.instances[id]) {window.DocEditor.instances[id].destroyEditor();window.DocEditor.instances[id] undefined;console.log(Important props have been changed. Load new Editor.);this.onLoad();}},},};
/scriptstyle langscss modules.view {width: 100%;height: 100%;iframe {width: 100%;height: 100%;}}/styleloadScript.js文件
const loadScript async (url, id) new Promise((resolve, reject) {try {if (document.getElementById(id)) {if (window.DocsAPI) return resolve(null);const intervalHandler setInterval(() {if (!window.DocsAPI) return;clearInterval(intervalHandler);return resolve(null);}, 500);} else {const script document.createElement(script);script.setAttribute(type, text/javascript);script.setAttribute(id, id);script.onload resolve;script.onerror reject;script.src url;script.async true;document.body.appendChild(script);}} catch (e) {console.error(e);}});export default loadScript;2、在页面中使用。在合适的位置创建如下页面将代码复制粘贴进去。 docPreview.vue代码
template!-- onlyoffice展示 --div classqualityManual-containerdiv classqualityManual-container-officevab-only-office idoffice-preview :documentServerUrldocumentServerUrl :configconfig //div/div/template
scriptimport vabOnlyOffice from /components/docPreview/index.vueexport default {components: { vabOnlyOffice },data() {return {documentServerUrl: http://192.168.0.15:8701/,config: {document: {fileType: docx,key: Khirz6zTPdfd7,title: Example Document Title.docx,url: http://192.168.0.15:8701/example/editor?fileNamenew.docx},documentType: word,editorConfig: {callbackUrl: https://example.com/url-to-callback.ashx}}}},methods: {//这里的val是传递的参数loadOnlyOffice(val) {this.option.key // key 默认置空则不走缓存this.option.title // 该文件名在下载文档时也将用作文件名this.option.url // 定义存储原始查看或编辑的文档的绝对URLthis.option.fileType docx // 文件类型this.option.callbackUrl // 回调地址this.show true // 打开onlyOffice窗口console.log(val, 编辑word默认配置参数)},}}
/scriptstyle relstylesheet/scss langscss.qualityManual-container {padding: 0 !important;width: 100%;height: calc(100vh - 180px);}.qualityManual-container-office {width: 100%;height: calc(100% - 55px);}/style下来则是重点功能分析及使用
data() {return {//本地onlyoffice安装成功后的服务documentServerUrl: http://192.168.0.15:8701/,config: {document: {fileType: docx,key: Khirz6zTPdfd7,title: Example Document Title.docx,//你要打开的文档绝对路径这里可以使用7.4页面左侧去生成文档并复制其文档地址进行开发测试url: http://192.168.0.15:8701/example/editor?fileNamenew.docx},documentType: word,editorConfig: {callbackUrl: https://example.com/url-to-callback.ashx}}}
}, 运行项目查看祝你成功。
