Skip to content

docs: supplement hyperlink docs #119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wpxp123456 merged 1 commit into from
Jun 1, 2026
Merged

docs: supplement hyperlink docs #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 71 additions & 44 deletions content/guides/sheets/features/hyper-link.ja-JP.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,62 +138,89 @@ univer.registerPlugin(UniverSheetsHyperLinkUIPlugin, {
import '@univerjs/sheets-hyper-link/facade'
```

### ハイパーリンクの生成・解析・ジャンプ
`navigateToSheetHyperlink` API は UI プラグインに含まれるため、次をインポートしてください:

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const sheets = fWorkbook.getSheets()
import '@univerjs/sheets-hyper-link-ui/facade'
```

// 最初のシートのセル F6 へのハイパーリンクを作成します
const sheet1 = sheets[0]
const range = sheet1.getRange('F6')
const hyperlink = range.getUrl()
### ハイパーリンクの作成

// ハイパーリンクを解析します
const hyperlinkInfo = fWorkbook.parseSheetHyperlink(hyperlink)
```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getSheetByName('Sheet1')
if (!fWorksheet) return

// 2 番目のシートに切り替えます
fWorkbook.setActiveSheet(sheets[1])
fWorkbook.getActiveSheet().getSheetName()
// セル A1 に Univer へのハイパーリンクを作成します
const fRange = fWorksheet.getRange('A1')
await fRange.setHyperLink('https://univer.ai/', 'Univer')

// セル A2 に Sheet1 の範囲 B2:D4 へのハイパーリンクを作成します
const fRange2 = fWorksheet.getRange('A2')
const rangeUrl = fWorksheet.getRange('B2:D4').getUrl()
await fRange2.setHyperLink(rangeUrl, 'Link to B2:D4')

// セル A3 に別のシート範囲へのハイパーリンクを作成します
const anotherSheet = fWorkbook.getSheetByName('Another Sheet')
if (anotherSheet) {
const fRange3 = fWorksheet.getRange('A3')
const anotherSheetUrl = anotherSheet.getUrl()
await fRange3.setHyperLink(anotherSheetUrl, 'Link to Another Sheet')
}

// セル A4 に定義名へのハイパーリンクを作成します
const fRange4 = fWorksheet.getRange('A4')
const definedNameHyperlinkUrl = fWorkbook.getUrlOfDefineName('MyDefinedName')
await fRange4.setHyperLink(definedNameHyperlinkUrl, 'Link to MyDefinedName')
```

// 3 秒後にハイパーリンクへ移動します
setTimeout(() => {
fWorkbook.navigateToSheetHyperlink(hyperlink)
fWorkbook.getActiveSheet().getSheetName()
}, 3000)
### ハイパーリンクの取得・更新・解除

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getSheetByName('Sheet1')
if (!fWorksheet) return

// 範囲 A1:D10 内のすべてのハイパーリンクを取得します
const fRange = fWorksheet.getRange('A1:D10')
const hyperlinks = fRange.getHyperLinks()
console.log(hyperlinks)

// セル A1 のハイパーリンクを更新します
const cellA1 = fWorksheet.getRange('A1')
const rangeUrl = fWorksheet.getRange('B2:D4').getUrl()
await cellA1.updateHyperLink(rangeUrl, 'Link to B2:D4')

// 範囲 A1:D10 内のすべてのハイパーリンクを解除します
fRange.cancelHyperLink()

// または、範囲 A1:D10 内の特定のハイパーリンクを解除します
if (hyperlinks.length > 1) {
fRange.cancelHyperLink(hyperlinks[1])
}
```

### セル内ハイパーリンクの操作
### ハイパーリンクの構築・解析・ジャンプ

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const sheets = fWorkbook.getSheets()

// セル A1 に Univer へのハイパーリンクを作成します
const fRange = fWorksheet.getRange('A1')
const richText = univerAPI.newRichText().insertLink('Univer', 'https://univer.ai/')
fRange.setRichTextValueForCell(richText)

// 現在のセル内のハイパーリンクを取得します
const cellValue = fRange.getValue(true)
const hyperlinks = cellValue.getLinks()

// 3 秒後にハイパーリンクを更新します
setTimeout(() => {
const id = hyperlinks[0].rangeId
const newUrl = 'https://insight.univer.ai/'
const newRichText = cellValue.copy().updateLink(id, newUrl)
fRange.setRichTextValueForCell(newRichText)
}, 3000)

// 6 秒後にハイパーリンクを解除します
setTimeout(() => {
const newCellValue = fRange.getValue(true)
const newHyperlinks = newCellValue.getLinks()
const id = newHyperlinks[0].rangeId
const newRichText = newCellValue.copy().cancelLink(id)
fRange.setRichTextValueForCell(newRichText)
}, 6000)
// 最初のシートのセル F6 を指すハイパーリンク URL を構築します
const hyperlinkUrl = sheets[0].getRange('F6').getUrl()

// ハイパーリンクを解析します
const hyperlinkInfo = fWorkbook.parseSheetHyperlink(hyperlinkUrl)
console.log(hyperlinkInfo)

// 2 番目のシートに切り替えます
fWorkbook.setActiveSheet(sheets[1])
console.log(fWorkbook.getActiveSheet().getSheetName())

// 3 秒後にハイパーリンクへ移動します
await new Promise(resolve => setTimeout(resolve, 3000))
fWorkbook.navigateToSheetHyperlink(hyperlinkUrl)
console.log(fWorkbook.getActiveSheet().getSheetName())
```

### Event Listeners
Expand Down
115 changes: 71 additions & 44 deletions content/guides/sheets/features/hyper-link.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,62 +138,89 @@ Complete Facade API type definitions can be found in the [FacadeAPI](https://ref
import '@univerjs/sheets-hyper-link/facade'
```

### Build/Parse/Jump HyperLink
The `navigateToSheetHyperlink` API is provided by the UI plugin, so import:

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const sheets = fWorkbook.getSheets()
import '@univerjs/sheets-hyper-link-ui/facade'
```

// Create a hyperlink to the cell F6 in the first sheet
const sheet1 = sheets[0]
const range = sheet1.getRange('F6')
const hyperlink = range.getUrl()
### Create HyperLink

// Parse the hyperlink
const hyperlinkInfo = fWorkbook.parseSheetHyperlink(hyperlink)
```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getSheetByName('Sheet1')
if (!fWorksheet) return

// Switch to the second sheet
fWorkbook.setActiveSheet(sheets[1])
fWorkbook.getActiveSheet().getSheetName()
// Create a hyperlink to Univer on cell A1
const fRange = fWorksheet.getRange('A1')
await fRange.setHyperLink('https://univer.ai/', 'Univer')

// Create a hyperlink to active sheet range B2:D4 on cell A2
const fRange2 = fWorksheet.getRange('A2')
const rangeUrl = fWorksheet.getRange('B2:D4').getUrl()
await fRange2.setHyperLink(rangeUrl, 'Link to B2:D4')

// Create a hyperlink to another sheet range on cell A3
const anotherSheet = fWorkbook.getSheetByName('Another Sheet')
if (anotherSheet) {
const fRange3 = fWorksheet.getRange('A3')
const anotherSheetUrl = anotherSheet.getUrl()
await fRange3.setHyperLink(anotherSheetUrl, 'Link to Another Sheet')
}

// Create a hyperlink to a defined name on cell A4
const fRange4 = fWorksheet.getRange('A4')
const definedNameHyperlinkUrl = fWorkbook.getUrlOfDefineName('MyDefinedName')
await fRange4.setHyperLink(definedNameHyperlinkUrl, 'Link to MyDefinedName')
```

### Get/Update/Cancel HyperLink

// Navigate to the hyperlink after 3 seconds
setTimeout(() => {
fWorkbook.navigateToSheetHyperlink(hyperlink)
fWorkbook.getActiveSheet().getSheetName()
}, 3000)
```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getSheetByName('Sheet1')
if (!fWorksheet) return

// Get all hyperlinks in the range A1:D10
const fRange = fWorksheet.getRange('A1:D10')
const hyperlinks = fRange.getHyperLinks()
console.log(hyperlinks)

// Update the hyperlink on cell A1
const cellA1 = fWorksheet.getRange('A1')
const rangeUrl = fWorksheet.getRange('B2:D4').getUrl()
await cellA1.updateHyperLink(rangeUrl, 'Link to B2:D4')

// Clear all hyperlinks in the range A1:D10
fRange.cancelHyperLink()

// Or clear a specific hyperlink in the range A1:D10
if (hyperlinks.length > 1) {
fRange.cancelHyperLink(hyperlinks[1])
}
```

### Manipulating Hyperlinks in Cells
### Build/Parse/Jump HyperLink

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const sheets = fWorkbook.getSheets()

// Create a hyperlink to Univer on cell A1
const fRange = fWorksheet.getRange('A1')
const richText = univerAPI.newRichText().insertLink('Univer', 'https://univer.ai/')
fRange.setRichTextValueForCell(richText)

// Query the hyperlinks in the current cell
const cellValue = fRange.getValue(true)
const hyperlinks = cellValue.getLinks()

// Update hyperlink after 3 seconds
setTimeout(() => {
const id = hyperlinks[0].rangeId
const newUrl = 'https://insight.univer.ai/'
const newRichText = cellValue.copy().updateLink(id, newUrl)
fRange.setRichTextValueForCell(newRichText)
}, 3000)

// Cancel hyperlink after 6 seconds
setTimeout(() => {
const newCellValue = fRange.getValue(true)
const newHyperlinks = newCellValue.getLinks()
const id = newHyperlinks[0].rangeId
const newRichText = newCellValue.copy().cancelLink(id)
fRange.setRichTextValueForCell(newRichText)
}, 6000)
// Build a hyperlink url pointing to cell F6 of the first sheet
const hyperlinkUrl = sheets[0].getRange('F6').getUrl()

// Parse the hyperlink
const hyperlinkInfo = fWorkbook.parseSheetHyperlink(hyperlinkUrl)
console.log(hyperlinkInfo)

// Switch to the second sheet
fWorkbook.setActiveSheet(sheets[1])
console.log(fWorkbook.getActiveSheet().getSheetName())

// Jump to the hyperlink after 3 seconds
await new Promise(resolve => setTimeout(resolve, 3000))
fWorkbook.navigateToSheetHyperlink(hyperlinkUrl)
console.log(fWorkbook.getActiveSheet().getSheetName())
```

### Event Listeners
Expand Down
Loading
Loading