Tambahkan fungsi pejabat ke aplikasi web anda dengan OnlyOffice-tutorial js-php.cn

Tambahkan fungsi pejabat ke aplikasi web anda dengan OnlyOffice

Artikel ini dibuat dengan kerjasama OnlyOffice. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Setiap kali kita mendapati diri kita cuba menambah fungsi kompleks ke aplikasi, soalan itu timbul, "Sekiranya saya menggulung saya sendiri?" Dan melainkan jika matlamat anda adalah untuk membina fungsi itu, jawapannya hampir selalu lurus "tidak".

apa yang anda perlukan adalah sesuatu untuk membantu anda sampai ke MVP secepat mungkin, dan cara terbaik untuk mencapai itu adalah dengan menggunakan penyelesaian luar kotak yang dapat membantu anda menjimatkan masa, yang, dalam berpaling, diterjemahkan ke dalam penjimatan kos pembangunan.

Saya akan mengandaikan bahawa anda masih di sini kerana di atas bergema dengan anda. Oleh itu, sekarang kita selaras, apa yang saya ingin tunjukkan kepada anda dalam artikel ini adalah betapa mudahnya untuk mengintegrasikan hanya dalam aplikasi web anda.

Takeaways Key

Edisi pemaju OnlyOffice membolehkan penyesuaian dan integrasi yang luas ke dalam aplikasi, menawarkan pilihan "label putih" untuk penjenamaan editor sebagai anda sendiri.
Menyediakan OnlyOffice melibatkan memasang dokumen sahaja (pelayan dokumen) secara tempatan dan melaksanakan permintaan API untuk menguruskan dokumen dalam aplikasi anda, dengan sokongan untuk pelbagai bahasa pengaturcaraan.
Kerjasama masa nyata disokong dalam OnlyOffice, membolehkan beberapa pengguna mengedit dokumen secara serentak dan melihat perubahan masing-masing secara langsung.
Proses integrasi direka untuk menjadi mudah, bertujuan untuk membantu pemaju mencapai produk minimum (MVP) dengan cepat dan kos efektif, dengan dokumentasi yang mencukupi dan sokongan komuniti yang tersedia untuk bantuan.
Apa itu sahaja?

OnlyOffice menawarkan suite pejabat yang paling kaya dengan ciri yang tersedia, sangat serasi dengan format fail Microsoft Office dan OpenDocument. Lihat, edit dan bekerjasama dengan dokumen, spreadsheet dan persembahan terus dari aplikasi web anda.

The Office Suite mempunyai beberapa edisi. Dalam artikel ini, kami akan menggunakan Edisi Pemaju, kerana kami ingin mengintegrasikan editor ke dalam aplikasi yang kemudiannya akan dihantar kepada banyak pengguna sebagai perkhidmatan awan atau pemasangan premis.

Jika anda ingin menggunakan OnlyOffice dalam penyelesaian Sync & Share yang sedia ada, anda harus menyemak Edisi Enterprise. Senarai integrasi di sini.

edisi pemaju

Edisi Pemaju bukan sahaja memberi anda kebebasan yang cukup untuk mengintegrasikan editor dalam aplikasi anda, tetapi ia juga dilengkapi dengan pilihan "Label Putih" yang membolehkan anda menyesuaikan sepenuhnya editor untuk menggunakannya di bawah jenama anda sendiri.
Integrasi Server Dokumen
Untuk mengintegrasikan dengan aplikasi web anda, anda perlu memuat turun Dokumen OnlyOffice (dibungkus sebagai pelayan dokumen) dan tetapkannya pada pelayan tempatan anda.

Selepas anda memasangnya, anda boleh mula melaksanakan permintaan untuk mengendalikan dokumen pada pelayan anda. OnlyOffice menyediakan beberapa contoh yang sangat bagus untuk .net, java, node.js, php, python dan ruby.

anda boleh memuat turun pelayan dokumen dan contoh pilihan anda dan cuba terus pada mesin anda.

Saya akan menunjukkan bagaimana anda boleh mula mengintegrasikan ke dalam aplikasi anda. Untuk tujuan ini, kami akan menggunakan contoh yang sangat mudah dengan Node.js dan Express. Saya tidak akan terperinci mengenai pelaksanaannya, saya akan meletakkan keperluan tulang yang kosong dan membiarkan anda mengisi kekosongan untuk membina sistem yang mantap dan berskala.

saya mempunyai aplikasi dengan struktur berikut:

kami akan menggunakan folder awam/dokumen untuk menyimpan dokumen. Fail app.js adalah di mana kod aplikasi ekspres kami, dan index.html adalah di mana kami akan menunjukkan dokumen kami. Saya telah menjatuhkan fail sampel.docx dalam folder dokumen untuk tujuan ujian.
- node_modules - public - backups - css - main.css - documents - sample.docx - javascript - main.js - samples - new.docx - new.xlsx - new.pptx - app.js - index.html - package.json
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

fail pokok di dalam awam/ sampel/ adalah fail kosong yang akan kami salin ketika "membuat" fail baru.

Folder Backups, seperti yang akan anda lihat kemudian, bukan sahaja akan membantu kami menyimpan sandaran versi terdahulu tetapi juga membantu kami dalam menghasilkan pengenal unik untuk dokumen kami selepas mengubahnya.
fail awam/css/main.css dan fail awam/javascript/main.js akan digunakan oleh index.html. Kami akan melihatnya kemudian.

mari kita lihat fail app.js:

Apa yang kita lakukan ialah melayani fail sebagai localhost: 3000/dokumen/nama fail.

const express = require('express'); const bodyParser = require("body-parser"); const path = require('path'); const fs = require('fs'); const syncRequest = require('sync-request'); const app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(express.static("public")); app.get("/", (req, res) => { res.sendFile(path.join(__dirname, "/index.html")); }); const port = process.env.PORT || 3000; app.listen(port, () => console.log(`App listening on http://localhost:${port}`)); 
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Saya juga mendapat lebih awal daripada diri saya dan menambah Syncrequest, FS, dan BodyParser. Ini tidak relevan sekarang tetapi kami akan menggunakannya kemudian.

Ambil dokumen

Untuk menunjukkan dokumen yang ada, kami perlu mendapatkan senarai semua nama fail dan menghantarnya kepada pelanggan. Kami akan membuat Laluan /Dokumen untuk ini:

Buat dokumen

app.get("/documents", (req, res) => { const docsPath = path.join(__dirname, "public/documents"); const docsPaths = fs.readdirSync(docsPath); const fileNames = []; docsPaths.forEach(filePath => { const fileName = path.basename(filePath); fileNames.push(fileName); }); res.send(fileNames); }); 
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Pada mulanya kita hanya akan mempunyai dokumen sampel, tetapi itu tidak menyeronokkan sama sekali. Mari tambahkan laluan A /Buat untuk membantu kami menambah beberapa fail. Kami hanya akan mengambil nama fail dan menyalin templat yang sepadan ke dalam folder awam/dokumen dengan nama barunya:

Padam dokumen

app.post("/create", async (req, res) => { const ext = path.extname(req.query.fileName); const fileName = req.query.fileName; const samplePath = path.join(__dirname, "public/samples", "new" + ext); const newFilePath = path.join(__dirname, "public/documents", fileName); // Copy the sample file to the documents folder with its new name. try { fs.copyFileSync(samplePath, newFilePath); res.sendStatus(200); } catch (e) { res.sendStatus(400); } }); 
Salin selepas log masuk
Salin selepas log masuk
Kami juga memerlukan cara untuk memadam dokumen. Mari buat Laluan /Padam:

Ini sangat mudah. Kami akan memadam fail dan menghantar kod status 200 untuk membiarkan pengguna tahu semuanya berjalan lancar. Jika tidak, mereka akan mendapat kod status 400.

Simpan dokumen

Setakat ini, kami boleh membuka dokumen kami untuk mengedit, tetapi kami tidak dapat menyelamatkan perubahan kami. Mari kita buat sekarang. Kami akan menambah laluan A /trek untuk menyimpan fail kami:

- node_modules - public - backups - css - main.css - documents - sample.docx - javascript - main.js - samples - new.docx - new.xlsx - new.pptx - app.js - index.html - package.json
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Ini adalah satu yang rumit, kerana ia akan digunakan oleh pelayan dokumen apabila fail disimpan oleh editor. Seperti yang anda lihat, kami kembali "{" error ": 0}", yang memberitahu pelayan bahawa semuanya baik.

Apabila editor ditutup, versi semasa fail akan disandarkan dalam awam/sandaran/filename-history/dengan masa semasa dalam milisaat sebagai nama fail. Kami akan menggunakan nama fail kemudian di hujung depan, seperti yang anda lihat.

Dalam contoh ini, kami menggantikan sandaran sebelumnya setiap kali kami menyimpan yang baru. Bagaimana anda akan menyimpan lebih banyak sandaran?

mengambil sandaran

kami memerlukan cara untuk mendapatkan sandaran untuk fail tertentu, jadi kami menambah laluan A /sandaran untuk mengendalikan ini:

const express = require('express'); const bodyParser = require("body-parser"); const path = require('path'); const fs = require('fs'); const syncRequest = require('sync-request'); const app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(express.static("public")); app.get("/", (req, res) => { res.sendFile(path.join(__dirname, "/index.html")); }); const port = process.env.PORT || 3000; app.listen(port, () => console.log(`App listening on http://localhost:${port}`)); 
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

di sini kami memastikan bahawa folder sandaran untuk fail itu wujud, dan mengembalikan pelbagai fail sandaran dalam folder itu. Ya, ini akan membantu anda dalam tugas anda menyimpan lebih banyak sandaran untuk satu fail. Saya tidak boleh terus melakukan semua kerja untuk anda!

Membuka dokumen dalam penyemak imbas

kita akan melihat bagaimana kita boleh membuka dokumen kami untuk mengedit secara langsung dalam penyemak imbas menggunakan dokumen OnlyOffice.

Pertama, kami akan membuat fail HTML yang mudah:

app.get("/documents", (req, res) => { const docsPath = path.join(__dirname, "public/documents"); const docsPaths = fs.readdirSync(docsPath); const fileNames = []; docsPaths.forEach(filePath => { const fileName = path.basename(filePath); fileNames.push(fileName); }); res.send(fileNames); }); 
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Seperti yang anda lihat, tidak banyak fail ini. Kami mempunyai div pemegang tempat di mana editor akan dilampirkan. Kemudian ada dokumen div, yang mengandungi kawalan untuk membuat dokumen dan bekas untuk senarai nama fail.

Di bawah itu, kami mempunyai skrip dengan API JavaScript untuk pelayan dokumen. Perlu diingat bahawa anda mungkin perlu menggantikan hos dengan lokasi pelayan dokumen anda. Sekiranya anda memasangnya dengan perintah docker yang saya berikan kepada anda, anda harus baik untuk pergi.

Terakhir tetapi tidak kurang, terdapat tag skrip, di mana kami mengimport JavaScript depan kami, dan fail Main.js, di mana kami akan mempunyai akses global ke objek DocSAPI.

CSS

Sebelum kita sampai ke pengekodan, mari kita bungkus susun atur dengan beberapa CSS untuk menjadikan aplikasi kita lebih berguna dan kurang hodoh. Tambahkan yang berikut ke main.css:

app.post("/create", async (req, res) => { const ext = path.extname(req.query.fileName); const fileName = req.query.fileName; const samplePath = path.join(__dirname, "public/samples", "new" + ext); const newFilePath = path.join(__dirname, "public/documents", fileName); // Copy the sample file to the documents folder with its new name. try { fs.copyFileSync(samplePath, newFilePath); res.sendStatus(200); } catch (e) { res.sendStatus(400); } }); 
Salin selepas log masuk
Salin selepas log masuk

Menunjukkan dokumen yang tersedia

Dengan cara itu, kami bersedia untuk memulakan pengekodan hujung depan. Kami akan bermula dengan menyenaraikan fail dalam folder Dokumen. Pergi ke main.js dan tambahkan kod berikut:

app.delete("/delete", (req, res) => { const fileName = req.query.fileName; const filePath = path.join(__dirname, "public/documents", fileName); try { fs.unlinkSync(filePath); res.sendStatus(200); } catch (e) { res.sendStatus(400); } }); 
Salin selepas log masuk

Di sini di bahagian atas, kami mendapat parameter pertanyaan untuk mengetahui sama ada kami membuka fail atau tidak. Jika kita, kita akan memanggil fungsi EditDocument. Jangan risau, kami akan membuatnya kemudian.

Jika kami tidak membuka fail, kami ingin menunjukkan senarai fail yang tersedia dan kawalan untuk membuat lebih banyak. Dalam ListDocuments, kami mula -mula pastikan kami menyembunyikan pemegang tempat dan membersihkan senarai untuk memastikan kami menciptanya lagi. Kemudian kami memanggil laluan /dokumen yang kami buat sebelum ini untuk mendapatkan semua fail, berulang melalui mereka, dan membuat unsur -unsur yang sepadan. Kami akan mengenal pasti setiap elemen dengan nama fail sebagai ID. Dengan cara ini kita dapat dengan mudah mengambilnya kemudian.

Perhatikan bahawa kami memanggil fungsi AddDocumentHTML, yang akan kami gunakan semula kemudian untuk menambah fail baru.

Untuk setiap dokumen ini, kami juga memanggil OpenDocument, yang kami tentukan di bahagian bawah, dan pada simbol silang kami memanggil Deletedocument, yang akan kami tentukan seterusnya.
Memadam dokumen

Untuk memadam dokumen kami, kami akan meminta pengguna jika mereka pasti sebelum kami pergi dan hubungi /hapus laluan dan pergi nuklear pada fail itu. Daripada membuang panggilan lain ke API kami, kami menyemak bahawa status yang dikembalikan adalah 200 untuk memadamkan elemen DOM secara langsung:

- node_modules - public - backups - css - main.css - documents - sample.docx - javascript - main.js - samples - new.docx - new.xlsx - new.pptx - app.js - index.html - package.json
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Buat dokumen

Ingat bahawa fungsi yang kita panggil dalam pengendalian kawalan penciptaan dokumen? Di sini anda pergi:

const express = require('express'); const bodyParser = require("body-parser"); const path = require('path'); const fs = require('fs'); const syncRequest = require('sync-request'); const app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(express.static("public")); app.get("/", (req, res) => { res.sendFile(path.join(__dirname, "/index.html")); }); const port = process.env.PORT || 3000; app.listen(port, () => console.log(`App listening on http://localhost:${port}`)); 
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
sangat sederhana. Kami menggesa nama itu, hubungi /membuat laluan dengan itu sebagai parameter nama fail, dan jika status itu kembali sebagai 200 kami memanggil AddDocumentHtml untuk menambah elemen DOM secara langsung.

Membuka dokumen dalam dokumen sahaja

Sekarang kita perlu menentukan fungsi EditDocument. Tambahkan kod berikut ke main.js:

app.get("/documents", (req, res) => { const docsPath = path.join(__dirname, "public/documents"); const docsPaths = fs.readdirSync(docsPath); const fileNames = []; docsPaths.forEach(filePath => { const fileName = path.basename(filePath); fileNames.push(fileName); }); res.send(fileNames); }); 
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Jadi, kami telah menambah tiga fungsi. Mari kita fokus pada dua yang terakhir. (Kami akan bercakap mengenai editdocument dalam seketika.)

GenerateKey juga akan membantu kami dengan menjana kunci. Ini adalah pengenal dokumen yang unik yang digunakan untuk pengiktirafan dokumen oleh perkhidmatan. Ia boleh mempunyai panjang maksimum 20 dan tiada aksara khas. Dan inilah silap mata: ia perlu diperbaharui setiap kali dokumen itu disimpan. Adakah anda melihat ke mana ini berlaku? Tepat! Kami akan mendapat keuntungan dari nama fail sandaran kami untuk menjana kunci kami.

seperti yang anda lihat, untuk menghasilkan kunci yang kami ambil satu -satunya sandaran kami (jika ada) dan menggunakan namanya atau sebaliknya mudah mendapatkan masa semasa dalam milisaat jika tidak ada.

Apa yang perlu diubah dalam fungsi itu jika anda menyokong lebih banyak sandaran?
[Runs Away]
GetDocumentType akan mengembalikan sama ada teks, spreadsheet atau persembahan. OnlyOffice memerlukan ini untuk mengetahui editor mana yang akan dibuka.

EditDocument adalah apa yang kita ada di sini. Inilah yang anda tunggu sepanjang masa. Di sini kita meneliti objek DocEditor yang melepasi ID div pemegang tempat kami dan objek dengan sekumpulan konfigurasi.

Konfigurasi DocEditor

Apa yang saya tunjukkan kepada anda setakat ini adalah pilihan minimum yang diperlukan untuk memberi contoh kepada Doceditor. Anda perlu menyemak bahagian Parameter Lanjutan dalam DOCS untuk melihat bagaimana anda boleh mendapat keuntungan dari semua pilihan yang berbeza. Sementara itu, izinkan saya membawa anda melalui fundamental.

di bahagian atas, kami mempunyai medan dokumen yang mengambil objek yang mengandungi maklumat mengenai dokumen yang ingin kami buka.

maka kita mempunyai DocumentType, yang, seperti yang kita lihat sebelumnya, boleh sama ada teks, spreadsheet, atau persembahan.

betul di bawah itu adalah objek EditorConfig, yang membolehkan anda menetapkan perkara seperti Spellcheck, Unit dan Zoom, antara lain. Dalam kes ini, kami hanya menggunakan callbackurl, yang merupakan URL ke laluan /trek yang akan digunakan oleh pelayan dokumen untuk menyimpan fail.

Kesimpulan

Kami telah sampai ke akhir, dan anda sememangnya telah belajar bagaimana untuk menubuhkan dan mengintegrasikan dokumen sahaja dengan aplikasi web anda. Terdapat banyak yang kami tinggalkan, seperti kebenaran, perkongsian, penyesuaian dan banyak perkara lain yang boleh anda lakukan dengan OnlyOffice.

Saya harap anda mempunyai maklumat yang cukup untuk terus meningkatkan produk anda, atau mungkin juga inspirasi untuk memulakan projek baru dari awal. Tidak ada masa seperti sekarang.

Baiklah, saya akan melihat anda dalam yang berikutnya. Sementara itu, teruskan pengekodan dan ingat untuk bersenang -senang semasa anda berada!

Soalan Lazim (Soalan Lazim) Mengenai Menambah Fungsi Pejabat ke Aplikasi Web Anda Dengan OnlyOffice

Bagaimana saya boleh mengintegrasikan hanya ke dalam aplikasi web saya yang sedia ada? Pertama, anda perlu memasang pelayan dokumen OnlyOffice, yang merupakan teras OnlyOffice. Ini boleh dilakukan menggunakan Docker, yang merupakan kaedah yang disyorkan, atau secara manual. Sebaik sahaja pelayan dokumen dipasang, anda boleh menggunakan API OnlyOffice untuk mengintegrasikannya ke dalam aplikasi web anda. API menyediakan satu set kaedah untuk bekerja dengan dokumen, spreadsheet, dan persembahan. Anda boleh menggunakan kaedah ini untuk membuka, mengedit, dan menyimpan dokumen dalam aplikasi web anda. Ia membolehkan pengguna membuat, melihat, dan mengedit dokumen secara langsung dalam aplikasi, tanpa perlu memuat turunnya atau menggunakan program berasingan. Ini dapat meningkatkan pengalaman pengguna dan produktiviti. OnlyOffice juga menyokong kerjasama masa nyata, yang membolehkan beberapa pengguna bekerja pada dokumen yang sama serentak. Selain itu, OnlyOffice menyokong pelbagai format dokumen, termasuk format Microsoft Office dan format OpenDocument.

Bolehkah saya menggunakan OnlyOffice dengan React?

Ya, OnlyOffice boleh digunakan dengan React. API OnlyOffice menyediakan komponen React yang boleh anda gunakan untuk mengintegrasikan sahaja ke dalam aplikasi React anda. Komponen ini menyediakan satu set prop dan kaedah untuk bekerja dengan dokumen. Anda boleh menggunakan alat dan kaedah ini untuk membuka, mengedit, dan menyimpan dokumen dalam aplikasi React anda. disediakan oleh API OnlyOffice. Objek ini membolehkan anda menukar penampilan dan tingkah laku antara muka sahaja. Sebagai contoh, anda boleh menukar skema warna, menyembunyikan atau menunjukkan butang tertentu, dan membolehkan atau melumpuhkan ciri -ciri tertentu. Ia menggunakan penyulitan SSL untuk melindungi data dalam transit, dan ia membolehkan anda mengawal siapa yang mempunyai akses kepada dokumen anda. Selain itu, OnlyOffice adalah sumber terbuka, yang bermaksud kodnya tersedia secara terbuka untuk semakan dan pengawasan. Ini bermakna bahawa pelbagai pengguna boleh bekerja pada dokumen yang sama secara serentak, melihat perubahan masing -masing dalam masa nyata. Ini boleh meningkatkan kerja berpasukan dan produktiviti. API OnlyOffice menyediakan komponen untuk rangka kerja ini, yang membolehkan anda mengintegrasikan sahaja ke dalam aplikasi sudut atau vue anda. Format dokumen, termasuk format Microsoft Office (seperti .docx, .xlsx, dan .pptx) dan format OpenDocument (seperti .odt, .ods, dan .odp). Ia juga menyokong format lain, seperti .txt dan .csv.

Bolehkah saya menggunakan OnlyOffice pada peranti mudah alih? Ini bermakna pengguna boleh membuat, melihat, dan mengedit dokumen pada telefon pintar atau tablet mereka, memberikan pengalaman lancar di seluruh peranti. Komuniti untuk pemaju sahaja. Komuniti ini menyediakan forum untuk pemaju untuk bertanya soalan, berkongsi tips dan trik, dan bekerjasama dalam projek. Ia adalah sumber yang hebat untuk sesiapa sahaja yang sedang dibangunkan dengan OnlyOffice.

Atas ialah kandungan terperinci Tambahkan fungsi pejabat ke aplikasi web anda dengan OnlyOffice. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!