コア機能
Univer Docs は、ドキュメントエディタ、数式エンジン、レンダリングエンジン、デザインシステム、UI コンポーネントライブラリを備えたコア機能を提供します。これらが組み合わさり、さまざまな文書形式や複雑な操作を支える強力な文書処理基盤を構成します。
機能
Univer Docs のコア機能には以下が含まれます。
- ドキュメント描画：カーソルと選択範囲を含む Univer Docs の描画をサポート。
- ドキュメント組版：段落設定、前後の余白、段落揃え、インデント、ぶら下げインデントなどの全体組版をサポート。句読点の詰め、ぶら下げ句読点、文字間隔、欧文の単語分割などの段落内組版も含まれます。
- 数式計算：Univer 数式の追加と計算をサポート（開発中）。
- 表機能：基本的な表の挿入と編集、行の追加/削除、セル編集をサポート。
- ドキュメントスタイル：Univer Docs は Microsoft Word に近い 従来型スタイル（ページ区切り、ヘッダー/フッターなど）と、Notion に近い モダンスタイル の両方をサポートします。モダンスタイルではページ分割不要で、コンテンツが無限に伸び、公式/サードパーティのブロック要素（テキスト、画像、表など）の混在組版に対応します（予定）。
- ヘッダーとフッター：ヘッダー/フッターの挿入・編集、先頭ページ/奇数偶数ページの区別をサポート（従来型のみ）。
- リスト機能：番号付き/箇条書き/タスクリストの挿入・編集、インデント/逆インデントに対応。
- 絵文字と記号：Docs リボンから絵文字や記号を挿入できます。
- プラグインシステム：数式、画像、チャートなどのカスタムプラグインを追加できる拡張機構。Univer の中核アーキテクチャの 1 つです。
プラグインモード
インストール
pnpm add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-uinpm install @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-uiyarn add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-uibun add @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui使い方
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { FUniver } from '@univerjs/core/facade'import DesignJaJP from '@univerjs/design/locale/ja-JP'import { UniverDocsPlugin } from '@univerjs/docs'import { UniverDocsUIPlugin } from '@univerjs/docs-ui'import DocsUIJaJP from '@univerjs/docs-ui/lib/locale/ja-JP'import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'import { UniverUIPlugin } from '@univerjs/ui'import UIJaJP from '@univerjs/ui/locale/ja-JP'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.JA_JP, locales: { [LocaleType.JA_JP]: mergeLocales(DesignJaJP, UIJaJP, DocsUIJaJP), },})univer.registerPlugin(UniverRenderEnginePlugin)univer.registerPlugin(UniverFormulaEnginePlugin)univer.registerPlugin(UniverUIPlugin, { container: 'app',})univer.registerPlugin(UniverDocsPlugin)univer.registerPlugin(UniverDocsUIPlugin)const univerAPI = FUniver.newAPI(univer)univerAPI.createDocument({})プラグインと設定
@univerjs/core
Univer の作成、テーマ、言語、ログなどの基本設定を提供します。設定の完全な定義は IUniverConfig を参照してください。
import type { IUniverConfig } from '@univerjs/core'import { LocaleType, Univer } from '@univerjs/core'const config: IUniverConfig = { locale: LocaleType.JA_JP, darkMode: false,}const univer = new Univer(config)@univerjs/engine-render
UniverRenderEnginePlugin は描画、スクロールバー、カーソル、選択範囲を扱います。API リファレンスを参照してください。
@univerjs/engine-formula
UniverFormulaEnginePlugin は数式の計算と処理を提供します。API リファレンスを参照してください。
@univerjs/design
基本コンポーネントとスタイルを提供するデザインシステムです。UI の概要を参照してください。
@univerjs/ui
UniverUIPlugin はコンテナ、ツールバー、コンテキストメニューなどの共通 UI を設定します。
univer.registerPlugin(UniverUIPlugin, { container: 'app', header: true, toolbar: true, ribbonType: 'grid', contextMenu: true,})menu ではコマンド ID をキーとして、メニューの表示や有効状態を変更できます。既存のプラグイン登録に設定を追加し、同じプラグインを再登録しないでください。
univer.registerPlugin(UniverUIPlugin, { menu: { 'doc.command.set-inline-format-bold': { hidden: true }, 'doc.command.set-inline-format-italic': { hidden: true, disabled: true }, },})完全な設定は UI プラグインのリファレンスを参照してください。
@univerjs/docs
UniverDocsPlugin は文書モデルとコマンドを提供します。API リファレンスを参照してください。
@univerjs/docs-ui
UniverDocsUIPlugin は文書エディタの UI と操作を提供します。API リファレンスを参照してください。
プリセットモード
インストール
pnpm add @univerjs/presets @univerjs/preset-docs-corenpm install @univerjs/presets @univerjs/preset-docs-coreyarn add @univerjs/presets @univerjs/preset-docs-corebun add @univerjs/presets @univerjs/preset-docs-core使い方
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreJaJP from '@univerjs/preset-docs-core/locales/ja-JP'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-core/lib/index.css'const { univer, univerAPI } = createUniver({ locale: LocaleType.JA_JP, locales: { [LocaleType.JA_JP]: mergeLocales(UniverPresetDocsCoreJaJP), }, presets: [UniverDocsCorePreset()],})univerAPI.createDocument({})プリセットと設定
@univerjs/presets
このプリセットは createUniver を提供し、@univerjs/core と @univerjs/design のすべてのメソッド/オブジェクトを公開します。
createUniver はテーマ、言語、プリセットなどを含む設定オブジェクトを受け取り、Univer インスタンス univer と Facade API 用の FUniver インスタンス univerAPI を返します。
interface ICreateUniverParameter { // Univer インスタンスのテーマ。デフォルトは `defaultTheme` theme: IStyleSheet // ダークモードを使用するか。デフォルトは false darkMode?: boolean // Univer インスタンスのロケール locale: LocaleType region?: LocaleType // 使用するロケールオブジェクト（キーはロケール種別） locales: ILocales // ログレベル logLevel?: LogLevel // 使用するプリセット一覧 presets: IPresets[] // 使用するプラグイン一覧 plugins: IPlugins[]}参考：createUniver
@univerjs/preset-docs-core
ドキュメントエディタ、数式エンジン、レンダリングエンジンなど、Univer Docs の基盤機能を含むコアプリセットです。
interface IUniverDocsCorePresetConfig { // コンテナ要素。文字列または DOM 要素 container?: string | HTMLElement // ヘッダーを表示するか header?: boolean // ヘッダーツールバーを表示するか toolbar?: boolean // ヘッダーツールバーの種別。'classic': デフォルトのクラシック; 'grid': 2行グリッド; 'collapsed': コンパクト; 'simple': 非グループ ribbonType?: RibbonType // フッターを表示するか footer?: boolean // コンテキストメニューを表示するか contextMenu?: boolean // 自動フォーカスを無効化するか disableAutoFocus?: true // メニュー設定 menu?: MenuConfig // ... その他の設定項目}menu オプションは特定メニューの表示/非表示を簡単に制御できます。
UniverDocsCorePreset({ menu: { 'doc.command.set-inline-format-bold': { hidden: true, }, 'doc.command.set-inline-format-italic': { hidden: true, disabled: true, }, },})ここでの 'doc.command.set-inline-format-bold' と 'doc.command.set-inline-format-italic' はコマンド名で、該当メニュー項目を指します。
表示の操作
表示リボンにはページ設定、ズーム、全画面の操作があります。ズーム選択と下部のズームバーは同じ表示倍率を示し、変更してもテキストの書式は変わりません。
メニューの順序とグリッド配置
Docs のメニュー ID で共通の MenuConfig を定義し、利用中のモードで適用します：
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 }, },}利用中のモードを選び、既存の初期化設定に以下のオプションを組み込んでください。他のプラグイン、言語、テーマ、コンテナーの設定は保持し、同じプラグインを二重に登録しないでください。
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, }), ],})初期化後は updateMenuConfig() で既存のインスタンスを更新します：
import '@univerjs/ui/facade'univerAPI.updateMenuConfig(menu)order は同じ階層を昇順に並べます。gridLayout はグリッド Ribbon 専用で、各 2 行グループ内の座標は 1 から始まります。実行時の更新は未指定のプロパティを保持し、UI をすぐに更新します。プラグインモードでは UniverUIPlugin に menu を渡し、Facade の使用前に @univerjs/ui/facade をインポートします。各フィールドとカスタムボタンの例はメニュー配置ガイドを参照してください。
貼り付けオプション
Docs は元の書式を保持、貼り付け先の書式に合わせる、テキストのみの 3 モードに対応します。貼り付け先モードは太字や斜体などを保持しつつ、対象の文字・段落スタイルを使います。テキストのみでは画像とリンクを除き、表をタブ区切りテキストにします。直前の貼り付けは貼り付け後のオプションで変更できます。ブラウザーが読み取りを制限する場合はキーボードまたはシステムの貼り付けを使います。
デスクトップの Ribbon の貼り付けメニューは元に戻す・やり直すの隣にあり、図形のテキスト編集中は非表示になります。デスクトップとモバイルのコンテキストメニューでは、形式を選択して貼り付けは書式グループにあります。
ヘッダーとフッターのフィールド
従来型文書のヘッダーやフッターを編集すると、挿入、移動、先頭ページ・奇数偶数ページ、位置を設定するコンテキスト Ribbon が表示されます。現在のページ番号、総ページ数、ローカライズされた日時を挿入できます。ページフィールドは各ページに応じた値を表示します。日時の自動更新を有効にするとフィールド、無効にすると固定テキストを挿入します。日時フィールドは文書を開くときや「フィールドの更新」で更新され、時計のように常時更新はされません。モダン文書ではページのヘッダーとフッターを使用しません。
このガイドはいかがですか？