HardBreak 节点功能相当于 html 里面的 br 标签。
Document 是 tiptap 编辑器的根节点,任何节点都在该节点下面,就像 html 的 body 标签。
使用 CodeBlockLowlight 代码高亮扩展,你可以在文档中显示源代码而不被浏览器解析,代码包裹在HTML标记的 pre 和code 标签中,并且可以让代码高亮。
使用 CodeBlock 代码块扩展,你可以在文档中显示源代码而不被浏览器解析,代码包裹在HTML标记的 pre 和code 标签中。
tiptap BulletList 扩展可以在编辑器中使用符号列表,它们被呈现为 HTML的 ul 标记。
本文讲解的Blockquote扩展够在tiptap编辑器中使用html的blockquote标签,在新行开头输入箭头,它将神奇地转换为blockquote标签。
如果将编辑器document文档比喻成一棵树tree,那么nodes节点就是树中的一种内容,paragraphs、headings或code blocks都是节点.,但节点不一定是块。它们也可以与文本内联呈现,例如@mentions 扩展。
我们在使用web编辑器时往往需要 extensions 自定义扩展,因为如何一款web编辑器自带的扩展都不可能满足场景的需求,tiptap 可以这种个性化的需求有两种方法,一是按照官方的方法实现扩展,一种是自己写vue组件调用tiptap命令,这样也可以非常方便的集成到tiptap。
tiptap selection 相关的命令focus、selectAll、deleteSelection等和焦点相关的命令、选择相关的命令。
tiptap lists 命令相关的命令列表以及对应的用法,比如liftListItem 提升列的项、sinkListItem 降级列的项、splitListItem 拆分列的项等等。
tiptap nodes节点 & marks标记的命令大全,比如deleteNode删除文档节点命令、创建setMark 标记命令等总计20多个相关命令。
tiptap content 文档命令包含clearContent 清除文档、insertContent 插入内容、insertContentAt 插入制定位置内容、setContent 设置新的内容等核心命令。
tiptap编辑器提供了大量命令Commands,可以添加或更改内容、更改选择。如果你想用好tiptap编辑器,你需要掌握这些命令。
本文将讲解如何配置 tiptap 编辑器,其中包括如何初始化、加载配置扩展、样式的配置方法。
tiptap 拥有 isEditable 和 isEmpty 两个属性,一个表示是否可编辑一个表示编辑器是否有内容。
tiptap 编辑器的 editor 方法的可以返回任何内容,请勿与commands命令混淆,commands 用于更改编辑器的状态(内容、选择内容等),并且仅返回true/false。
tiptap 支持实时协作、让不同设备之间的同步和离线工作。通过与 Y.js 配合使用无需多少代码即可实现多人在线实时协作,不过在大部分的实践工作中,实时协作并不是一个强需求。
Titpap Output 支持输出JSON对象或Html字符串存储编辑器的内容,我们将来在下面的例子演示如何使用这两种格式。
Titpap 编辑器由于是 headless 所以它没有提供任何样式,这意味我们可以完全控制 Titap 的样式,我们可以通过作用域内或全局 CSS 来控制样式也可以自定义 class 来定制样式。
tiptap 编辑器非常简洁,你可以完全的定制它的外观,菜单也一样。tiptap提供的 API 来触发命令和添加活动状态,tiptap提供了一些实用程序和组件使菜单的定位更容易。