Tiptap,: 富文本编辑器入门与案例分析

Tiptap 是一个现代的富文本编辑器,基于 ProseMirror 打造,旨在提供一个灵活且功能强大的文本编辑解决方案。它具有开箱即用的能力,同时也允许开发者根据业务需求进行高度定制化扩展。与传统的富文本编辑器相比,Tiptap 提供了更精细的控制、更加简洁的 API 以及丰富的扩展机制,帮助开发者构建与业务需求紧密结合的编辑器。

在这里插入图片描述

一、Tiptap 介绍

1. 什么是 Tiptap?

Tiptap 是一个开源的富文本编辑器,它基于 ProseMirror 构建,ProseMirror 本身是一个非常强大的文本编辑框架,提供了低级的操作 API,用于处理文档结构、格式化文本和管理编辑器状态。而 Tiptap 在此基础上提供了更高层的 API,使得开发者能够更加简便地进行开发,尤其适用于需要定制化或扩展功能的应用场景。

Tiptap 的最大亮点在于它的 可扩展性灵活性,开发者不仅可以选择使用内置的基本功能,还可以通过插件来定制和扩展编辑器,满足不同需求的同时,也能降低开发成本。

2. Tiptap 的优势

  • 极高的定制化能力:Tiptap 提供了简单易用的 API 和丰富的插件机制,开发者可以很方便地根据需求扩展编辑器功能,甚至自定义编辑器行为和界面。
  • 兼容性强:Tiptap 支持多种 Web 框架,尤其是 React 和 Vue 等流行的前端框架。无论你使用哪个框架,都可以轻松集成 Tiptap。
  • 开箱即用的功能:Tiptap 提供了强大的内置功能,如文本加粗、斜体、标题、列表、代码块、链接等常见的富文本编辑功能。
  • 插件生态丰富:Tiptap 拥有丰富的插件库,你可以通过插件扩展编辑器功能,包括 Markdown 支持、表格支持、图片上传、代码高亮等。
  • 强大的社区支持:作为一个开源项目,Tiptap 有着活跃的开发和使用社区,可以轻松获取资源、解决方案和建议。

3. 与传统富文本编辑器的区别

与传统的富文本编辑器(如 CKEditor、Quill 或 TinyMCE)相比,Tiptap 提供了更高的灵活性。传统的富文本编辑器往往是封闭的系统,功能和定制性较为有限。而 Tiptap 基于 ProseMirror 提供了低层次的控制,使得开发者可以根据需求深入定制。例如,你可以自定义工具栏、插入自定义节点,甚至自定义编辑器的行为逻辑,这在传统编辑器中是很难做到的。

二、Tiptap 安装与配置

1. 安装 Tiptap

Tiptap 提供了易于安装的 NPM 包,支持多种开发环境。首先,您需要安装以下依赖:

npm install @tiptap/core @tiptap/starter-kit

如果你还需要支持 Vue 或 React,可以安装对应的支持包:

npm install @tiptap/react # 或者 npm install @tiptap/vue-3

2. 创建基础编辑器

在安装了依赖之后,我们可以使用 Tiptap 创建一个最基础的富文本编辑器。以下是 React 示例:

import React, { useState } from "react";
import { EditorContent, useEditor } from "@tiptap/react";
import { StarterKit } from "@tiptap/starter-kit";const Editor = () => {const editor = useEditor({extensions: [StarterKit], // 使用 StarterKit 插件集content: "<p>欢迎使用 Tiptap 编辑器!</p>",});return (<div><h2>基本编辑器</h2><EditorContent editor={editor} /></div>);
};export default Editor;

通过上面的代码,我们就已经创建了一个基础的富文本编辑器。

在这里插入图片描述

查看 dom,我们可以知道

在这里插入图片描述

通过 tiptap 的 class 来修改编辑器的样式

  width: 100vw;height: 600px;
}

在这里插入图片描述

这样,我们就可以放大我们的编辑器区域了。

到此为止,编辑器就引入成功了。接下来,我们可以装一些扩展功能。

3. 配置和扩展功能

Tiptap 支持插件化机制,通过扩展功能,你可以轻松加入需要的功能。例如,添加对 超链接 的支持:

npm install @tiptap/extension-link
import { Link } from '@tiptap/extension-link';const editor = useEditor({extensions: [StarterKit,Link, // 启用 Link 扩展],
});

通过这种方式,你可以快速将新的功能集成到编辑器中。

我们将我们的 content 内容改成如下

    content: '<p>在此插入超链接 <a href="https://example.com">点击这里</a></p>',

在这里插入图片描述

三、Tiptap 的核心功能和扩展

Tiptap 提供了很多核心功能和扩展包,可以帮助开发者创建复杂的富文本编辑器。以下是一些常见的功能和扩展:

1. 富文本编辑功能

  • 基本文本格式化:支持文本加粗、斜体、下划线、删除线、文本颜色、字体大小等基本文本格式。
  • 列表和表格:内置支持无序列表、有序列表、嵌套列表、表格的创建与编辑。
  • 标题和段落格式:支持不同级别的标题(h1, h2, h3 等)、段落、引用块等格式化。
  • 代码块:支持插入代码块,自动进行语法高亮。
  • 链接:支持超链接功能,可以插入并编辑链接。

2. 插件扩展

  • Markdown 支持:Tiptap 提供了一个 Markdown 扩展,允许编辑器支持 Markdown 格式。开发者可以通过此插件快速创建一个 Markdown 编辑器。
npm install @tiptap/extension-markdown
  • 表情符号支持:通过插件,Tiptap 支持表情符号的插入。
npm install @tiptap/extension-emoji
  • 图片上传:Tiptap 支持通过上传图片扩展来集成图片上传功能,支持将本地文件上传到服务器并显示。
npm install @tiptap/extension-image
  • 媒体嵌入:Tiptap 提供了丰富的嵌入功能,支持视频、音频等多媒体内容的插入。

所有支持的插件可以在 https://tiptap.dev/docs/editor/extensions/overview 这里查看

四、Tiptap 的应用案例

通过上面,我们可以安装各种插件来扩展我们的编辑器。只要我们在增加一系列的按钮和上面的插件进行融合,那么我们就可以实现一个功能强大的编辑器了。

import { EditorContent, useEditor } from "@tiptap/react";
import { StarterKit } from "@tiptap/starter-kit";
import { Link } from "@tiptap/extension-link";
import { Image } from "@tiptap/extension-image";
import { Blockquote } from "@tiptap/extension-blockquote";
import { CodeBlock } from "@tiptap/extension-code-block";
import { Heading } from "@tiptap/extension-heading";
import { ListItem } from "@tiptap/extension-list-item";
import { OrderedList } from "@tiptap/extension-ordered-list";
import { BulletList } from "@tiptap/extension-bullet-list";
import { Bold } from "@tiptap/extension-bold";
import { Italic } from "@tiptap/extension-italic";
import { Strike } from "@tiptap/extension-strike";
import { Underline } from "@tiptap/extension-underline";const Editor = () => {const editor = useEditor({extensions: [StarterKit,Link,Image,Blockquote,CodeBlock,Heading,ListItem,OrderedList,BulletList,Bold,Italic,Strike,Underline,],content: `<h2>功能强大的富文本编辑器</h2><p>欢迎使用 Tiptap 编辑器!这里展示了各种格式化功能:</p><p>文本样式:<strong>粗体文本</strong>、<em>斜体文本</em>、<s>删除线文本</s>、<u>下划线文本</u></p><h2>标题示例</h2><p><a href="https://tiptap.dev">这是一个超链接示例</a></p><blockquote>这是一个引用块的示例文本。引用块通常用于强调重要内容或引用他人的话语。</blockquote><ul><li>无序列表项 1</li><li>无序列表项 2</li><li>无序列表项 3</li></ul><ol><li>有序列表项 1</li><li>有序列表项 2</li><li>有序列表项 3</li></ol><pre><code>// 这是一个代码块示例
function hello() {console.log("Hello, Tiptap!");
}</code></pre><p><img src="https://picsum.photos/200/100" alt="示例图片" /></p>`,});const buttonStyle = {cursor: "pointer",margin: "0 8px",color: "#4a5568",userSelect: "none" as const,};return (<div><spanstyle={buttonStyle}onClick={() => editor.chain().focus().toggleBold().run()}>加粗</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().toggleItalic().run()}>斜体</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().toggleStrike().run()}>删除线</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().toggleUnderline().run()}>下划线</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().setFontSize(24).run()}>字体大小</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().setTextColor("red").run()}>文本颜色</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}>标题</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().toggleBulletList().run()}>无序列表</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().toggleOrderedList().run()}>有序列表</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().toggleBlockquote().run()}>引用块</span><spanstyle={buttonStyle}onClick={() => editor.chain().focus().toggleCodeBlock().run()}>代码块</span><spanstyle={buttonStyle}onClick={() =>editor.chain().focus().toggleLink({ href: "https://example.com" }).run()}>超链接</span><spanstyle={buttonStyle}onClick={() =>editor.chain().focus().insertImage({ src: "https://example.com/image.jpg" }).run()}>插入图片</span><EditorContent editor={editor} /></div>);
};export default Editor;

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

五、总结

Tiptap 是一个功能强大且灵活的富文本编辑器,它不仅支持基础的文本格式化,还提供了多种插件扩展,可以满足各种需求。从创建简单的博客编辑器到复杂的内容管理系统,Tiptap 都能够轻松应对。如果你正在寻找一个能够快速集成、易于定制和扩展的富文本编辑器,Tiptap 是一个非常合适的选择。

通过本文的介绍,你应该已经掌握了 Tiptap 的基础使用方法,并能够开始使用它来构建自己的富文本编辑器。随着你对 Tiptap 的深入了解,你还可以通过插件和 API 定制更多复杂的功能,满足项目中的各种业务需求。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/62877.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java基础学习:java常用启动命令

一、java -jar 1、系统属性传递 使用形式&#xff1a;java -DpathD:\jacoco -jar 获取方式&#xff1a;System.getProperties() 2、系统参数传递 使用形式&#xff1a;java -jar application.jar --jacocoPathD:\tomcat 获取方式&#xff1a;通过启动方法入口main的参数arg…

负载均衡oj项目:介绍

目录 项目介绍 项目演示 项目介绍 负载均衡oj是一个基于bs模式的项目。 用户使用浏览器向oj模块提交代码&#xff0c;oj模块会在所有在线的后端主机中选择一个负载情况最低的主机&#xff0c;将用户的代码提交给该主机&#xff0c;该主机进行编译运行&#xff0c;将结果返回…

gateway 微服务的入口-笔记

本文属于b站图灵课堂springcloud笔记系列。讲的好还不要钱&#xff0c;值得推荐。 为什么需要API网关&#xff1f; 客户端多次请求不同的微服务&#xff0c;会增加客户端代码和配置的复杂性&#xff0c;维护成本比价高认证复杂&#xff0c;每个微服务可能存在不同的认证方式&…

vue2+element-ui实现多行行内表格编辑

效果图展示 当在表格中点击编辑按钮时:点击的行变成文本框且数据回显可以点击确定按钮修改数据或者取消修改回退数据: 具体实现步骤 1. 行数据定义编辑标记 行数据定义编辑标记 当在组件中获取到用于表格展示数据的方法中,针对每一行数据添加一个编辑标记 this.list.f…

安卓主板_MTK联发科android主板方案

在当前智能设备的发展中&#xff0c;安卓主板的配置灵活性和性能优化显得尤为重要。安卓主板的联发科方案&#xff0c;在芯片上&#xff0c;搭载联发科MTK6761、MT8766、MT6765、MT6762、MT8768、MT8390、MTK8370以及MT8788等型号&#xff0c;均基于64位的四核或八核架构设计。…

如何破解“不会写作”的烦恼

在人生的诸多烦恼中&#xff0c;有一种烦恼或许不那么显眼&#xff0c;却常常如影随形&#xff0c;让人倍感困扰——那就是不会写作的烦恼。这不仅仅是对那些以写作为生的人而言&#xff0c;对于每一个需要在学习、工作或生活中以文字表达思想、情感的人来说&#xff0c;不会写…

虚幻5描边轮廓材质

很多游戏内都有这种描边效果&#xff0c;挺实用也挺好看的&#xff0c;简单复刻一下 效果演示&#xff1a; Linethickness可以控制轮廓线条的粗细 这样连完&#xff0c;然后放到网格体细节的覆层材质上即可 可以自己更改粗细大小和颜色

【JavaEE】网络(2)

一、网络编程套接字 1.1 基础概念 【网络编程】指网络上的主机&#xff0c;通过不同的进程&#xff0c;以编程的方式实现网络通信&#xff1b;当然&#xff0c;我们只要满足进程不同就行&#xff0c;所以即便是同一个主机&#xff0c;只要是不同进程&#xff0c;基于网络来传…

RANS(Reynolds-Averaged Navier-Stokes) 湍流模型类型

RANS&#xff08;Reynolds-Averaged Navier-Stokes&#xff09; 湍流模型有多种不同的类型&#xff0c;除了标准的 kkk-ω 湍流模型&#xff0c;还有其他一些常用的湍流模型。RANS 模型的核心思想是对 Navier-Stokes 方程进行 雷诺平均&#xff0c;通过将流动场的瞬时变量分解为…

vue绕过rules自定义编写动态校验

今天犯了个低级错误&#xff0c;虽然走了很多弯路&#xff0c;但这个过程还是值得记录一下 例子如下&#xff0c;有两个输入框&#xff1a; 第一个是套餐选择下拉框&#xff0c;可以下拉选择三个内容 第二个要根据上面的套餐选择三个选项来决定怎么显示&#xff0c;使用v-if&…

数字化招聘系统如何帮助企业实现招聘效率翻倍提升?

众所周知&#xff0c;传统的招聘方式已经难以满足现代企业对人才的需求&#xff0c;而数字化招聘系统的出现&#xff0c;为企业提供了全新的解决方案。通过数字化招聘系统&#xff0c;企业可以自动化处理繁琐的招聘流程&#xff0c;快速筛选合适的候选人&#xff0c;从而大幅提…

短视频矩阵源码开发部署全流程解析

在当今的数字化时代&#xff0c;短视频已成为人们娱乐、学习和社交的重要方式。短视频矩阵系统的开发与部署&#xff0c;对于希望在这一领域脱颖而出的企业和个人而言&#xff0c;至关重要。本文将详细阐述短视频矩阵源码的开发与部署流程&#xff0c;并附上部分源代码示例&…

关闭WPS在线功能资源和功能推荐

Kingsoft\WPS Office\12.1.0.18912\office6 选择 【高级】 点击 【确定】

Polars数据聚合与旋转实战教程

在这篇博文中&#xff0c;我们的目标是解决数据爱好者提出的一个常见问题&#xff1a;如何有效地从Polars DataFrame中创建汇总视图&#xff0c;以便在不同时间段或类别之间轻松进行比较。我们将使用一个实际的数据集示例来探索实现这一目标的各种方法。 Polars简介 Polars 是…

2024154读书笔记|《带着诗歌上街去》——我不长叶子,不开花,也不必要什么结果

2024154读书笔记|《带着诗歌上街去》——我不长叶子&#x1f33f;&#xff0c;不开花&#x1f33c;&#xff0c;也不必要什么结果 《带着诗歌上街去》作者隔花人&#xff0c;作者很有巧思&#xff0c;在拍摄的照片上做诗&#xff0c;诗不是很有感觉&#xff0c;但是在墙上、风景…

建立基于TCP的客户端和服务端

函数介绍&#xff1a; 1.socket() 作用&#xff1a;创建套接字 domain: AF_INET&#xff1a;IPv4 Internet 协议族。AF_INET6&#xff1a;IPv6 Internet 协议族。AF_UNIX&#xff1a;Unix 域协议族&#xff0c;用于在同一台主机上的进程间通信。 type: SOCK_STREAM&#xff1a…

CNCF云原生生态版图-分类指南(三)- 运行时

CNCF云原生生态版图-分类指南&#xff08;三&#xff09;- 运行时 CNCF云原生生态版图-分类指南三、运行时&#xff08;Runtime&#xff09;&#xff08;一&#xff09;云原生存储&#xff08;Cloud Native Storage&#xff09;1. 是什么&#xff1f;2. 解决什么问题&#xff1…

MVC基础——市场管理系统(三)Clean Architecture

文章目录 项目地址五、Clean Architecture5.1 user cage driven5.1.1创建CoreBusiness 5.2 创建UseCases5.2.1 创建CategoriesUseCases1. 创建VeiwCategoriesUseCase获取所有Cagegory 5.2.2. 实现ICategoryRepository接口3. 实现获取所有Category的方法4. 实现获取一个Cagegory…

手机上和电脑上都能观看的翻页电子书是如何制作的?

想知道手机上和电脑上都能观看的翻页电子书是都是如何制作的&#xff1f; 想知道这样的电子书是怎样呈现出来的&#xff1f; 那收藏这篇文章&#xff0c;我来跟大家说说该如何实现。 操作方法 一、登录FLBOOK 二、开始制作&#xff0c;有多种创建方式&#xff0c;分别是&…

Java 实现给pdf文件指定位置盖章功能

Java 实现给pdf文件指定位置盖章功能 开发中遇到一个需求, 需要给用户上传的的pdf文件, 指定位置上盖公章的功能, 经过调研和对比, 最终确定实现思路. 这里是使用pdf文件中的关键字进行章子的定位, 之所以这样考虑是因为如果直接写死坐标的话, 可能会出现因pdf大小, 缩放, 盖章…