tiptap parseHTML renderHTML 使用

2024-09-08 12:28

本文主要是介绍tiptap parseHTML renderHTML 使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

要在 Tiptap 中使用 parseHTML 和 renderHTML,可以通过创建自定义扩展来解析和渲染自定义的 HTML 元素。这两个方法允许你定义如何将 HTML 解析为 ProseMirror 文档节点以及如何将 ProseMirror 的文档节点渲染为 HTML。

1. parseHTML

parseHTML 用于将 HTML 元素解析为 ProseMirror 节点。在自定义扩展中,你可以定义如何将特定的 HTML 元素解析为 Tiptap 的文档节点。

2. renderHTML

renderHTML 用于将 ProseMirror 节点渲染回 HTML。你可以在自定义扩展中定义如何将 ProseMirror 节点渲染为 HTML 标签。

以下是一个简单的示例,展示了如何创建一个自定义扩展来解析和渲染一个自定义的 figure 元素:

import { Node, mergeAttributes } from '@tiptap/core';const FigureNode = Node.create({name: 'figure',group: 'block',content: 'inline*',// 使用 parseHTML 解析 HTMLparseHTML() {return [{tag: 'figure',},];},// 使用 renderHTML 渲染回 HTMLrenderHTML({ HTMLAttributes }) {return ['figure', mergeAttributes(HTMLAttributes), 0];},// 定义 ProseMirror schemaaddAttributes() {return {class: {default: null,},};},// 定义编辑器中的样式addNodeView() {return ({ node, HTMLAttributes }) => {const dom = document.createElement('figure');dom.classList.add(node.attrs.class);return {dom,};};},
});export default FigureNode;

要使用这个扩展,需要在 Tiptap 的编辑器配置中注册这个自定义节点:

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import FigureNode from './FigureNode';const editor = new Editor({element: document.querySelector('#editor'),extensions: [StarterKit,FigureNode,],content: '<p>Hello World!</p>',
});

解析和渲染

  • 解析 HTML:
    当 Tiptap 编辑器加载带有 <figure> 标签的内容时,它会使用 parseHTML 方法来解析它,并将其转换为ProseMirror 的节点。
  • 渲染 HTML:
    当你将 ProseMirror 文档节点导出为 HTML 时,Tiptap 会调用 renderHTML 方法来生成最终的 HTML。

parseHTML 配置说明

parseHTML() {return [{tag: 'figure',},];
}

这里的 tag: ‘figure’ 告诉 Tiptap 当它在编辑器中遇到 <figure> 标签时,应当将其解析为自定义的 ProseMirror 节点。

HTML 内容加载/粘贴: 当你将一段包含 <figure> 标签的 HTML 内容加载到 Tiptap 编辑器中时,Tiptap 的解析器会检查所有的 parseHTML 配置。

匹配标签: 如果在 parseHTML 中找到了与 HTML 内容匹配的标签(如 <figure>),Tiptap 会使用该配置将该 HTML 标签解析为自定义节点(如 FigureNode)。

生成节点: Tiptap 会生成相应的 ProseMirror 节点,这些节点会存储在编辑器的文档结构中,并以内部的方式表示和操作。

例如,假设你在编辑器中粘贴以下 HTML:

<figure class="image"><img src="image.jpg" alt="An image">
</figure>

由于 parseHTML 方法配置了 tag: ‘figure’,Tiptap 会识别 <figure> 标签,并将其解析为相应的 ProseMirror 节点。这意味着在编辑器内部,这段 HTML 会被表示为一个包含 img 的 figure 节点。

高级配置
还可以为 parseHTML 返回的对象添加其他条件,例如根据特定的属性或类名进行匹配:

parseHTML() {return [{tag: 'figure.image',getAttrs: node => node.classList.contains('image') && null,},];
}

在上面的例子中,Tiptap 只会在 <figure> 标签上有 .image 类名时才解析它。

总结

parseHTML 中返回的对象在 HTML 内容解析过程中扮演着识别器的角色,Tiptap 通过这些对象来确定哪些 HTML 标签应该被转换为 ProseMirror 节点。这个过程使得你能够扩展和定制 Tiptap 编辑器,以支持特定的 HTML 结构和标签。

这篇关于tiptap parseHTML renderHTML 使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1148107

相关文章

python使用try函数详解

《python使用try函数详解》Pythontry语句用于异常处理,支持捕获特定/多种异常、else/final子句确保资源释放,结合with语句自动清理,可自定义异常及嵌套结构,灵活应对错误场景... 目录try 函数的基本语法捕获特定异常捕获多个异常使用 else 子句使用 finally 子句捕获所

C++11右值引用与Lambda表达式的使用

《C++11右值引用与Lambda表达式的使用》C++11引入右值引用,实现移动语义提升性能,支持资源转移与完美转发;同时引入Lambda表达式,简化匿名函数定义,通过捕获列表和参数列表灵活处理变量... 目录C++11新特性右值引用和移动语义左值 / 右值常见的左值和右值移动语义移动构造函数移动复制运算符

Python对接支付宝支付之使用AliPay实现的详细操作指南

《Python对接支付宝支付之使用AliPay实现的详细操作指南》支付宝没有提供PythonSDK,但是强大的github就有提供python-alipay-sdk,封装里很多复杂操作,使用这个我们就... 目录一、引言二、准备工作2.1 支付宝开放平台入驻与应用创建2.2 密钥生成与配置2.3 安装ali

C#中lock关键字的使用小结

《C#中lock关键字的使用小结》在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时,其他线程无法访问同一实例的该代码块,下面就来介绍一下lock关键字的使用... 目录使用方式工作原理注意事项示例代码为什么不能lock值类型在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时

MySQL 强制使用特定索引的操作

《MySQL强制使用特定索引的操作》MySQL可通过FORCEINDEX、USEINDEX等语法强制查询使用特定索引,但优化器可能不采纳,需结合EXPLAIN分析执行计划,避免性能下降,注意版本差异... 目录1. 使用FORCE INDEX语法2. 使用USE INDEX语法3. 使用IGNORE IND

C# $字符串插值的使用

《C#$字符串插值的使用》本文介绍了C#中的字符串插值功能,详细介绍了使用$符号的实现方式,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录$ 字符使用方式创建内插字符串包含不同的数据类型控制内插表达式的格式控制内插表达式的对齐方式内插表达式中使用转义序列内插表达式中使用

flask库中sessions.py的使用小结

《flask库中sessions.py的使用小结》在Flask中Session是一种用于在不同请求之间存储用户数据的机制,Session默认是基于客户端Cookie的,但数据会经过加密签名,防止篡改,... 目录1. Flask Session 的基本使用(1) 启用 Session(2) 存储和读取 Se

Java Thread中join方法使用举例详解

《JavaThread中join方法使用举例详解》JavaThread中join()方法主要是让调用改方法的thread完成run方法里面的东西后,在执行join()方法后面的代码,这篇文章主要介绍... 目录前言1.join()方法的定义和作用2.join()方法的三个重载版本3.join()方法的工作原

Spring AI使用tool Calling和MCP的示例详解

《SpringAI使用toolCalling和MCP的示例详解》SpringAI1.0.0.M6引入ToolCalling与MCP协议,提升AI与工具交互的扩展性与标准化,支持信息检索、行动执行等... 目录深入探索 Spring AI聊天接口示例Function CallingMCPSTDIOSSE结束语

Linux系统之lvcreate命令使用解读

《Linux系统之lvcreate命令使用解读》lvcreate是LVM中创建逻辑卷的核心命令,支持线性、条带化、RAID、镜像、快照、瘦池和缓存池等多种类型,实现灵活存储资源管理,需注意空间分配、R... 目录lvcreate命令详解一、命令概述二、语法格式三、核心功能四、选项详解五、使用示例1. 创建逻