如何利用ONLYOFFICE將在線文檔編輯器集成到Python Web應(yīng)用程序中？

作者：Aashima Sharma 2021-01-21 16:12:01

開發(fā) 后端

在本文中，你將看到 ONLYOFFICE 與流行的編程語言之一的 Python 編寫的文檔管理系統(tǒng)的集成過程。

[[377528]]

ONLYOFFICE 是根據(jù) GNU AGPL v.3 許可證條款分發(fā)的開源協(xié)作辦公套件。它包含三個(gè)用于文本文檔、電子表格和演示文稿的編輯器，并具有以下功能：

查看，編輯和協(xié)同編輯 .docx、.xlsx、.pptx 文件。OOXML 作為一種核心格式，可確保與 Microsoft Word、Excel 和 PowerPoint 文件的高度兼容性。
通過內(nèi)部轉(zhuǎn)換為 OOXML，編輯其他流行格式（.odt、.rtf、.txt、.html、.ods、.csv、.odp）。
熟悉的選項(xiàng)卡式界面。
協(xié)作工具：兩種協(xié)同編輯模式（快速和嚴(yán)謹(jǐn)），跟蹤更改，評(píng)論和集成聊天。
靈活的訪問權(quán)限管理：完全訪問權(quán)限、只讀、審閱、表單填寫和評(píng)論。
使用 API 構(gòu)建附加組件。
250 種可用語言和象形字母表。

通過 API，開發(fā)人員可以將 ONLYOFFICE 編輯器集成到網(wǎng)站和利用程序設(shè)計(jì)語言編寫的應(yīng)用程序中，并能配置和管理編輯器。

要集成 ONLYOFFICE 編輯器，我們需要一個(gè)集成應(yīng)用程序來連接編輯器（ONLYOFFICE 文檔服務(wù)器）和服務(wù)。要在你的界面中使用編輯器，因該授予 ONLYOFFICE 以下權(quán)限：

添加并執(zhí)行自定義代碼。
用于下載和保存文件的匿名訪問權(quán)限。這意味著編輯器僅與服務(wù)器端的服務(wù)通信，而不包括客戶端的任何用戶授權(quán)數(shù)據(jù)（瀏覽器 cookies）。
在用戶界面添加新按鈕（例如，“在 ONLYOFFICE 中打開”、“在 ONLYOFFICE 中編輯”）。
開啟一個(gè)新頁面，ONLYOFFICE 可以在其中執(zhí)行腳本以添加編輯器。
能夠指定文檔服務(wù)器連接設(shè)置。

流行的協(xié)作解決方案的成功集成案例有很多，如 Nextcloud、ownCloud、Alfresco、Confluence 和 SharePoint，都是通過 ONLYOFFICE 提供的官方即用型連接器實(shí)現(xiàn)的。

實(shí)際的集成案例之一是 ONLYOFFICE 編輯器與以 C＃編寫的開源協(xié)作平臺(tái)的集成。該平臺(tái)具有文檔和項(xiàng)目管理、CRM、電子郵件聚合器、日歷、用戶數(shù)據(jù)庫、博客、論壇、調(diào)查、Wiki 和即時(shí)通訊程序的功能。

將在線編輯器與 CRM 和項(xiàng)目模塊集成，你可以：

文檔關(guān)聯(lián)到 CRM 時(shí)機(jī)和容器、項(xiàng)目任務(wù)和討論，甚至創(chuàng)建一個(gè)單獨(dú)的文件夾，其中包含與項(xiàng)目相關(guān)的文檔、電子表格和演示文稿。
直接在 CRM 或項(xiàng)目模塊中創(chuàng)建新的文檔、工作表和演示文稿。
打開和編輯關(guān)聯(lián)的文檔，或者下載和刪除。
將聯(lián)系人從 CSV 文件批量導(dǎo)入到 CRM 中，并將客戶數(shù)據(jù)庫導(dǎo)出為 CSV 文件。

在“郵件”模塊中，你可以關(guān)聯(lián)存儲(chǔ)在“文檔模塊”中的文件，或者將指向所需文檔的鏈接插入到郵件正文中。當(dāng) ONLYOFFICE 用戶收到帶有附件的文檔的消息時(shí)，他們可以：下載附件、在瀏覽器中查看文件、打開文件進(jìn)行編輯或?qū)⑵浔４娴?ldquo;文檔模塊”。如上所述，如果格式不同于 OOXML ，則文件將自動(dòng)轉(zhuǎn)換為 .docx、.xlsx、.pptx，并且其副本也將以原始格式保存。

在本文中，你將看到 ONLYOFFICE 與最流行的編程語言之一的 Python 編寫的文檔管理系統(tǒng)的集成過程。以下步驟將向你展示如何創(chuàng)建所有必要的部分，以使在 DMS（文檔管理系統(tǒng)Document Management System）界面內(nèi)的文檔中可以進(jìn)行協(xié)同工作成為可能：查看、編輯、協(xié)同編輯、保存文件和用戶訪問管理，并可以作為服務(wù)的示例集成到 Python 應(yīng)用程序中。

1、前置需求

首先，創(chuàng)建集成過程的關(guān)鍵組件：ONLYOFFICE 文檔服務(wù)器和用 Python 編寫的文件管理系統(tǒng)。

1.1、ONLYOFFICE 文檔服務(wù)器

要安裝 ONLYOFFICE 文檔服務(wù)器，你可以從多個(gè)安裝選項(xiàng)中進(jìn)行選擇：編譯 GitHub 上可用的源代碼，使用 .deb 或 .rpm 軟件包亦或 Docker 鏡像。

我們推薦使用下面這條命令利用 Docker 映像安裝文檔服務(wù)器和所有必需的依賴。請(qǐng)注意，選擇此方法，你需要安裝最新的 Docker 版本。

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

1.2、利用 Python 開發(fā) DMS

如果已經(jīng)擁有一個(gè)，請(qǐng)檢查它是否滿足以下條件：

包含需要打開以查看/編輯的保留文件
允許下載文件

對(duì)于該應(yīng)用程序，我們將使用 Bottle 框架。我們將使用以下命令將其安裝在工作目錄中：

pip install bottle

然后我們創(chuàng)建應(yīng)用程序代碼 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

一旦我們運(yùn)行該應(yīng)用程序，點(diǎn)擊 http://localhost:8080 就會(huì)在瀏覽器上呈現(xiàn)一個(gè)空白頁面。為了使文檔服務(wù)器能夠創(chuàng)建新文檔，添加默認(rèn)文件并在模板中生成其名稱列表，我們應(yīng)該創(chuàng)建一個(gè)文件夾 files 并將3種類型文件（.docx、.xlsx 和 .pptx）放入其中。

要讀取這些文件的名稱，我們使用 listdir 組件（模塊）：

from os import listdir

現(xiàn)在讓我們?yōu)槲募A中的所有文件名創(chuàng)建一個(gè)變量：

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

要在模板中使用此變量，我們需要通過 template 方法傳遞它：

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

這是模板中的這個(gè)變量：

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

我們重新啟動(dòng)應(yīng)用程序以查看頁面上的文件名列表。

使這些文件可用于所有應(yīng)用程序用戶的方法如下：

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

2、查看文檔

所有組件準(zhǔn)備就緒后，讓我們添加函數(shù)以使編輯者可以利用應(yīng)用接口操作。

第一個(gè)選項(xiàng)使用戶可以打開和查看文檔。連接模板中的文檔編輯器 API ：

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

editor_url 是文檔編輯器的鏈接接口。

打開每個(gè)文件以供查看的按鈕：

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

現(xiàn)在我們需要添加帶有 id 的 div 標(biāo)簽，打開文檔編輯器：

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

要打開編輯器，必須調(diào)用調(diào)用一個(gè)函數(shù)：

<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 函數(shù)有兩個(gè)參數(shù)：將在其中打開編輯器的元素 id 和帶有編輯器設(shè)置的 JSON。在此示例中，使用了以下必需參數(shù)：

documentType 由其格式標(biāo)識(shí)（.docx、.xlsx、.pptx 用于相應(yīng)的文本、電子表格和演示文稿）。
document.url 是你要打開的文件鏈接。
editorConfig.mode。

我們還可以添加將在編輯器中顯示的 title。

接下來，我們可以在 Python 應(yīng)用程序中查看文檔。

3、編輯文檔

首先，添加 “Edit”（編輯）按鈕：

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

然后創(chuàng)建一個(gè)新功能，打開文件進(jìn)行編輯。類似于查看功能。

現(xiàn)在創(chuàng)建 3 個(gè)函數(shù)：

<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 被調(diào)用以關(guān)閉一個(gè)打開的編輯器。

你可能會(huì)注意到，edit() 函數(shù)中缺少 editorConfig 參數(shù)，因?yàn)槟J(rèn)情況下它的值是：{"mode":"edit"}。

現(xiàn)在，我們擁有了打開文檔以在 Python 應(yīng)用程序中進(jìn)行協(xié)同編輯的所有功能。

4、如何在 Python 應(yīng)用中利用 ONLYOFFICE 協(xié)同編輯文檔

通過在編輯器中設(shè)置對(duì)同一文檔使用相同的 document.key 來實(shí)現(xiàn)協(xié)同編輯。如果沒有此鍵值，則每次打開文件時(shí)，編輯器都會(huì)創(chuàng)建編輯會(huì)話。

為每個(gè)文檔設(shè)置唯一鍵，以使用戶連接到同一編輯會(huì)話時(shí)進(jìn)行協(xié)同編輯。密鑰格式應(yīng)為以下格式：filename +"_key"。下一步是將其添加到當(dāng)前文檔的所有配置中。

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

5、如何在 Python 應(yīng)用中利用 ONLYOFFICE 保存文檔

每次我們更改并保存文件時(shí)，ONLYOFFICE 都會(huì)存儲(chǔ)其所有版本。讓我們仔細(xì)看看它是如何工作的。關(guān)閉編輯器后，文檔服務(wù)器將構(gòu)建要保存的文件版本并將請(qǐng)求發(fā)送到 callbackUrl 地址。該請(qǐng)求包含 document.key和指向剛剛構(gòu)建的文件的鏈接。

document.key 用于查找文件的舊版本并將其替換為新版本。由于這里沒有任何數(shù)據(jù)庫，因此僅使用 callbackUrl 發(fā)送文件名。

在 editorConfig.callbackUrl 的設(shè)置中指定 callbackUrl 參數(shù)并將其添加到 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' + '&amp;filename=' + filename  // add file name as a request parameter
                }
            });
    }

編寫一種方法，在獲取到 POST 請(qǐng)求發(fā)送到 /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 是已生成的文件，當(dāng)我們關(guān)閉編輯器時(shí)，新版本的文件將保存到存儲(chǔ)器中。

6、管理用戶

如果應(yīng)用中有用戶，并且你需要查看誰在編輯文檔，請(qǐng)?jiān)诰庉嬈鞯呐渲弥休斎肫錁?biāo)識(shí)符（id和name）。

在界面中添加選擇用戶的功能：

<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>

如果在標(biāo)記 <script> 的開頭添加對(duì)函數(shù) pick_user() 的調(diào)用，負(fù)責(zé)初始化函數(shù)自身 id 和 name 變量。

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 來配置用戶設(shè)置。將這些參數(shù)添加到文件編輯函數(shù)中的編輯器配置中。

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
                }
            }
        });
}