内联编辑器

下面的步骤解释了在 ONLYOFFICE 文档服务器中将多个编辑器连接到同一个 html 页面的过程。

1. 创建一个空的 html 文件。

2. 使用将用于您的网站的 JavaScript API 指定您的 ONLYOFFICE 文档服务器链接：

   <script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>

   其中 documentserver 是安装了 ONLYOFFICE 文档服务器的服务器的名称。

3. 添加 div 元素，如下所示。 为了将多个编辑器连接到同一个 html 页面，可以分别初始化它们中的每一个：

   <div id="placeholder1"></div>
   <div id="placeholder2"></div>
   <div id="placeholder3"></div>
   ...
   

4. 为div 元素添加 文档编辑器 初始化脚本以及要打开的文档的配置。 Be sure to add a token when using local links. Otherwise, an error will occur.

   每个编辑器都有自己的初始化脚本：

   var documentEditor = new DocsAPI.DocEditor("placeholder1", {
       "document": {
           "fileType": "docx",
           "key": "Khirz6zTPdfd7",
           "title": "Example Document Title.docx",
           "url": "https://example.com/url-to-example-document.docx"
       },
       "documentType": "word",
       "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkb2N1bWVudCI6eyJmaWxlVHlwZSI6ImRvY3giLCJrZXkiOiJLaGlyejZ6VFBkZmQ3IiwidGl0bGUiOiJFeGFtcGxlIERvY3VtZW50IFRpdGxlLmRvY3giLCJ1cmwiOiJodHRwczovL2V4YW1wbGUuY29tL3VybC10by1leGFtcGxlLWRvY3VtZW50LmRvY3gifSwiZG9jdW1lbnRUeXBlIjoid29yZCJ9.7IpEJxdOvBQ0kJ8l6ZegIV4tX5vsPbZZCDDVmcFROXc"
   });
   
   var spreadsheetEditor = new DocsAPI.DocEditor("placeholder2", {
       "document": {
           "fileType": "xlsx",
           "key": "af86C7e71Ca8",
           "title": "Example Spreadsheet Title.xlsx",
           "url": "https://example.com/url-to-example-spreadsheet.xlsx"
       },
       "documentType": "cell",
       "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkb2N1bWVudCI6eyJmaWxlVHlwZSI6Inhsc3giLCJrZXkiOiJhZjg2QzdlNzFDYTgiLCJ0aXRsZSI6IkV4YW1wbGUgU3ByZWFkc2hlZXQgVGl0bGUueGxzeCIsInVybCI6Imh0dHBzOi8vZXhhbXBsZS5jb20vdXJsLXRvLWV4YW1wbGUtc3ByZWFkc2hlZXQueGxzeCJ9LCJkb2N1bWVudFR5cGUiOiJjZWxsIn0.8CklPIjYSEkgM7swGAC7-85ICcq_42be3WTWNOuvhlg"
   });
   
   var presentationEditor = new DocsAPI.DocEditor("placeholder3", {
       "document": {
           "fileType": "pptx",
           "key": "bv48M5r64Sf9",
           "title": "Example Presentation Title.pptx",
           "url": "https://example.com/url-to-example-presentation.pptx"
       },
       "documentType": "slide",
       "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkb2N1bWVudCI6eyJmaWxlVHlwZSI6InBwdHgiLCJrZXkiOiJidjQ4TTVyNjRTZjkiLCJ0aXRsZSI6IkV4YW1wbGUgUHJlc2VudGF0aW9uIFRpdGxlLnBwdHgiLCJ1cmwiOiJodHRwczovL2V4YW1wbGUuY29tL3VybC10by1leGFtcGxlLXByZXNlbnRhdGlvbi5wcHR4In0sImRvY3VtZW50VHlwZSI6InNsaWRlIn0.FKaDWfJE-OuODhtpq-8Qv6BdDy_evgdpaBw616T7zOs"
   });
   ...
   

   其中 example.com 是安装了 文档管理器 和 文档存储服务 的服务器的名称。

5. 为了完成编辑，必须调用 destroyEditor 方法来关闭所需的编辑器：

   documentEditor.destroyEditor();
   spreadsheetEditor.destroyEditor();
   presentationEditor.destroyEditor();
   ...
   

6. 在浏览器中打开您的 html 文件。