lee-tiptap

a rich-text edtor using tiptap2/vue3/videojs-player

installation

pnpm install lee-tiptap @tiptap/core @tiptap/extension-b bble-menu @tiptap/extension-color @tiptap/extension-focus @tiptap/extension-highlight @tiptap/extension-horizontal-rule @tiptap/extension-italic @tiptap/extension-placeholder @tiptap/extension-strike @tiptap/extension-subscript @tiptap/extension-superscript @tiptap/extension-table @tiptap/extension-table-cell @tiptap/extension-table-header @tiptap/extension-table-row @tiptap/extension-task-item @tiptap/extension-task-list @tiptap/extension-text-align @tiptap/extension-text-style @tiptap/extension-typography @tiptap/extension-underline @tiptap/pm @tiptap/starter-kit @tiptap/suggestion @tiptap/vue-3 @videojs-player/vue tippy.js video.js vue @vueuse/core

Quickstart

import {
  LeeTiptap,
  LeeTextMenu,
  LeeImageMenu,
  LeeVideoMenu,
  LeeTableMenu,
  LeeAttachmentMenu,
  StarterKit,
  Selection,
  SlashCommand,
  TrailingNode,
  HorizontalRule,
  Table,
  ImageBlock,
  VideoBlock,
  Attachment,
} from "lee-tiptap";
import "lee-tiptap/lib/style.css";
import "lee-tiptap/lib/style.css";
import TaskItem from "@tiptap/extension-task-item";
import TaskList from "@tiptap/extension-task-list";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
import TableRow from "@tiptap/extension-table-row";
import Focus from "@tiptap/extension-focus";
import Subscript from "@tiptap/extension-subscript";
import Superscript from "@tiptap/extension-superscript";
import Typography from "@tiptap/extension-typography";
import Underline from "@tiptap/extension-underline";
import Highlight from "@tiptap/extension-highlight";
import TextStyle from "@tiptap/extension-text-style";
import Color from "@tiptap/extension-color";
import TextAlign from "@tiptap/extension-text-align";
import Placeholder from "@tiptap/extension-placeholder";

import type { Editor } from "@tiptap/vue-3";

const value = "hello...";

const editorRef = ref();
function handleCreate(editor: Editor) {
  editorRef.value = editor;
}

async function uploadRequest(file: File) {
  return (
    new Promise() <
    string >
    ((resolve) => {
      const url = URL.createObjectURL(file);
      setTimeout(() => resolve(url), 1000);
    })
  );
}

const extensions = [
  StarterKit,
  Selection,
  SlashCommand,
  TrailingNode,
  HorizontalRule,
  Table.configure({
    resizable: true,
    lastColumnResizable: false,
  }),
  TableCell,
  TableHeader,
  TableRow,
  ImageBlock.configure({
    uploadRequest,
  }),
  VideoBlock.configure({
    uploadRequest,
  }),
  Attachment.configure({
    uploadRequest,
  }),
  TaskItem.configure({
    nested: true,
  }),
  TaskList,
  Focus,
  Subscript,
  Superscript,
  Typography,
  Underline,
  Highlight.configure({
    multicolor: true,
  }),
  TextStyle,
  Color,
  TextAlign.configure({
    types: ["heading", "paragraph"],
  }),
  Placeholder.configure({
    placeholder: "请输入内容...",
  }),
];

<LeeTextMenu :editor="editorRef" />
<LeeImageMenu :editor="editorRef" />
<LeeVideoMenu :editor="editorRef" />
<LeeTableMenu :editor="editorRef" />
<LeeAttachmentMenu :editor="editorRef" />
<LeeTiptap
  v-model="value"
  :extensions="extensions"
  :editable="true"
  @create="handleCreate"
  spellcheck="false"
/>