如何将ONLYOFFICE与Python应用程序集成

ONLYOFFICE是一项功能强大的开源文档编辑器，可以将文本文档、电子表格和演示文稿、电子表单编辑功能集成至任何编程语言编写的 Web 应用程序中。最新的7.5版本编辑器可以支持编辑PDF文件（批注、绘图等）。在本文中，我们会带你了解如何将ONLYOFFICE集成到你的Python应用程序中。

为此，我们将在 Python 上创建一个简单的文档管理系统，并将 ONLYOFFICE 文档编辑器进行集成，其实它比你想象的更简单。

Python 中的 DMS

在这一part中，我们先编写一个 Python 应用程序，然后在示例中展示与 ONLYOFFICE 的集成。你计划集成编辑器的应用程序很可能具有需要打开以进行查看/编辑的文件列表。因此，让我们创建一个具有此功能的应用程序，并且还应该支持下载文件。

我们使用 Bottle 框架。你可以用 pip install Bottle 命令将其安装在工作目录中。现在我们需要创建文件main.py（应用程序的代码）和index.tpl（模板），然后将以下代码添加到main.py文件中：

from bottle import route, run, template, get, static_file # connecting the framework and the necessary components
@route('/') # setting up routing for requests for /
def index():
    return template('index.tpl')  # showing template in response to request


run(host="localhost", port=8080)  # running the application on port 8080

当我们启动应用程序时，会在 http://localhost:8080 上看到一个空白页面。由于文档服务器无法从头开始创建新文档，因此我们必须添加默认文件并在模板中形成其名称列表。因此，我们创建一个文件夹 files ，并在其中放入 3 个文件（docx、xlsx 和 pptx）。

我们将使用 listdir 组件来读取它们的名称。

from os import listdir

现在让我们为 files 文件夹中的所有文件名创建一个变量：

sample_files = [f for f in listdir('files')]

要在模板中使用此变量，我们需要通过template方法传递它：

def index():
    return template('index.tpl', sample_files=sample_files)

让我们在模板中显示这个变量：

%for file in sample_files:
    <div>
        <span>{{file}}</span>
    </div>
% end

重新启动应用程序后，我们可以在页面上看到文件名列表。现在我们必须使所有应用程序用户都可以使用这些文件。

这是一种新方法：

@get("/files/<filepath:re:.*\.*>")
def show_sample_files(filepath):
    return static_file(filepath, root="files")

在 Python 应用程序中查看文档

使用 ONLYOFFICE 编辑器安装文档服务器。有很多安装选项，但我们建议使用 Docker：

docker run -itd -p 80:80 onlyoffice/documentserver-de

连接模板中的文档编辑器 API：

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

editor_url 是文档编辑器的链接。

是一个按钮，用于打开每个文件进行查看：

<button onclick="view('files/{{file}}')">view</button>

现在我们需要添加一个带有 id 的 div：

<div id="editor"></div>

文档编辑器将在此 div 中打开。但只有在我们调用将打开编辑器的函数之后才行。

<script>
function view(filename) {
    if (/docx$/.exec(filename)) {
        filetype = "text"
    }
    if (/xlsx$/.exec(filename)) {
        filetype = "spreadsheet"
    }
    if (/pptx$/.exec(filename)) {
        filetype = "presentation",
        title: filename
    }

    new DocsAPI.DocEditor("editor",
        {
            documentType: filetype,
            document: {
                url: "host_url" + '/' + filename,
                title: filename
            },
            editorConfig: {mode: 'view'}
        });
  }
</script>

DocEditor 函数有两个参数：将打开编辑器的元素的 id 和包含编辑器设置的 JSON。

所有参数都可以在官方API文档中找到。在此示例中，我们使用强制参数 documentType 、 document.url 和 editorConfig.mode 。我们还添加标题 - 这是将在编辑器中显示的文件名。

文档类型 (documentType) 将通过其格式进行标识（docx 表示文本，xlsx 表示电子表格，pptx 表示演示文稿）。

注意 document.url。这是我们要打开的文件的链接。

现在，我们已经做好了在 Python 应用程序中查看文档的准备。

编辑文件

让我们添加“编辑”按钮：

<button onclick="edit('files/{{file}}')">edit</button>

现在我们需要创建一个新函数来打开文件进行编辑。它类似于 View 函数，所以让我们将普通的部分作为一个单独的函数。

现在我们有3个函数：

<script>
    var editor;
    function view(filename) {
        if (editor) {
            editor.destroyEditor()
        }
        editor = new DocsAPI.DocEditor("editor",
            {
                documentType: get_file_type(filename),
                document: {
                    url: "host_url" + '/' + filename,
                    title: filename
                },
                editorConfig: {mode: 'view'}
            });
    }

    function edit(filename) {
        if (editor) {
            editor.destroyEditor()
        }
        editor = new DocsAPI.DocEditor("editor",
            {
                documentType: get_file_type(filename),
                document: {
                    url: "host_url" + '/' + filename,
                    title: filename
                }
            });
    }

    function get_file_type(filename) {
        if (/docx$/.exec(filename)) {
            return "text"
        }
        if (/xlsx$/.exec(filename)) {
            return "spreadsheet"
        }
        if (/pptx$/.exec(filename)) {
            return "presentation"
        }
    }
</script>

destroyEditor 将关闭已打开的编辑器。

默认情况下， editorConfig 参数的值为 {"mode": "edit"} ，这就是 edit() 函数中缺少它的原因。

现在将打开文件进行编辑。

协同编辑文档

协同编辑是通过在编辑器设置中对同一文档使用相同的 document.key 来实现的。如果没有此密钥，编辑器将在您每次打开文件时创建编辑会话。

为了使用户连接到同一编辑会话进行共同编辑，我们需要为每个文档设置唯一的密钥。让我们使用文件名+“_key”格式的密钥。我们需要将其添加到存在document的所有配置中。

 document: {
                    url: "host_url" + '/' + filepath,
                    title: filename,
                    key: filename + '_key'
                },

保存文件

ONLYOFFICE 通常会存储您在其中工作时对文档所做的所有更改。关闭编辑器后，Document Server 构建要保存的文件版本并将请求发送到callbackUrl 地址。该请求包含 document.key 和刚刚构建的文件的链接。

在生成中，您将使用 document.key 查找文件的旧版本并将其替换为新版本。在我们的例子中，我们没有任何数据库，所以我们只是使用callbackUrl 发送文件名。

在editorConfig.callbackUrl的设置中指定callbackUrl。添加此参数后，edit()方法将如下所示：

function edit(filename) {
        const filepath = 'files/' + filename;
        if (editor) {
            editor.destroyEditor()
        }
        editor = new DocsAPI.DocEditor("editor",
            {
                documentType: get_file_type(filepath),
                document: {
                    url: "host_url" + '/' + filepath,
                    title: filename, 
                    key: filename + '_key'
                }
                ,
                editorConfig: {
                    mode: 'edit',
                    callbackUrl: "host_url" + '/callback' + '&filename=' + filename  // add file name as a request parameter
                }
            });
    }

现在我们需要编写一个方法，在将 post 请求发送到 /callback 地址后保存文件：

@post("/callback") # processing post requests for /callback
def callback():
    if request.json['status'] == 2:
        file = requests.get(request.json['url']).content
        with open('files/' + request.query['filename'], 'wb') as f:
            f.write(file)
    return "{\"error\":0}"

# status 2 是构建的文件。有关所有状态的更多信息可以在 API 文档中找到。

现在，关闭编辑器后，文件的新版本将保存到存储中。

管理用户

如果您的应用程序中有用户，请将他们的标识符（id 和名称）写入编辑器的配置中。这样您就可以看到到底是谁在编辑文档。

作为示例，让我们添加在界面中选择用户的功能：

<select id="user_selector" onchange="pick_user()">
    <option value="1" selected="selected">JD</option>
    <option value="2">Turk</option>
    <option value="3">Elliot</option>
    <option value="4">Carla</option>
</select>

让我们在标签 <script> 的开头添加函数 pick_user() 的调用。在函数本身中，我们将初始化负责 id 和用户名的变量。

function pick_user() {
        const user_selector = document.getElementById("user_selector");
        this.current_user_name = user_selector.options[user_selector.selectedIndex].text;
        this.current_user_id = user_selector.options[user_selector.selectedIndex].value;
    }

现在我们需要使用 editorConfig.user.id 和 editorConfig.user.name 在编辑器配置中添加用户设置。让我们将这些参数添加到文件编辑功能中的编辑器配置中。

function edit(filename) {
        const filepath = 'files/' + filename;
        if (editor) {
            editor.destroyEditor()
        }
        editor = new DocsAPI.DocEditor("editor",
            {
                documentType: get_file_type(filepath),
                document: {
                    url: "host_url" + '/' + filepath,
                    title: filename
                },
                editorConfig: {
                    mode: 'edit',
                    callbackUrl: "host_url" + '/callback' + '?filename=' + filename,
                    user: {
                        id: this.current_user_id,
                        name: this.current_user_name
                    }
                }
            });
    }

我们希望这个简单的示例能够帮助您将 ONLYOFFICE 与 Python 应用程序集成。更多集成示例可以在 GitHub上找到。