74 lines
1.5 KiB
Markdown
74 lines
1.5 KiB
Markdown
|
---
|
||
|
|
title: useEditor
|
||
|
|
description: Auf die aktuell injizierte OpenPencil-Editor-Instanz zugreifen.
|
||
|
|
---
|
||
|
|
|
||
|
|
# useEditor
|
||
|
|
|
||
|
|
`useEditor()` gibt den aktuell injizierten OpenPencil-Editor zurück.
|
||
|
|
|
||
|
|
Es ist der Haupt-Einstiegspunkt für SDK-Composables und headless Primitive, die Editor-Zugriff benötigen.
|
||
|
|
|
||
|
|
## Verwendung
|
||
|
|
|
||
|
|
`useEditor()` muss innerhalb eines Teilbaums aufgerufen werden, in dem `provideEditor(editor)` bereits aufgerufen wurde.
|
||
|
|
|
||
|
|
```ts
|
||
|
|
import { useEditor } from '@open-pencil/vue'
|
||
|
|
|
||
|
|
const editor = useEditor()
|
||
|
|
```
|
||
|
|
|
||
|
|
## Einfaches Beispiel
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue'
|
||
|
|
|
||
|
|
import { useEditor } from '@open-pencil/vue'
|
||
|
|
|
||
|
|
const editor = useEditor()
|
||
|
|
const pageId = computed(() => editor.state.currentPageId)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div>Aktuelle Seite: {{ pageId }}</div>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Praktische Beispiele
|
||
|
|
|
||
|
|
### Ausgewählte Knoten lesen
|
||
|
|
|
||
|
|
```ts
|
||
|
|
const editor = useEditor()
|
||
|
|
const selected = editor.getSelectedNodes()
|
||
|
|
```
|
||
|
|
|
||
|
|
### Befehle auslösen
|
||
|
|
|
||
|
|
```ts
|
||
|
|
const editor = useEditor()
|
||
|
|
editor.zoomToFit()
|
||
|
|
editor.undoAction()
|
||
|
|
```
|
||
|
|
|
||
|
|
## Fehlerverhalten
|
||
|
|
|
||
|
|
Wenn außerhalb eines Editor-Provider-Baums aufgerufen, wirft `useEditor()` eine hilfreiche Fehlermeldung.
|
||
|
|
|
||
|
|
Das ist beabsichtigt — diese API sollte laut fehlschlagen, wenn der Editor-Kontext fehlt.
|
||
|
|
|
||
|
|
## Verwandte APIs
|
||
|
|
|
||
|
|
- [provideEditor](./provide-editor)
|
||
|
|
- [useCanvas](./use-canvas)
|
||
|
|
- [useSelectionState](./use-selection-state)
|
||
|
|
- [useEditorCommands](./use-editor-commands)
|
||
|
|
|
||
|
|
## Typ
|
||
|
|
|
||
|
|
```ts
|
||
|
|
function useEditor(): Editor
|
||
|
|
```
|