- 综合排序
- 最热优先
- 最新优先
- 来自专栏快乐阿超
tiptap
——陈鸿宇 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.
1K10编辑于 2025-02-04 - 来自专栏全栈学习
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
14710编辑于 2026-03-13 - 来自专栏全栈学习
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
19210编辑于 2026-03-19 - 来自专栏前端实验室
专为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
8.6K31编辑于 2022-12-02 - 来自专栏开源服务指南
无头富文本编辑器：框架无关，自由扩展 | 开源日报 No.300
picture ueberdosis/tiptaphttps://github.com/ueberdosis/tiptap Stars: 24.8k License: MIT tiptap 是一个面向 它的核心优势在于： 无头框架：tiptap 不依赖于用户界面，提供完全的设计自由度。 框架无关：tiptap 被设计为可以在不同的前端框架中使用，无需担心兼容性问题。 可定制的用户体验：tiptap 的编辑器组件可以根据用户需求自定义扩展和节点。 此外，tiptap 还提供了一些高级功能，如协作编辑、拖放文件管理和唯一节点 ID 分配等，这些功能可以通过免费的 Pro 扩展获得。 如果需要协作编辑功能，可以使用 tiptap 的开源后端 Hocuspocus。tiptap 的文档和社区提供了更详细的信息和示例。
42210编辑于 2024-07-22 - 来自专栏IT大咖说
基于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！
7.8K41发布于 2020-05-19 - 来自专栏一飞开源
[开源]一个现代化协同文档编辑器，丰富的编辑能力与多人实时协作
一、开源项目简介 DocFlow 一个基于 Tiptap 和 Next.js 构建的现代化协同文档编辑器，集成了丰富的编辑能力与多人实时协作功能，支持插件扩展、主题切换与持久化存储。 二、开源协议 使用MIT开源协议 本项目采用 MIT 开源协议发布，但包含部分 Tiptap Pro 模板代码除外。 三、界面展示 四、功能概述 基于 Tiptap + Yjs 构建的 AI 写作平台 DocFlow AI 智能写作平台 基于 Tiptap + Yjs 构建的新一代智能协作编辑器，集成 AI 续写、RAG 功能特性 富文本编辑：标题、列表、表格、代码块、数学公式、图片、拖拽等 实时协作：使用 Yjs + @hocuspocus/provider 实现高效协同 插件丰富：基于 Tiptap Pro 多种增强功能 从输入处理到输出生成的完整流程设计，支持多模态数据处理和复杂逻辑编排 来源：DocFlow 官网 五、技术选型 技术栈 前端技术栈 技术 说明 Next.js 构建基础框架，支持 SSR / SSG Tiptap
76010编辑于 2025-11-30 - 来自专栏小李的前端小屋
聊聊 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 的相关实践。
8.6K41编辑于 2022-07-13 - 来自专栏玩转全栈
tiptap的实现原理（二）
所以，无论你的技术栈是Vue，还是React，使用Tiptap都不用太过于在选型上纠结。Tiptap 的核心思路是通过插件系统提供丰富的功能，使得开发者可以根据需求定制编辑器的功能和样式。 Tiptap 的主要有5大部分组成： Core：Tiptap 的核心模块，负责处理编辑器的基本功能，如文本输入、选择、撤销和重做等。 这样的架构使得 Tiptap 可以根据需求灵活地扩展功能和样式。 Tiptap 的 Core模块原理简介 Tiptap 的 Core 模块是基于 ProseMirror 构建的，它负责处理编辑器的基本功能，如文本输入、选择、撤销和重做等。 我们如何在TipTap 上去实现一个扩展（Extension），以及扩展的实现原理 在 Tiptap 中，插件的各种能力（如快捷键、命令等）是通过扩展（Extension）的 API 实现的。
6.7K72编辑于 2023-11-14 - 来自专栏猫头虎博客专区
2024年Vue富文本编辑器推荐：十款必备富文本组件详解之Vue中有哪些富文本组件？
TipTap TipTap 是基于ProseMirror的现代富文本框架，专为Vue开发者打造。 安装： npm install @tiptap/vue-3 @tiptap/starter-kit 配置与用法： <template> <editor-content :editor="editor " /> </template> <script> import { EditorContent, useEditor } from '@tiptap/vue-3'; import StarterKit from '@tiptap/starter-kit'; export default { components: { EditorContent }, setup() { const 通过结合 TipTap，可以无缝集成到Vue项目中，实现复杂的文档处理需求。 安装： 直接通过 npm 安装 ProseMirror 及其相关插件，也可以通过 TipTap 的生态扩展进行集成。
5K11编辑于 2024-12-30 - 来自专栏全栈程序员必看
vue.js 渲染函数_Vue.js的不可渲染且可扩展的RTF编辑器[通俗易懂]
要查看一些实时示例，请访问tiptap.scrumpy.io 。 安装 (Installation) npm install tiptap or 要么 yarn add tiptap 基本设定 (Basic Setup) <template> <editor 有一个名为tiptap-extensions的程序包，其中包含最基本的节点，标记和插件。 这基本上是来自tiptap-extensions的默认blockquote节点的外观。 import { Node } from 'tiptap' import { wrappingInputRule, setBlockType, wrapIn } from 'tiptap-commands
3.4K20编辑于 2022-10-01 - 来自专栏关于Java学习@宁在春
「后端小伙伴来学前端了」Vue集成 Element-tiptap 富文本编辑器，实现气泡菜单，划词弹出菜单
为了这个气泡菜单，真的找了很多富文本编辑器，最后翻到个element-tiptap，看到样式上有这个。 一、Element-tiptap富文本编辑器介绍 它易于使用，对开发人员友好，完全可扩展，设计简洁。 用它的话，主要是和element适配度高，然后我就想用他了，使用element-ui组件。 github官网：https://github.com/Leecason/element-tiptap 二、开始使用 npm 安装： npm install --save element-tiptap 直接安装完就完事啦 正常菜单： 来贴个最简单的例子： <template>
<el-tiptap v-model="content" :extensions 例如： 我们不需要字符计数 直接在标签上绑定这个属性即可charCounterCount 如下:<el-tiptap v-model="content2.7K20编辑于 2022-10-31来自专栏快乐阿超yjs
实时文本编辑器 Yjs 可以与富文本编辑器（如 Tiptap、ProseMirror、Quill）集成，实现多人实时编辑。通过 CRDT 技术，用户的操作不会因冲突而丢失。 import { Editor } from '@tiptap/core' import StarterKit from '@tiptap/starter-kit' import * as Y from 'yjs' import { Collaboration } from '@tiptap/extension-collaboration' const ydoc = new Y.Doc() const
2.5K10编辑于 2025-02-05来自专栏卡拉云最好用的 6 款 Vue 3 富文本编辑器
本文测评的 6 款 Vue 富文本编辑器 TinyMCE - 富文本编辑器里的 Word ，功能想不到的丰富 tiptap - 多人在线实时协同编辑 CKEditor 5 - 开源免费可商用，行内编辑 二. tiptap - 多人在线实时协同编辑 tiptap 最初是为 Vue2 开发的，现在已发展成为独立框架工具，对 Vue3、React、Svelte 集成友好。 tiptap 功能非常强大，功能插件丰富。但它比其他编辑器更棒的地方在于多人在线实时编辑。类似于谷歌文档那种效果，所有使用者在同一个页面彼此能看到对方的光标位置和名字，大家同时在线协同编辑。 整个协同体验流畅，如果你的应用场景需要多人实时协同编辑，选 tiptap 就对了。 三.
28.3K10编辑于 2022-01-22来自专栏玩转全栈给Tiptap加持AI秒变免费Notion(三)
本文，我们将给所见即所得编辑器，当然是基于Tiptap实现的，增加AI能力，大致分为三个功能点。 我们可以选择基于已有的文本进行续写，其大概的体验如下所示： 选中一段文字，弹出一个对话框，我们可以基于选中的文字做，文本扩写，风格改写，文本翻译等等一些操作，其操作体验如下所示： 如何实现这些功能 上面，我们领略了一下AI加持后的Tiptap
2.3K20编辑于 2023-11-14来自专栏grain先森Vue 开源项目 TOP45
Tiptap Star 数：2790 GitHub：https://github.com/scrumpy/tiptap 介绍：Vue.js 的富文本编辑器。 ? Tiptap 24.
2.3K20发布于 2019-03-28来自专栏开源小分队印象笔记飞书文档语雀都起开！我本地部署一个知识库不香吗？
支持在线多人协作 开源项目，可以在本地部署 项目部署 项目使用了以下技术栈： MySQL：数据存储 next.js：前端页面框架 nest.js：服务端框架 tiptap：编辑器及文档协作 如果要在本地直接部署使用
5.9K20编辑于 2022-12-07来自专栏AI工具&&产品我是如何让大模型帮我写了一个实现富文本编辑器前端vue项目的---记录自己第一次接触tiptap的经历和总结思考
ima知识库的搭建，使用，学习，以及我自己的公众号的运营之类的，包括这个腾讯云上面的相关的活动，其实主要还是这个ai上面，这个月确实接触了非常多的这个新鲜的东西；今天是因为一个朋友找到我让我写一下这个tiptap
40410编辑于 2025-08-29来自专栏每日精选时刻【每日精选时刻】工作十六年，我是从什么时候感觉到编程能力突飞猛进；一文带你解密LLM；面试官：“只会用自增主键？回去等通知吧”
给Tiptap加持AI秒变免费Notion(三)先前的两篇文章，我们了解了所见即所得编辑器的原理，接下来，我们就要开始在知晓原理情况下搞点事情了，给所见即所得加持上AI的能力。 本文，我们将给所见即所得编辑器，当然是基于Tiptap实现的，增加AI能力，大致分为三个功能点。
582133编辑于 2023-11-15来自专栏互联网那些事儿互联网那些事儿 | 扒一扒互联网Markdown的那些事儿
remarkRehype) .use(rehypeStringify) .processSync("Hellow,*world*").value ); 其他 或许会疑惑为什么没有看到 Tiptap Tiptap 围绕 PoroseMirror研发的开源项目，ProseMirror 主要聚焦在富文本编辑器领域 对于 Markdown解析引擎默认使用的是 Markdown-it；React-markdown
1.5K172编辑于 2023-11-06
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号