Vue 指南

VueKit 是一个 Tiptap 插件集。如果你是刚起步，这个插件正合适

安装

npmpnpm

bash

npm install @tiptap/vue-3 @note-editor/vue-kit

bash

pnpm add @tiptap/vue-3 @note-editor/vue-kit

导出

setupKit

一个 Tiptap 插件集，类似于 StarterKit

import { Editor } from '@tiptap/core'
import { setupKit } from '@note-editor/vue-kit'

const editor = new Editor({
  extensions: [
    setupKit
  ]
})

useNoteEditor

一个用于 Tiptap 的 Vue 组合式函数

import { useNoteEditor } from '@note-editor/vue-kit'

用法

vue

<script setup lang="ts">
import { EditorContent } from '@tiptap/vue-3'
import { useNoteEditor } from '@note-editor/vue-kit'

const { editor } = useNoteEditor()
</script>

<template>
  <EditorContent :editor="editor" />
</template>

对于涵盖的插件，你既可以设置其配置项，也可以禁用它。示例如下：

vue

<script setup lang="ts">
import { EditorContent } from '@tiptap/vue-3'
import { useNoteEditor } from '@note-editor/vue-kit'

const { editor } = useNoteEditor({
  // 等同于 setupKit 的配置项
  kitOptions: {
    // 配置插件
    heading: {
      levels: [1, 2],
    },

    // 禁用插件
    history: false,
  }
})
</script>

<template>
  <EditorContent :editor="editor" />
</template>

Vue 指南

安装

导出

setupKit

useNoteEditor

用法

涵盖的插件列表

Nodes

Marks

Extensions

Vue 指南 ​

安装 ​

导出 ​

setupKit ​

useNoteEditor ​

用法 ​

涵盖的插件列表 ​

Nodes ​

Marks ​

Extensions ​

Vue 指南

安装

导出

setupKit

useNoteEditor

用法

涵盖的插件列表

Nodes

Marks

Extensions