Formes

La fonctionnalité de formes permet d’insérer et de modifier des formes et des dessins dans un document, notamment des formes géométriques de base, des flèches et des éléments d’organigramme.

Introduction

Dans Univer Docs, les formes vous permettent de :

• Insérer des formes géométriques : ajoutez des rectangles, des cercles, des flèches, etc.
• Personnaliser leur apparence : ajustez les couleurs de remplissage, les bordures et le texte.
• Les positionner librement : placez les formes où vous le souhaitez dans le document.

Mode plugin

Installation

pnpm add @univerjs-pro/engine-formula @univerjs-pro/docs-shape @univerjs-pro/docs-shape-ui

npm install @univerjs-pro/engine-formula @univerjs-pro/docs-shape @univerjs-pro/docs-shape-ui

yarn add @univerjs-pro/engine-formula @univerjs-pro/docs-shape @univerjs-pro/docs-shape-ui

bun add @univerjs-pro/engine-formula @univerjs-pro/docs-shape @univerjs-pro/docs-shape-ui

Utilisation

import { UniverDocsShapePlugin } from '@univerjs-pro/docs-shape'import { UniverDocsShapeUIPlugin } from '@univerjs-pro/docs-shape-ui'import DocsShapeUIEnUS from '@univerjs-pro/docs-shape-ui/locale/en-US'import { UniverProFormulaEnginePlugin } from '@univerjs-pro/engine-formula'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-shape-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      DocsShapeUIEnUS,     ),  },})univer.registerPlugin(UniverProFormulaEnginePlugin)univer.registerPlugin(UniverDocsShapePlugin)univer.registerPlugin(UniverDocsShapeUIPlugin)

Si vous disposez d’une licence commerciale Univer, consultez la page Utiliser une licence côté client pour connaître la procédure de configuration.

Prise en charge mobile

Configurez d’abord l’éditeur mobile. Dans l’initialisation en mode plugin de cette page, remplacez les inscriptions de bureau ci-dessous par les exports mobiles des mêmes paquets avant d’ouvrir un document. Conservez modèles, styles, traductions et imports Facade ; n’enregistrez pas les deux variantes.

Modifier le texte d’une forme

Utilisez la forme renvoyée par insertShape() ci-dessous ou dans l’exemple précédent. getText() renvoie un objet FShapeText actif. Lisez le texte avec getPlainText(), remplacez-le entièrement avec setText() et réglez la police, la couleur et l’alignement.

import '@univerjs-pro/docs-shape/facade'const document = univerAPI.getActiveDocument()const paragraph = document?.getParagraphs()[0]if (!document || !paragraph) throw new Error('No active document paragraph')const shape = document.insertShape({  shapeType: univerAPI.Enum.ShapeTypeEnum.Rect,  placement: {    wrappingStyle: univerAPI.Enum.TextWrappingStyle.INLINE,    anchor: { paragraphId: paragraph.getId(), segmentId: paragraph.getSegmentId() },  },})if (!shape) throw new Error('Shape is not available')const shapeText = shape.getText()console.log(shapeText.getPlainText())shapeText  .setText('Quarterly review')  .setFontSize(18)  .setColor('#2563eb')  .setBold(true)  .setHorizontalAlign(univerAPI.Enum.HorizontalAlign.CENTER)  .setVerticalAlign(univerAPI.Enum.VerticalAlign.MIDDLE)

setText() remplace le texte existant. Utilisez setRichText() pour combiner plusieurs styles. Pour modifier le texte enrichi existant, appelez getRichText()?.copy(), modifiez le constructeur puis transmettez-le à setRichText(). Ses modifications ne sont pas appliquées automatiquement. Voir aussi les styles de texte et les marges et la disposition du bloc de texte.

const richText = univerAPI.newRichText()  .text('Quarterly ')  .bold('review')shapeText.setRichText(richText)

Reproduire la mise en forme des formes

Sélectionnez la forme source, activez le pinceau puis choisissez la cible. Il copie remplissage, contour, effets et styles de texte pris en charge en conservant identité, géométrie, contenu et liaisons de formules de la cible. Effacer la mise en forme restaure les valeurs d’insertion. SmartArt est exclu. Le plugin UI correspondant active ce comportement automatiquement.