ONLYOFFICE是一項(xiàng)功能強(qiáng)大的開(kāi)源文檔編輯器，可以將文本文檔、電子表格和演示文稿、電子表單編輯功能集成至任何編程語(yǔ)言編寫(xiě)的 Web 應(yīng)用程序中。最新的7.5版本編輯器可以支持編輯PDF文件（批注、繪圖等）。在本文中，我們會(huì)帶你了解如何將ONLYOFFICE集成到你的Python應(yīng)用程序中。

為此，我們將在 Python 上創(chuàng)建一個(gè)簡(jiǎn)單的文檔管理系統(tǒng)，并將 ONLYOFFICE 文檔編輯器進(jìn)行集成，其實(shí)它比你想象的更簡(jiǎn)單。

Python 中的 DMS

在這一part中，我們先編寫(xiě)一個(gè) Python 應(yīng)用程序，然后在示例中展示與 ONLYOFFICE 的集成。你計(jì)劃集成編輯器的應(yīng)用程序很可能具有需要打開(kāi)以進(jìn)行查看/編輯的文件列表。因此，讓我們創(chuàng)建一個(gè)具有此功能的應(yīng)用程序，并且還應(yīng)該支持下載文件。

我們使用 Bottle 框架。你可以用 pip install Bottle 命令將其安裝在工作目錄中?，F(xiàn)在我們需要?jiǎng)?chuàng)建文件main.py（應(yīng)用程序的代碼）和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 requestrun(host="localhost", port=8080)  # running the application on port 8080

當(dāng)我們啟動(dòng)應(yīng)用程序時(shí)，會(huì)在 http://localhost:8080 上看到一個(gè)空白頁(yè)面。由于文檔服務(wù)器無(wú)法從頭開(kāi)始創(chuàng)建新文檔，因此我們必須添加默認(rèn)文件并在模板中形成其名稱(chēng)列表。因此，我們創(chuàng)建一個(gè)文件夾 files ，并在其中放入 3 個(gè)文件（docx、xlsx 和 pptx）。

我們將使用 listdir 組件來(lái)讀取它們的名稱(chēng)。

from os import listdir

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

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

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

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

讓我們?cè)谀０逯酗@示這個(gè)變量：

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

重新啟動(dòng)應(yīng)用程序后，我們可以在頁(yè)面上看到文件名列表?，F(xiàn)在我們必須使所有應(yīng)用程序用戶(hù)都可以使用這些文件。

這是一種新方法：

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

在 Python 應(yīng)用程序中查看文檔

使用 ONLYOFFICE 編輯器安裝文檔服務(wù)器。有很多安裝選項(xiàng)，但我們建議使用 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 是文檔編輯器的鏈接。

是一個(gè)按鈕，用于打開(kāi)每個(gè)文件進(jìn)行查看：

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

現(xiàn)在我們需要添加一個(gè)帶有 id 的 div：

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

文檔編輯器將在此 div 中打開(kāi)。但只有在我們調(diào)用將打開(kāi)編輯器的函數(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ù)：將打開(kāi)編輯器的元素的 id 和包含編輯器設(shè)置的 JSON。

所有參數(shù)都可以在官方API文檔中找到。在此示例中，我們使用強(qiáng)制參數(shù) documentType 、 document.url 和 editorConfig.mode 。我們還添加標(biāo)題 - 這是將在編輯器中顯示的文件名。

文檔類(lèi)型 (documentType) 將通過(guò)其格式進(jìn)行標(biāo)識(shí)（docx 表示文本，xlsx 表示電子表格，pptx 表示演示文稿）。

注意 document.url。這是我們要打開(kāi)的文件的鏈接。

現(xiàn)在，我們已經(jīng)做好了在 Python 應(yīng)用程序中查看文檔的準(zhǔn)備。

編輯文件

讓我們添加“編輯”按鈕：

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

現(xiàn)在我們需要?jiǎng)?chuàng)建一個(gè)新函數(shù)來(lái)打開(kāi)文件進(jìn)行編輯。它類(lèi)似于 View 函數(shù)，所以讓我們將普通的部分作為一個(gè)單獨(dú)的函數(shù)。

現(xiàn)在我們有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 將關(guān)閉已打開(kāi)的編輯器。

默認(rèn)情況下， editorConfig 參數(shù)的值為 {"mode": "edit"} ，這就是 edit() 函數(shù)中缺少它的原因。

現(xiàn)在將打開(kāi)文件進(jìn)行編輯。

協(xié)同編輯文檔

協(xié)同編輯是通過(guò)在編輯器設(shè)置中對(duì)同一文檔使用相同的 document.key 來(lái)實(shí)現(xiàn)的。如果沒(méi)有此密鑰，編輯器將在您每次打開(kāi)文件時(shí)創(chuàng)建編輯會(huì)話(huà)。

為了使用戶(hù)連接到同一編輯會(huì)話(huà)進(jìn)行共同編輯，我們需要為每個(gè)文檔設(shè)置唯一的密鑰。讓我們使用文件名+“_key”格式的密鑰。我們需要將其添加到存在document的所有配置中。

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

保存文件

ONLYOFFICE 通常會(huì)存儲(chǔ)您在其中工作時(shí)對(duì)文檔所做的所有更改。關(guān)閉編輯器后，Document Server 構(gòu)建要保存的文件版本并將請(qǐng)求發(fā)送到callbackUrl 地址。該請(qǐng)求包含 document.key 和剛剛構(gòu)建的文件的鏈接。

在生成中，您將使用 document.key 查找文件的舊版本并將其替換為新版本。在我們的例子中，我們沒(méi)有任何數(shù)據(jù)庫(kù)，所以我們只是使用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' + '&filename=' + filename  // add file name as a request parameter}});}

現(xiàn)在我們需要編寫(xiě)一個(gè)方法，在將 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']).contentwith open('files/' + request.query['filename'], 'wb') as f:f.write(file)return "{\"error\":0}"

# status 2 是構(gòu)建的文件。有關(guān)所有狀態(tài)的更多信息可以在 API 文檔中找到。

現(xiàn)在，關(guān)閉編輯器后，文件的新版本將保存到存儲(chǔ)中。

管理用戶(hù)

如果您的應(yīng)用程序中有用戶(hù)，請(qǐng)將他們的標(biāo)識(shí)符（id 和名稱(chēng)）寫(xiě)入編輯器的配置中。這樣您就可以看到到底是誰(shuí)在編輯文檔。

作為示例，讓我們添加在界面中選擇用戶(hù)的功能：

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

讓我們?cè)跇?biāo)簽 <script> 的開(kāi)頭添加函數(shù) pick_user() 的調(diào)用。在函數(shù)本身中，我們將初始化負(fù)責(zé) id 和用戶(hù)名的變量。

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

現(xiàn)在我們需要使用 editorConfig.user.id 和 editorConfig.user.name 在編輯器配置中添加用戶(hù)設(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}}});}

我們希望這個(gè)簡(jiǎn)單的示例能夠幫助您將 ONLYOFFICE 與 Python 應(yīng)用程序集成。更多集成示例可以在 GitHub上找到。