Fonctionnalités principales

Univer Docs fournit les fonctionnalités essentielles d’un éditeur de documents, notamment un moteur de formules, un moteur de rendu, un système de conception et une bibliothèque de composants d’interface. Ensemble, elles forment une puissante plateforme de traitement de documents qui prend en charge différents formats et des opérations complexes.

Fonctionnalités

Les principales fonctionnalités d’Univer Docs sont les suivantes :

• Rendu des documents : permet le rendu des documents Univer Docs, y compris celui du curseur et des sélections.
• Mise en page des documents : permet la composition de l’ensemble du texte, notamment le réglage des paragraphes, l’espacement avant et après les paragraphes, leur alignement, les retraits et les retraits suspendus. Elle offre également des fonctions de composition au sein des paragraphes, telles que la compression et la suspension de la ponctuation, l’espacement des caractères et la coupure des mots occidentaux.
• Calcul des formules : permet d’ajouter et de calculer des formules Univer (en cours de développement).
• Gestion des tableaux : permet d’insérer et de modifier des tableaux simples, notamment d’ajouter ou de supprimer des lignes et de modifier des cellules.
• Styles de documents : Univer Docs prend en charge aussi bien les styles de documents traditionnels similaires à ceux de Microsoft Word (avec pagination, en-têtes et pieds de page) que les styles de documents modernes similaires à ceux de Notion. Avec un style moderne, aucune pagination n’est nécessaire, le contenu peut s’étendre indéfiniment et différents éléments de niveau bloc, officiels ou tiers (texte, images, tableaux, etc.), peuvent être combinés dans une même mise en page (fonctionnalité prévue).
• En-têtes et pieds de page : permet d’insérer des en-têtes et des pieds de page, d’en modifier le contenu et de distinguer la première page des pages paires et impaires (uniquement dans les documents traditionnels).
• Listes : permet d’insérer et de modifier des listes ordonnées, non ordonnées et de tâches, ainsi que d’augmenter ou de réduire leur retrait.
• Emoji et symboles : insérez des emoji et des symboles depuis le ruban Docs.
• Système de plugins : permet d’utiliser des plugins personnalisés, tels que des plugins de formules, d’images ou de graphiques. Il s’agit également de l’une des capacités architecturales fondamentales d’Univer.

Mode plugin

Installation

pnpm add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui

npm install @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui

yarn add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui

bun add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui

Utilisation

import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { FUniver } from '@univerjs/core/facade'import DesignEnUS from '@univerjs/design/locale/en-US'import { UniverDocsPlugin } from '@univerjs/docs'import { UniverDocsUIPlugin } from '@univerjs/docs-ui'import DocsUIEnUS from '@univerjs/docs-ui/lib/locale/en-US'import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'import { UniverUIPlugin } from '@univerjs/ui'import UIEnUS from '@univerjs/ui/locale/en-US'import '@univerjs/docs/facade'import '@univerjs/docs-ui/facade'import '@univerjs/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs/docs-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(DesignEnUS, UIEnUS, DocsUIEnUS),  },})univer.registerPlugin(UniverRenderEnginePlugin)univer.registerPlugin(UniverFormulaEnginePlugin)univer.registerPlugin(UniverUIPlugin, {  container: 'app',})univer.registerPlugin(UniverDocsPlugin)univer.registerPlugin(UniverDocsUIPlugin)const univerAPI = FUniver.newAPI(univer)univerAPI.createDocument({})

Plugins et configuration

@univerjs/core

Ce plugin constitue la bibliothèque principale d’Univer. Il fournit les fonctionnalités de base, comme la création d’instances Univer, les thèmes et les langues.

import type { IUniverConfig } from '@univerjs/core'import { LocaleType, Univer } from '@univerjs/core'const config: IUniverConfig = {  locale: LocaleType.FR_FR,  darkMode: false,}const univer = new Univer(config)

Référence : IUniverConfig

@univerjs/engine-render

Ce plugin est le moteur de rendu d’Univer. Il assure le rendu, notamment celui des barres de défilement, du curseur et des sélections. Il fournit le plugin UniverRenderEnginePlugin.

Référence : @univerjs/engine-render

@univerjs/engine-formula

Ce plugin est le moteur de formules d’Univer. Il assure le calcul et le traitement des formules et fournit le plugin UniverFormulaEnginePlugin.

Référence : @univerjs/engine-formula

@univerjs/design

Ce plugin est le système de conception d’Univer. Il fournit tous les composants et styles de base.

Voir : chapitre consacré à l’interface utilisateur

@univerjs/ui

Ce plugin constitue la base de l’interface utilisateur d’Univer. Il fournit le plugin UniverUIPlugin.

Le plugin UniverUIPlugin propose plusieurs options de configuration permettant de définir la disposition générale de l’interface.

interface IUniverUIConfig {  // Container element, can be a string or a DOM element  container?: string | HTMLElement  // Whether to show the header  header?: boolean  // Whether to show the header toolbar  toolbar?: boolean  // The type of the header toolbar. 'classic': default classic mode; 'grid': two-row grid mode; 'collapsed': compact mode; 'simple': ungrouped mode  ribbonType?: RibbonType  // Whether to show the context menu  contextMenu?: boolean  // Whether to disable auto focus  disableAutoFocus?: true  // Dependency injection override configuration  override?: DependencyOverride  // Menu configuration  menu?: MenuConfig}

L’option de configuration menu permet de définir simplement si certains éléments de menu doivent être affichés ou masqués :

univer.registerPlugin(UniverDocsUIPlugin, {  menu: {    'doc.command.set-inline-format-bold': {      hidden: true,    },    'doc.command.set-inline-format-italic': {      hidden: true,      disabled: true,    },  },})

Ici, 'doc.command.set-inline-format-bold' et 'doc.command.set-inline-format-italic' sont les noms des commandes correspondant aux éléments de menu concernés.

Référence : @univerjs/docs-ui

@univerjs/docs

Ce plugin est le plugin principal d’Univer Docs. Il fournit le plugin UniverDocsPlugin.

Référence : @univerjs/docs

@univerjs/docs-ui

Ce plugin est le plugin d’interface utilisateur d’Univer Docs. Il comprend les composants d’interface et les interactions de l’éditeur de documents, et fournit le plugin UniverDocsUIPlugin.

Référence : @univerjs/docs-ui

Mode prédéfini

Installation

pnpm add @univerjs/presets @univerjs/preset-docs-core

npm install @univerjs/presets @univerjs/preset-docs-core

yarn add @univerjs/presets @univerjs/preset-docs-core

bun add @univerjs/presets @univerjs/preset-docs-core

Utilisation

import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-core/lib/index.css'const { univer, univerAPI } = createUniver({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(UniverPresetDocsCoreEnUS),  },  presets: [UniverDocsCorePreset()],})univerAPI.createDocument({})

Préréglages et configuration

@univerjs/presets

Ce préréglage fournit la méthode createUniver permettant de créer une application Univer et expose toutes les méthodes et tous les objets de @univerjs/core et @univerjs/design.

La méthode createUniver accepte un objet de configuration comprenant notamment les options de thème, de langue et de préréglages. Elle renvoie une instance de Univer, univer, ainsi qu’une instance de FUniver, univerAPI, qui permet d’appeler l’API Facade.

interface ICreateUniverParameter {  // Univer instance theme, default is `defaultTheme`  theme: IStyleSheet  // Whether to use dark mode, default is false  darkMode?: boolean  // The locale of the Univer instance  locale: LocaleType  region?: LocaleType  // The locale objects to use, with keys as locale types and values as corresponding locale objects  locales: ILocales  // The log level of the Univer instance  logLevel?: LogLevel  // The list of presets to use.  presets: IPresets[]  // The list of plugins to use.  plugins: IPlugins[]}

Référence : createUniver

@univerjs/preset-docs-core

Il s’agit du préréglage principal d’Univer Docs. Il réunit les fonctions essentielles aux documents électroniques, telles que l’éditeur de documents, le moteur de formules et le moteur de rendu.

interface IUniverDocsCorePresetConfig {  // Container element, can be a string or a DOM element  container?: string | HTMLElement  // Whether to show the header  header?: boolean  // Whether to show the header toolbar  toolbar?: boolean  // The type of the header toolbar. 'classic': default classic mode; 'grid': two-row grid mode; 'collapsed': compact mode; 'simple': ungrouped mode  ribbonType?: RibbonType  // Whether to show the footer  footer?: boolean  // Whether to show the context menu  contextMenu?: boolean  // Whether to disable auto focus  disableAutoFocus?: true  // Menu configuration  menu?: MenuConfig  // ... More configuration options}

L’option de configuration menu permet de définir simplement si certains éléments de menu doivent être affichés ou masqués :

UniverDocsCorePreset({  menu: {    'doc.command.set-inline-format-bold': {      hidden: true,    },    'doc.command.set-inline-format-italic': {      hidden: true,      disabled: true,    },  },})

Ici, 'doc.command.set-inline-format-bold' et 'doc.command.set-inline-format-italic' sont les noms des commandes correspondant aux éléments de menu concernés.

Référence : @univerjs/preset-docs-core

Contrôles d’affichage

Le ruban Affichage propose la mise en page, le zoom et le plein écran. Le sélecteur de zoom et la barre inférieure reflètent la même échelle du document ; la modifier ne change pas la mise en forme du texte.

Ordre des menus et disposition en grille

Définissez le MenuConfig commun avec les identifiants de menu Docs, puis appliquez-le dans le mode choisi :

import type { MenuConfig } from '@univerjs/ui'const menu: MenuConfig = {  'ribbon.start.format': { order: -1 },  'doc.command.set-inline-format-bold': {    order: 0,    gridLayout: { row: 2, column: 2 },  },  'doc.command.set-inline-format-italic': {    gridLayout: { row: 2, column: 1 },  },}

Choisissez votre mode et ajoutez ces options à votre initialisation existante. Conservez les autres plugins et les paramètres de langue, de thème et de conteneur ; ne réenregistrez pas le même plugin.

import { UniverUIPlugin } from '@univerjs/ui'univer.registerPlugin(UniverUIPlugin, {  ribbonType: 'grid',  menu,})

import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import { createUniver } from '@univerjs/presets'const { univerAPI } = createUniver({  presets: [    UniverDocsCorePreset({      ribbonType: 'grid',      menu,    }),  ],})

Après l’initialisation, utilisez updateMenuConfig() pour modifier l’instance existante :

import '@univerjs/ui/facade'univerAPI.updateMenuConfig(menu)

order trie les éléments de même niveau par ordre croissant. gridLayout s’applique uniquement au Ribbon en grille, avec des coordonnées à partir de 1 dans chaque groupe de deux lignes. Les mises à jour conservent les propriétés omises et actualisent immédiatement l’interface. En mode plugin, transmettez menu à UniverUIPlugin et importez @univerjs/ui/facade avant d’utiliser la Facade. Consultez le guide de disposition des menus pour les champs et les boutons personnalisés.

Options de collage

Docs propose de conserver la mise en forme source, d’adopter celle de destination ou de garder uniquement le texte. Le mode destination conserve notamment gras et italique tout en appliquant les styles du texte et des paragraphes cibles. Le mode texte retire images et liens et convertit les tableaux en texte séparé par des tabulations. Les options après collage modifient le dernier collage. Si le navigateur bloque la lecture du presse-papiers, utilisez le clavier ou le collage système.

Sur ordinateur, le menu Coller du Ribbon se trouve à côté d’annuler et rétablir et se masque pendant l’édition du texte d’une forme. Le sous-menu Collage spécial appartient au groupe de mise en forme des menus contextuels sur ordinateur et mobile.

Champs des en-têtes et pieds de page

Dans les documents traditionnels, leur édition ouvre un Ribbon contextuel pour l’insertion, la navigation, les options de première page et de pages paires/impaires, et la position. Vous pouvez insérer la page courante, le nombre total de pages ou une date et heure localisées. Les champs de page affichent la valeur propre à chaque page. Pour la date/heure, activez la mise à jour automatique pour créer un champ, ou désactivez-la pour insérer du texte fixe. Les champs date/heure sont actualisés à l’ouverture ou avec Mettre à jour les champs, pas en continu. Les documents modernes n’utilisent pas d’en-têtes ni de pieds de page paginés.

Plan du document

Le plan à gauche sert à naviguer entre les titres, sans insérer de sommaire dans le contenu. Sans toc, il est activé pour les documents Modern et désactivé pour les documents Traditional. true ou false remplace ce choix. Le panneau se replie si l’espace manque ou si un tableau le recouvre, puis se rouvre quand la place est disponible.

Ajoutez cette option à votre initialisation existante sans enregistrer deux fois le même plugin.

import { UniverDocsUIPlugin } from '@univerjs/docs-ui'univer.registerPlugin(UniverDocsUIPlugin, { toc: true })

import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import { createUniver } from '@univerjs/presets'const { univerAPI } = createUniver({  presets: [UniverDocsCorePreset({ container: 'app', toc: true })],})

Replier les sections

Les documents Modern (documentStyle.documentFlavor: DocumentFlavor.MODERN) affichent un triangle à côté des titres de niveau 1 à 5 dont la section contient du contenu. Le repli conserve le titre et masque le contenu jusqu’au prochain titre de niveau égal ou supérieur, y compris les sous-titres, tableaux et images. Chaque cellule de tableau et chaque colonne Modern possède sa propre hiérarchie.

Cette fonction est indépendante de toc. Les documents Traditional et les éditeurs de texte intégrés n’affichent pas ces commandes. Rouvrir un parent conserve l’état des sous-titres.

IParagraph.headingCollapsed est enregistré dans le snapshot Univer. Seul true replie la section. Le contenu reste présent, et l’état prend en charge annuler/rétablir et la collaboration : il est partagé entre éditeurs. Une sélection masquée rejoint le titre visible. La conservation lors des échanges Office n’est pas garantie.

Pour modifier cet état par code, exécutez la commande enregistrée avec l’ID du document et le paragraphId stable du snapshot. Utilisez collapsed: false pour déplier.

import { SetHeadingCollapsedCommand } from '@univerjs/docs'const changed = await univerAPI.executeCommand(SetHeadingCollapsedCommand.id, {  unitId: documentId,  paragraphId: headingParagraphId,  collapsed: true,})

La commande renvoie false sans changement ou si la cible est invalide : document Traditional, titre masqué par un ancêtre, section vide à replier ou permission manquante. Voir le contrat de la commande.