Tiptap 富文本编辑器

import { TiptapRichEditor } from "@/components/ui/tiptap-rich-editor";

// 在表单中使用
<TiptapRichEditor
  value={content}
  onChange={(html, images) => {
    setContent(html);
    setContentImages(images);
  }}
  placeholder="开始编写内容..."
  height={350}
/>

{
  "@tiptap/react": "^3.4.2",
  "@tiptap/starter-kit": "^3.4.2", 
  "@tiptap/extension-image": "^3.4.2",
  "@tiptap/extension-placeholder": "^3.4.2",
  "@tiptap/extension-dropcursor": "^3.4.2"
}

model Event {
  // ... 其他字段
  description     String      // 兼容原有的Markdown描述
  richContent     String?     // 富文本HTML内容
  contentImages   String[]    @default([]) // 内容中的图片URL数组
}

graph LR
    A[用户操作] --> B[文件验证]
    B --> C[生成唯一文件名]
    C --> D[调用S3上传API]
    D --> E[获取图片URL]
    E --> F[插入到编辑器]
    F --> G[更新contentImages数组]

interface TiptapRichEditorProps {
  value?: string;                    // 当前HTML内容
  onChange?: (html: string, images: string[]) => void; // 内容变化回调
  placeholder?: string;              // 占位文本
  height?: number;                  // 编辑器高度
}

const uploadImage = async (file: File): Promise<string> => {
  // 1. 生成唯一文件名
  const fileName = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}.${extension}`;
  const filePath = `event-content/${fileName}`;
  
  // 2. 获取S3签名上传URL
  const response = await fetch(`/api/uploads/signed-upload-url?...`);
  const { signedUrl } = await response.json();
  
  // 3. 直接上传到S3
  await fetch(signedUrl, {
    method: "PUT",
    body: file,
    headers: { "Content-Type": file.type },
  });
  
  // 4. 返回公共访问URL
  return `${config.storage.endpoints.public}/${filePath}`;
};

<FormField
  control={control}
  name="description"
  render={({ field }) => (
    <FormItem>
      <FormLabel>活动详情 *</FormLabel>
      <FormControl>
        <TiptapRichEditor
          value={field.value}
          onChange={(html, images) => {
            field.onChange(html);
            // 同时更新图片数组字段
            setValue('contentImages', images);
          }}
          placeholder="详细描述你的活动内容、流程、亮点..."
          height={350}
        />
      </FormControl>
      <FormDescription>
        支持富文本格式、图片上传。可拖拽图片或点击工具栏上传按钮插入图片。
      </FormDescription>
    </FormItem>
  )}
/>

<TiptapRichEditor
  value={content}
  onChange={(html, images) => {
    // html: 富文本HTML内容
    // images: 内容中所有图片的URL数组
  }}
  placeholder="自定义占位文本"
  height={400} // 自定义高度
/>

// 1. 添加扩展
import Underline from '@tiptap/extension-underline';

// 2. 在editor配置中添加
const editor = useEditor({
  extensions: [
    StarterKit,
    Underline,
    // ... 其他扩展
  ],
});

// 3. 添加工具栏按钮
<Button onClick={() => editor.chain().focus().toggleUnderline().run()}>
  <Underline className="h-4 w-4" />
</Button>

const customImageUpload = async (file: File) => {
  // 自定义上传逻辑
  const url = await yourUploadFunction(file);
  
  // 插入到编辑器
  editor?.chain().focus().setImage({ 
    src: url,
    alt: file.name,
    title: file.name 
  }).run();
};

const editor = useEditor({
  extensions: [
    StarterKit.configure({
      heading: false, // 禁用标题
      codeBlock: false, // 禁用代码块
    }),
    // 只包含需要的扩展
  ],
});

const plainText = editor?.getText() || '';