prosemirror 学习记录(一)schema

news2024/9/23 1:31:52

初始化 vite 项目
pnpm create vite framework - vue ,variant - JavaScript

初始化 eslint
npm init @eslint/config

最简单的 schema

nodes 中必须包含顶级节点文本节点。顶级节点默认为 doc(可通过 topNode 修改)。文本节点为 text

const mySchema = new Schema({
  nodes: {
  	// content 的语法和正则类似。text* 代表任意个 text 节点
    doc: {content: "text*"},
    text: {},
  }
});

此时只能输入文字,文字直接放在(编辑区的)根节点中

在这里插入图片描述

添加 block 类型

const mySchema = new Schema({
  nodes: {
    doc: {
      content: "custom_block*", // 文档包含任意个 custom_block
    },
    // doc 和 text 以外的节点类型,都必须提供 parseDom 和 toDom 
    custom_block: {
      content: "text*",	// 任意个文本
      parseDOM: [{ tag: "custom-block" }],
      toDOM() {
        return ["custom-block", 0];
      },
    },
    text: {},
  }
});

因为 html 中不存在 custom-block 这个标签,所以需要加一段css:

custom-block {
  display: block;
}

效果:

在这里插入图片描述

NodeSpec 中的字段

  • group?: string 分组,组名可以在 content 表达式里引用

  • atom?: boolean Can be set to true to indicate that, though this isn’t a leaf node, it doesn’t have directly editable content and should be treated as a single unit in the view.(不知道什么场合用)

  • selectable?: boolean Controls whether nodes of this type can be selected as a node
    selection.Defaults to true for non-text nodes.
    比如说,对于图片节点,当 selectable = true 时,点击图片则选区变为 NodeSelection。 selectable = false 时,点击图片没效果,选区还是空。

  • draggable?: boolean node在未选中时是否可以拖拽

  • definingAsContext?: boolean Determines whether this node is considered an important parent node during replace operations (such as paste). Non-defining (the default) nodes get dropped when their entire content is replaced, whereas defining nodes persist and wrap the inserted content.(意思理解了,但用时没感觉出来区别)

  • definingForContent?: boolean In inserted content the defining parents of the content are preserved when possible. Typically, non-default-paragraph textblock types, and possibly list items, are marked as defining.(意思理解了,但用时没感觉出来区别)

  • defining?: boolean When enabled, enables both definingAsContext and definingForContent

  • isolating?: boolean When enabled (default is false), the sides of nodes of this type count as boundaries that regular editing operations, like backspacing or lifting, won’t cross. An example of a node that should probably have this enabled is a table cell.

  • leafText?: (node: Node) => string Defines the default way a leaf node of this type should be serialized to a string (as used by Node.textBetween and Node.textContent

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

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

相关文章

vr虚拟现实技术融入司法办案实操培训中的优势

模拟法院诉讼一直室各大法学院法律实践性教学的重要方式和内容,通过让学员在模拟环境中实操一遍诉讼流程及相关资料,达到上岗就业的教学目标。 学生可以选择法官席、律师席、证人席等不同角色进行体验,在VR模拟法庭中进行案件审判和辩论&…

Vue - 图片浏览组件v-viewer

v-viewer组件可以实现图片点击放大,缩小,旋转,切换等操作 npm install v-viewer --save main.js 里面引用 import Viewer from v-viewer import viewerjs/dist/viewer.css Vue.use(Viewer) Viewer.setDefaults({ Options: { inline: true, …

java类的动态加载

java类的动态加载 java动态加载的机制: ClassLoader->SecureClassloader–>URLClassLoader–>AppClassLoader loadClass–>findClass(重写方法)–>defineClass(从字节码加载类) 初始化的时候会加载静态代码块 实例化的时候会加载构造代码块、无参构…

【tio-websocket】10、单条TCP连接上下文—ChannelContext

介绍 每一个 tcp 连接的建立都会产生一个 ChannelContext 对象,这是个抽象类。 如果你是用 t-io 作 TCP 客户端,那么就是 ClientChannelContext如果你是用 t-io 作 TCP 服务器,那么就是 ServerChannelContext如下图所示: ChannelContext对象信息 ChannelContext 对象包含…

HackTheBox - Starting Point -- Tier 0 --- Meow

文章目录 一 题目二 实验过程 一 题目 Tags Telnet、Network、Protocols、Reconnaissance、Weak Credentials、Misconfiguration译文:标签、远程登录、网络、协议、侦察、弱凭证、配置错误Connect To attack the target machine, you must be on the same networ…

华为数通方向HCIP-DataCom H12-831题库(多选题:61-80)

第61题 在MPLS VPN中,为了区分使用相同地址空间的IPV4前缀,将IPV4的地址增加了RD值,下列选项描述正确的是: A、在PE设备上,每一个VPN实例都对应一个RD值,同一PE设备上,必须保证RD值唯一 B、RD可用于来控制VPN路由信息的发布 C、RD在传递过程中作为BGP的扩展团体性封装在…

深入浅出Dart》函数

函数 Dart语言作为一门面向对象的语言,函数在其中占据了非常重要的位置。本文将详细解析如何定义和调用函数,以及箭头语法,高阶函数和闭包等内容。 1. 函数的定义和调用 在Dart中,函数可以定义为一段实现特定功能的代码块&…

【Docker】联合探讨Docker:容器化技术的革命性应用

前言 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux或Windows操作系统的机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。 📕作者简介:热…

让CHAT生成对桥梁范围内施工注意事项及防护措施

ChatGPT,自动化撰写工具,生活必不可少的帮手。 今天小编带大家来看下,用CHAT生成对桥梁范围内施工注意事项及防护措施 桥梁施工要严格按照设计和施工规范来执行,以保证安全、质量和效率。下面是一些桥梁施工的注意事项及防护措施…

餐饮业如何高效经营?赶紧闭眼抄这个方法!

在现代社会,餐饮业已经成为人们日常生活中不可或缺的一部分。为了提高食堂运营效率,满足不断增长的客户需求,智慧收银系统应运而生。 智慧收银系统帮助食堂业主更好地理解其客户,提高服务质量,优化库存管理&#xff0c…

datahub 中血缘图的实现分析,在react中使用airbnb的visx可视化库来画有向无环图

背景 做大数据的项目,必不可少的是要接触到数据血缘图,它在大数据项目中有着很重要的作用。 之前在公司也做过一些案例,也看过很多友商的产品,阿里的DataWork,领英的Datahub, datawork的血缘图使用的是 G6…

电子学会C/C++编程等级考试2023年05月(三级)真题解析

C/C等级考试&#xff08;1~8级&#xff09;全部真题・点这里 第1题&#xff1a;找和为K的两个元素 在一个长度为n(n < 1000)的整数序列中&#xff0c;判断是否存在某两个元素之和为k。 输入 第一行输入序列的长度n和k&#xff0c;用空格分开。 第二行输入序列中的n个整数&am…

【021】整理力学拉伸实验数据(复制、黏贴、计算)_#VBA

整理力学拉伸实验数据 1. 需求2. 实现流程2.1 流程图2.2 运行方法2.3 完整代码 1. 需求 2. 实现流程 2.1 流程图 流程如上&#xff0c;因测试得到多个数据表格&#xff0c;先将表格数据合并&#xff0c;并以文件名作为每个数据的代号。然后更换坐标轴&#xff0c;通过对文件名…

单片机设计_RTC时钟(ACM32F403)

一、电路设计 ACM32F403开发板 实现结果&#xff1a;通过串口发送每秒的时间 二、运行结果 三、部分代码 #include "APP.h"UART_HandleTypeDef Uart_Handle;/********************************************************************************* * Function …

【Django 05】Django-DRF(ModelViewSet)、路由组件、自定义函数

1. Django-DRF&#xff08;ModelViewSet&#xff09; 1.1 DRF是什么&#xff1f; ModelViewSet 是 Django REST framework 提供的一个视图集类&#xff0c;它封装了常见的模型操作方法。 模型类提供了默认的增删改查功能。 它继承自 GenericViewSet、ListModelMixin、Retri…

(四)Apache log4net™ 手册 - AOP

0、引言 如果你已经开发了一个中型或者大型的 .NET / .NET Framework 项目但还没有为其添加日志系统。那么&#xff0c;你可能需要重新回顾大量的业务逻辑代码&#xff0c;并在其中找到合适的位置&#xff0c;编写合适的日志输出语句进行插入&#x1f641;。 显然&#xff0c…

mybatisPlus逻辑删除注解@TableLogic

当我做了一个实体类&#xff0c;字段为del_flag的逻辑删除字段&#xff0c;要通过这个字段控制数据库中的数据逻辑删除。 重写mapper中的deleteById&#xff0c; 先按id查出数据&#xff0c;在更新此数据中的del_flag字段为1&#xff0c;调用update方法更新数据。 这种方式我…

adb: error: 46-byte write failed: Invalid argument

使用adb pull可以&#xff0c;但是adb push fail。 貌似是adb的问题&#xff0c;将adb.exe 重命名为pdb&#xff0c;使用pdb push就行了。

三季报开启消费电子增长新纪元?看蓝思科技如何落子

10月18日晚间&#xff0c;蓝思科技公布了2023年第三季度报告。根据报告&#xff0c;蓝思科技第三季度营业收入136.31亿元&#xff0c;同比增长9.98%&#xff0c;环比增长31.85%&#xff1b;归母净利润10.95亿元&#xff0c;同比增长2.93%&#xff0c;环比119.88%。 作为消费电…

OceanBase 全局索引与局部索引探索

OceanBase 全局索引与局部索引探索导致的本区域查找和跨区域查找。 作者&#xff1a;网名大数据模型&#xff0c;对制造业、银行业、通讯业了解多一点&#xff0c;关心专注国产数据库技术布道以及数据资产建设的应用实践。 爱可生开源社区出品&#xff0c;原创内容未经授权不得…