npm 包 @atlaskit/adf-utils 使用教程

阅读时长 3 分钟读完

介绍

@atlaskit/adf-utils 是一个针对 Atlassian Document Format(ADF)的 JavaScript 库,提供了帮助开发人员从 ADF 格式转换为 HTML 的工具。

它是专为前端开发者设计的,基于 Node.js 和 TypeScript 构建。

获取

你可以通过 npm 来获取 @atlaskit/adf-utils:

使用

导入

在开始使用之前,你需要将该库导入到你的代码中:

转换

一旦你导入了该库,你就可以开始将 ADF 数据结构转换为 HTML,下面是示例代码:

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

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

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

------------------
展开代码

该代码将在控制台中打印转换后的 HTML 片段。

自定义渲染器

如果你想要自定义渲染器,以便在转换过程中以自己的方式处理某些特定元素,你可以传递一个渲染器函数作为 toHTML() 函数的第二个参数。

以下示例演示了如何自定义经典的粗体样式的渲染:

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

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

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

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

------------------
展开代码

在这个示例中,我们通过传递一个渲染标记的函数来自定义渲染器。

其他

更多使用示例可以参考 官方文档

结论

使用 @atlaskit/adf-utils 可以帮助你在项目中更方便地将 ADF 转换为 HTML,无论是用于展示还是存储。

该库让我们能够在转换过程中进行自定义处理,以便更好地控制输出。同时,它也提供了很好的学习和指导意义,可以帮助理解类似于 ADF 格式这样的数据结构。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/155290