Tiptap Comment Extension 安装与配置指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00380/article/details/147160481

Tiptap Comment Extension 安装与配置指南

tiptap-comment-extension Google-Docs 📄🔥 like commenting 💬 solution for Tiptap 2(https://tiptap.dev) 项目地址: https://gitcode.com/gh_mirrors/ti/tiptap-comment-extension

1. 项目基础介绍

Tiptap Comment Extension 是一个开源项目，它为 Tiptap rich text editor 添加了类似 Google-Docs 的评论功能。这个项目可以帮助开发者在其应用中实现丰富的文本编辑和评论互动功能。主要编程语言为 TypeScript 和 JavaScript。

2. 项目使用的关键技术和框架

Tiptap: 一个基于 ProseMirror 的强大富文本编辑器框架。
TypeScript: 提供类型系统和对 ES6+ 的支持，增强代码的可靠性和可维护性。
JavaScript: 一种广泛使用的脚本语言，用于网页和服务器端开发。

3. 项目安装和配置

准备工作

在开始安装之前，请确保您的开发环境满足以下要求：

Node.js（建议使用 LTS 版本）
npm（Node.js 的包管理器）

您可以通过以下命令检查是否已经安装 Node.js 和 npm：

node -v
npm -v

如果未安装或版本不符要求，请访问 Node.js 官网下载并安装。

安装步骤

克隆项目

首先，您需要克隆该项目到本地开发环境。在命令行中执行以下命令：

git clone https://github.com/sereneinserenade/tiptap-comment-extension.git

安装依赖

进入项目目录，使用 npm 安装项目依赖：

cd tiptap-comment-extension
npm install

配置项目

根据项目说明，您需要配置 Tiptap 以及 Comment Extension。以下是一个基础的配置示例：

首先，您需要引入 Tiptap 的基础工具包和 Comment Extension：

import StarterKit from "@tiptap/starter-kit";
import CommentExtension from "@sereneinserenade/tiptap-comment-extension";

然后，您可以配置并初始化您的编辑器：

const extensions = [
  StarterKit,
  CommentExtension.configure({
    HTMLAttributes: {
      class: "my-comment",
    },
    onCommentActivated: (commentId) => {
      setActiveCommentId(commentId);
      if (commentId) {
        setTimeout(() => focusCommentWithActiveId(commentId));
      }
    },
  }),
];

// 初始化编辑器
const editor = new Editor({
  extensions,
  // 其他配置...
});