# Rango y selección y celda

- Human documentation: [https://docs.univer.ai/es-ES/guides/sheets/features/core/range-selection](https://docs.univer.ai/es-ES/guides/sheets/features/core/range-selection)

- Agent Markdown: [https://docs.univer.ai/es-ES/guides/sheets/features/core/range-selection.md](https://docs.univer.ai/es-ES/guides/sheets/features/core/range-selection.md)

- Requested language: `es-ES`

- Content language: `es-ES`

- Documentation version: `1.2.0`

- Source: [sheets/features/core/range-selection.es-ES.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/features/core/range-selection.es-ES.mdx)

---

Vaya a la sección correspondiente a su tarea. Las operaciones básicas, los ejemplos avanzados, la configuración y la solución de problemas se mantienen en esta página; los contratos API completos se mantienen en Reference.

* [Rango](#range)
* [Selección](#selection)
* [Operaciones avanzadas con rangos](#range-operations)
* [Navegación en los bordes de la hoja](#keyboard-navigation)
* [Eventos y edición de celdas](#events)
* [Solución de problemas de edición](#troubleshooting)

## Rango

Un rango se refiere a un área rectangular en una hoja de cálculo, determinada por el número de fila inicial, el número de columna inicial, el largo y el ancho, o el número de fila final y el número de columna final.

La mayoría de las operaciones en una hoja de cálculo se pueden realizar a través de la API de rango, como establecer valores, obtener valores, configurar estilos, obtener estilos, etc.

Para obtener una definición completa de la API de fachada relacionada con el rango, consulte [FRange FacadeAPI](https://docs.univer.ai/es-ES/reference/facade/range.md)

### Crear un rango

Para obtener un rango, necesita saber el número de fila inicial, el número de columna inicial, la longitud y ancho.

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

// Create a range of A1 cell:
const fRange = fWorksheet.getRange(0, 0)
console.log(fRange, fRange.getA1Notation())

// Creates a range of A1:B2:
const fRange2 = fWorksheet.getRange(0, 0, 2, 2)
console.log(fRange2, fRange2.getA1Notation())
```

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

// Get the A1:B2 range on named Sheet1
const fRange1 = fWorksheet.getRange('Sheet1!A1:B2')
console.log(fRange1, fRange1.getA1Notation())

// Get a single cell A1
const fRange2 = fWorksheet.getRange('A1')
console.log(fRange2, fRange2.getA1Notation())

// Get the A1:B2 range
const fRange3 = fWorksheet.getRange('A1:B2')
console.log(fRange3, fRange3.getA1Notation())

// Get the range of column A
const fRange4 = fWorksheet.getRange('A:A')
console.log(fRange4, fRange4.getA1Notation())

// Get the range of row 1
const fRange5 = fWorksheet.getRange('1:1')
console.log(fRange5, fRange5.getA1Notation())
```

### Obtener datos de rango

Obtener el valor de la primera celda del rango

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
if (!fWorkbook) throw new Error('No active workbook')
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1:B2')

console.log(fRange.getValue()) // The value of the top-left cell in the range
console.log(fRange.getRawValue()) // The raw value of the top-left cell in the range
console.log(fRange.getDisplayValue()) // The displayed value of the top-left cell in the range
console.log(fRange.getCellData()) // The cell data of the top-left cell in the range
const value = fRange.getValue(true)
console.log(value)
if (value !== null && typeof value === 'object') {
  console.log(value.toPlainText())
}
```

Use `getValue(true)` para conservar el texto enriquecido. Las celdas vacías devuelven `null` / `undefined`; las demás devuelven cadenas, números o booleanos. Llame a `toPlainText()` solo en un objeto de texto enriquecido.

Obtener todos los valores de celda del rango

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
if (!fWorkbook) throw new Error('No active workbook')
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1:B2')

console.log(fRange.getValues()) // The values of all cells in the range
console.log(fRange.getRawValues()) // The raw values of all cells in the range
console.log(fRange.getDisplayValues()) // The displayed values of all cells in the range
console.log(fRange.getCellDataGrid()) // The cell data of all cells in the range
console.log(fRange.getValues(true))
```

Obtener todas las fórmulas del rango

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1:B2')

console.log(fRange.getFormula()) // The formula of the top-left cell in the range
console.log(fRange.getFormulas()) // The formulas of all cells in the range
```

### Establecer valor de rango

#### Establecer un valor único

Si se pasa un valor o un objeto de celda, se sobrescribirán todas las celdas del rango. Si comienza con `=`, se interpretará como una fórmula.

Por ejemplo, para establecer el valor de A1:B2 en `Hello, Univer`:

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1:B2')
fRange.setValue('Hello, Univer')
```

Establezca C1 en `=A1+B1` para separar el resultado de las celdas de entrada:

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
if (!fWorkbook) throw new Error('No active workbook')
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('C1')
fRange.setValue('=A1+B1')
```

Establezca el valor de A1:B2 en el objeto de celda:

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1:B2')
fRange.setValue({
  v: 'Hello, Univer',
  custom: {
    key: 'value',
  },
})
```

Si solo desea establecer el valor de la celda superior izquierda en el rango, puede usar el método [`FRange.setValueForCell`](https://docs.univer.ai/es-ES/reference/facade/range.md#setvalueforcell):

```typescript
fRange.setValueForCell('Hello, Univer')
```

#### Establezca múltiples valores con una matriz

La longitud y el ancho de la matriz deben coincidir con la longitud y el ancho del rango.

Puede pasar valores de celda u objetos de celda.

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1:B2')
fRange.setValues([
  ['A1', 'B1'],
  ['A2', 'B2'],
])

fRange.setValues([
  [{ v: 'A1' }, { v: 'B1' }],
  [{ v: 'A2' }, { v: 'B2' }],
])
```

#### Establezca múltiples valores con un objeto

Si se pasa un objeto, el índice principal del objeto representa la fila número, y el índice secundario representa el número de columna, y la longitud y el ancho del rango no necesitan coincidir.

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1:B2')
fRange.setValues({
  0: {
    0: 'A1',
    1: 'B1',
  },
  1: {
    0: 'A2',
    1: 'B2',
  },
})
```

### Borrar datos del rango

* El método [`FRange.clear`](https://docs.univer.ai/es-ES/reference/facade/range.md#clear) puede borrar el contenido y la información de formato del rango.
* El método [`FRange.clearContent`](https://docs.univer.ai/es-ES/reference/facade/range.md#clearcontent) puede borrar la información de contenido del range.
* El método [`FRange.clearFormat`](https://docs.univer.ai/es-ES/reference/facade/range.md#clearformat) puede borrar la información de formato del rango.

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorkSheet = fWorkbook.getActiveSheet()
const fRange = fWorkSheet.getRange('A1:D10')

// Clears content and formatting information of the range.
fRange.clear()
```

### Obtener estilo de rango

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1:B2')
console.log(fRange.getCellStyleData()) // The style data of the top-left cell in the range
console.log(fRange.getCellStyle()) // The style of the top-left cell in the range
console.log(fRange.getCellStyles()) // The styles of all cells in the range
```

### Establecer estilo de rango

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1:B2')
fRange
  .setValues([
    [1, 2],
    [3, 4],
  ])
  .setFontWeight('bold')
  .setFontLine('underline')
  .setFontFamily('Arial')
  .setFontSize(24)
  .setFontColor('red')
```

### Borrar estilo de rango

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1:B2')
fRange.setFontWeight(null).setFontLine(null).setFontFamily(null).setFontSize(null).setFontColor(null)
```

## Selección

Univer Sheets admite múltiples distritos, por lo que un distrito es una matriz de rangos y puede manipular los datos de los distritos a través de la API de rango.

También proporcionamos API para obtener la selección actual, configurar la selección y escuchar cambios en la selección.

Para obtener una definición completa de la API de fachada relacionada con la selección, consulte [FSelection FacadeAPI](https://docs.univer.ai/es-ES/reference/facade/selection.md)

### Obtener selección activa

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

// Activate the new selection of A1:B2
const fRange = fWorksheet.getRange('A1:B2')
fRange.activate()

// Get the current active selection
const fSelection = fWorksheet.getSelection()
console.log(fSelection)
const activeRange = fSelection.getActiveRange()
console.log(activeRange.getA1Notation()) // A1:B2
```

### Establecer selección

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

// Set the selection to A1:B2 by FRange
const fRange = fWorksheet.getRange('A1:B2')
fRange.activate()

// Set the selection to C1:D2 by FWorksheet
fWorksheet.setActiveSelection(fWorksheet.getRange('C1:D2'))
```

### Obtener celda actual

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

// Activate the new selection of A10:B11
const fRange = fWorksheet.getRange('A10:B11')
fRange.activate()

// Get the current active cell
let fSelection = fWorksheet.getSelection()
const { actualRow, actualColumn } = fSelection.getCurrentCell()
console.log(fWorksheet.getRange(actualRow, actualColumn).getA1Notation()) // A10

// Update the new active cell to B11
fSelection = fSelection.updatePrimaryCell(fWorksheet.getRange('B11'))
const { actualRow: newRow, actualColumn: newColumn } = fSelection.getCurrentCell()
console.log(fWorksheet.getRange(newRow, newColumn).getA1Notation()) // B11
```

### Desactivar/Activar/Ocultar/Mostrar Selección

Cuando está deshabilitada, la selección deja de responder. `transparentSelection` hace que la selección sea invisible; a diferencia de `disableSelection`, la selección aún funciona; simplemente no puedes verlo.

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()

// Disable selection
fWorkbook.disableSelection()

// Enable selection
fWorkbook.enableSelection()

// Hide selection
fWorkbook.transparentSelection()

// Show selection
fWorkbook.showSelection()
```

### Escuche los cambios de selección

```typescript
univerAPI.addEvent(univerAPI.Event.SelectionChanged, (params) => {
  const { worksheet, workbook, selections } = params
  console.log(params)
})
```

## Celda

Los datos de la celda se almacenan en la hoja de trabajo como un mapa bidimensional, con el primer y segundo índice representando el número de fila y el número de columna respectivamente.

El siguiente es un objeto de celda típico:

```typescript
const data = {
  v: 'Hello, Univer',
  s: 'styleId',
  t: CellValueType.STRING,
}
```

Para descripciones detalladas de los campos, consulte \[Configurar celda] Datos]\(/guides/sheets/model/cell-data).

### Es bueno saberlo

1. Las operaciones de celda se pueden considerar como operaciones en un rango de filas y columnas con una altura de 1 y un ancho de 1. Para conocer el rango de operación, consulte [Rango](https://docs.univer.ai/es-ES/guides/sheets/features/core/range-selection.md#range).
2. El complemento API de Univer también almacenará los atributos de celda extendidos en el `resources` propiedad de `Workbook`, consulte [Modelo personalizado del complemento](/blog/custom-model).

## Operaciones avanzadas con rangos

### Insertar celdas

El método [`FRange.insertCells`](https://docs.univer.ai/es-ES/reference/facade/range.md#insertcells) puede insertar celdas vacías en este rango. Los datos existentes en la hoja a lo largo de la dimensión proporcionada se alejan del rango insertado.

```typescript
// Assume the active sheet empty sheet.
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const values = [
  [1, 2, 3, 4],
  [2, 3, 4, 5],
  [3, 4, 5, 6],
  [4, 5, 6, 7],
  [5, 6, 7, 8],
]

// Set the range A1:D5 with some values, the range A1:D5 will be:
// 1 | 2 | 3 | 4
// 2 | 3 | 4 | 5
// 3 | 4 | 5 | 6
// 4 | 5 | 6 | 7
// 5 | 6 | 7 | 8
const fRange = fWorksheet.getRange('A1:D5')
fRange.setValues(values)
console.log(fWorksheet.getRange('A1:D5').getValues()) // [[1, 2, 3, 4], [2, 3, 4, 5], [3, 4, 5, 6], [4, 5, 6, 7], [5, 6, 7, 8]]

// Insert the empty cells into the range A1:B2 along the columns dimension, the range A1:D5 will be:
//   |   | 1 | 2
//   |   | 2 | 3
// 3 | 4 | 5 | 6
// 4 | 5 | 6 | 7
// 5 | 6 | 7 | 8
const fRange2 = fWorksheet.getRange('A1:B2')
fRange2.insertCells(univerAPI.Enum.Dimension.COLUMNS)
console.log(fWorksheet.getRange('A1:D5').getValues()) // [[null, null, 1, 2], [null, null, 2, 3], [3, 4, 5, 6], [4, 5, 6, 7], [5, 6, 7, 8]]

// Set the range A1:D5 values again, the range A1:D5 will be:
// 1 | 2 | 3 | 4
// 2 | 3 | 4 | 5
// 3 | 4 | 5 | 6
// 4 | 5 | 6 | 7
// 5 | 6 | 7 | 8
fRange.setValues(values)

// Insert the empty cells into the range A1:B2 along the rows dimension, the range A1:D5 will be:
//   |   | 3 | 4
//   |   | 4 | 5
// 1 | 2 | 5 | 6
// 2 | 3 | 6 | 7
// 3 | 4 | 7 | 8
const fRange3 = fWorksheet.getRange('A1:B2')
fRange3.insertCells(univerAPI.Enum.Dimension.ROWS)
console.log(fWorksheet.getRange('A1:D5').getValues()) // [[null, null, 3, 4], [null, null, 4, 5], [1, 2, 5, 6], [2, 3, 6, 7], [3, 4, 7, 8]]
```

### Eliminar celdas

El método [`FRange.deleteCells`](https://docs.univer.ai/es-ES/reference/facade/range.md#deletecells) puede eliminar este rango de celdas. Los datos existentes en la hoja a lo largo de la dimensión proporcionada se desplazan hacia el rango eliminado.

```typescript
// Assume the active sheet empty sheet.
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const values = [
  [1, 2, 3, 4],
  [2, 3, 4, 5],
  [3, 4, 5, 6],
  [4, 5, 6, 7],
  [5, 6, 7, 8],
]

// Set the range A1:D5 with some values, the range A1:D5 will be:
// 1 | 2 | 3 | 4
// 2 | 3 | 4 | 5
// 3 | 4 | 5 | 6
// 4 | 5 | 6 | 7
// 5 | 6 | 7 | 8
const fRange = fWorksheet.getRange('A1:D5')
fRange.setValues(values)
console.log(fWorksheet.getRange('A1:D5').getValues()) // [[1, 2, 3, 4], [2, 3, 4, 5], [3, 4, 5, 6], [4, 5, 6, 7], [5, 6, 7, 8]]

// Delete the range A1:B2 along the columns dimension, the range A1:D5 will be:
// 3 | 4 |   |
// 4 | 5 |   |
// 3 | 4 | 5 | 6
// 4 | 5 | 6 | 7
// 5 | 6 | 7 | 8
const fRange2 = fWorksheet.getRange('A1:B2')
fRange2.deleteCells(univerAPI.Enum.Dimension.COLUMNS)
console.log(fWorksheet.getRange('A1:D5').getValues()) // [[3, 4, null, null], [4, 5, null, null], [3, 4, 5, 6], [4, 5, 6, 7], [5, 6, 7, 8]]

// Set the range A1:D5 values again, the range A1:D5 will be:
// 1 | 2 | 3 | 4
// 2 | 3 | 4 | 5
// 3 | 4 | 5 | 6
// 4 | 5 | 6 | 7
// 5 | 6 | 7 | 8
fRange.setValues(values)

// Delete the range A1:B2 along the rows dimension, the range A1:D5 will be:
// 3 | 4 | 3 | 4
// 4 | 5 | 4 | 5
// 5 | 6 | 5 | 6
//   |   | 6 | 7
//   |   | 7 | 8
const fRange3 = fWorksheet.getRange('A1:B2')
fRange3.deleteCells(univerAPI.Enum.Dimension.ROWS)
console.log(fWorksheet.getRange('A1:D5').getValues()) // [[3, 4, 3, 4], [4, 5, 4, 5], [5, 6, 5, 6], [null, null, 6, 7], [null, null, 7, 8]]
```

### Fusionar celdas

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

// Merge B1:B2
const fRange = fWorksheet.getRange('B1:B2')
fRange.merge()
console.log(fRange.isMerged()) // true

// A1:B2 is merged
const fRange2 = fWorksheet.getRange('A1:B2')
console.log(fRange2.isMerged()) // false
console.log(fRange2.isPartOfMerge()) // true

// Break apart the merged range
fRange2.breakApart()

// merge horizontally: fRange2.mergeAcross();
// merge vertically: fRange2.mergeVertically();
// Get all merged ranges in the worksheet: fWorksheet.getMergedRanges();
```

### Resaltar rango

El método [`FRange.highlight`](https://docs.univer.ai/es-ES/reference/facade/range.md#highlight) puede resaltar el rango con el estilo y la celda principal especificados.

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

// Highlight the range C3:E5 with default style
const fRange = fWorksheet.getRange('C3:E5')
fRange.highlight()

// Highlight the range C7:E9 with custom style and primary cell D8
const fRange2 = fWorksheet.getRange('C7:E9')
const primaryCell = fWorksheet.getRange('D8').getRange()
const disposable = fRange2.highlight(
  {
    stroke: 'red',
    fill: 'yellow',
  },
  {
    ...primaryCell,
    actualRow: primaryCell.startRow,
    actualColumn: primaryCell.startColumn,
  },
)

// Remove the range C7:E9 highlight after 5 seconds
setTimeout(() => {
  disposable.dispose()
}, 5000)
```

### Dividir el texto en columnas

El método [`FRange.splitTextToColumns`](https://docs.univer.ai/es-ES/reference/facade/range.md#splittexttocolumns) puede dividir el texto del rango en columnas según el delimitador especificado.

Ejemplo de delimitador predeterminado:

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

// A1:A3 has following values:
//  A      |
//  1,2,3  |
//  4,,5,6 |
const fRange = fWorksheet.getRange('A1:A3')
fRange.setValues([['A'], ['1,2,3'], ['4,,5,6']])

// After calling splitTextToColumns(true), the range will be:
//  A |   |
//  1 | 2 | 3
//  4 | 5 | 6
fRange.splitTextToColumns(true)

// After calling splitTextToColumns(false), the range will be:
//  A |   |   |
//  1 | 2 | 3 |
//  4 |   | 5 | 6
fRange.splitTextToColumns(false)
```

Ejemplo de delimitador especificado:

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

// A1:A3 has following values:
//     A   |
//  1;;2;3 |
//  1;,2;3 |
const fRange = fWorksheet.getRange('A1:A3')
fRange.setValues([['A'], ['1;;2;3'], ['1;,2;3']])

// After calling splitTextToColumns(false, univerAPI.Enum.SplitDelimiterType.Semicolon|univerAPI.Enum.SplitDelimiterType.Comma), the range will be:
//  A |   |   |
//  1 |   | 2 | 3
//  1 |   | 2 | 3
fRange.splitTextToColumns(false, univerAPI.Enum.SplitDelimiterType.Semicolon | univerAPI.Enum.SplitDelimiterType.Comma)

// After calling splitTextToColumns(true, univerAPI.Enum.SplitDelimiterType.Semicolon|univerAPI.Enum.SplitDelimiterType.Comma), the range will be:
//  A |   |
//  1 | 2 | 3
//  1 | 2 | 3
fRange.splitTextToColumns(true, univerAPI.Enum.SplitDelimiterType.Semicolon | univerAPI.Enum.SplitDelimiterType.Comma)
```

Ejemplo de delimitador personalizado:

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

// A1:A3 has following values:
//     A   |
//  1#2#3  |
//  4##5#6 |
const fRange = fWorksheet.getRange('A1:A3')
fRange.setValues([['A'], ['1#2#3'], ['4##5#6']])

// After calling splitTextToColumns(false, univerAPI.Enum.SplitDelimiterType.Custom, '#'), the range will be:
//  A |   |   |
//  1 | 2 | 3 |
//  4 |   | 5 | 6
fRange.splitTextToColumns(false, univerAPI.Enum.SplitDelimiterType.Custom, '#')

// After calling splitTextToColumns(true, univerAPI.Enum.SplitDelimiterType.Custom, '#'), the range will be:
//  A |   |
//  1 | 2 | 3
//  4 | 5 | 6
fRange.splitTextToColumns(true, univerAPI.Enum.SplitDelimiterType.Custom, '#')
```

### Obtener las coordenadas del rango

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1:B2')
console.log(fRange.getCellRect()) // width、heigh、left、right、top、bottom、x、y
```

### Obtener la información de combinación y coordenadas del rango al mismo tiempo

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1:B2')
console.log(fRange.getCell())
```

## Navegación en los bordes de la hoja

`allowArrowKeyWrapOnSheetBoundary` controla si las flechas pueden continuar en otra fila o columna al llegar al borde de la hoja. Su valor predeterminado es `true`; con `false`, se detienen en el borde. No afecta al recorrido con Intro/Tab dentro de una selección. En modo preset se configura bajo `sheets`; en modo plugin se pasa directamente a `UniverSheetsUIPlugin`.

#### Plugin Mode

```typescript
univer.registerPlugin(UniverSheetsUIPlugin, {
  allowArrowKeyWrapOnSheetBoundary: false,
})
```

#### Preset Mode

```typescript
createUniver({
  presets: [
    UniverSheetsCorePreset({
      sheets: {
        allowArrowKeyWrapOnSheetBoundary: false,
      },
    }),
  ],
})
```

## Eventos y edición de celdas

Los ejemplos cubren el puntero, el renderizado, la edición y el portapapeles. Consulte [Events Reference](https://docs.univer.ai/es-ES/reference/facade/events.md#univerjssheets-ui) para ver todos los eventos y tipos de parámetros. En modo de complemento, importe `@univerjs/sheets-ui/facade` antes de suscribirse; el preset Sheets Core ya lo incluye. Libere las suscripciones al retirar el componente o la página.

### Ejemplo de uso

Todos los eventos se pueden escuchar usando el Método `addEvent`. El formato básico es:

```typescript
import '@univerjs/sheets-ui/facade'

const subscription = univerAPI.addEvent(univerAPI.Event.CellClicked, ({ row, column }) => {
  console.log(row, column)
})

// Call subscription.dispose() when the owning component or page is removed.
```

### Evento Cell PointerMove

El evento `CellPointerMove` se activa cuando el mouse se mueve sobre una celda. Este evento proporciona información sobre la celda que se encuentra actualmente debajo del puntero del mouse.

```typescript
univerAPI.addEvent(univerAPI.Event.CellPointerMove, (params) => {
  // Get event parameters
  const { worksheet, workbook, row, column } = params
  console.log('Current cell position:', worksheet.getRange(row, column).getA1Notation())
})
```

### Evento Cell PointerDown

El evento `CellPointerDown` se activa cuando se presiona el botón del mouse en una celda.

```typescript
univerAPI.addEvent(univerAPI.Event.CellPointerDown, (params) => {
  const { worksheet, workbook, row, column } = params
  console.log('Mouse down cell:', worksheet.getRange(row, column).getA1Notation())
})
```

### Evento Cell PointerUp

El evento `CellPointerUp` se activa cuando se suelta el botón del mouse en una celda.

```typescript
univerAPI.addEvent(univerAPI.Event.CellPointerUp, (params) => {
  const { worksheet, workbook, row, column } = params
  console.log('Mouse up cell:', worksheet.getRange(row, column).getA1Notation())
})
```

### Cell Hover Evento

El evento `CellHover` se activa cuando el mouse pasa sobre una celda.

```typescript
univerAPI.addEvent(univerAPI.Event.CellHover, (params) => {
  const { worksheet, workbook, row, column } = params
  console.log('Hovered cell:', worksheet.getRange(row, column).getA1Notation())
})
```

### Evento Cell DragOver

El evento `DragOver` se activa cuando se arrastra un elemento sobre una celda.

```typescript
univerAPI.addEvent(univerAPI.Event.DragOver, (params) => {
  const { worksheet, workbook, row, column } = params
  console.log('Drag over cell:', worksheet.getRange(row, column).getA1Notation())
})
```

### Evento de caída de celda

El evento `Drop` se activa cuando se suelta un elemento en una celda celda.

```typescript
univerAPI.addEvent(univerAPI.Event.Drop, (params) => {
  const { worksheet, workbook, row, column } = params
  console.log('Drop target cell:', worksheet.getRange(row, column).getA1Notation())
})
```

### Evento de clic en celda

El evento `CellClicked` se activa cuando se hace clic en una celda.

```typescript
univerAPI.addEvent(univerAPI.Event.CellClicked, (params) => {
  const { worksheet, workbook, row, column } = params
  console.log('Clicked cell:', worksheet.getRange(row, column).getA1Notation())
})
```

### Evento de renderizado de celda

`registerCellCustomRender` registra renderizadores personalizados para las celdas.

Ejemplo 1: renderizado de posición fija: las adiciones de filas no afectarán el renderizado position

```typescript
// Fixed position rendering
univerAPI.registerCellCustomRender([
  {
    drawWith: (ctx, info, skeleton, spreadsheets) => {
      const { row, col } = info
      // Render a checkmark at position (1,1)
      if (row === 1 && col === 1) {
        const { primaryWithCoord } = info
        const { startX, startY } = primaryWithCoord
        ctx.fillText('✅', startX, startY + 10)
      }
    },
  },
])

// Refresh canvas to apply rendering
univerAPI.getActiveWorkbook().getActiveSheet().refreshCanvas()
```

Ejemplo 2: renderizado basado en marcadores: renderiza cambios de posición con cambios de fila/columna

```typescript
// Set marker
univerAPI
  .getActiveWorkbook()
  .getActiveSheet()
  .getRange('B2')
  .setValue({ custom: { key: 'needCheck' } })

// Render based on marker
univerAPI.registerCellCustomRender([
  {
    drawWith: (ctx, info, skeleton, spreadsheets) => {
      const { row, col, data } = info
      // Render checkmark at marked position
      if (data?.custom?.key === 'needCheck') {
        const { primaryWithCoord } = info
        const { startX, startY } = primaryWithCoord
        ctx.fillText('✅', startX, startY + 10)
      }
    },
  },
])

// Refresh canvas to apply rendering
univerAPI.getActiveWorkbook().getActiveSheet().refreshCanvas()
```

### Eventos de edición de celda

#### Iniciar edición

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
fWorkbook.startEditing()
```

#### Finalizar edición

```typescript
// Pass true to commit changes, false to cancel editing
// This is an async function, requires await
const fWorkbook = univerAPI.getActiveWorkbook()
await fWorkbook.endEditingAsync(true)
```

#### Evento de inicio de edición

El evento `BeforeSheetEditStart` se activa antes de que comience la edición de celda.

```typescript
univerAPI.addEvent(univerAPI.Event.BeforeSheetEditStart, (params) => {
  const { worksheet, workbook, row, column, eventType, keycode } = params
  console.log('Before cell edit:', params)

  // If you want to prevent entering the editing state
  params.cancel = true
})
```

El evento `SheetEditStarted` es se activa cuando comienza la edición de celda.

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.SheetEditStarted, (params) => {
  const { worksheet, workbook, row, column, eventType, keycode } = params
  console.log(params)
})

// Remove the event listener, use `disposable.dispose()`
```

#### Evento de finalización de edición

El evento `BeforeSheetEditEnd` se activa antes de que finalice la edición de celda.

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeSheetEditEnd, (params) => {
  const { worksheet, workbook, row, column, value, eventType, keycode, isConfirm } = params
  console.log(params)

  // Cancel the cell edit end operation
  params.cancel = true
})

// Remove the event listener, use `disposable.dispose()`
```

El evento `SheetEditEnded` se activa después de que finaliza la edición de la celda.

```typescript
univerAPI.addEvent(univerAPI.Event.SheetEditEnded, (params) => {
  const { worksheet, workbook, row, column, eventType, keycode, isConfirm } = params
  console.log('After cell edit:', params)
})
```

### Eventos del portapapeles

#### Antes del cambio del portapapeles

El evento `BeforeClipboardChange` se activa antes de que cambie el contenido del portapapeles. Puede utilizar este evento para monitorear o modificar el contenido del portapapeles antes de que cambie.

```typescript
univerAPI.addEvent(univerAPI.Event.BeforeClipboardChange, (params) => {
  const { text, html } = params
  console.log('Clipboard content:', text, html)
  // If you want to cancel the clipboard change
  // params.cancel = true;
})
```

#### BeforeClipboardPaste

El evento `BeforeClipboardPaste` se activa antes de pegar el contenido. Puede utilizar este evento para monitorear o modificar el contenido antes de pegarlo.

```typescript
univerAPI.addEvent(univerAPI.Event.BeforeClipboardPaste, (params) => {
  const { text, html } = params
  console.log('Content to paste:', text, html)
  // If you want to cancel the paste operation
  // params.cancel = true;
})
```

#### ClipboardChanged

El evento `ClipboardChanged` se activa después de que el contenido del portapapeles haya cambiado.

```typescript
univerAPI.addEvent(univerAPI.Event.ClipboardChanged, (params) => {
  const { text, html } = params
  console.log('New clipboard content:', text, html)
})
```

#### ClipboardPasted

El evento `ClipboardPasted` se activa después de que se haya pegado el contenido.

```typescript
univerAPI.addEvent(univerAPI.Event.ClipboardPasted, (params) => {
  const { text, html } = params
  console.log('Pasted content:', text, html)
})
```

## Solución de problemas de edición

### Cómo ¿Cómo obtener los datos en el editor de celdas en tiempo real?

Suscríbase a `SheetEditChanging` para leer el texto enriquecido durante la edición. El valor permanece en el editor y se confirma en la hoja al finalizar la edición.

```typescript
import '@univerjs/sheets-ui/facade'

const subscription = univerAPI.addEvent(univerAPI.Event.SheetEditChanging, ({ value }) => {
  console.log(value.toPlainText())
})

// Call subscription.dispose() when the owning component or page is removed.
```

### Cuando el editor de celdas está enfocado y se hace clic en un botón externo para activar un evento, la instantánea obtenida no contiene los datos de la celda enfocada.

Los datos de la celda se sincronizan con la instantánea cuando el editor de celdas pierde el foco (es decir, cuando finaliza la edición). Por lo tanto, antes de intentar obtener los datos de la instantánea, asegúrese de que la celda haya perdido el foco. Puedes finalizar activamente la edición de la siguiente manera:

```typescript
import '@univerjs/sheets-ui/facade'

async function saveWorkbook() {
  const fWorkbook = univerAPI.getActiveWorkbook()
  if (!fWorkbook) return

  await fWorkbook.endEditingAsync(true)
  const snapshot = fWorkbook.save()
  console.log(snapshot)
}

$btn.addEventListener('click', () => {
  saveWorkbook().catch(console.error)
})
```

Referencia: [https://github.com/dream-num/univer/issues/1314](https://github.com/dream-num/univer/issues/1314)

### Cuando se utiliza la API de Facade para crear un libro de trabajo, es posible que algunas API no funcionen inmediatamente después de crear el libro de trabajo. Esto se debe a que algunas API dependen de que la interfaz se represente por completo antes de que puedan funcionar correctamente. Se recomienda realizar operaciones relacionadas en la etapa `Rendered` o `Steady` del ciclo de vida.

Muchas API dependen de que la interfaz se represente por completo antes de que puedan funcionar correctamente. Si llama a las API relacionadas inmediatamente después de crear un libro de trabajo, es posible que no funcionen debido a que la interfaz aún no se ha renderizado por completo. Se recomienda realizar operaciones relacionadas en la etapa `Rendered` o `Steady` del ciclo de vida:

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.LifeCycleChanged, ({ stage }) => {
  if (stage === univerAPI.Enum.LifecycleStages.Steady) {
    // code...
  }
})

// To remove the event listener, you can call `disposable.dispose()`
```

Referencia: [Ciclo de vida](https://docs.univer.ai/es-ES/guides/sheets/getting-started/lifecycle.md)