Comment personnaliser l'interface utilisateur de CODE et masquer des barres d'outils spécifiques

Réponse courte : Dans CODE, modifiez le style général de la barre d'outils à l'aide des options d'affichage Compact ou Onglets. Pour masquer un onglet ou une commande, utilisez l'API PostMessage de l'hôte WOPI ; les menus classiques du visualiseur ne permettent pas de masquer définitivement les commandes pour tous les utilisateurs. Les administrateurs peuvent définir le mode d'interface par défaut d'un serveur, tandis que les hôtes intégrant CODE peuvent envoyer des messages d'affichage ou de masquage au niveau de la session.

Choisissez la méthode correspondant à votre niveau d'accès. Si vous souhaitez simplement plus d'espace pour votre document, réduisez la barre d'outils ou passez en mode compact. Si votre intégration WOPI doit masquer l'onglet Aide ou une commande de mise en forme, envoyez le message PostMessage correspondant une fois l'éditeur prêt. Si votre objectif est d'empêcher une action telle que l'impression, le téléchargement ou la modification, utilisez également la fonctionnalité ou l'autorisation WOPI appropriée ; masquer un bouton modifie la présentation, mais pas l'autorisation.

Choisissez la personnalisation qui vous convient

Le manuel du SDK concerné indique Hide_NotebookTabque cette fonctionnalité est disponible à partir de la version 24.04.11.1 et Hide_Commandde la version 24.04.11.2. Les packages de distribution CODE et les versions d'intégration peuvent différer ; vérifiez donc la version du serveur que vous utilisez avant de vous fier à un message de l'API.

Modifier l'affichage par défaut entre Compact et Onglets

L'affichage compact utilise un menu et une barre d'outils réduite. L'affichage par onglets regroupe les commandes dans les onglets de la barre de notes. Le paramètre serveur est user_interface.mode, avec les valeurs prises en charge compactet tabbed. Les anciennes étiquettes telles que classicet notebookbarsont obsolètes et remplacées par ces noms.

Pour une valeur par défaut contrôlée par l'administrateur, modifiez l' <mode>entrée existante dans la <user_interface>sectioncoolwsd.xml :

<user_interface>
  <mode type="string" desc="Controls the user interface style. The 'default' means: Take the value from ui_defaults, or decide for one of compact or tabbed (default|compact|tabbed)" default="default">tabbed</mode>
</user_interface>

Utilisez compactplutôt cette option tabbedpour le menu compact. Dans un fichier de configuration réel, modifiez l'entrée de mode existante au lieu d'en ajouter une seconde. Le chemin de configuration exact et la procédure de redémarrage dépendent de l'installation de CODE : package, conteneur ou autre plateforme. Suivez la méthode de configuration de votre déploiement, redémarrez ou rechargez le service si nécessaire, puis ouvrez une nouvelle session pour confirmer la configuration par défaut.

Ceci définit un mode d'interface par défaut ; cela ne masque aucune commande spécifique. Un utilisateur ou un intégrateur peut avoir des préférences d'interface enregistrées qui prévalent, selon la configuration de l'état de l'interface utilisateur enregistré du serveur. Si un navigateur s'ouvre systématiquement dans une vue différente, effectuez un nouveau test et vérifiez le comportement des préférences utilisateur de l'intégrateur avant de modifier d'autres paramètres du serveur.

Réduire la barre d'outils sans supprimer les commandes

Lorsque l'objectif est simplement d'augmenter l'espace disponible dans le document, il suffit généralement de réduire la barre d'onglets. Le Collapse_Notebookbarmessage du SDK masque les boutons de la barre d'onglets ; les noms des onglets restent visibles afin que les utilisateurs puissent les afficher à nouveau. Ce même message masque également la barre de boutons en mode compact. Il s'agit d'une modification d'affichage réversible, et non d'une désactivation des fonctionnalités d'édition.

Dans une interface compatible, l'utilisateur peut réduire ou développer la barre de notes en interagissant avec ses onglets. Le comportement précis du clic ou du double-clic peut varier selon l'affichage et le moment du relâchement. Si les utilisateurs doivent restaurer une barre réduite, conservez les noms des onglets visibles et testez l'action dans la même version de CODE qu'ils utilisent.

Masquer un onglet ou une commande dans une intégration WOPI

Le masquage par session nécessite une application hôte intégrant CODE dans une iframe et capable de lui envoyer des messages. Il ne s'agit pas d'un paramètre générique pouvant être copié-collé coolwsd.xml. L'API PostMessage utilise des messages contenant un identifiant MessageId, un horodatage et un champ optionnel Values. L'hôte WOPI doit terminer l'échange de disponibilité avant d'envoyer les commandes de l'éditeur. Configurez le WOPI PostMessageOriginpour la page hôte et utilisez l'origine exacte de l'iframe CODE comme cible du message du navigateur ; n'utilisez pas d'origine générique.

Une fois que l'hôte a reçu l' App_LoadingStatusévénement de disponibilité approprié et l'a envoyé Host_PostmessageReady, il peut envoyer un message de masquage. Par exemple, les appels suivants masquent l'onglet Aide et la commande de soulignement pour la session d'éditeur ouverte :

const frame = document.getElementById("collaboraFrame");
const collaboraOrigin = "https://office.example.com";

function sendToCollabora(MessageId, Values = {}) {
  frame.contentWindow.postMessage({
    MessageId,
    SendTime: Date.now(),
    Values
  }, collaboraOrigin);
}

// Call after the WOPI PostMessage readiness exchange.
sendToCollabora("Hide_NotebookTab", { id: "Help" });
sendToCollabora("Hide_Command", { id: ".uno:Underline" });

Remplacez office.example.compar l'origine de votre propre iframe CODE. L'exemple illustre la structure du message ; intégrez-le au cycle de vie réel de l'iframe hôte et vérifiez l'origine des messages entrants avant de répondre. La documentation CODE précise que les messages hôtes envoyés précédemment Host_PostmessageReadypeuvent être ignorés.

Quel message devez-vous utiliser ?

• Hide_NotebookTabUtilisez cette fonction pour un onglet entier en mode onglets. Il ids'agit de l'identifiant de l'onglet, par exemple : `<a> Help`. Show_NotebookTabElle annule la modification. L'onglet reste masqué pour la session jusqu'à réception d'un message d'affichage.
• Hide_CommandUtilisez cette option lorsque la commande doit disparaître du menu, de la barre d'outils et des menus contextuels. Un exemple d'ID est.uno:Underline : . Show_Commandinverse son comportement. Utilisez cette option uniquement si vous souhaitez supprimer la commande de toutes ces interfaces.
• Hide_ButtonUtilisez cette option pour masquer un seul bouton plutôt que toutes les entrées d'interface utilisateur de la commande. Son identifiant correspond à celui d'un bouton de la barre d'outils, et non nécessairement au nom de la commande UNO. Collabora indique que ces identifiants restent généralement stables, mais cela n'est pas garanti ; vérifiez-les auprès du code source pour votre version et le format de votre appareil.
• Hide_MenubarCette option masque la barre de menus dans son ensemble. Il ne s'agit pas d'une commande spécifique et elle ne doit pas être confondue avec le masquage d'un onglet de la barre de menus.

L'API postMessage est conçue pour un hébergeur d'intégration. Si vous utilisez Nextcloud, ownCloud ou une autre plateforme, vérifiez si son connecteur propose un paramètre compatible avant de développer un code hôte personnalisé. Évitez d'injecter du CSS dans la page de l'éditeur : cette méthode est instable d'une version à l'autre et ne fait que masquer visuellement les commandes.

Vérifiez que la modification correspond à votre cas d'utilisation.

Ouvrez un document de test en utilisant le même navigateur, le même type de document, les mêmes autorisations et la même version de CODE que vos utilisateurs. Vérifiez le mode sélectionné, assurez-vous que seul l'onglet ou la commande souhaité(e) est masqué(e) et testez l'affichage du message correspondant ou le développement de la barre d'outils. Répétez l'opération pour Writer, Calc et Impress si votre intégration couvre ces trois applications ; les commandes disponibles et les identifiants de barre d'outils peuvent varier d'un module à l'autre.

Si un contrôle masqué apparaît toujours, vérifiez que l'hôte a bien envoyé la commande Host_PostmessageReady, que son origine WOPI PostMessageOriginet celle de sa cible iframe sont correctes, et que le message utilise l'identifiant et l'orthographe attendus. Vérifiez également la version du serveur par rapport à la configuration de base documentée. Un masquage visuel réussi ne supprime pas la commande du moteur de document sous-jacent et n'établit aucune restriction de sécurité. Utilisez les permissions WOPI et la politique du serveur pour le contrôle d'accès.

Références officielles

• Manuel du SDK Collabora Online, 24.04 : configuration et API PostMessage
• Documentation de l'API PostMessage du SDK Collabora Online
• Notes de version de CODE 26.04
• Notes de version de CODE 21.11 : Option permettant d’afficher ou de masquer les vues compacte et à onglets