npm 包 prosemirror-transform 使用教程

简介

prosemirror-transform 是一个操作文档树的库，用于对 ProseMirror 文档进行变换和操作。它提供了一些可以逐步应用到 document tree 上的操作函数，以及一个简单的 diff 函数。

安装

你可以通过 npm 安装 prosemirror-transform 包：

--- ------- ---------------------

使用方式

转换操作

对于文档树的变换操作，prosemirror-transform 提供了一些方法以便于开发人员进行操作。下面是这些方法的一些简单介绍：

  • replace：用新的节点替换当前节点
  • addMark：在一个 node 或者 slice 的节点上添加一个 mark，如果已经有了相同类型的 mark，则 merge 它们
  • removeMark：在 node 或者 slice 上移除 mark
  • setNodeMarkup：将一个节点的属性全部更新为指定的属性
  • splitNode：拆分节点
  • joinNode：将两个相邻的同类型节点合并为一个
  • liftTarget：移动节点到相邻的外层类型相同的节点下
  • wrap：包裹节点
  • setBlockType：用新的类型替换给定节点的节点类型
  • replaceWith：使用一个给定的 slice 替换该节点
  • remove：将该节点从上下文中删除
  • addListNodes：
  • removeListNodes：
  • addToSet：
  • removeFromSet：

示例代码

以下是一个示例代码，用于将文档树中所有的 headings （例如

、

） 替换为相应的 paragraph 标签。 
------ - ------- --------- - ---- --------------------
------ - --------- - ---- ------------------------

-- -- --------------------- ------
----- ------ - --- --------
  ------ -
    ---- - -------- -------- --
    ---------- - -------- ---------- ------ ------- --
    -------- - ------ - ------ - -------- - - -- -------- ---------- ------ -------- --------- ---- --
    ----- - ------- ---- --
    ------ - ------- ----- ------ - ---- -- - --
  --
---

----- --- - -----------------------------------------------------------------------

-- --------
-------- ------------------------------- ----- -
  ------------------------- ------------------------
-

-- -----------
----- -------------- - -------------- -----------------------------------
---------------------------------------

深度解析

replace

replace 方法用新的节点替换当前节点。

示例代码：

-------- ------------------ ----- -
  -- --------------- --- ---------- -
    ----- ----------- - ----------------- -- - -------- ------------
    ------------------------ -------- - -------------- ----------------------------------- --------------
  -
-

----- -------------- - -------------- ----------------------
---------------------------------------

addMark

addMark 在一个 node 或者 slice 的节点上添加一个 mark，如果已经有了相同类型的 mark，则 merge 它们。

示例代码：

-------- ------------------- ----- -
  ----- ----- - ---------- -- ---
  ----- -------- - -------------------------------------------------
  -------------------- -------- - -------------- --------------------- ------ -------- ----
-

----- -------------- - -------------- -----------------------
---------------------------------------

removeMark

removeMark 从 node 或者 slice 上移除 mark。

示例代码：

-------- ---------------------- ----- -
  ----- ----- - ---------- -- ---
  ----- -------- - ----------------- -- -------------- --- -----------------------
  -------------------- -------- - -------------- --------------------- ------ -------- ----
-

----- -------------- - -------------- --------------------------
---------------------------------------

setNodeMarkup

setNodeMarkup 将一个节点的属性全部更新为指定的属性。

示例代码：

-------- ----------------- ----- -
  -- --------------- --- ------------ -
    -------------------------- ----- -
      ---------------- ----- -- -- ------ -----------
    ---
  -
-

----- -------------- - -------------- ---------------------
---------------------------------------

splitNode

splitNode 将一个节点拆分成多个节点。

示例代码：

-------- --------------------- ----- -
  -- --------------- --- ------------ -
    ----------------- - ----
  -
-

----- -------------- - -------------- -------------------------
---------------------------------------

joinNode

joinNode 将两个相邻的同类型节点合并为一个。

示例代码：

-------- -------------------- ----- -
  ----- ---------- - ---------------------- - ---
  ----- --------- - ---------------------- - ---------------
  -- ---------- -- ---------- -- ------------------- --- --------------------- -
    ---------------- - ---------------
  -
-

----- -------------- - -------------- ------------------------
---------------------------------------

liftTarget

liftTarget 将一个节点移动到相邻的外层类型相同的节点下。

示例代码：

-------- -------------------- ----- -
  -- --------------- --- ------------ -
    ----- ------ - --------------------------------
    -- ----------------- --- ------------ -
      ----------------- -------- - -------------- ---
    -
  -
-

----- -------------- - -------------- ------------------------
---------------------------------------

wrap

wrap 可以将节点包裹起来。

示例代码：

-------- -------------------- ----- -
  -- --------------- --- ------------ -
    ----- ------------- - ---------- - --
    ----- ----------- - -------- - ------------- - --
    ----- ------------ - ------------------------------------------ ------
    ---------------------- ------------ -------------------
  -
-

----- -------------- - -------------- ------------------------
---------------------------------------

setBlockType

setBlockType 可以用新的类型替换给定节点的节点类型。

示例代码：

-------- ---------------------- ----- -
  -- --------------- --- ------------ -
    ------------------------- --------------------------------
  -
-

----- -------------- - -------------- --------------------------
---------------------------------------

replaceWith

replaceWith 使用一个给定的 slice 替换该节点。

示例代码：

-------- ----------------------- ----- -
  -- --------------- --- -------------------- -
    ----- ----- - ----------------------
    ------------------------ -------- - -------------- -------
  -
-

----- -------------- - -------------- ---------------------------
---------------------------------------

remove

remove 将该节点从上下文中删除。

示例代码：

-------- ---------------------- ----- -
  -- --------------- --- --------------- -
    ------------------- -------- - ---------------
  -
-

----- -------------- - -------------- --------------------------
---------------------------------------

addListNodes

addListNodes 可以在列表节点中添加新的列表项。

示例代码：

-------- --------------------- ----- -
  -- -------------- -- ----------------------------------------------- -
    -------
  -

  ----- -------- - ----------------------------------------- -----------------------
  ----- -------- - --------------------------------------
  ----- ------- - ------------------------------------------------ ----------

  ------------------------ -------- - -------------- ---------
-

----- -------------- - -------------- -------------------------
---------------------------------------

removeFromSet

removeFromSet 是用来向一个节点的属性集合中删除一个成员。

示例代码：

-------- --------------------------- ----- -
  -- ---------------------------- -
    ----- -------- - ----------------- ------------
    ------ -------------------------
    -------------------------- ---------- --------- ------------
  -
-

----- -------------- - -------------- -------------------------------
---------------------------------------

总结

prosemirror-transform 提供了很多的操作函数，能够方便地对 document tree 进行变换和操作，使得文档的变换和操作变得更加容易和灵活。在编写复杂文本编辑器时，它是必不可少的一个库。我们从丰富的 API 中介绍了如何使用它来完成各种文档操作。它在使用时需要注意节点的类型和层级关系，灵活使用不同的操作函数，以达到最佳的文档操作效果。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/prosemirror-transform

阅读全文

猜你喜欢

  • npm 包 react-dimensions 使用教程

    简介 React Dimensions 是一个 React 组件，它可以实时监测一个组件的尺寸和位置变化，并将其作为 props 传递给组件，以便组件做出不同的适应性变化。

    5 年前
  • npm 包 path-replace 使用教程

    在前端开发中，路径替换是一个很常见的需求。而 npm 上有一个叫做 path-replace 的包，可以帮助我们快速地对文件路径进行替换。本文将介绍该包的使用方法。

    5 年前
  • npm 包 grid-breakpoint 使用教程

    前言 在 web 开发中，前端组件（如布局、表单等）的实现常常需要对不同的屏幕尺寸进行适配，以保证在不同的设备上都有良好的用户体验。而 grid-breakpoint 正是一个适配屏幕尺寸的工具库，帮...

    5 年前
  • npm 包 @canner/page-wrapper 使用教程

    简介 @canner/page-wrapper 是一个 React 组件库，用于帮助开发人员快速构建包含头部，侧边栏，内容以及底部的网页布局。它可以非常方便的处理这个布局，并且可以适应不同设备大小和方...

    5 年前
  • npm 包 @canner/div-background-wrapper 使用教程

    前言 在前端开发过程中，我们通常会用到各种 npm 包，其中 @canner/div-background-wrapper 是一个非常实用的 npm 包，它可以帮助我们快速实现背景图的自适应和填充。

    5 年前
  • npm 包 precommit-hook-eslint 使用教程

    前言 在前端开发过程中，我们经常需要编写 JavaScript 代码。为了保证代码的质量和统一规范，我们需要通过工具来检测代码是否符合规范。其中一种常用的工具是 eslint。

    5 年前
  • npm 包 gulp-s3 使用教程

    如果你是一个前端开发人员，并且你想要将你的静态资源托管在 S3 上，那么你可能需要使用到 gulp-s3 这个 npm 包。本文将会介绍如何使用 gulp-s3 包来上传你的静态资源，并且对该 npm...

    5 年前
  • npm 包 napi-macros-nodejs-mobile 使用教程

    在前端开发中，我们常常需要使用 Node.js 模块来处理一些逻辑和操作。同时，随着移动设备越来越普及，我们也需要将 Node.js 应用程序移植到 iOS 或 Android 平台上。

    5 年前
  • npm 包 @nodertc/eslint-config 使用教程

    什么是 @nodertc/eslint-config @nodertc/eslint-config 是一个基于 ESLint 的前端开发规范配置包。该包包含了一系列有关前端开发规范的规则和配置，使得开...

    5 年前
  • npm 包 next-state 使用教程

    在前端开发中，状态管理是一个很重要的概念。随着前端应用程序变得越来越复杂，正确地管理状态比以往任何时候都更为重要。 而 next-state 是一个优秀的 npm 包，用于帮助我们更加方便地管理状态。

    5 年前
  • npm 包 dnsstamp 使用教程

    在现代的互联网上，网络安全已经成为了极为重要的话题。而其中一个非常重要的部分就是加密DNS请求。现在我们将介绍如何使用npm包dnsstamp对DNS请求进行安全加密。

    5 年前
  • npm 包 binary-data 使用教程

    前言 在前端开发中，经常需要对二进制数据进行处理。而 npm 包 binary-data 正是专门用于处理和管理二进制数据的工具。本文将详细介绍 binary-data 的使用方法，并通过实例演示如何...

    5 年前
  • npm 包 hexer 使用教程

    npm 包 hexer 使用教程 在前端开发中，经常会需要使用十六进制值来表示颜色或者字符编码等信息。然而，在实际应用中，我们往往需要对这些十六进制值进行转换或者运算，这时候一个高效的 npm 包就显...

    5 年前
  • npm 包 datagram-stream 使用教程

    什么是 datagram-stream？ datagram-stream 是一个 Node.js 的 npm 包，它提供了轻量级的数据报流实现。它可以将数据包和流联系起来，将数据包提供给 stdin，...

    5 年前
  • npm 包 k-rpc-socket 使用教程

    前言 在前端开发中，我们经常需要使用不同的工具来帮助我们开发。其中，npm 包是几乎不可缺少的一部分。npm 包给我们提供了很多便捷的功能，如：提高开发效率、简化代码结构等等。

    5 年前
  • npm包 solid-gossip使用教程

    随着前端领域的发展, 各种组件库和框架层出不穷, 前端开发的效率得到了极大提高. 但是在开发过程中, 我们依然会遇到一些重复的代码和问题, 如何快速解决这些问题成为了优化开发流程的关键. 在这个时候...

    5 年前
  • npm 包 size-limit-stream 使用教程

    在前端开发中，JavaScript 的体积一直是关注的重点之一。尤其在移动端，体积过大的 JavaScript 代码不仅影响用户体验，还会浪费用户的流量。因此，通过使用一些工具来控制 JavaScri...

    5 年前
  • npm 包 event-source-stream 使用教程

    前言 随着 Web 应用的日渐复杂，前端页面的实时数据获取也变得越来越重要。event-source 是一种 Server-Sent Event 技术，通过 HTTP 协议向浏览器持久化发送服务器数据...

    5 年前
  • npm 包 electron-webrtc 使用教程

    前言 WebRTC 技术为浏览器提供了实时音视频通信的能力，因此得到了广泛的应用。但是，浏览器提供的 WebRTC API 仅限于浏览器中使用，如果需要将 WebRTC 技术运用到桌面或移动应用程序中...

    5 年前
  • npm 包 jitson 使用教程

    Jitson 是一个将 JavaScript 对象转化为 JSON 的库，它的特点在于能够保留 JavaScript 对象的函数，并且支持非循环引用的 JavaScript 对象。

    5 年前

相关推荐

    暂无文章