I. Présentation d’ONLYOFFICE▲
ONLYOFFICE est une suite bureautique en ligne à code source ouvert qui comporte un logiciel de traitement de texte, un tableur et un outil de présentation. ONLYOFFICE est distribué à titre gratuit tant que vous respecterez les termes de la licence GNU AGPL v.3.
ONLYOFFICE met à disposition des utilisateurs des outils de la mise en forme traditionnels et assure la coédition de documents en temps réel :
- deux modes de coédition (rapide et strict) ;
- permissions d’accès aux documents flexibles (accès complet, lecture seule, révision, remplissage de formulaire, commentaire) ;
- suivi de modifications avec trois modes d’affichage (balisage, final, original) ;
- révision ;
- historique de versions ;
- chat et commentaires ;
- comparaison de documents.
À partir de la version la plus récente, l’onglet “Collaboration” contient le bouton “Comparer le document actif avec un autre document” qui permet de comparer deux documents et voir leurs différences à l’aide des marques de révision (il existe trois modes d’affichage, comme pour la révision). De plus, il est possible de fusionner deux versions du document puis d’enregistrer le résultat comme étant une nouvelle version unique.
|
|
Comme nous l’avons déjà pu voir, ONLYOFFICE peut être intégrée avec des sites web ou des applications écrites en différents langages de programmation. ONLYOFFICE fournit les API permettant aux développeurs d’ajouter l’édition de documents à leurs plateformes de stockage, de partage et de collaboration.
Dans ce tutoriel publié précédemment, nous avons appris à créer l’application d’intégration pour relier ONLYOFFICE avec l’application GED (Gestion Électronique des Documents) écrite en langage PHP. Comme vous le savez déjà, pour rendre l’intégration possible et permettre au connecteur d’ajouter les outils de rédaction à la plateforme tierce, il faut accorder à ONLYOFFICE les autorisations suivantes :
- Ajouter et exécuter le code ;
- Accéder aux fichiers pour les télécharger et enregistrer sans demander aucune donnée d’utilisateur ( comme, les cookies du navigateur ) ;
- Ajouter des boutons à l’interface utilisateur ;
- Ouvrir une nouvelle page où ONLYOFFICE puisse exécuter le script pour ajouter un éditeur ;
- Paramétrer l’application.
Pour voir comment ces autorisations sont mises en place, consultez ce tutoriel.
II. Intégration de ONLYOFFICE dans la GED développée en Python▲
Dans cet article nous visons à montrer le mécanisme de l’intégration de ONLYOFFICE dans la Gestion Électronique des Documents (la GED) développée en Python, un des langages de programmation les plus populaires. Afin de rendre les éditeurs opérationnels depuis l’interface de la GED, nous devons les doter de fonctionnalités suivantes :
- ouverture du fichier pour la lecture ;
- édition du document ;
- enregistrement du document ;
- gestion de l’accès des utilisateurs au document ;
- configuration de coédition.
III. Voyons de plus près chacune de ces étapes.▲
III-A. Installation des éléments nécessaires à l’intégration▲
Préparons les composants clés de l’intégration : ONLYOFFICE Document Server et l’application (la GED) en Python.
III-A-1. Installons ONLYOFFICE Document Server avec les éditeurs▲
Vous pouvez utiliser Docker ou les packs snap, .deb ou .rpm. Il est recommandé d'installer Document Server et toutes les dépendances à l’aide du Docker :
docker run -itd -p 80:80 onlyoffice/documentserver-deIl est à noter que si vous envisagez de déployer ONLYOFFICE en tant qu’une partie de votre solution cloud ou autohébergée, la solution ONLYOFFICE Developer Edition, distribuée sous la licence commerciale, est requise.
III-A-2. Si vous avez une application GED en Python, assurez-vous qu'elle corresponde aux conditions▲
- L’application contient plusieurs fichiers à ouvrir pour la lecture ou l’édition.
- L’application permet de télécharger les fichiers.
Sinon, on peut créer l’application GED en utilisant le framework Bottle : pip install bottle .
Ensuite, il nous faut créer les fichiers suivants : main.py (le code de l’application) et index.tpl (le modèle de fichier), et ajouter le code ci-dessous dans le fichier main.py :
2.
3.
4.
5.
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
Une fois que l’application est lancée, une page vide s’affiche à l’adresse IP http://localhost:8080.
Pour que le Document Server puisse générer de nouveaux documents, nous créons les fichiers par défaut et faisons la liste de leurs titres dans le fichier modèle. Nous créons un dossier files avec trois fichiers (.docx, .xlsx et .pptx).
La méthode listdir permet de lister tous les noms de fichiers d’un répertoire.
from os import listdirCréons maintenant une variable pour tous les noms de fichiers du dossier files :
sample_files = [f for f in listdir('files')]Nous allons utiliser la méthode template pour utiliser cette variable dans le fichier modèle :
Une fois que l’application est redémarrée, la liste des noms s’affiche sur la page. Dès maintenant nous pouvons mettre ces fichiers à disposition de tous les utilisateurs.
Voici la méthode pour le faire :
2.
3.
@get("/files/<filepath:re:.*\.*>")
def show_sample_files(filepath):
return static_file(filepath, root="files")
Maintenant nous avons tous les composants pour passer à l’intégration.
III-B. Comment ouvrir les documents à ONLYOFFICE depuis la GED écrite en Python▲
Avant tout, connectons l’API des éditeurs dans le fichier modèle :
<script type="text/javascript" src="editor_url/web-apps/apps/api/documents/api.js"></script>editor_url : c’est le lien vers les éditeurs des documents.
Le bouton pour ouvrir chaque fichier pour la lecture :
<button onclick="view('files/{{file}}')">view</button>Ensuite nous ajoutons un élément <div> avec id :
<div id="editor"></div>L’éditeur du document s’ouvrira dans ce <div> après l’appel à la fonction suivante :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
<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>
Il y a deux arguments pour la fonction de l’éditeur du document : id de l’élément où les éditeurs seront ouverts et un JSON contenant les paramètres de l’éditeur.
Dans cet exemple, nous utilisons les paramètres par défaut tels que :
- documentType est le type du fichier qui se détermine par son format (.docx, .xlsx, .pptx pour les documents texte, les feuilles de calcul et les présentations respectivement) ;
- document.url est le lien vers le fichier à ouvrir ;
- editorConfig.mode .
Ajoutons aussi title : c’est le nom du fichier qui s’affichera dans les éditeurs.
Maintenant nous avons tous les éléments nécessaires à la lecture des fichiers à ONLYOFFICE depuis l’interface de notre application en Python.
III-C. Comment éditer les documents à ONLYOFFICE▲
Ajoutons le bouton « Éditer » :
<button onclick="edit('files/{{file}}')">edit</button>Nous avons besoin de créer une nouvelle fonction pour ouvrir les documents à l’édition. La création de cette fonction est semblable à celle que nous venons d’effectuer pour la lecture.
Maintenant nous avons trois fonctions :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
<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 ferme un éditeur ouvert.
Le paramètre editorConfig a par défaut une valeur {"mode": "edit"}, c’est pourquoi la fonction edit() n’y figure pas.
Maintenant nous pouvons ouvrir les fichiers pour les éditer à ONLYOFFICE depuis l’interface de la GED développée en Python.
III-D. Comment enregistrer les documents à ONLYOFFICE▲
Quand nous travaillons sur le document, ONLYOFFICE enregistre toujours toutes les modifications. Une fois que l’éditeur est fermé, le Document Server crée la version du fichier à enregistrer et envoie une demande à l’adresse callbackUrl. Cette demande contient document.key et le lien vers un fichier récemment créé.
Nous utilisons document.key pour accéder à une version précédente du fichier et la remplacer par une version la plus à jour. Comme nous n’avons pas de base de données, nous envoyons juste le nom du fichier en utilisant callbackUrl.
Spécifions callbackUrl dans les paramètres de editorConfig.callbackUrl. Une fois ce paramètre ajouté, la méthode edit() s’affiche de manière suivante :
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
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
}
});
}
Maintenant nous avons besoin d’écrire une méthode pour enregistrer le fichier après la requête POST à l’adresse de /callback :
2.
3.
4.
5.
6.
7.
8.
@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 c’est le fichier créé
Après la fermeture de l’éditeur la version du fichier la plus à jour est enregistrée.
III-E. Comment gérer l’accès des utilisateurs aux fichiers à ONLYOFFICE▲
Si dans votre application il y a plusieurs utilisateurs, créez leurs identifiants (id et nom d’utilisateur) dans les paramètres de l’éditeur. De cette façon, vous pouvez voir qui est en train d’éditer le document.
À titre d’exemple, ajoutons à l’interface l’option de sélectionner l’utilisateur :
2.
3.
4.
5.
6.
<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>
Ajoutons l’appel de la fonction pick_user() dans le début du tag <script>. Dans la fonction même, nous initialisons les variables responsables pour id et le nom d’utilisateur.
2.
3.
4.
5.
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;
}
Maintenant nous avons besoin d’ajouter les paramètres utilisateur dans la configuration de l’éditeur en utilisant Config.user.id et editorConfig.user.name. Ajoutons ces paramètres dans la fonction de l’édition du fichier de la configuration de l’éditeur.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
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
}
}
});
}
III-F. Comment coéditer les documents à ONLYOFFICE▲
Après avoir donné l’accès au document, il est indispensable de paramétrer la fonction de coédition qui s’ajoute par l’utilisation du même document.key pour le même document dans les paramètres de l’éditeur. Sans ce document.key l’éditeur créera une nouvelle session d’édition à chaque ouverture du document.
Ensuite nous avons besoin de créer une clé à part pour chaque document afin que les utilisateurs puissent se connecter à la même session d’édition et modifier le document collaborativement. La clé a le format suivant : filename + "_key". Nous l’ajoutons à toutes les configurations où figure le document.
2.
3.
4.
5.
document: {
url: "host_url" + '/' + filepath,
title: filename,
key: filename + '_key'
},
En suivant les étapes de ce tutoriel, vous pouvez désormais créer votre propre application d'intégration qui permet à ONLYOFFICE d’accéder aux fichiers de la GED, les ouvrir pour l’édition, les enregistrer. De plus, le connecteur permet à ONLYOFFICE d’établir les paramètres avancés de la rédaction collaborative tels que la gestion des permissions d’accès des utilisateurs aux fichiers et coédition des documents en temps réel.
IV. Remerciements Developpez.com▲
Nous tenons à remercier Malick pour la mise au gabarit et Claude Leloup pour la relecture orthographique.