本文是与OnlyOffice合作创建的。感谢您支持使SitietPoint成为可能的合作伙伴。 >每当我们发现自己试图为应用程序添加任何复杂功能时，就会出现：“我应该自己滚动吗？”除非您的目标是构建该功能，否则答案几乎总是直接的“否”。
>您需要的东西可以帮助您尽快获得MVP，而实现这一目标的最佳方法是使用一个完整的开箱即用解决方案，可以帮助您节省时间转弯，转化为节省开发成本。>我假设您还在这里，因为上述引起了您的共鸣。因此，既然我们已经同步了，我想在本文中向您展示的是将OnlyOffice集成到您的Web应用程序中的容易。
>
钥匙要点
>开发人员版本不仅为您提供了足够的自由来将编辑器集成到应用程序中，而且还带有“白色标签”选项，可让您完全自定义编辑者在自己的品牌下使用它们。
>要与您的Web应用集成，您首先需要下载Onlyoffice Docs（用文档服务器打包）并在本地服务器上进行设置。
>安装后，您可以开始实现在服务器上处理文档的请求。 OnlyOffice为.NET，Java，Node.js，PHP，Python和Ruby提供了一些非常好的示例。
>>您可以下载文档服务器和首选示例，并立即在计算机上尝试。
>我将演示如何开始集成到您的应用程序中。为此，我们将使用Node.js和Express的一个非常简单的示例。我不会详细介绍实现，我会列出裸露的骨头必需品，让您填写空白以构建一个可靠的可扩展系统。我有一个具有以下结构的应用程序：
>我们将使用公共/文档文件夹存储文档。 app.js文件是我们的Express App代码所在的位置，index.html是我们显示文档的位置。我在文档文件夹中删除了一个sample.docx文件。
>
- node_modules
- public
- backups
- css
- main.css
- documents
- sample.docx
- javascript
- main.js
- samples
- new.docx
- new.xlsx
- new.pptx
- app.js
- index.html
- package.json
您稍后会看到的备份文件夹不仅可以帮助我们保留以前版本的备份，而且还可以帮助我们在修改文档后为文档生成唯一的标识符。
>
>我们正在做的是将文件作为localhost：3000/documents/fileName。
>我还领先于自己，并增加了Syncrequest，FS和BodyParser。这些目前不相关，但我们稍后会使用它们。
><span>const express = require('express');
</span><span>const bodyParser = require("body-parser");
</span><span>const path = require('path');
</span><span>const fs = require('fs');
</span><span>const syncRequest = require('sync-request');
</span>
<span>const app = express();
</span>
app<span>.use(bodyParser.json());
</span>app<span>.use(bodyParser.urlencoded({ extended: false }));
</span>
app<span>.use(express.static("public"));
</span>
app<span>.get("/", (req<span>, res</span>) => {
</span> res<span>.sendFile(path.join(__dirname, "/index.html"));
</span><span>});
</span>
<span>const port = process.env.PORT || 3000;
</span>app<span>.listen(port, () => console.log(<span>`App listening on http://localhost:<span>${port}</span>`</span>));
</span>要显示可用的文档，我们需要获取所有文件名的列表并将其发送给客户。我们将为此创建 /文档路由：
创建文档
app<span>.get("/documents", (req<span>, res</span>) => {
</span> <span>const docsPath = path.join(__dirname, "public/documents");
</span> <span>const docsPaths = fs.readdirSync(docsPath);
</span>
<span>const fileNames = [];
</span>
docsPaths<span>.forEach(filePath => {
</span> <span>const fileName = path.basename(filePath);
</span> fileNames<span>.push(fileName);
</span> <span>});
</span>
res<span>.send(fileNames);
</span><span>});
</span>>
app<span>.post("/create", async (req<span>, res</span>) => {
</span> <span>const ext = path.extname(req.query.fileName);
</span> <span>const fileName = req.query.fileName;
</span>
<span>const samplePath = path.join(__dirname, "public/samples", "new" + ext);
</span> <span>const newFilePath = path.join(__dirname, "public/documents", fileName);
</span>
<span>// Copy the sample file to the documents folder with its new name.
</span> <span>try {
</span> fs<span>.copyFileSync(samplePath, newFilePath);
</span> res<span>.sendStatus(200);
</span> <span>} catch (e) {
</span> res<span>.sendStatus(400);
</span> <span>}
</span><span>});
</span>
- node_modules
- public
- backups
- css
- main.css
- documents
- sample.docx
- javascript
- main.js
- samples
- new.docx
- new.xlsx
- new.pptx
- app.js
- index.html
- package.json
>编辑器关闭时，该文件的当前版本将在public/backups/filename-History/中备份，而当前时间则以毫秒为单位作为文件的名称。如您所见，我们将在前端使用该文件的名称。
> 在此示例中，我们每次保存新的备份时都会替换上一个备份。您将如何保留更多备份？
>提取备份
在这里，我们确保存在该文件的备份文件夹，并返回该文件夹中所有备份文件的数组。是的，这将帮助您完成为单个文件保留更多备份的任务。我无法继续为您做所有的工作！
><span>const express = require('express');
</span><span>const bodyParser = require("body-parser");
</span><span>const path = require('path');
</span><span>const fs = require('fs');
</span><span>const syncRequest = require('sync-request');
</span>
<span>const app = express();
</span>
app<span>.use(bodyParser.json());
</span>app<span>.use(bodyParser.urlencoded({ extended: false }));
</span>
app<span>.use(express.static("public"));
</span>
app<span>.get("/", (req<span>, res</span>) => {
</span> res<span>.sendFile(path.join(__dirname, "/index.html"));
</span><span>});
</span>
<span>const port = process.env.PORT || 3000;
</span>app<span>.listen(port, () => console.log(<span>`App listening on http://localhost:<span>${port}</span>`</span>));
</span>>
>我们将看到如何使用OnlyOffice文档在浏览器中直接打开文档。首先，我们将创建一个简单的html文件：
在此下方，我们在文档服务器的JavaScript API上有脚本。请记住，您可能必须用文档服务器的位置替换主机。如果您用我给您的Docker命令安装了它，那么您应该很好。>
最后但并非最不重要的一点是，有脚本标签，我们导入前端javascript和main.js文件，我们将在其中全局访问docsapi对象。app<span>.get("/documents", (req<span>, res</span>) => {
</span> <span>const docsPath = path.join(__dirname, "public/documents");
</span> <span>const docsPaths = fs.readdirSync(docsPath);
</span>
<span>const fileNames = [];
</span>
docsPaths<span>.forEach(filePath => {
</span> <span>const fileName = path.basename(filePath);
</span> fileNames<span>.push(fileName);
</span> <span>});
</span>
res<span>.send(fileNames);
</span><span>});
</span>>在进行编码之前，让我们与一些CSS结束布局，以使我们的应用程序更可用且不那么丑陋。将以下内容添加到main.css：
显示可用文档
在顶部，我们正在获取查询参数，以找出是否打开文件。如果是，我们将调用EditDocument函数。不用担心，我们稍后会创建一个。
>>如果我们不打开文件，我们要显示可用文件和控件的列表以创建更多。在ListDocuments中，我们首先确保隐藏占位符并清除列表，以确保我们重新创建它。然后，我们调用我们之前创建的 /文档路由以获取所有文件，通过它们迭代并创建相应的元素。我们将用文件名确定每个元素作为ID。这样，我们稍后可以轻松地检索它们。
请注意，我们正在调用AddDocumentHTML函数，稍后我们将重复使用以添加新文件。
对于这些文档中的每个文档，我们还调用了我们在底部定义的Opentocument，并且在cross符号上我们称为deleteDocument，我们将接下来定义。删除文档
创建文档
- node_modules
- public
- backups
- css
- main.css
- documents
- sample.docx
- javascript
- main.js
- samples
- new.docx
- new.xlsx
- new.pptx
- app.js
- index.html
- package.json
非常简单。我们提示名称，将其称为 /创建路由为文件名参数，如果状态返回为200
<span>const express = require('express');
</span><span>const bodyParser = require("body-parser");
</span><span>const path = require('path');
</span><span>const fs = require('fs');
</span><span>const syncRequest = require('sync-request');
</span>
<span>const app = express();
</span>
app<span>.use(bodyParser.json());
</span>app<span>.use(bodyParser.urlencoded({ extended: false }));
</span>
app<span>.use(express.static("public"));
</span>
app<span>.get("/", (req<span>, res</span>) => {
</span> res<span>.sendFile(path.join(__dirname, "/index.html"));
</span><span>});
</span>
<span>const port = process.env.PORT || 3000;
</span>app<span>.listen(port, () => console.log(<span>`App listening on http://localhost:<span>${port}</span>`</span>));
</span>>现在我们需要定义editDocument函数。将以下代码添加到main.js：
因此，我们添加了三个功能。让我们首先关注最后两个。 （我们将稍后讨论编辑文档。）
>app<span>.get("/documents", (req<span>, res</span>) => {
</span> <span>const docsPath = path.join(__dirname, "public/documents");
</span> <span>const docsPaths = fs.readdirSync(docsPath);
</span>
<span>const fileNames = [];
</span>
docsPaths<span>.forEach(filePath => {
</span> <span>const fileName = path.basename(filePath);
</span> fileNames<span>.push(fileName);
</span> <span>});
</span>
res<span>.send(fileNames);
</span><span>});
</span>> 如您所见
>如果您支持更多备份，该功能必须更改该功能？[逃跑]
getDocumentType将返回文本，电子表格或演示文稿。只有此功能才能知道要打开哪个编辑。
editdocument是我们在这里的目的。这就是您一直在等待的。在这里，我们实例化文档对象传递了我们占位符DIV的ID和带有一堆配置的对象。>
>
在顶部，我们有文档字段，该文档字段采用一个对象，该对象包含有关我们要打开的文档的信息。> 然后，我们有DocumentType，正如我们之前看到的，可以是文本，电子表格或演示文稿。
>>在那是EditorConfig对象，它使您可以设置诸如Spellcheck，unit和Zoom之类的内容。在这种情况下，我们只是使用callbackurl，该callbackurl是文档服务器将用来保存文件的 /跟踪路由的URL。
结论>我们已经达到了终点，希望您能够学习如何与您的Web应用程序设置和集成。我们有很多抛弃的东西，例如权限，共享，自定义以及您可以使用的许多其他事情。
好吧，我将在下一个见到你。同时，请继续编码并记住在您的情况下玩得开心！
>
经常询问的问题（常见问题解答）有关使用OnlyOffice将办公室功能添加到您的Web应用程序
>如何将OnlyOffice集成到我现有的Web应用程序中？将OnlyOffice集成到您现有的Web应用程序中涉及几个步骤。首先，您需要安装仅是OnlyOffice的核心的Onlyoffice Document Server。这可以使用推荐方法或手动的Docker完成。安装了文档服务器后，您可以使用仅Onewoffice API将其集成到Web应用程序中。 API提供了一组使用文档，电子表格和演示文稿的方法。您可以使用这些方法打开，编辑和保存文档在您的Web应用程序中。在我的Web应用程序中使用仅使用仅限的文档是什么好处？它允许用户直接在应用程序中创建，查看和编辑文档，而无需下载或使用单独的程序。这可以大大提高用户体验和生产力。 OnlyOffice还支持实时协作，使多个用户可以同时处理同一文档。此外，OnlyOffice支持广泛的文档格式，包括Microsoft Office格式和OpenDocument格式。>
>我如何自定义单独的office接口？
是安全的吗？它使用SSL加密来保护运输中的数据，并可以控制谁可以访问您的文档。此外，OnlyOffice是开源的，这意味着其代码可公开可供审查和审查。> OnlyOffice支持实时协作吗？
是否有一个社区的OnlyOffice Developers？ Beansoffice开发人员的社区。该社区为开发人员提供了一个论坛，以提出问题，分享技巧和窍门以及在项目上进行协作。对于使用OnlyOffice开发的任何人来说，这都是一个很好的资源。
>以上是使用OnlyOffice将办公功能添加到您的Web应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！
