DocumentionTiptap Editor

Tiptap Instance

The Umo Editor is implemented based on Tiptap and provides some methods. For more information about the Tiptap editor, you can first obtain the Tiptap editor instance through getEditor(), then access the state information of the Tiptap editor and invoke its methods.

Tiptap Development Documentation: https://tiptap.dev/docs/editor/getting-started/overview

How to Obtain the Tiptap Editor Instance

<template>
  <umo-editor
    ref="editorRef"
    v-bind="options"
  />
</template>
 
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { UmoEditor } from '@umoteam/editor';
 
const editorRef = ref(null); // Reference to the UmoEditor component
const tiptapEditor = ref({}); // Reference to the Tiptap Editor instance
const options = ref({
  // Configuration options
  // ...
});
 
onMounted(() => {
  // Retrieve the Tiptap Editor instance using the useEditor method
  tiptapEditor.value = editorRef.value.useEditor();
  console.log(tiptapEditor);
 
  // Alternatively, you can use the getEditor method
  // tiptapEditor.value = editorRef.value.getEditor();
  // console.log(tiptapEditor.value);
});
</script>

Through the configuration and methods provided by the Tiptap editor, you can control the editor’s features more flexibly and also implement some custom functionalities.

AI AssistantThemes