useEditor

useEditor() возвращает экземпляр редактора 4B Pen, переданный ближайшим вызовом provideEditor().

Это основная точка входа для composables и компонентов без встроенного оформления, которым нужен редактор.

Использование

useEditor() должен вызываться внутри поддерева, где уже был вызван provideEditor(editor).

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

const editor = useEditor()

Пример

<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>Текущая страница: {{ pageId }}</div>
</template>

Примеры

Чтение выделенных объектов

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

Вызов команд

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

Поведение при ошибках

Если вызвать useEditor() вне дерева компонентов, в котором был вызван provideEditor(), функция выдаст понятную ошибку. Это позволяет сразу обнаружить отсутствие контекста редактора.

Связанные API

• provideEditor
• useCanvas
• useSelectionState
• useEditorCommands

Тип

function useEditor(): Editor