DocumentionTiptap Editor

Tiptap Instance

The Umo Editor is implemented based on Tiptap and provides some Methods List externally. For more information about the Tiptap editor, you can first obtain the Tiptap editor instance via getEditor() or useEditor(), and then access the state information of the Tiptap editor or call Tiptap methods.

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

How to Get 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);
  const tiptapEditor = ref({});
  const options = ref({
    // Configuration options
    // ...
  });
 
  onMounted(() => {
    tiptapEditor.value = editorRef.value.useEditor();
    console.log(tiptapEditor);
 
    // Or
    // tiptapEditor.value = editorRef.value.getEditor();
    // console.log(tiptapEditor.value);
  });
 
</script>

With the configurations and methods provided by the Tiptap editor, you can control the editor’s functionality more flexibly and implement some custom features.