tiptap写一个extension

最新推荐文章于 2024-09-02 18:54:41 发布

曹天骄

最新推荐文章于 2024-09-02 18:54:41 发布

阅读量337

点赞数 10

文章标签： javascript

本文链接：https://blog.csdn.net/solocao/article/details/140752368

版权

Tiptap 是一个基于 ProseMirror 的富文本编辑器，允许开发者通过扩展（extensions）来定义编辑器的功能、行为和内容。下面是一个关于如何编写一个 Tiptap 扩展的简单介绍，以及它的工作原理。

Tiptap Extensions 简介

在 Tiptap 中，扩展是指对编辑器功能的增强，比如添加新的节点、标记或命令。每个扩展都是一个 JavaScript 类，通常继承自 Extension 类，并定义一些属性和方法。

工作原理

1、节点（Nodes）和标记（Marks）：

Tiptap 允许创建自定义的节点和标记。节点通常用于定义文档的结构（如段落、标题、列表等），而标记则用于定义文本的样式（如粗体、斜体等）。

2、命令（Commands）：

扩展可定义命令，用于处理用户输入，比如添加、删除或修改内容。

3、样式（Styles）：

可通过 CSS 对节点和标记进行样式化，使其在编辑器中以特定的方式呈现。

4、事件（Events）：

Tiptap 允许监听编辑器的各种事件，扩展可以基于这些事件执行特定的操作。

创建一个简单的 Tiptap 扩展

下面是一个创建自定义扩展的基本示例：

import { Extension } from '@tiptap/core'  

const CustomExtension = Extension.create({  
  name: 'customExtension',  

  // 定义节点  
  addNode() {  
    return {  
      // 自定义节点的名称  
      group: 'block',  
      content: 'inline*',  
      // 其他属性  
      defining: true,  
      // 自定义节点可以被渲染成什么样子  
      parseDOM: [{  
        tag: 'div.custom-node', // DOM 中的标签  
        getAttrs: node => ({  
          // 从 DOM 节点获取属性  
          class: node.className  
        }),  
      }],  
      toDOM: node => {  
        return ['div', { class: 'custom-node' }, 0] // 将节点渲染为 DOM  
      },  
    }  
  },  

  // 定义命令  
  addCommands() {  
    return {  
      // 添加命令来插入自定义节点  
      insertCustomNode: () => ({ commands }) => {  
        return commands.insertContent({  
          type: this.type.name, // 指向定义的节点类型  
        })  
      },  
    }  
  },  
})  

export default CustomExtension

使用扩展

创建完扩展后，在Tiptap 编辑器实例中使用它：

import { Editor } from '@tiptap/core'  
import CustomExtension from './CustomExtension'  

const editor = new Editor({  
  extensions: [  
    CustomExtension,  
  ],  
})  

editor.commands.insertCustomNode()