想提高开发效率吗？来看看 ONLYOFFICE

爱怪笑的小杰杰

已于 2022-12-07 17:01:02 修改

阅读量1.6k

点赞数 1

文章标签： javascript 前端 html

于 2022-12-07 16:59:46 首次发布

本文链接：https://blog.csdn.net/qq_24518001/article/details/128221046

版权

因为前段时间写了一篇《8个免费在线PDF转Word工具，一键轻松转换》文章，今天看见一位博友评论的新的生产工具 ONLYOFFICE 。使用之后发现确实非常好用那么今天给大家介绍一下。

一、简介

功能包括文档服务器、插件和宏、文档生成器、桌面编辑器、社区服务器、托管解决方案社区服务器、桌面编辑器、插件和宏、

二、文档服务器

ONLYOFFICE 是一个开源办公套件，包括文本文档，电子表格，演示文稿和可填写表单的编辑器。它提供以下功能：

创建、编辑和查看文本文档、电子表格、演示文稿和可填写表格;
与其他团队成员实时协作处理文件。

ONLYOFFICE Docs 还支持 WOPI 协议，该协议用于将您的应用程序与在线办公集成。有关 WOPI 的更多信息，请参见此处。

ONLYOFFICE Docs API 用于让开发人员将 ONLYOFFICE文档、电子表格、演示文稿编辑器集成到他们自己的网站中，并设置和管理编辑器。

1、ONLYOFFICE Docs Vue 组件

该组件使用户能够使用 Vue 构建 ONLYOFFICE Docs 用户界面。

npm install --save @onlyoffice/document-editor-vue
// 或者
yarn add @onlyoffice/document-editor-vue

2、使用 ONLYOFFICE Docs Vue 组件

在下面找到组件使用示例：

<template>
    <DocumentEditor 
        id="docEditor" 
        documentServerUrl="http://documentserver/"
        :config="config"
        :events_onDocumentReady="onDocumentReady"
    /> 
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { DocumentEditor } from "@onlyoffice/document-editor-vue";

export default defineComponent({
    name: 'ExampleComponent',
    components: {
        DocumentEditor
    },
    data() {
        return {
            config: {
                document: {
                    fileType: "docx",
                    key: "Khirz6zTPdfd7",
                    title: "Example Document Title.docx",
                    url: "https://example.com/url-to-example-document.docx"
                },
                documentType: "word",
                editorConfig: {
                    callbackUrl: "https://example.com/url-to-callback.ashx"
                }
            }
        }
    },
    methods: {
        onDocumentReady() {
            console.log("Document is loaded");
        }
    },
});
</script>

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

文档地址：https://api.onlyoffice.com/editors/basic

3、安装 storybook

安装 storybook 以独立开发UI组件：

// 1、在config/default.json文件中更改文档服务器的地址：
"documentServerUrl": "http://documentserver/"
其中，文档服务器是安装了ONLYOFFICE Docs的服务器的名称。

2、使用以下命令构建故事书：
npm run build-storybook

3、开始storybook：
npm run storybook

4、开发 ONLYOFFICE Docs Vue 组件

1、从 GitHub 存储库克隆项目：
git clone https://github.com/ONLYOFFICE/document-editor-vue

2、安装项目依赖项：
npm install

3、测试组件：
npm run test

4、构建项目：
npm run build

5、创建包：
npm pack

三、插件和宏

ONLYOFFICE文档和桌面编辑器提供对插件的支持，允许开发人员向编辑器添加与 OOXML 格式没有直接关系的特定功能。

如何构建、本地化、运行、测试和发布插件
如何编写、调试和运行宏或转换VBA宏以在ONLYOFFICE中使用
如何使用 ONLYOFFICE方法和事件
在哪里可以找到指南和插件/宏代码示例以开始使用

1、插件可以做什么

以下是您可以使用ONLYOFFICE插件执行的操作的一些示例：

连接第三方服务，如电报，YouTube，词库，翻译器，Zotero，OCR等;
在UI中添加自定义组件和控件，如Trackchanges Trackchanges_off;
增强现有的用户体验和编辑器的功能：自动完成，搜索和替换，移动光标，扩展注释;
使用宏自动执行文档中的任务。

代码示例可在https://github.com/ONLYOFFICE/sdkjs-plugins 中找到。

如果您正在寻找即用型插件，请访问ONLYOFFICE应用程序目录。

2、如何创建插件

要创建自己的插件，您需要执行几个步骤：

在插件入门页面上了解构建插件的基本概念并编写定义插件外观和行为的代码。
构建插件后，对其进行彻底测试，并确保插件的外观和工作方式符合您的预期。尝试预测可能发生的问题并提出解决方案。
现在，您可以自己使用该插件，也可以通过marketing@onlyoffice.com 与我们联系来建议发布该插件。

四、文档生成器

ONLYOFFICE文档生成器 允许您轻松构建文档，而无需实际运行文档处理编辑器。它还允许开发人员使用您创建的模板或将您某个数据库中的数据插入到一个文档或一组文档中来自动化文档构建。它具有通用文档编辑器的所有功能，但重量级，可以使用其 JavaScript API 轻松集成到您的文档管理系统，CRM系统等中。

正在更新中。。。