useEditor

useEditor() zwraca bieżący wstrzyknięty edytor OpenPencil.

Jest to główny punkt wejścia dla kompozytów SDK i bezstanowych prymitywów, które potrzebują dostępu do edytora.

Użycie

useEditor() musi być wywołane wewnątrz poddrzewa, gdzie wcześniej wywołano provideEditor(editor).

import { useEditor } from '@open-pencil/vue'

const editor = useEditor()

Podstawowy przykład

<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>Bieżąca strona: {{ pageId }}</div>
</template>

Przykłady praktyczne

Odczytaj zaznaczone węzły

const editor = useEditor()
const selected = editor.getSelectedNodes()

Wyzwól polecenia

const editor = useEditor()
editor.zoomToFit()
editor.undoAction()

Zachowanie przy błędzie

Jeśli wywołane poza drzewem dostawcy edytora, useEditor() rzuca z pomocnym komunikatem.

Jest to celowe — to API powinno głośno zawodzić, gdy brakuje kontekstu edytora.

Powiązane API

• provideEditor
• useCanvas
• useSelectionState
• useEditorCommands

Typ

function useEditor(): Editor