我们来了解下，如何将 ONLYOFFICE 文档编辑器与您的 Web 应用集成。
许多 Web 应用都可以从文档编辑功能中获益。但是要从头开始创建这个功能，需要花费大量时间和精力。幸运的是，您可以使用 ONLYOFFICE------这是一款开源办公套件，可用于第三方应用，作为处理文档、电子表格和演示文稿编辑组件。
在本文中，我们会向您展示如何为任意 Node.js 应用添加文档编辑功能。我们会使用 ONLYOFFICE 平台上最简单的文档管理系统，向您展示具体操作方法。
ONLYOFFICE能为您的应用带来什么
- 编辑文本文档、电子表格、演示文稿、PDF 等办公文档
- 支持 AI 集成，也提供两款现成的 AI 助手
- 与微软 Office 高度兼容
- 转换文档，支持 PDF 转 DOCX 等操作
- 多人实时协同编辑功能
- 丰富的宏和插件库，支持自行开发上传
- 自定义界面，白标产品
那么，我们开始行动吧。
安装ONLYOFFICE文档服务器
ONLYOFFICE 文档服务器包含几种编辑器。在将编辑器与您的应用集成之前，您要将编辑器部署到您的机器上。最简单的安装方法是使用 Docker：
docker run -itd -p 8080:80 onlyoffice/documentserver
文档服务器的地址为 0.0.0.0:8080。
授予文件访问权限
如要在您的应用中使用编辑器，您需要有打开和编辑文件的权限。
为演示如何访问这些文件，我们使用 express 框架开发的一个简单的 Node.js 应用。这个应用使用端口 3000。
在 GET 请求被发送至 http://localhost:3000/ 时，系统会返回文件 index.html。"文件"文件夹中包含公共文件，可在 http://localhost:3000/filename 获取。
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static('files'));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname + '/index.html'))
});
app.listen(3000 , () => console.log(`Example app listening on port ${port}!`));
如何打开文档进行查看
打开 index.html 文件，连接到文档服务器 API。您需要添加三个按钮------用于打开文本文档、电子表格和演示文稿。
编辑器会被在带有占位符 ID 的元素中打开。
<script type="text/javascript"
src="http://0.0.0.0:8080/web-apps/apps/api/documents/api.js"></script>
<button onclick="open_to_view('1.docx', 'text')">1.docx view</button>
<button onclick="open_to_view('1.xlsx', 'spreadsheet')">1.xlsx view</button>
<button onclick="open_to_view('1.pptx', 'presentation')">1.pptx view</button>
<div id="placeholder"></div>
<script>
function open_to_view(filename, documentType) {
// Close the editors if they are open.
if (this.docEditor) {
this.docEditor.destroyEditor()
}
// Add the link to the file you want to open
const url = window.location.protocol + "//" +
window.location.hostname + ':' + window.location.port + '/' + filename;
// Create DocsAPI object and open the editor
this.docEditor = new DocsAPI.DocEditor("placeholder",
{
documentType: documentType,
document: { url: url },
editorConfig: { mode: "view" }
});
}
</script>
完成上述操作后，点击其中一个按钮，即可在 ONLYOFFICE 中打开文件进行查看。
如何打开文件进行编辑
现在，您需要再添加三个用于编辑文件的按钮。然后，写一个新函数 open_to_edit()。它看起来很像 open_to_view() 函数，只是没有 editorConfig。
<button onclick="open_to_edit('1.docx', 'text')">1.docx view</button>
<button onclick="open_to_edit('1.xlsx', 'spreadsheet')">1.xlsx view</button>
<button onclick="open_to_edit('1.pptx', 'presentation')">1.pptx view</button>
<script>
function open_to_edit(filename, documentType) {
if (this.docEditor) {
this.docEditor.destroyEditor()
}
const url = window.location.protocol + "//" +
window.location.hostname + ':' + window.location.port + '/' + filename;
this.docEditor = new DocsAPI.DocEditor("placeholder", {
documentType: documentType,
document: { url: url }
});
}
</script>
这样，您就可以打开文件进行编辑了。但这还不够，因为我们还想保存文件。我们来添加这个功能。
如何保存文件
现在，我们来编写最基本的回调处理程序，用于将文件保存到服务器。
app.post("/track", function (req, res) {
// status 2 means that the files is ready for saving.
// More information about statuses can be found in our API documentation
if (req.body.status === 2) {
const file = syncRequest("GET", req.body.url);
fs.writeFileSync(__dirname + '/files/' + req.query.fileName, file.getBody());
// {"error": 0} you need to get this response from your storage,
//it means no errors occurred. Details
res.write("{\"error\":0}");
res.end();
// do not do anything about other responses
} else {
res.write("{\"error\":0}");
res.end();
}
});
这就是将 ONLYOFFICE 编辑器与您的应用集成所需的最基本的操作了。您可以查看 ONLYOFFICE API 文档，了解更多信息。
ONLYOFFICE 编辑器几乎可以与所有编程语言编写的 web 应用集成。如要了解更多关于 .Net (C# MVC)、.Net (C#)、Java、PHP 和 Ruby 的集成示例，可在 GitHub 上查看。有关集成到 Python 应用的文章也很快会发布。
许可呢？
ONLYOFFICE 采用双许可模式。这意味着，只要遵从 GNU AGPL v.3 许可，就可以使用 GitHub 上的 ONLYOFFICE 开源解决方案。ONLYOFFICE 有许多成功的集成案例，包括与 ownCloud, Nextcloud, Moodle 和 eХo Platform 的集成。
如要将 ONLYOFFICE 编辑器作为 SaaS 或本地服务的一部分使用，您需要获得商业许可。在商用方面，ONLYOFFICE 也有诸多成功案例。例如，中国知网集成 ONLYOFFICE，让客户在 CNKI 系统中实现文件在线预览。或者，南京大学e-Science中心将 ONLYOFFICE文档集成到协同表格工具中，从而改进教师检查、评阅和打分学生作业的流程。
相关文章
开发者版 ONLYOFFICE 文档 7.5：API 和文档生成器更新