腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

综合排序丨最热优先丨最新优先

——陈鸿宇 https://github.com/ueberdosis/tiptap/ https://tiptap.dev/ 最近在做富文本编辑器的项目时，发现了 Tiptap，这是一个基于 ProseMirror Tiptap 拥有高度的可扩展性、灵活的 API 和出色的跨平台支持，非常适合构建复杂的文本编辑体验。它在社区中有着很高的评价，并且已经在许多企业级项目中得到应用。 Tiptap 是什么？ Tiptap 的特点模块化和可扩展性 Tiptap 的插件系统使得开发者可以按需引入功能。安装 Tiptap 在 Vue 项目中，可以通过 npm 或 yarn 安装： npm install @tiptap/core @tiptap/starter-kit 或者： yarn add @tiptap /core @tiptap/starter-kit 2.

2025-02-04

1.5K0

标签:

富文本编辑器

AI协同写作应用-TipTap简介

第1章：Tiptap简介本章概述欢迎来到Tiptap的世界！在本章中，我们将全面了解Tiptap是什么、它的核心特性、以及为什么它是构建现代富文本编辑器的最佳选择之一。学习目标：理解Tiptap的定位和设计理念了解Tiptap的核心特性和优势对比Tiptap与其他编辑器的区别明确Tiptap的适用场景了解Tiptap的生态系统前置知识：基础的Web开发知识（HTML、生态系统4.1官方包展开代码语言：TXTAI代码解释@tiptap/core-核心包@tiptap/react-React集成@tiptap/vue-2-Vue2集成@tiptap/vue-3-Vue3 集成@tiptap/starter-kit-基础扩展集合@tiptap/extension-*-100+官方扩展@tiptap/pm-ProseMirror依赖4.2Pro扩展（付费）Tiptap提供了一些高级的付费扩展快速开始预览让我们快速预览一下Tiptap的使用：展开代码语言：TXTAI代码解释//1.安装npminstall@tiptap/react@tiptap/starter-kit//2.创建编辑器import

程序员库里

2026-03-13

5490

标签:

AI协同写作应用-TipTap编辑器实例

深入理解Tiptap编辑器实例的创建、配置和管理本章概述在前面的章节中，我们已经学会了如何创建一个基本的Tiptap编辑器。功能需求支持多种文本格式自动保存内容显示字符计数支持只读模式切换完整的事件监听实现步骤#####步骤1：安装依赖展开代码语言：BashAI代码解释npminstall@tiptap/react@tiptap /starter-kit@tiptap/extension-character-count@tiptap/extension-placeholder#####步骤2：创建编辑器组件src/components '@tiptap/starter-kit'importCharacterCountfrom'@tiptap/extension-character-count'importPlaceholderfrom /react'importStarterKitfrom'@tiptap/starter-kit'importCharacterCountfrom'@tiptap/extension-character-count'importPlaceholderfrom

程序员库里

2026-04-08

3100

标签:

前端工程化

AI协同写作应用-Tiptap 与 React 集成

pnpmadd@tiptap/react@tiptap/pm@tiptap/starter-kit包的作用说明：包名作用说明@tiptap/reactReact集成包提供useEditor、EditorProvider 、EditorContent等@tiptap/pmProseMirror核心Tiptap的底层依赖，提供文档模型和状态管理@tiptap/starter-kit常用扩展集合包含15+个常用扩展（Bold src/Tiptap.tsx展开代码语言：TXTAI代码解释//src/Tiptap.tsximport{useEditor,EditorContent}from'@tiptap/react'importStarterKitfrom /Tiptap'import'. /Tiptap'import'.

程序员库里

2026-03-24

2750

标签:

AI协同写作应用-TipTap基础功能

第2章：快速开始本章概述在本章中，我们将快速上手Tiptap，从零开始创建一个功能完整的富文本编辑器。你将学会如何安装、配置和使用Tiptap的基础功能。 3.安装Tiptap3.1安装核心包展开代码语言：BashAI代码解释pnpmadd@tiptap/react@tiptap/pm@tiptap/starter-kit包的说明：包名版本大小说明@tiptap /Tiptap'import'. 6.1创建工具栏组件修改src/Tiptap.tsx：展开代码语言：TXTAI代码解释//src/Tiptap.tsximport{useEditor,EditorContent}from'@tiptap /Tiptap.css[完整的CSS代码见6.2节]9.本章总结在本章中，我们学习了：✅环境准备检查Node.js版本安装包管理器（pnpm）创建Vite项目✅安装Tiptap安装核心包（@tiptap

程序员库里

2026-03-19

5010

标签:

AI协同写作应用-TipTap内容管理

掌握Tiptap编辑器内容的设置、获取、验证和转换本章概述内容管理是编辑器的核心功能之一。在本章中，我们将深入学习如何在Tiptap中管理编辑器内容，包括：设置编辑器内容（HTML、JSON、纯文本）获取编辑器内容（多种格式）清空和重置内容内容验证和错误处理内容格式转换内容导入导出通过本章的学习第一部分：内容格式详解Tiptap支持的内容格式Tiptap支持三种主要的内容格式：1.HTML格式最常用的格式，易于阅读和编辑：展开代码语言：HTMLAI代码解释<h1>标题</h1><p>这是一段< /react'importStarterKitfrom'@tiptap/starter-kit'import{Markdown}from'@tiptap/extension-markdown'import A:Tiptap内置了History扩展：展开代码语言：TypeScriptAI代码解释import{History}from'@tiptap/extension-history'consteditor

程序员库里

2026-04-09

1900

标签:

无头富文本编辑器：框架无关，自由扩展 | 开源日报 No.300

picture ueberdosis/tiptaphttps://github.com/ueberdosis/tiptap Stars: 24.8k License: MIT tiptap 是一个面向它的核心优势在于：无头框架：tiptap 不依赖于用户界面，提供完全的设计自由度。框架无关：tiptap 被设计为可以在不同的前端框架中使用，无需担心兼容性问题。可定制的用户体验：tiptap 的编辑器组件可以根据用户需求自定义扩展和节点。此外，tiptap 还提供了一些高级功能，如协作编辑、拖放文件管理和唯一节点 ID 分配等，这些功能可以通过免费的 Pro 扩展获得。如果需要协作编辑功能，可以使用 tiptap 的开源后端 Hocuspocus。tiptap 的文档和社区提供了更详细的信息和示例。

2024-07-22

5600

标签:

富文本编辑器

专为Element UI搭配的富文本编辑器

关于 Element Tiptap Editor Element Tiptap Editor 是一个在 web 开发领域“所见即所得”的富文本编辑器。它基于 tiptap 编辑器和 element-ui 开发，相比很多富文本编辑器，Element Tiptap Editor 使用易上手，对开发者友好，而且可扩展性强，设计简洁。提供中文文档安装使用 Element Tiptap Editor 的官网很简洁，风格传承 Tiptap 1.x 版本，功能演示即代码，非常简单易懂。安装 Element Tiptap Editor // 使用 yarn yarn add element-tiptap // 使用 npm npm install --save element-tiptap 'element-tiptap/lib/index.css'; // 安装 ElementUI 插件 Vue.use(ElementUI); // 安装 element-tiptap 插件 Vue.use

程序员老鱼

2022-12-02

8.8K0

标签:

基于Vue的无渲染的富文本编辑器——tiptap！

介绍 tiptap编辑器基于Prosemirror，完全可扩展且无渲染。可以轻松地将自定义节点添加为Vue组件。 ---- ? ---- Github https://github.com/scrumpy/tiptap 为什么使用tiptap？市面上有不少富文本编辑器，但大多数可能并不能满足你的需求。 tiptap是基于Prosemirror进行扩展开发的没有很多公司在Prosemirror（富文本工具包）基础上进行开发。无渲染要如何理解？安装和使用安装 npm install tiptap #或者 yarn add tiptap 使用 <template> <editor-content :editor="editor" /> < https://github.com/prosemirror 总结 tiptap是一个相当不错的富文本编辑器，其无渲染特性以及可实现的协同编辑让其扩展更加方便！enjoy it！

2020-05-19

8.2K0

标签:

聊聊 Tiptap，一款为开发富文本编辑器为生的框架

什么是 Tiptap 在介绍 Tiptap[1] 前，首先要介绍一下 ProseMirror[2]，它是一款可定制性及极强的「所见即所得」富文本编辑器框架，文档的可编辑性基于 contentEditable 到目前为止，Tiptap 经历了两个版本 v1 和 v2。 Tiptap1 Tiptap 诞生当初，因为其开箱即用，支持 Vue2，拥有丰富 API 的同时原本的 API 一个也没丢，不丧失原本的定制化能力，比 ProseMirror 香太多。目前我正在将其升级到 Tiptap2 和 Vue3。目前，Tiptap 可能是社区中唯一一个支持 Vue2 和 3，能够自己写插件扩展，又支持协同的编辑器了。如果你有意愿或正在使用 ProseMirror 进行开发，推荐使用 Tiptap。今后我会继续分享一些自己使用 Tiptap 开发 ProseMirror 的相关实践。

2022-07-13

9.6K0

标签: