Web SDK

クロスヘアハイライト

プラグイン情報

クロスヘアハイライトは、現在選択されているセルの行と列を強調表示し、ユーザーがアクティブなセルを判別しやすくします。

プラグインモード

インストール

Shell
pnpm add @univerjs/sheets-crosshair-highlight

使い方

TypeScript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverSheetsCrosshairHighlightPlugin } from '@univerjs/sheets-crosshair-highlight'import SheetsCrosshairHighlightJaJP from '@univerjs/sheets-crosshair-highlight/locale/ja-JP'import '@univerjs/sheets-crosshair-highlight/lib/index.css'import '@univerjs/sheets-crosshair-highlight/facade'const univer = new Univer({  locale: LocaleType.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      SheetsCrosshairHighlightJaJP,     ),  },})univer.registerPlugin(UniverSheetsCrosshairHighlightPlugin)

モバイル対応

まずモバイルエディターを設定します。このページのプラグインモードの初期化コードで、以下のデスクトップ登録を同じパッケージのモバイル版に置き換え、文書を開く前に完了してください。モデル、スタイル、言語ファイル、Facade は維持し、両方を同時に登録しないでください。

パッケージデスクトップの登録モバイルの登録
@univerjs/sheets-crosshair-highlightUniverSheetsCrosshairHighlightPluginUniverSheetsCrosshairHighlightMobileUIPlugin

プリセットモード

クロスヘアハイライト機能はプリセットモードを提供していませんが、プラグインと組み合わせて使用できます。

Shell
pnpm add @univerjs/sheets-crosshair-highlight

使い方

TypeScript
import UniverPresetSheetsCoreJaJP from '@univerjs/preset-sheets-core/locales/ja-JP'import { UniverSheetsCrosshairHighlightPlugin } from '@univerjs/sheets-crosshair-highlight'import '@univerjs/sheets-crosshair-highlight/facade'import '@univerjs/sheets-crosshair-highlight/lib/index.css'const { univerAPI } = createUniver({  locale: LocaleType.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      UniverPresetSheetsCoreJaJP,      SheetsCrosshairHighlightJaJP,     ),  },  presets: [    UniverSheetsCorePreset(),  ],  plugins: [    UniverSheetsCrosshairHighlightPlugin,   ],})

Facade API

完全な Facade API の型定義は FacadeAPI で確認できます。

インポート

プラグインモード注意

Facade パッケージの手動 import が必要なのはプラグインモードのみです。プリセットモードには対応する Facade パッケージが内蔵されているため、追加の import は不要です。

TypeScript
import '@univerjs/sheets-crosshair-highlight/facade'

クロスヘアハイライトの切り替え

TypeScript
univerAPI.setCrosshairHighlightEnabled(true)univerAPI.setCrosshairHighlightEnabled(false)

クロスヘアハイライトの有効状態の取得

TypeScript
univerAPI.getCrosshairHighlightEnabled()

イベントリスナー

イベントの型定義は Events を参照してください。

CrosshairHighlightEnabledChanged イベントは、クロスヘアハイライトの有効状態が変更されたときにトリガーします。

TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightEnabledChanged, (params) => {  const { enabled, workbook, worksheet } = params})// イベントリスナーを削除するには `disposable.dispose()` を使用します

CrosshairHighlightColorChanged イベントは、クロスヘアハイライトの色が変更されたときにトリガーします。

TypeScript
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightColorChanged, (params) => {  const { color, workbook, worksheet } = params})// イベントリスナーを削除するには `disposable.dispose()` を使用します

このガイドはいかがですか？

© 2026 DreamNum Co., Ltd.