tiptap marks 标记

tiptap marks 可以对 node 节点应用一个或多个标记,比如添加内联样式(粗体、斜体)或其他附加信息。

支持的Marks列表

Bold 粗体

tiptap Bold 使文本加粗显示,如果在编辑器的初始内容中使用了strong、b 标记或带有内联样式属性的文本也将以粗体展示。

点击访问>>

Code 标签

tiptap Code 扩展渲染成 html 的 code 标签,code 标签里的内容并不会被浏览器解析,而是可以原样输出显示,使用可以用来显示代码。

点击访问>>

Highlight 高亮标记

你可以使用 tiptap 的 Highlight 扩展来高亮标记,比如设置红色背景、蓝色背景。

点击访问>>

Italic 斜体

tiptap Italic 以斜体呈现文本,如果在编辑器的初始内容中传递 em、i 标签或具有设置font-style: italic的内联样式属性的文本,那么它们都以斜体呈现。

点击访问>>

Link 超链接

tiptap Link 扩展支持在文档中创建超链接,tiptap没有提供UI界面,添加删除编辑 URL 链接你需要通过tiptap命令来执行,粘贴的url将自动转换为链接。

点击访问>>

Strike 删除符

tiptap Strike 扩展会渲染成删除符,内联样式 text-decoration: line-through 有同样的效果。

点击访问>>

Subscript 下标

tiptap Subscript 下标扩展,和html的sub标签和内联样式的vertical-align: sub有相同的效果。

点击访问>>

TextStyle 文本样式

tiptap TextStyle 标记呈现为 span 标签,您能够添加样式相关的属性,例如font-family、font-size或color,默认情况下,扩展不添加任何样式属性,但其他扩展以它作为基础,例如FontFamily或Color扩展。

点击访问>>

Underline 下划线

tiptap Underline 扩展可以将选择的文本增加下划线,如果在tiptap的初始内容中使用 u标 标签或者使用text-decoration: underline的内联样式,它们都显示下划线。

点击访问>>

Superscript 上标

tiptap Superscript 上标扩展,和html的sup标签和内联样式的vertical-align: super有相同的效果。

点击访问>>

下载教程 Demo

本教程Demo的源码点击这里下载,Tiptap Demo,下载完成后运行npm i初始化依赖包。